Week 9

Abstract Our learning objectives for the week are:

  1. Articulate the anatomy of a typical web page.

  2. Lay out a website page that conforms to agreed-upon aesthetic principles.

  3. Explain tactics to incorporate into the design process to account for responsive design.

  4. Identify common responsive design patterns.

  5. Explain accessibility and why it is important.

  6. Describe your role in designing accessible experiences.

Post 1: Responsive Design

I remember the first time I used the internet. I was in the library at school, probably around 1995, as I was using WebCrawler, Altavista and Lycos as search engines. We had to use all three to find content as not all pages were indexed on all engines. Google didn't exist, neither did YouTube or Wikipedia.

You had to have a landline to access it, and back then, you were charged by the minute. Smartphones didn't exist, and neither did broadband.

Over the next ten years, internet access and speed changed dramatically. Desktop computers were the norm, and we even began communicated via text message. As mobile technology advanced, so did the demand for wireless mobile internet access.

In the early days, both desktops and mobiles displayed the same website. You had to scroll, drag and click to use them. Pinch and zoom didn't exist, and up until 2003, nobody cared about mobile brand experiences. The dot.com bubble forced people to look at the figures, and someone realised they were missing out on the growing percentage of internet traffic coming from these smaller, mobile devices.

Companies large and small started using SMS to send customer loyalty offers and exclusive promotions. Media outlets started to send news alerts and thought it was a good strategy because SMS providers guaranteed reliable delivery to consumers.

Blackberry changed mobile user behaviour, and adaptive design was born.

Adaptive design Adaptive design used multiple fixed layout sizes. We could detect the browser size within media queries and serve a layout most appropriate for that screen.

Then Apple introduced iPhone, and smartphone users expected to be catered for. Google also started to rank sites based on how Mobile-friendly they were, and businesses realised mobile devices were not going away.

It started to become extremely difficult for developers and designers to keep track and provide consistent experiences across all platforms.

In response to the ever-changing web, designers like Ethan Marcotte (Marcotte, Keith and Robert, 2011), sought to devise better ways processes and coined the term "responsive web design".

Responsive web design Responsive web is an approach to web design that renders pages well on various devices and screen sizes, using the same code base. The codebase has three components; fluid grid systems, flexible text, images, and media queries.

  • Fluid grid systems ensure that elements have consistent spacing, proportion and adjust to a specific screen width based on percentages.

  • Flexible text adjusts, making text legible, regardless of the end user's device.

  • Flexible images are a methodology where smaller (or larger) images are delivered based on your device and connection speed.

  • Media queries allow for multiple layouts of a design, which use the same HTML-coded web page.

This approach allows websites to look great and work well on any device, helping businesses and users maintain a consistent experience which increases retention. It also allows us to consolidate analytics, tracking, and reporting. Decreasing time, cost and content management.


  1. Marcotte, E., Keith, J. and Robert, C. (2011). Responsive Web design. A Book Apart.

Post 2: UX Prototype - Accessibility