Designing For The Mobile Web

Tech Camp Memphis 2014

Who is George Spake?

Web Developer with a Background in Graphic Design

Currently working with the Web Services Group at UTHSC

@georgespake

georgespake.com

Designing For Different Mediums

Understanding the medium

  • strengths
  • constraints
  • conventions.

 

What happens when you move from one medium to the next without understanding the differences?

 

New mediums tend to adopt the conventions of older mediums.

Designing For the Mobile Web

What is Mobile Web Design?

To understand this medium, it is crucial to understand the impact that mobile technology has had on the web.

Luke Wroblewski

Pre 2007 Mobile web access was a joke.

little more than a novelty feature.

 

So people Didn’t visit websites on phones.

Many of the same familiar constraints in print media and:

  • Finite number of devices
  • Less robust set of standard features
  • small number of common browsers

Then Everything Changed…

A Brief History of Mobile Web Design

2007: iPhone released.

 

2009: Google enters market with Android / apple released the ipad... Chaos Ensued

A Brief History of Mobile Web Design

iDisruptor

Web community forced to adapt quickly

Responding to Rapid Change

First response: Maintain separate app-like sites for mobile. ("m dot" sites)

 

Not an ideal solution (More like a band-aid).

 

Completely different experience on mobile and desktop

A Brief History of Mobile Web Design

In 2010 Ethan Marcotte gave Responsive Web Design a name.

The Ingredients:

  1. A flexible, grid-based layout,
  2. Flexible images and media, and
  3. Media queries, a module from the CSS3 specifiation.

From Responsive Web Design By Ethan Marcotte

RWD has become a fundamental concept in web design.

Responsive Web Design

A Brief History of Mobile Web Design

In 2011 Luke W's book Mobile First was released

(Original article in 2009)

Progressive enhancement vs.

Graceful Degredation

 

Mobile First compliments responsive design

Mobile First Makes a strong data driven business case for developing with mobile in

mind.

Mobile First

A Brief History of Mobile Web Design

Adapting to Change

Today: seemingly infinite number of devices and screen widths and browsers. Scary? Yeah. But we've got this!

 

Big ideas like 'Responsive Design' and 'Mobile First' have provided a starting point and opened the door for more big ideas and tools to implement them.

 

It's an Exciting Time To Be In Web Development

Adapting to Change

What's going to happen next?

The Modern Web Designer's Toolkit

Atomic Design is "a methodology for creating design systems."

There are five distinct levels in atomic design:

  1. Atoms
  2. Molecules
  3. Organisms
  4. Templates
  5. Pages

By Brad Frost

Logical approach for responsive design

Pattern lab is a tool created by Brad Frost to build atomic design systems

The Modern Web Designers Toolkit

The Modern Web Designers Toolkit

They also bring together modern best practices, design patterns, concepts and tools

Responsive Frameworks

Frontend frameworks emerged as a way to prototype and build responsive web interfaces quickly

CSS PreProcessors

CSS Pre-processors make creating stylesheets cleaner and easier by introducing concepts like variables and nesting to the familiar css syntax.

Extensions like Compass and Bourbon add even more powerful features.

Makes things like browser prefixing easy to automate.

The Modern Web Designers Toolkit

"Package Manager for the Web"

Brings the concept of dependency management to frontend development

JavaScript Task Runners

Grunt and Gulp are build tools commonly used in frontend development

The Modern Web Designers Toolkit

Front-end

Dependency

Management

A collection of responsive design resources put together by Brad Frost

Mobile Web Design Resources

Zurb University Library

Lot's of design resources. Pattern examples / inspiration etc...
(not Foundation specific)

Mobile Web Design Resources

Mobile Web Design Resources

Get involved in the Community! 

Go to user groups (I hear Memphis has some great ones) engage, share, learn

Follow industry leaders/ smart people 

Twitter, reddit etc... Are great ways to keep up with people and stay on top of trends. Watch talks on youtube, listen to podcasts


Learn new skills
Interactive learning tools like codecademy and treehouse 
Online code playgrounds like codepen

Mobile Web Design Resources

Sources

dailygenius.com

ethanmarcotte.com

lukew.com

alistapart.com

Mobile First

Responsive Web Design

 

Made with Slides.com