Category Archives: Responsive Web Design

At An Event Apart – Austin 2013, Ethan Marcotte shared his thoughts on how our conversation about enhancing the web incorrectly centers around the map (people from different locations) instead of around the territory (people of similar demographics). Here are my take-aways from the talk:

  • Responsive design consists of three things: a fluid grid, flexible images, and media queries
  • A fluid grid is defined as target ÷ context = result. This is a formula for translating a fixed width layout (from Photoshop) to a fluid, percentage-based layout on the web.
  • We should be designing a layout system – just like Samantha Warren said in her talk.
  • We should use media queries to defend the integrity of our design.
  • The map is not the territory – meaning all people in one particular locale have widely different access to the web.  A physical location on the map can’t be easily categorized as having the same access to computers/internet.
  • Because the map is not the territory we need to design for reach (meaning faster loading websites)
  • In Africa, there are a majority of people who only have access to the internet from a mobile-device.
  • In fact, among minorities, the poor, and the developing world; mobile-only internet access is the main-stay.
  • Moreover, the developing world will soon overtake the developed world when it comes to mobile-use.
  • The biggest take-away for me: As a web designer, I need to craft mobile experiences that ensures  that people who might feel like second-rate citizens do not also have a second-rate web browsing experience on the only device they can access the web on: their mobile device.

At An Event Apart – Austin 2013, Luke Wroblewski shared his thoughts on how we should be designing for mobile creation. This means – how should we build web forms and interactive websites that take into account the user’s habits/posture when using their device.

Here are my take-aways from his talk.

  • The ‘mobile moment’ is where your mobile traffic exceeds your desktop traffic. Facebook recently reached this ‘mobile moment’
  • Most mobile use is in houses, not on the go
  • Ergonomics is now important for touch devices, since the mouse and keyboard barrier are gone. This means how we design the website/app should take ergonomics into account.
  • “It takes big changes to go small” – Tim Cook, Apple CEO
    • This means the mobile experience should have a focused and clear flow.
  • “Just in time education” is best when showing tips on using the website or app. This means only showing tips as the action is being taken. Avoid showing a full how-to guide up-front.
  • The answer for the debate between native apps vs mobile web is – They should both good for their own strengths.
    • The ideal world would utilize cross device usage – so you can pick up where you left off – think reading books on Kindle, using Chrome for browsing on various devices, that remembers what you viewed/searched

My summary:

As I begin building websites for mobile, I need to research and test different ways that are ergonomically correct for users to interact with the device. This involves how large to make buttons, where to place them on the screen and much more.

swag

At An Event Apart – Austin 2013, Samantha Warren shared about her new idea: Style Tiles. Here are my take-aways:

  • Design is art without clients – and in-house designers still have clients
  • Creating 3 fixed-width pixel-perfect Photoshop comps encourages ‘Frankencomps’ – where client will request pieces of each to be put together to make a new comp.
    • There is a better way to go about this, and it is ‘Style Tiles’
  • Mood boards are too vague for clients to understand, although they are good for certain parts of the process
  • Style Tiles
    • Gives client an essence or feel for the website – fonts/colors/etc
    • Allows for designing a system, not pages
    • Separates style from substance (content)
    • Are device width agnostic
    • Will facilitate a conversation around responsive design projects
    • Should come before a more refined mockup of pages
    • Allow for quicker iteration
    • Sets you up for creating a full component library – full of all possible design components on website
  • Design Process:
    • Listen
      • Ask questions, get answers then setup kickoff meeting to get alignment on answers from all people on client end
      • Ask what their 3 user goals are and 3 business goals are
      • Ask ‘Why?” throughout
      • Ask metaphor questions like, “If your brand were a ____, it would be a _________ and why?
      • Ask degree questions like, “on scale of 1-5 how strongly do you feel your website should be______ (illustrative/etc)”.
    • Interpret
      • Identify common themes
      • Get agreement on adjectives
      • Begin pairing adjectives with design principles of line, shape, color, texture, space and form
    • Define Visual Language
    • Iterate
      • Easier to do with style tiles
    • Deliver a System
      • System would include the style tile, component library (how all possible aspects of website will look, like, headings, lists, links, etc), and full comps
  • When someone says that designers JUST make things look pretty, a kitten dies!
  • Design a better process!

 

mobile devices

Recently, I’ve been boning up on the principles of mobile first and responsive web design. I’ve read Ethan Marcotte’s book, Responsive Web Design and also almost through with Luke Wroblewski’s book Mobile First. So far, I’ve built two websites using responsive techniques and let me tell you, all the reading in the world doesn’t prepare you for actually building something (and writing your very first media query). Reading about ‘best practices’ is one thing, but doing the (sometimes boring) work that involves formatting content and photos helps you discover your own best practices.

One of those ‘discovered’ best practices is this…

When there are many photos on a webpage that support the content, but aren’t absolutely necessary – it’s OK to choose not to display them on smaller screens. For example, on a recent project, I was finding that some photos were specifically referenced in the content and were vital to understand the content, but others were stock photos that were just niceties, but not necessities. For those non-vital images, I removed them on smaller screens to allow for a more concise reading experience.

Simple idea that sounds like a no-brainer, but it was a minor break-through for me.