Thank you for contacting us!
Hear from us in no more than 24-hours!

A Fast-track Guide: Responsive Web Design

By | Jun 28th, 2013 05.03 AM | View all posts in Tips & Tricks

Want to design a responsive website? Assuming you already know what a responsive website is, here’s our quick guide on how to easily go about it.

Start From Small to Large

List out all the devices you want to optimize you website for. Then start designing starting from the smallest screen first.

device comaprison table

Use the Grid System

Instead of measuring your website in pixels, switch to the grid system which is about taking a percentage view of the screen. The main reason to take on this perspective when designing is that the width changes depending on different browsing windows, hence ‘responsive’ design. Take note that it’s not possible (or would be extremely difficult) to design a responsive website without the use of the grid system.

the grid system

Simple Navigation Design

Design the site’s navigation as simple as possible. Menu design should be as simple, with maximum of 2 levels for multi-level menu. This is to optimize both the design and development part for an error-free responsive website.

sample menu

Think in Modules

Take on a modular viewpoint on the different parts of your design. Instead of seeing them as a whole, treat each part separately and imagine being able to split, re-size and shuffled the parts easily to get different layouts without negative impact on the overall page design.

modular view

Think Fluid Design

A fluid grid is design in terms of proportions. The benefit? When the layout gets squeezed into small mobile screens, all the elements within the layout automatically re-size their widths in relation to each other keeping the page looking intact and error-free. The same idea is applied for larger screens.

Next, let’s take a look how to go about proportion calculation for each element. One of the better ways to do this is to create a high fidelity mockup in Photoshop or any other pixel-based editor. Then, measure the page elements and divide it by the full page width. Start by defining what your ‘container value’ is. This is basically how many pixels wide for your entire page layout. Now take a look at one of your elements. If your container value is 960 and your element is 300 pixels wide, then ratio-wise, your element is 31.25% of the full width. The math: (300 pixels/960 pixels)x100 = 31.25%

responsive web calculation

There you go. A quick and simple guide for designing a responsive web.

 

Image credits: 99designs.com, typedesk.com, thenextweb.com, trilliumtech.com, designdecoy.com

contact us