responsive web design introduction by mixd
TRANSCRIPT
MOBILE IN
MINDA BRIEF INTRODUCTION TO RESPONSIVE WEB DESIGN
WHO ARE WE?
WHAT IS RESPONSIVE WEB DESIGN?
“A responsively designed website is flexible to the conditions in which it will be viewed, in order to offer every user an optimised experience.”
WHAT IS RESPONSIVE WEB DESIGN?
WHAT IS RESPONSIVE WEB DESIGN?
SAME WEB ADDRESS
WHAT IS RESPONSIVE WEB DESIGN?
SAME CONTENT
WHAT IS RESPONSIVE WEB DESIGN?
CONTENT RE-STRUCTURED APPROPRIATELY
WHAT IS RESPONSIVE WEB DESIGN?
WHAT IS RESPONSIVE WEB DESIGN?
WHAT IS RESPONSIVE WEB DESIGN?
WHAT IS RESPONSIVE WEB DESIGN?
WHAT IS RESPONSIVE WEB DESIGN?
WHAT IS RESPONSIVE WEB DESIGN?
WHAT IS RESPONSIVE WEB DESIGN?
WHAT IS RESPONSIVE WEB DESIGN?
WHAT IS RESPONSIVE WEB DESIGN?
WHY RESPONSIVE WEB DESIGN?
WHY RESPONSIVE WEB DESIGN?
PERIOD TABLET SMARTPHONE TOTAL
- 6.8% 6.8%SEPT ‘ 11
6% 10.9% 16.9%SEPT ‘ 12
11 .4% 21.2% 32.6%SEPT ‘ 13
14% 19.8% 33.8%SEPT ‘ 14
WHY RESPONSIVE WEB DESIGN?
“Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.”
- Google, 2012
WHY RESPONSIVE WEB DESIGN?
“Where we might previously have developed separate mobile and desktop versions of a service, or bought bespoke apps, design should now be done with one website in mind. This should be done using a responsive design approach.”
- GOV.uk
HISTORY
HISTORY
http://www.flickr.com/photos/superpope/4835946664
Ethan Marcotte@beep + @rwd
HISTORY
HISTORY
HOW DOES IT WORK?
HOW DOES IT WORK?
HOW DOES IT WORK?
Media Queries
HOW DOES IT WORK?
Media Queries
5 KEY PRINCIPLES
Be Device Agnostic
Be fluid
Build Mobile first
Be Resolution independent
Optimise, optimise, optimise
DEVICE AGNOSTIC
DEVICE AGNOSTIC
http://www.flickr.com/photos/brad_frost/10413872785/
DEVICE AGNOSTIC
Screen Size
Screen Siz
DEVICE AGNOSTIC
???Resolution
Screen Siz
DEVICE AGNOSTIC
Connection Speed
???Resolution???
Screen Siz
DEVICE AGNOSTIC
Connection Speed
???Resolution???
Touch Enabled
???
Screen Siz
DEVICE AGNOSTIC
Connection Speed
???Resolution???
Touch Enabled
???
JavaScript
???
Screen Siz
DEVICE AGNOSTIC
Connection Speed
???Resolution???
Touch Enabled
???
JavaScript
???
???
BE FLUID
BE FLUID
“The web has always been fluid; we’ve just wasted a good number of years forcing fixed pixels onto an inherently responsive framework. The time to stop is now.
– Elliot Jay Stocks, 2013
BE FLUID
px%
em rem
MOBILE FIRST
MOBILE FIRST
http://www.flickr.com/photos/brad_frost/7387767300
MOBILE FIRST
O N E W E B
MOBILE FIRST
RESOLUTION INDEPENDENCE
RESOLUTION INDEPENDENCE
72 pixels per inch
RESOLUTION INDEPENDENCE
72 pixels per inch
RESOLUTION INDEPENDENCE
Galaxy SII………………217ppiGalaxy SIII……………..306ppiiPhone 4/4S, 5/5s…….326ppi
iPhone 6+……………….401ppiHTC One………………..468ppi
iPad 3/4…………………264ppi
Macbook Pro……………227ppi
screensiz.es
RESOLUTION INDEPENDENCE
RESOLUTION INDEPENDENCE
RESOLUTION INDEPENDENCE
OPTIMISATION
OPTIMISATION
OPTIMISATION
OPTIMISATION
Keep HTTP Requests to a minimum
OPTIMISATION
Optimise images
OPTIMISATION
Minify CSS / JS
OPTIMISATION
Caching
5 KEY PRINCIPLES
Be Device Agnostic
Be fluid
Build Mobile first
Be Resolution independent
Optimise, optimise, optimise
DESIGN PROCESS
DESIGN PROCESS
DESIGN PROCESS
“designers waste a shitload of time creating fully fleshed-out comps of what a website could look like [...] It’s an increasingly-pathetic process that makes less and less sense in this multi-device age.”
- Brad Frost, 2013
DESIGN PROCESS
http://www.flickr.com/photos/brad_frost/10413872785/
DESIGN PROCESS
DESIGN PROCESS
DESIGN PROCESS
DESIGN PROCESS
ST YLE GUIDES
DESIGN PROCESS
21 ST – 23 RD JANUARY 2015
MIXD – HARROGATE
WORKFLOW, TOOLS & PROCESS
Project Management
Design
Development
Version Control
Testing
Deployment
DESIGN FOR THE WEB
Vertical Rhythm
Content Hierarchy
Colour Theory
Typography
Accessibility
Style Guides
RESPONSIVE WEB DESIGN
VERSION CONTROL
CSS
Modular
Maintainable
Scalable
OO-CSS
Naming Conventions
SASS
Partials
Mixins
Variables
Nesting
Functions
WORDPRESS
Getting Setup
How it works
Theming
Plugins
Content Management
GET TING A JOB
SPONSORS
BREAKFAST DAY 1
LUNCH EVERYDAY
COFFEE / TEA EVERYDAY
COLD DRINKS / SNACKS EVERYDAY
PIZZA / DRINKS DAY 3
APPLICATIONS ARE OPEN!
x 10
CLOSES MONDAY 1 ST DECEMBER
20 TH JANUARY 2015 (DAY BEFORE)
THE BELGRAVE MUSIC HALL, LEEDS 20 TH JANUARY 2015
STARTING 7PM