Responsive Web Design: An overview for designers and site owners
The number of different screen sizes by which we browse the web is growing fast. You can imagine how hard it is for a designer to prepare a layout version for each of these devices. With so many screens, designing websites requires an unique web approach.
The challenge is to fit the design elements in such a way that it would be easy to click or tap them with your fingers. You need to consider interfaces for the desktop, tablet or smartphone.
A RWD approach uses the combination of fluid grids, fluid images and CSS media queries to create websites that adjust to all screen sizes. It also maintains the attractive look and page usability.
Where do I start?
Depending on your needs, you have to set the breakpoints — consider the type of device, horizontal or vertical location and resolution.
The website should respond by changing its layout, design, elements or navigation method (min. 2 or 3 changing points per design). You have to prepare the project in three or more formats, depending on your needs.
You can start with the following responsive web design formats:
- mobile 320px, 480px
- tablet portrait 768px
- tablet landscape / notebook 1024px
- normal screen width 1280px
- 1440px wide screens and higher
The target group and budget of the project can also influence your design. Get to know the audience and client first.
No matter which format you prepare, you should always follow few simple rules:
- prepare wireframes
- think about proportion — the same things won’t look good on different screens
- try creating the responsive design from the smaller version to the larger one
- work with real content, not lorem ipsum
- collaborate closely with the front-end developer that will slice your work
- try to reduce non-repeatable elements
- use vector (svg or font) icons
- make it modular
- stick with the grid (no matter which grid system you’ll use, the most important is to stick to it. You can use the 960px grid or 1280px which are based on 12 columns)
- always test (if you don’t have devices to test, you can use websites like this one)
If you don’t know how to solve the problem browse the internet, ask on forums or tweet me your question. It’s better to admit you lack the inspiration or expertise and ask for advice, than to cause more work for developers.
The benefits of Responsive Web Design
With Responsive web design you build a website once, and it works seamlessly across hundreds of different screens.
In addition, you use one URL for all devices — making search, indexing and organizing the content easier for Google and SEO. Understanding how to create a responsive website doesn’t require too much learning. Also, it can be less stressful and more efficient than designing custom layouts and testing code for hundreds of devices.
What’s your best practice when creating Responsive web design projects?
