March 25, 2014


ID-100162422Responsive web design (RWD) is a term used for a website designed to provide an optimal viewing experience. This incorporates text and navigation being easy to read with a minimal of resizing, panning and scrolling across a wide range of devices (including computer monitors of various sizes, laptops, IPADS, Kindles, Androids mobiles and many more). RWD is seen by many sources as a cost effective alternative to mobile apps.

Responsive Web Design History

RWD was first referred to by Ethan Marcotte in 2010 who described the theory and practice in his short book titled Responsive Web Design produced and published in 2011, if you haven’t read his seminar article about responsive web design, I highly recommend it!

Although RWD was around it did not really take off until last year as referred to by Mashable as “2013 the year of responsive web design”. 

So What Is The Need For Responsive Web Design?

As technology keeps progressing day by day you can now view a website browser on many devices including mobile phones, android tablets, IPhones, IPads, Kindles, TV’s, Computer Monitors and many more. With the progression of these technologies it means that the user’s expectations have also changed.  People expect to be able to use a device such as their mobile to browse a website just as easily as having to boot up a laptop or a computer. In response to this web design companies started creating mobile enabled versions of their websites. Looking back this wasn’t really a step forward but at the time it seemed like a quick, workable idea but meant that every website in respect had two versions, a desktop version and a mobile version, costing small to large organisations a lot of money to get a mobile compatible version of their site coded.

What Factors Make Up Responsive Web Design?

Here are two of the key ingredients behind responsive web design:

Fluid Grids

The first area to keep in mind when designing a responsive web design is the usage of what’s known as a fluid grid. Similar to Liquid layouts (which expands with the page and was never as popular as creating a fixed width layout), fluid grids go a full jump further!

Instead of designing a layout based on rigid pixels or percentage values, a fluid grid is designed more in terms of proportions to allow the layout to be squeezed or enlarged on to the relevant screen size. All the elements will resize in relation to one another.

Fluid grids are a very important part of creating a responsive web design website. For example a complex three-column layout isn’t going to work well on a smart phone when the width of the browser becomes too narrow, however responsive design incorporating media queries has sorted out this problem.

Media Queries

CSS3 Media queries allow you to gather data about the site visitor and use it to apply CSS Styles.

Ideally you would adjust your layout to perfectly match every device width; however putting the effort in to make this happen is not an option therefore you should target certain resolutions. I would recommend targeting the following pixel widths:

  • 320px
  • 480px
  • 600px
  • 768px
  • 900px
  • 1200px

In Summary

The size and spectrum of screen resolutions are forever changing and creating a different version of a website to meet every demand is physically not possible. Responsive web design addresses the situation head on and provides a cost effective solution. Although responsive web design is not a single way of working but is a collection of techniques, it is certainly taking over the web by a storm.

Thanks!

Jenny

Jenny Verman

Jenny Verman

Digital Marketing Manager

The Internet Marketing Academy

http://internetmarketingacademy.com

(Image by nokhoog_buchachon at FreeDigitalPhotos.net)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Follow the IMA


Receive Blog Updates


Enter your email to get more internet marketing tips






Recent Blog Posts

The Qualities All Creative People Share

The Qualities All Creative People Share

Whether you asp ...
3 Mistakes All Start-Ups Should Avoid

3 Mistakes All Start-Ups Should Avoid

If you have inv ...
How To Improve Your Online Reputation

How To Improve Your Online Reputation

An online reput ...
Are Broken Links Holding You Back On Google?
Struggling To Stump Up Blog Content? Try This…

Categories


QUICK QUOTE

Please enter your details below &
what you're looking for and we will get
back to you with a quote

Name:

Phone:

Email:

Your message:


Services















Home | Training | Courses | Contact Us| XML Site Map | Blog RSS Feed | Feed

Internet Marketing Academy
Head Office:
GHL House
12 - 14 Albion Place
Maidstone
ME14 5DZ

Telephone: 0800 000 0000
Email: info@internetmarketingacademy.com

Terms & Conditions  |   Cookie Policy

Follow Us Online