Responsive Web Design (RWD)

Responsive Web Design, or RWD, is the term used for the principle of designing websites that seamlessly respond to the user’s environment based on the device, size, resolution, technical capabilities etc.  Although the application of RWD adds a significant level of complexity to the creation of websites, the original definition is actually very straightforward.  In what has become a seminal article published on A List Apart, web developer Ethan Marcotte first introduced the concept to the web community in May 2010.  This article turned out to be a real game changer to the world of web design, and RWD is now being seen as a necessary discipline for all websites rather than an additional feature to be offered to a client.

Several years ago, the most common screen size was 800 x 600, and therefore the standard dimension to design for.  This was later replaced by 1200 x 800, and designers had to then consider designing sites that looked good on both screen formats.  Today though, considering the most popular desktop or laptop screen-size is only half the battle.  With such a rapid increase in the number of users viewing the internet on a plethora of mobile devices, it is no longer worthwhile designing primarily for one sized dimension and adapting to render well on other fixed dimensions.  We now need to build sites that ‘respond’ to the size of the device that they are being viewed on and perform well regardless of the dimensions or device capabilities.

 

Key elements of RWD:

  • A fluid grid = container widths set to % rather than fixed pixels
  • Fluid images = images set to % widths to adapt to screen size
  • Media queries set to certain breakpoints in screen width to change CSS coding accordingly (i.e reposition, or display/hide particular divs/classes
  • JQuery plugins to make navigation bars collapse to single menu button on mobile devices.

 

Content Out

It has been a long held mantra within the web design community that ‘content is king’ – this is also fundamentally important when designing a Responsive site.  With RWD though a new term has been coined to adhere to: designing with Content Out.  By putting so much focus on content, web sites can be created that are easy to read and use no matter what type and size of device they are viewed on.  Ordinarily we may use grid systems, common layouts, and preset guidelines to create websites, and then later plug in the content – with this Design Out Content In approach, priority is not being given to the content. With the Content Out Design In approach, the proper structure is created first, knowing that this will work fluidly across all devices, and then fit the design around the content structure.

 

Mobile First

With RWD, the best way to design a site is starting with the smallest dimensions first, then design upwards.  This way, you are first of all considering what the most important elements of the site are that must be available to view (and in what order) on all formats.  Then, as you design outwards for bigger and bigger devices, secondary content, tertiary content etc can be added, and content placement adjusted to suit the screen it is being viewed on.

Advertisements

Web 2.0

Web 2.0 is a term that was coined in 2004 at an O’Reilly Media conference, and referred to how the World Wide Web has evolved into a provider of interactive online software services.

Examples of site types that could be referred to as being under the web 2.0 bracket:
• free web-based email
• online banking
• project management tools
• word processing
• spreadsheeting
• consignment and flea market trading (e.g. eBay)
• price shopping for consumer goods
• digital photo processing
• news feeds
• online radio
• video hosting
Usage of the web in the early days (from 1989) consisted of mainly being a huge collection of static electronic ‘brochures’. This period in the development of the web, now referred to as web 1.0, saw the number of users grow exponentially – Millions of people jumped on Web 1.0 as the modern way to receive information about the world. The growth pattern continued until 2001, when, suddenly, the “Dot Com bubble burst”. It burst because many internet startup companies could not live up to the multimillion-dollar expectations of profit. Thousands of people lost their jobs as investors discovered that web users were reluctant to move their consumer spending onto the internet. People just didn’t trust the web enough to do big spending online, and many dot com companies had to close down accordingly. The frantic web growth suddenly slowed.
However, since around 2003 the web has evolved into a provider of remote access software and growth returned to the web. As Web 2.0, the world wide web has also become a medium for online software services.. Spreadsheeting, word processing, private investigator services, wedding planning, web-based email, project management, headhunting, movie and file sharing, graphic design services, car tracking and gps.

STREETS IN TIME: Comments form

I spent some time trying to work out the way to display the comments and submit-comment form in terms of optimum User Experience.  Should I show the submit form first and then the comments below?  Should I prioritize seeing the comments available to read or the form encouraging users to submit their own memories / comments?

In the end, I decided to have a button titled “Submit Comment” at the top, with the comments below.  The button would link to an anchor on the submit-form at the bottom of the comments – this way I achieve the best of both options – comments immediately visible, as well a  call to action button for submitting a comment.

Image

 

I have added a smooth scroll plugin for fluid transition from the anchor points.

When a comment is submitted, javascript grabs the name of the html file that the comment has been sent from and adds it to the email that is produced so that as Moderator I know which page to add the comments to:

<script>document.write("<input type = 'hidden' name = 'page_ref' value = '"+cat_no+"' />");</script>

Also, javascript code allows the header of the comments box to automatically display the name of the location (rather than retyping each time a new page is created:

<p><label for="msg"> Please post your memories of <script>document.write(image_loc);</script></label><br/>

I have added a ‘reply to comment’ button on each comment.  If a user selects this to leave a comment, Javascript code will record which comment has been replied to a pass this to the PHP file that generates the email.  This way, I will know which comment to add the reply to.

I’m going to scrap the ‘report as spam’ buttons as I won’t need these, given that I’ll manually uploading any comments anyway.

 

STREETS IN TIME: Preparing the images for the site

I start off with the ‘then’ as these are much smaller images than the ‘now’ images and so set the dimensions of the final pieces:

Image#

Next I open the ‘now’ image and copy the ‘then’ image over the top:

Image

I then crop the ‘now’ image to exactly match the parameters/scope of the ‘then image’, and correct the perspective (this is usually necessary as the camera I use has a considerably wide-angles lens and tends to ‘fish-eye’ images in comparison to the ‘then’ images.

I now have two layers in one PSD file – ‘then’ and ‘now’.  I select the ‘now’ layer and use transform to reduce the scale of this image to match the ‘then’ image, and crop to size.  Then, with the ‘then’ image on top, I reduce the opacity so that the ‘now’ image starts to show behind.  I then finely adjust the image, lining up as closely as possible the landmarks and buildings.

Image

Once fully lined up, I crop if necessary, then increase the opacity of the ‘then’ image back to 100%, hide the ‘now’ image and Save As sitxxx_then.jpg.  I then hide the ‘then’ image, unhide the ‘now’ image and save as sitxxx_now.jpg.

With the two files now in place, I simply need to open up one of the previous html pages, then Save As a file name that matches the sequence number of the new images, and hey presto – a fully functioning page without any input / tweaking required*

*well, apart from that annoying issue where I have to re-input the image file name to set the height of the div container, but I hope to be able find a fix for that soon…..

STREETS IN TIME: Responsive navigation menu

I have used media queries set to max-width:720px so that on mobile devices the navigation png buttons are not displayed, but instead a fixed navigation bar is displayed (fixed) at the bottom of the screen.  Also the title menu items (home / locations / about) disappear and the logo moves to a central position:

Desktop:

Image

MOBILE:

Image

The main image is set to a % width (with a max-width in place) and is therefore fully responsive to viewing device.

For pages where the orientation of the main image is portrait, I have to add inline styling to the container div setting a max-width of 550px to stop the image becoming oversized.