Longmont Website Design and Online Marketing

Menu Navigation
1 of 7

Websites Take A Turn Toward Responsive Design

Published in: Graphic Design

In today’s digital marketplace, having a mobile presence is a must. But does this mean you need to pay for a separate a mobile version of your site? Or are you simply better off with an app? What about all the different screen sizes and resolutions? Does all of this mean that you have to maintain many different versions of your site?

In this article we will tackle these questions and propose cost-effective solutions that make your site accessible to your entire audience, regardless of device.
 

The separate mobile website

Creating a separate site for mobile devices was a briefly popular solution that has largely fallen out of favor. You may still see some older websites that ask you to “use the mobile version” when you visit them on a mobile device. Often they will forward you to a different subdomain like “mobile.mysite.com”.

The main reason this method is no longer used is that it is expensive. You basically have to maintain two different websites – your regular one, and then this separate mobile version. But economics aside, you still have the original problem of the site not really working on different screen sizes. Your web developers may create a design that works well on a phone, but how does it look on a tablet?

Today’s reality is that device sizes are basically a continuum. Their form-factors range from the smallest small phone screens, all the way up to gigantic 27” high-def monitors. Two websites, one small and one large, won’t cover all devices. So do you add a third or fourth? This obviously isn’t the right direction.
 

Maybe I should just get an app

Getting your own app may seem like a great idea on the surface, but the reality is that maintaining an app may actually be worse than having multiple versions of your website. First of all, the versioning problem is compounded because you must now support multiple platforms (e.g. iOS, Android, Blackberry, Windows phone, etc.). Maintaining completely different codebases, each written in different languages, is much more difficult than simply having a few versions of your website.

The problem gets worse in that you still need to build different displays for the various phone and tablet sizes. Even if you use a technology like PhoneGap and go HTML5/JavaScript, you must still deal with multiple projects and display sizes.

Finally, you can’t release updates as quickly as you want to. Once an app is submitted to the Apple’s App Store, it can take anywhere from a few days to a few weeks for the release to be published. If you are trying to do a promotion, or something else that is time sensitive, you will need to plan ahead and do your best to time all the releases.
 

Screen Size Hell

There are a lot of different devices on the market today, and very few common form-factors. With dozens of different screen sizes, how does one go about creating a website that will look great at so many different resolutions? The answer is Responsive Design.

Responsive Design is a way of building a website so that it dynamically changes its layout at different screen resolutions. By using CSS (and possibly some JavaScript), website designers can craft a site that detects the size at which it is being rendered. The site will then use the appropriate CSS for that resolution and display. The end result is one codebase to be maintained, which means less cost upfront (as compared to the options above), and lower total cost of maintenance down the road.
 

Going Deeper With Responsive Design

The term Responsive Website Design was first coined in an article by Ethan Marcotte on the website “A List Apart". Ethan’s idea was that designers should create fluid, adaptive websites to address the multitude of screen sizes already available at the time. Of course, this landscape of devices continues to expand, with no indication of slowing down.

Three key features of responsive design are media queries, a flexible grid layout, and flexible images/video. Responsive websites have grids that flow, images that resize themselves, and layouts that adapt to almost any screen.
 

Media Queries

Today, web developers use media queries to apply different styles based on features like browser width, height, max-width, max-height, orientation, aspect-ratio, resolution and more. For example, using @media screen and (max-width: 900px) in a style sheet allows developers to gear the design toward browser widths 900px and below.
 

Flexible Grids

Flexible grid-based layouts are built on percentages, not pixels. Gone are the day of pixel based layouts and hardcoded website widths and fonts. Today’s designer uses percentages to size their text, widths, margins and padding enabling layouts to shrink or grow based on the relative size of their parent or container.
 

Flexible Images/Video

The final aspect of responsive design is flexible images and video. Responsive images are either scaled up or down in size or alternatively, are cropped to fit the size the parent container. Image quality is now a consideration, as up-scaled images can render poorly.
 

Responsive Design Is Still New

One additional thing to consider is that responsive website design is in its infancy (begun in earnest late 2013). The standards that power responsive design are also new and continue to evolve. It can be challenging to get a “perfect” view in every browser, but there are workarounds for most issues. Also, because of the widespread adoption of Responsive Design, standards and implementations will continue improve to meet the challenges of today’s ever-changing world of devices.
 

In Summary

Before determining whether a responsive website design makes sense for your business, consider the benefits of Responsive Design. Responsive Design clearly provides a means to create and deploy lower cost websites that are accessible on all screen sizes, regardless of the device form-factors. It also provides the additional benefit of maintaining only one code-base. Finally, Responsive Design also gives you freedom – you decide when you want to deploy updates, and those updates are immediately available to users. We highly recommend Responsive Design and feel that it is the next logical step for website design.