Web Design: Going Responsive The Easy Way

by Geoff Roy on October 9, 2013

website design for everyone including the tablet user lying on the sofaNo matter how much of an expert you are at coding and programming, the likelihood is, you’ll have some challenges when constructing your first few responsive web designs. As a website design agency, it certainly did for us!

This is because it requires an substantial adjustment in the way you think. Prior to starting your first design for a responsive website, consider following these five points:

Not All Screens Are The Same

Concentrate on creating your website design based on a limited number of screen resolutions. If you attempt to accommodate every single screen size in existence, you’ll have a difficult time getting the website design finished. For that reason, you need to zero in on the following four general screen resolutions: the widescreen display of a desktop computer, the display of smaller desktops and notebooks, tablet computers, and mobile phones.

Optimise Content

Even though you can zoom the website in and out, that doesn’t count as truly responsive design ! Care really should be applied to change how the content is laid out as well.

Do not forget how a typical mobile phone user will utilise the small screen area available to them. Your first thought might be to just zoom out, so the entire website can be seen on the limited screen area. While this can be a good thing, it can also give the user a difficult experience locating info positioned in a tiny part of the screen.

Instead of the zooming out option, experiment with techniques which will make smart phone users love to interact with your website design – limiting columns can really help with this.

Different Users Want Different Info

Comfortable Touch Zones - tablet usage impacts on website designVary the content as opposed to just shifting it. People using various platforms are probably going to have varied needs.

Anyone checking out a restaurant on their mobile, for example, will be skimming for the restaurant address, hours of opening, and probably any customer feedback – they won’t be going if the feedback is lousy. So offer up this content first of all in an easy and noticeable spot to find on the website.

On the other hand, someone using a desktop to check out a restaurant’s website is probably figuring out whether they want to go to your restaurant. Therefore, you should concentrate your content on encouraging them to go dine at your restaurant.

Fluid Grids

Use fluid grids to make a “liquid layout” instead of a fixed width layout. Most web developers find fixed width layouts, which are customary, much quicker and simpler to generate. However, the application of fluid grids will be more practical in the years to come when it comes to responsive website design, since they’re carefully designed to consider proportion.

Coding for Media Queries

It is nigh on impossible to create a single website design which covers the thousands of differing devices and screen resolutions, ranging from desktops to mobile phones. Coding media queries for the responsive design is one way to accommodate them all.

Media queries permit web designers to generate conditional stylesheets for a website design. Dependent on data from the user, a different stylesheet will display. For instance, you could have two media queries, and one may be used when the device’s width is bigger than the width of the website, whereas the other may be used when the device’s width is smaller.

Irrespective of being such a simple concept, responsive website design tends to be incredibly baffling at the outset, as it requires you to contemplate many diverse situations. However, if you stick to the techniques listed above, you’ll end up producing responsive website designs in no time.

By Geoff Roy – Geoff Roy works for a web design agency in Hampshire called Differently.co, and loves providing his experiences about web design and what it can do for your online presence.

Citations:

Featured images:

 

Previous post:

Next post: