5 Essential Tips For Responsive Web Designing

If you are a keen follower of the latest trends in web designing and development industry, then you have probably heard the term ‘Responsive Website’ at-least a dozen of times. Responsiveness has become the latest buzzword in web designing industry. If the findings of an independent market research company, based out of the United Kingdom, is to be believed, then the keyword ‘Responsive Website’ has demoted the widely used term ‘SEO Website’ to the second position in terms of search volume trends.

Responsive Design Explained:

A website may look good on a laptop, but probably it may not be as pleasing to the eye when viewed on a mobile handset. That’s where responsive design concept comes in to the picture.

So what this ‘responsive design’ is all about? ‘Responsiveness’ is precisely the art of creating websites that can scale according to the resolution of the device it is viewed on. A responsive website perfectly fits to the display screen irrespective of the type and size of the viewing device.

As web browsing devices of varied sizes/resolutions are available in the market, it poses a great challenge to the web designers to design websites which can mould the content in to the dimension of the viewing device.

Fluid designing concept was introduced as a solution to such woes. It allowed web designers to use percentage values instead of specifying the fixed width of a container in pixels. The art of responsive design was derived from fluid design concept. Besides the issues associated with the width of viewing devices, responsiveness also takes care of the element proportion, text size/alignment, image scaling and compression.

In this article, we will take a look at five essential tips to design an elegant and efficient responsive website.

1.) Employ Mobile First Strategy:

The objective of building a responsive website is to enhance the visitors’ viewing experience, irrespective of whether he is using a smart phone, a tablet or a standard laptop/desktop system. Your website should be friendly to the mobile viewers, as much as it is compatible with any high resolution device. A trick that always proves to be handy is to build the website layout for the lowest resolution device first and then scale up gradually to cater to the devices with larger display units.

Think about this from a logical point of view. If a website is easy on the eyes while browsing on a mobile, then it should not be an issue to align it properly on a larger sized device. Makes sense?

2.) Avoid Horizontal Menu Bar:

While horizontal primary menu looks good on larger screen sizes, it can mess up the website layout on smart phones with smaller display units. It’s an element that experienced web developers avoid while creating a responsive website. You can still make use of horizontal menu if you have only a few navigational items (lesser than 3, ideally), but otherwise you should rather consider creating a vertical menu. If a vertical menu doesn’t go well with the style of your website, then your best bet is to use a single icon, which opens up a drop-down menu on click (or hover).

3.) Use CSS3 Media Queries:

Media Queries (@media) is a functionality floated around by CSS2, but it gave an all new dimension to responsive design concepts with the introduction of CSS3. It lets you create different layouts for different devices. You are allowed to create different CSS style-sheets (layouts) for handling media files on different devices in a responsive manner.

Media queries check for the compatibility of the web browser / viewing device and renders the best fit media resolution based on –

• browser width and height,
• device width and height,
• available media resolution and
• media orientation (portrait or landscape).

Depending upon the information retrieved, a visitor is served with the most appropriate layout. Today, almost all the popular web browsers (sans IE-8) support media queries functionality.

4.) Use a Prototyping Software:

Using a prototyping software, you can easily design your web page layouts visually, without having to worry about complex CSS/HTML coding. Prototyping softwares allow web designers to make use of media queries and set layout break-points to fit the targeted screen size. Once you have designed a layout, you can quickly switch to HTML/CSS mode and copy the code on to your website (create new layout style-sheets).

Adobe Edge Reflow is one of the most widely used Prototyping software that the designers use to easily create the best-fit layouts for desktop, tablet and mobile users.

5.) Font Size and Text Count:

While it may not cause any inconvenience to desktop/laptop users, having excessive textual content can prove to be a deterrent for the mobile users. Always keep in mind that the majority of smartphone users do not like scrolling up and down to read the textual content. So keep the content crispy and convey the important information in a precise manner.

Moreover, the font size is another important factor to consider. If it is required to zoom in to read your content, then you might be at a risk of losing every 8 out of 10 readers. Set the text size to no less than 11px for offering your mobile visitors a comfortable reading experience.

The increasing usage of mobile internet (using smartphones to browse websites) has given a tremendous boost to responsive web designing. If you are yet to take the responsive route, then it will be a good idea to explore the possibilities right now.

About the Author:

Laurel Brian is one of the team members of the Lane End Conference Centre and also a passionate blogger. In this article he is sharing five essential tips to design an elegant and efficient responsive website.

Find Me On GooglePlus