Responsive Design – Part 1



As more web enabled devices are released on the market, people are viewing the internet with different tools. Smart phones, tablets, portable gaming devices, car entertainment units and even household appliances, like fridges, have empowered users to stay connected to the internet all day long.

However, they don’t provide the most optimal viewing experience considering that most websites are designed to viewed on personal computers. Having to pinch, zoom and squint at a screen to see what you’re reading is both problematic and annoying. For a while, mobile detection solved many of these problems. However, as more and more devices are released on the market, it becomes hard to keep track of the different screen resolutions and detection method required to display corresponding designs and layouts.

Currently, the most efficient solution to the multiple device problems is responsive design. If you haven’t caught on to responsive design, then you might be missing out on one of the latest trends in web design. Instead of relying on frameworks and extensions to do the device detection, individuals work purely off browser resolutions and display different layouts accordingly to match.

Responsive design changes and adapts a website to how a user may perceive it. Whether it is on a mobile device, tablet or desktop computer, being able to adapt and change the designs and layouts to different resolutions and how they are being viewed can enhance the overall user experience.

This responsive method of design is intended to provide the user with the best experience in terms of visually displaying content to them on the device or platform that they are viewing it on.

This isn’t anything new, in fact many websites use similar techniques to display print versions of website which may hide irrelevant elements except for branding and content to preserve printing resources.

Becoming Responsive

Creating a responsive website design for your website isn’t a straightforward process. It requires good if not excellent HTML and CSS knowledge. One method of creating responsive templates is to use media queries.

css" media="screen and (max-device-width: 320px)" href="/mobile.css" />

This CSS reference will call in the mobile.css file if the maximum screen width is 320px.

This is the same method used to display print version of your website.

<link rel="stylesheet" type="text/css" media="print" href="/print.css" />

The browser will detected what browser resolution you may have and load different style sheets accordingly. This method can also be applied to screen orientations between landscape and portrait layouts.

Another method of implementing responsive templates is to use fluid CSS layouts as opposed to fixed width layouts. Setting your website widths to 100% as well as setting images to resize is a good starting place in creating a website template that can work on many different screen resolutions.

img { max-width: 100%; } or img { width: 100%; } for IE

These techniques don’t work in all browsers and should be tested accordingly but the majority of modern browsers and mobile devices will accommodate these methods which is what you’re trying to target.

Future of Responsive Design for website

As more and more businesses and organizations want, and require, responsive design for their websites, we’ll start seeing more template companies producing templates for website that are encompassing responsive design.

There are already quite a few templates out there that cater to managing website on mobile and other devices other than a desktop or laptop, but imagine being able to quickly load and adapt to different screens and platforms while only using one template, and not requiring different templates for different situations.

Another area where responsive design can hugely help users is in the area of web accessibility. Users who require large amplification of the sites because of visual impairment may find it harder to navigate a website that doesn’t adapt to their view point. Responsive user interfaces can vastly improve the usability.

Embracing responsive design to improve web accessibility is a win for everyone. Subtle changes to layouts on different screen resolutions can improved usability and most importantly get your online message read by the intended users.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s