Responsive Web Design

Since the first iPad was introduced in 2010, the number of internet connected devices available to the general public has exploded.

In a Computerworld Magazine article dated Sept 11, 2013 Mark Hamblen states that, ‘Tablet shipments will surpass desktops and laptops in Q4 2013’.

The rate of purchased Internet connected devices is predicted to only increase, and with this increase comes a wide variety of screen sizes and browser options. It would be extremely difficult – if not impossible to produce a web page to accommodate every eventuality.

Developers initially approached this problem by writing apps, but with thousands of different devices — again it would be unfeasible to write this many apps to display a web page adequately on each device.

Eathan Marcotte, author and inventor of Responsive Web Design states:

“Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to ‘design for the ebb and flow of things’.”

Responsive web design is creating a website once that works seamlessly with many different screens through the use of fluid and proportional sizes, resizing of images and CSS3 media queries. Through these techniques, a viewer should experience an optimum view through resizing, panning and scrolling. Through the use of media queries in Cascading Style Sheets, we can target a certain style to a certain device class. This allows the designer to create a style sheet that optimizes the design to the width of the device. Media queries also allow the designer the opportunity to take advantage of the different orientations of these devices — such as portrait or landscape.

Another exciting tool available to help the designer with style sheets is a language called SASS. SASS stands for Syntactically Awesome Style Sheets and is a language that takes advantage of the use of variables. SASS is a preprocessor language that helps the designer take advantage of variables to hold specific pieces of information so that for example, a hex color code does not have to be repeated numerous times. With the fact that style sheets are continuing to become more and more complicated, languages such as SASS could help organize style sheets where certain characteristics are set in one place and used multiple times throughout a style sheet.

The future of web pages continues to become more powerful and new technologies are making the job of designing a web site that is optimized for numerous devices easier.

Please follow and like us:

Enjoy this blog? Please spread the word :)