Responsive Web Development

Responsive websites are fast becoming standard in the web industry. In recent years having a website which worked on mobile devices was a bonus. It meant you had a cutting edge website.

In 2014, it is essential that websites work on mobile devices – one simply cannot ignore the volume of web traffic which is coming from sources other then laptops and PC’s. In January of 2014, in the United States alone, 55% of internet usage came from mobile devices. That number will only continue to grow in the coming years (read about it here).

In this article, I will discuss the implications responsive web development is having on web design and development, as well as explaining the different type of websites you will encounter everyday. So you can make an informed decision when it comes to purchasing a website or web services.

Different Types of Web layouts we see today:

Fixed Layout

A fixed layout is exactly that – it’s fixed in width. With a fixed website no matter what device you view the website on, be it mobile or tablet or PC, etc, will appear exactly the same. A fixed website might be very readable on a large desktop monitor, but when viewed on a phone, a screen that’s a fraction of the size, the website will simply shrink and not be legible. The only way a user can use a fixed layout website on a mobile device is to pinch the screen to zoom in and furiously swipe to move around the website. If you’ve done this you’ll know how frustrating it can be. It’s bad UX (User Experience) and will not do the website any justice.

Here are some examples of Fixed Layout websites. Resize your browser from large to small, open them on your tablet or smart phone to get an idea of how this kind of website works:

Fluid Layout

A Fluid Layout has a bit more flexibility than a Fixed Layout, but don’t get too excited – it’s still not that great. Basically, a Fluid Layout from a development standpoint is built using percentages. I’ll explain further:

If you have a block, or column on a web page (i.e a sidebar, callout, button, picture, etc… anything!). For a Fixed Layout, that element would be set to display at a fixed size. For example 200 pixels wide. Now if the web browser is 1200 pixels wide, that element will be 200 pixels wide. If the website is resized down smaller to be 800 pixels wide, that element would still be 200 pixels wide. Its size does not change, it is completely fixed.

However, as I just mentioned Fluid layouts are built using percentages. So instead of the element being 200 pixels wide, it would be for example 30% wide. So if the browser is 1200 pixels wide, the element’s size is 30% of 1,200 pixels. If the browser is resized down to 800 pixels, the element’s size is 30% of 800 pixels – so by virtue of it being a percentage, it has got smaller, hurray!

A Fluid Layout will resize based on its percentages, potentially meaning that fluid websites could work on tablet devices or small laptops, but would not be effective for devices as small as smartphones.

Here are a couple of Fluid Layout examples, resize, play around and you’ll see how it is different from a Fixed Layout.

Example 1: www.htmlbasictutor.ca/flexible-liquid-design.htm

Adaptive Web Design (AWD)

Now we are getting to the standard that websites need to reach in today’s web climate. An Adaptive website is built to target specific devices. We know that an iPhones screen size is 320 pixels wide. So an Adaptive website will be set up to look a certain way at that specific device size. An adaptive website will typically have 3-4 target device sizes: desktop, tablet landscape, tablet portrait, iPhone portrait.

Depending on the screen size, the website will “jump” to the specific size that best suits that device. Now, in principle this is great, our website is getting viewed and the size that it will look best out using the specific device sizes we’ve targeted. The major problem with Adaptive Web Design is that for today’s web climate, it is fundamentally flawed and short-sighted.

Maybe a few years ago when there weren’t a huge amount of tablets and smartphones available on the market it made sense to target specific device sizes. However, the phone/tablet/phablet/smart device industry is growing exponentially is doesn’t show any signs of slowing up anytime soon. Maybe today a website targeted to specific device size of 320 pixels is a good idea, but what about in 6 months time? Or even 3 months time? Perhaps new devices are built with a screen size of 330 pixels.

The examples I could illustrate here are endless, but the bottom line is it is impossible to satisfy the huge array of devices out there using the web by targeting only 3-4 particular device sizes.

So, how do we tackle this problem? The answer is RWD! (Responsive Web Design).

Responsive Web Development (RWD)

Now we are where websites need to be in 2014. Responsive websites are a combination of both Fluid and Adaptive. They are built using percentages meaning they scale in size based on what size they are being viewed at. Also, they use breakpoints to make layout changes when needed.

The key difference between RWD and AWD is that RWD does not target specific devices. It will adapt using a fluid layout and breakpoints no matter the size it is viewed at. It will always use the full space available.

Advantages of RWD over AWD:

– Targeting specific device sizes is short-sighted and bad practice. The sheer number of devices on the market is staggering and constantly increasing. To pick 3-4 pixel widths to satisfy the entire array of devices that are out now and the devices that will come out in the coming years is just not gonna work.

– RWD is future proofed. They work on devices now and will work on devices in the future. In a hypothetical situation, let’s say Samsung release a new phone which has a native screen size of 523px. A website that has been built on RWD principles will use the full-screen space available on that device, whereas a website built on AWD principles will have to conform to a predefined breakpoint, and not use the full space available.

– AWD wastes precious screen space. I have 2 designs for my website: one at 1024px, then another at 768px, then I will two have breakpoints; one for 1024px and one for 768px. When the site is smaller then 1024px, the breakpoint is triggered and it will jump to the new layout which is 768px. So, I’ve just viewed your website on my computer at 1000px, but whats this? The site content is only 768px wide? There is 114px of white space either side of the website… that’s lame… It’s bad web design, it’s bad user experience, it’s just bad all round.