Posts Tagged ‘Responsive Web Design’

We are pleased to present below all posts tagged with ‘Responsive Web Design’.

Using Sketch For Responsive Web Design (A Case Study)

If you’re a member of the web or UI design community, it’s been hard to avoid talking about Sketch over the last year. The launch of this design app shook up an industry dominated by Adobe for more than two decades, and it has caused an ongoing debate about whether Sketch is better than Photoshop and Illustrator (and Fireworks).

Using Sketch For Responsive Web Design (A Case Study)

A longtime Photoshop user myself, I made the switch to Sketch in early 2014 and haven’t looked back. I love certain features of the program, such as the simple interface, file autosave and infinite canvas. However, plenty of other programs out there have similar features, and until the most recent update (Sketch 3.2), users were battling a lot of bugs in the app.

Read more...

Visual Test-Driven Development For Responsive Interface Design

Testing responsive websites is a laborious task. Until now, implementing a stable and maintainable automated solution for cross-browser and cross-device testing of a responsive layout has been nearly impossible. But what if we had an opportunity to write visual tests for responsive websites? What if we could describe the look and feel of an application and put this directly into our tests?

Visual Test-Driven Development For Responsive Interface Design

Upon considering this question, I decided to also look at another interesting side of visual testing. For quite a long time I have been a fan of the test-driven development (TDD) methodology. It helps me in my daily programming work. TDD enables me to formalize the task and to make sure everything is implemented according to the requirements.

Read more...

How To Keep Framework Development Simple And Bug-Free

It's just like that for your product, too: people rely on our products to work. Bugs erode trust, which in turn loses customers. So when we began updating Foundation, a responsive CSS framework, we wanted to ensure everything worked. Thoroughly. We know that many people rely on our software for their work, and maintaining that trust is paramount.

How We Keep Foundation Development Simple, Real And Bug-Free

In this article you'll learn our methodology for testing responsively, not just on a case by case, page-from-PSD comp. See, we've developed a certain system to make sure that nothing's broken at launch on different devices.

Read more...

Browser Input Events: Can We Do Better Than The Click?

Responding to user input is arguably the core of what we do as interface developers. In order to build responsive web products, understanding how touch, mouse, pointer and keyboard actions and the browser work together is key. You have likely experienced the 300-millisecond delay in mobile browsers or wrestled with touchmove versus scrolling.

Browser Input Events: Can We Do Better Than The Click?

In this article we will introduce the event cascade and use this knowledge to implement a demo of a tap event that supports the many input methods while not breaking in proxy browsers such as Opera Mini.

Read more...

A Few Different Ways To Use SVG Sprites In Animation

There are some things we know and like about SVGs. First, SVGs have smooth, clean edges on any display, so using SVGs can reduce the number of HTTP requests for image replacement. Second, it’s easy to make an SVG scalable to its container for responsive development.

A Few Different Ways To Use SVG Sprites In Animation

In this article we’ll cover a few ways of using SVG sprites to describe motion on the web. I’ll show some techniques for using SVG sprites in complex animation that takes advantage of these factors. All examples shown will assume the use of an auto-prefixer and some basic knowledge of CSS animations.

Read more...

RICG Responsive Images For WordPress

I recently teamed up with Mat Marquis of the Responsive Images Community Group to help integrate responsive images into the WordPress platform. We decided to refactor a plugin that I had built several months ago, hoping that it would lead to a more useable and performant solution.

RICG Responsive Images For WordPress

After months of pull requests, conversations on Slack and help from WordPress’ core team, we’re finally ready to share what we’ve been working on. You can download and install RICG Responsive Images from WordPress’ plugin directory, while keeping track of our development progress on GitHub.

Read more...

Design Last

How does one design and develop for the responsive web? A lot of methodologies out there try to tackle this problem, but all of them rely on the same classic website development process. It boils down to the following: design and then develop.

Design Last

Let’s go nuts and flip this outdated methodology on its head. Before we start flipping things around, let’s take a quick stroll down memory lane, just so we know where we’ve come from and where we are now.

Read more...

Chartist.js, An Open-Source Library For Responsive Charts

The list of charting libraries for the web is already quite long, and you might ask yourself why we would need to make it any longer. Whenever you need to develop an application’s dashboard, embed some usage statistics or simply visualize some data, you will find yourself looking for a charting library that fits your needs.

Chartist.js, An Open Source Library For Responsive Charts

Chartist was developed for a very particular need: to create simple responsive charts. While other charting libraries do a great job of visualizing data, something is always missing to satisfy this simple yet demanding need.

Read more...

↑ Back to top