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:
- A flexible, grid-based layout,
- Flexible images and media, and
- 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:
- Atoms
- Molecules
- Organisms
- Templates
- 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