Responsive Web Design – a Quick Intro into the New Era of UI

In today's world of technology innovations go ahead of time. The web will therefore undergo some critical changes too in the next 2-3 years. The world is changing quickly, so the processes of designing for web we used to apply are to be changed as well.

web browsing devices

Now we have to take into consideration the plethora of the devices used today to browse the World Wide Web as in the following years the number of mobile users will outnumber desktop in the U.S.A.

mobile users vs desktop

At the same time mobile devices manufacturers have stored a lot of troubles for us web designers bacause now we have to deal with dozens of different screen resolutions to satisfy mobile users visiting websites we design.

different screen sizes in mobile devices

Obviously, it is impossible to consider all existing mobile devices and those to be produced in the future when designing a user interface. But we must keep up with the progress in the field of web technologies. Thus our old methods and approaches do not work any longer!

Our traditional 960 pixels layout we love so much is about to become obsolete.

fixed website design

Advantages of the new approach to building user interfaces is as follows:

  • Possibility to rapidly create prototypes for any device;
  • Considerable reduction in development time;
  • Pre-designed UI for any mobile devise released in the future.

The key principle is to create a layout allowing the access to information regardless of what browsing device is used.

web design for all devices

Users wants to access online content on any device and that’s why mobile sites are winning the attention of a continuously expanding audience of mobile users leaving behind native apps.

web vs native apps

So, why “responsive” design? Because it’s flexible and scalable. Think of all those devices available in the market – smartphones, tablets, monitors and even TVs. In fact, they can be regarded as simply screens with one thing in common – a rectangular form.

too many screen dimensions

The new approach suggests starting with the content and then adding the rest. Designers should rather focus on the grid structure than on screen dimensions. They have to send a query to a device about dimensions to selectively adapt the web page. Designers should test how text, buttons and forms appear on certain screens widths.

Foundation by ZURB offers a great tool for responsive front-end prototyping.

foundation zurb responsive web design

The trick is in the grid.

grid for responsive web design

The page layout is divided into a 12-column flexible grid. Nesting blocks is also possible. Thus the layout consists of 12 percentage-based columns which width will vary depending on a device used to view the page.

The ZURB team helps businesses they love build their websites that look good across all devices by organizing 24-hours design marathons.

responsive web design

The process begins with prototyping layouts on paper to discuss main structural elements and get an overall design idea.

responsive web design draft layout sketching

Then the final sketch is turned into a more appropriate format.

draft sketch to web design layout

responsive web design page structure

This is how pages are laid out.

responsive web design page

As you can see page blocks are laid out constraining proportions based on grid columns.

responsive web design proportions

responsive web design code

With these principles in mind you can create any kind of grid.

grid layout for a web page

To work with images you should remember a few rules. Images in a responsive design have to be able to scale for different devices. They can either be large enough to handle big displays (heavy load) or can be swapped out with something like Scott Jehl’s responsive images solution.

Responsive design solution for buttons:

button solution for responsive web design

You’ll be surprised with how quickly a responsive design can be made.

web page layout in 2 hours

website design in 7 hours

The Result

responsive web design result

responsive web design on an iPad tablet

responsive web design on phone

web design for all devices and platforms

So What’s Next?

What we used to read in Sci-Fi books is turning into reality today.

sci-fi movie

Right now people can talk to phones which can do things for them.

phone voice control

Tomorrow people will be operating a Google self-driving car (Jonathan Smiley from ZURB about the future of responsive design community).

car voice control

In case you interested in our service to design your corporate website according to responsive design best practices - please feel free to send us your project details and we will be happy to advice.

Request a Quote

Additional Resources

More information on responsive design to read and download

Intro to Responsive Web Design: RWD SF Meetup

Comments: