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.
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.
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.
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.
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.
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.
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.
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.
The trick is in the grid.
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.
The process begins with prototyping layouts on paper to discuss main structural elements and get an overall design idea.
Then the final sketch is turned into a more appropriate format.
This is how pages are laid out.
As you can see page blocks are laid out constraining proportions based on grid columns.
With these principles in mind you can create any kind of grid.
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:
You’ll be surprised with how quickly a responsive design can be made.
So What’s Next?
What we used to read in Sci-Fi books is turning into reality today.
Right now people can talk to phones which can do things for them.
Tomorrow people will be operating a Google self-driving car (Jonathan Smiley from ZURB about the future of responsive design community).
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.