SlideShare una empresa de Scribd logo
1 de 86
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Holger Bartel
  @foobartel
h@foobartel.com
Responsive Web Design &
  Workflows for Today's
          Web
What I’ll Talk About Today
★   A Primer on RWD
★   RWD IRL - A Case Study
★   RWD Workflow
★   Conclusions & Lessons Learned
Perception & Status Quo
“We don’t need a mobile site”
bradfrostweb.com
bradfrostweb.com
bradfrostweb.com
New Devices Since 09/12
4"-5" Smartphones                                    9"-10" Tablets
Apple iPhone 5 (4" Apple iOS 6.0)                    iPad Gen 4 (9.7" Apple iOS 6.0)
Nokia Lumia 920 (4.5" Microsoft Windows 8)           Microsoft Surface Tablet (10.6" Microsoft Windows 8)
HTC Windows Phone 8X (4.3" Microsoft Windows 8)      Kindle Fire HD (8.9" Google Android 4.0 modified)
HTC Windows Phone 8S (4.0" Microsoft Windows 8)      Lenovo ThinkPad Tablet 2 (10.1" Microsoft Windows 8)
Motorola Droid RAZR HD (4.7" Google Android 4.0)     Acer Iconia Tab W510 (10.1" Microsoft Windows 8)
Motorola Droid RAZR M (4.3" Google Android 4.0)      Dell Latitude 10 (10.1" Microsoft Windows 8)
Google/LG Nexus 4 (4.7" Google Android 4.2)          Dell XPS 10 (10.1" Microsoft Windows 8)
                                                     Asus Vivo Tab RT (10.1" Microsoft Windows 8)
5"-6" Phone/Tablet Hybrids                           Google/LG Nexus 10 (10.055” Google Android 4.2)
Samsung Galaxy Note II (5.5" Google Android 4.0)
                                                     11"-17" Laptops & Convertibles (Tablet/Laptop)
7"-8" Tablets                                        13" MacBook Pro with Retina (13" Apple OSX 10.8)
iPad Mini (7.9" Apple iOS 6.0)                       Lenovo IdeaPad Yoga 13 (13.3" Microsoft Windows 8)
Kindle Fire HD (7" Google Android 4.0 modified)      Lenovo ThinkPad Twist (12.5" Microsoft Windows 8)
Kindle Fire (7" Google Android 4.0 modified)         Toshiba Satellite U925T (12.5" Microsoft Windows 8)
Google/LG Nexus 7 (7" Google Android 4.2)            Dell XPS 12 (12.5" Microsoft Windows 8)
                                                     Lenovo IdeaTab Lynx (11.6" Microsoft Windows 8)
20"-30" Desktops                                     Samsung ATIV Smart PC 500T/700T (11.6" Microsoft Windows 8)
Sony Tap 20 (20" touch screen Microsoft Windows 8)   Acer Iconia W700 (11.6" Microsoft Windows 8)
21.5-inch iMac (21.5" Apple OSX 10.8)                Sony Vaio Duo 11 (11.6" Microsoft Windows 8)
27-inch iMac (27" Apple OSX 10.8)                    Samsung Chromebook (11.6" Google Chrome OS)


                                                                            http://www.lukew.com/ff/entry.asp?1646
“   It is the nature of the web to be
    flexible, and it should be our role
    as designers and developers to
    embrace this.
                                  – John Allsopp




                           http://www.alistapart.com/articles/dao/
What Is RWD?
★   Fluid Grids
★   Flexible Images
★   Media Queries




                      http://www.macrojuice.com/multimedia/responsive-web-design/
bradfrostweb.com
CSS3 Media Queries
Media Queries in HTML
Breakpoints
★   basic.css
★   480.css
★   600.css (Tablets Portrait)
★   768.css
★   992.css (Desktop)
Make It Work
 In Your HTML Code



 In Your CSS Code
Browser Support




                  http://caniuse.com/#feat=css-mediaqueries
Resources




            www.abookapart.com
“   Responsive design is not about
    mobile. It's not about tablets. It's
    not about desktops. It's about
    The Web.
                       – Jeremy Keith (@adactio)
http://www.flickr.com/photos/58534808@N00/323527111/
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Concept
★   Responsive Design or Website + App?
★   Requirements
★   Usability und Performance
★   Project Start: October 2011
Experimental Client
             +
     Established Trust
             =
Happy Designer & Developer :)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
“   By 2013, mobile phones will
    overtake PCs as the most
    common Web access device
    worldwide.
                        – Gartner (13.01.2010)
Mobile Access
★   2010: ~3.300 (ca. 2,5%)
★   2011: ~8.800 (ca. 6%)
★   2012: ??
Content Strategy
★   Content First!
★   Simplify Structure, What’s Needed?
★   Design With Final Content
Designing In The Browser
★   Quick results & real testing
★   Use advantages of HTML5/CSS3
★   Prototyping extremely fast
★   Easy Changes (Colors, Fontsize, etc.)
★   Decide right in the browser
“   Using photoshop/fireworks for
    responsive design is like bringing
    a knife to a gunfight.

                      – Andy Clarke (@malarkey)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
The Common Workflow
                                                                         Content
                                                                         Strategy


Planning
  And
Strategy

             User
           Research                                                       Copy


                             Wireframes

                                                    Visual
                      Lorem Ipsum                   Design

                                                                           Dev
                                          Lorem Ipsum

                                                                                               Test




                                          Pon Kattera (@pkattera) - Design Process in the Responsive Age
The RWD Process
User          Content                              Iterative Design & Development             Prototype Handover
Planner, UX   Planner, UX, Visual, Tech            UX, Visual, Tech                           UX, Visual Tech




                                                        Test


                                                                        Prototype


    User        Content
                                          Sketch                                                     RWD
  Research      Strategy
                                                                                                   Prototype

                                                                       Visual
                                                                       Design
                                                   Wireframe




                                                    Pon Kattera (@pkattera) - Design Process in the Responsive Age
Frameworks
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Foundation
★   Responsive Grid
★   Navigation & Form Elements
★   Tabs, Buttons, Alerts, Labels, Tooltips
★   Since Foundation 3: Sass/Compass
Prototypes & Design
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
The Waterfall Process
                                                                         Content
                                                                         Strategy


Planning
  And
Strategy

             User
           Research                                                       Copy


                             Wireframes

                                                    Visual
                      Lorem Ipsum                   Design

                                                                           Dev
                                          Lorem Ipsum

                                                                                               Test




                                          Pon Kattera (@pkattera) - Design Process in the Responsive Age
The RWD Process
User          Content                              Iterative Design & Development             Prototype Handover
Planner, UX   Planner, UX, Visual, Tech            UX, Visual, Tech                           UX, Visual, Tech




                                                        Test


                                                                        Prototype


    User        Content
                                          Sketch                                                     RWD
  Research      Strategy
                                                                                                   Prototype

                                                                       Visual
                                                                       Design
                                                   Wireframe




                                                    Pon Kattera (@pkattera) - Design Process in the Responsive Age
Frontend
★   Rebuild Prototype?
★   Produce valid & clean code
★   Build Modules not pages
★   Create re-usable Code
Into The Unknown
★   Display Size & Resolution
★   Different Browsers & -versions
★   Different Device Capabilities
★   Connection Speed, Bandwidth
A Website doesn’t have to look
 exactly the same on different
            devices!
Navigating The Site
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Navigation for Mobile
Building Modules
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
www.flickr.com/photos/brad_frost/7387823392
Open Device Labs




                   opendevicelab.com
Open Device Labs




                   opendevicelab.hk
RWD Considerations
Responsive Images
★   Avoid unnecessary data
★   Same images for all devices
★   When to use Retina images?
★   <img> Tag isn’t ready yet
★   Polyfills = Just a workaround
http://responsiveimagescg.github.com/picture-element/
http://responsiveimages.org/
The Picture Element
Server Side Image
Processing - RESS
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Alternatives




           http://css-tricks.com/which-responsive-images-solution-should-you-use/
Conclusions
Lessons Learned
★   Do not rush, set timing generously
    (Content Strategy, RWD, Frontend, CMS)
★   Mobile First - Content First Design
Seperate Layout & Design




                     http://styletil.es/
Lessons Learned
★   Do not rush, set timing generously
    (Content Strategy, RWD, Frontend, CMS)
★   Mobile First - Content First Design
★   Separate Layout & Design
★   Use LESS/Sass & Compass
Important to Remember
★   Test early and often
★   Put your JavaScript at the bottom
Cost & Benefits
The Last 3 Years
  Year     2010     2011     2012



 Mobile    3.300    9.000    20.400

  (%)      (2,5%)   (6%)     (14%)



 Jul-Aug   1.900    4.500    12.500

  (%)      (3,5%)   (7.5%)   (18%)
The fact is that responsive web design
costs more… than doing nothing. Sure, you
could continue building sites the old
fashioned way and ignore the multitude of
web-enabled devices accessing the web
now and in the future. But this is 2012. At
the very least a web experience should
have at least some mobile consideration,
and at the very most a site should be full-
on mobile optimized.
             http://bradfrostweb.com/blog/web/how-much-does-a-responsive-web-design-cost/
“   If you want to be relevant on the
    web today, your website must
    adapt and perform on all the
    devices that use the web.
                                – Mobify
Thank You.


 Holger Bartel
  @foobartel
h@foobartel.com

Credits: @beckenhaub

Más contenido relacionado

La actualidad más candente

Creating mobile apps without native code
Creating mobile apps without native codeCreating mobile apps without native code
Creating mobile apps without native codeJoakim Kemeny
 
Mobile Interaction Design - 行動世界裡的互動設計之 7 言心旅
Mobile Interaction Design - 行動世界裡的互動設計之 7 言心旅Mobile Interaction Design - 行動世界裡的互動設計之 7 言心旅
Mobile Interaction Design - 行動世界裡的互動設計之 7 言心旅Aidan Wu
 
The Laws of User Experience: Making it or breaking it with the UX Factor
The Laws of User Experience: Making it or breaking it with the UX FactorThe Laws of User Experience: Making it or breaking it with the UX Factor
The Laws of User Experience: Making it or breaking it with the UX FactorEffectiveUI
 
Google Developer Day: State of Ajax
Google Developer Day: State of AjaxGoogle Developer Day: State of Ajax
Google Developer Day: State of Ajaxdion
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Chris Love
 
CSS3 Media Queries And Creating Adaptive Layouts
CSS3 Media Queries And Creating Adaptive LayoutsCSS3 Media Queries And Creating Adaptive Layouts
CSS3 Media Queries And Creating Adaptive LayoutsSvitlana Ivanytska
 
Using Edge Animate to Create a Reusable Component Set
Using Edge Animate to Create a Reusable Component SetUsing Edge Animate to Create a Reusable Component Set
Using Edge Animate to Create a Reusable Component SetJoseph Labrecque
 
Cm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learnCm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learnCritical Mass
 
Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)Andreas Bovens
 
Tools for Entrepreneurs: Create. Collaborate. Communicate.
Tools for Entrepreneurs: Create. Collaborate. Communicate.Tools for Entrepreneurs: Create. Collaborate. Communicate.
Tools for Entrepreneurs: Create. Collaborate. Communicate.Sara Rosso
 
Oscar alert for wearables - Moto 360 & Apple Watch
Oscar alert for wearables - Moto 360 & Apple WatchOscar alert for wearables - Moto 360 & Apple Watch
Oscar alert for wearables - Moto 360 & Apple WatchCarolyn Jao
 

La actualidad más candente (12)

Creating mobile apps without native code
Creating mobile apps without native codeCreating mobile apps without native code
Creating mobile apps without native code
 
Mobile Interaction Design - 行動世界裡的互動設計之 7 言心旅
Mobile Interaction Design - 行動世界裡的互動設計之 7 言心旅Mobile Interaction Design - 行動世界裡的互動設計之 7 言心旅
Mobile Interaction Design - 行動世界裡的互動設計之 7 言心旅
 
The Laws of User Experience: Making it or breaking it with the UX Factor
The Laws of User Experience: Making it or breaking it with the UX FactorThe Laws of User Experience: Making it or breaking it with the UX Factor
The Laws of User Experience: Making it or breaking it with the UX Factor
 
Google Developer Day: State of Ajax
Google Developer Day: State of AjaxGoogle Developer Day: State of Ajax
Google Developer Day: State of Ajax
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
 
CSS3 Media Queries And Creating Adaptive Layouts
CSS3 Media Queries And Creating Adaptive LayoutsCSS3 Media Queries And Creating Adaptive Layouts
CSS3 Media Queries And Creating Adaptive Layouts
 
Using Edge Animate to Create a Reusable Component Set
Using Edge Animate to Create a Reusable Component SetUsing Edge Animate to Create a Reusable Component Set
Using Edge Animate to Create a Reusable Component Set
 
Cm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learnCm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learn
 
Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)
 
Tools for Entrepreneurs: Create. Collaborate. Communicate.
Tools for Entrepreneurs: Create. Collaborate. Communicate.Tools for Entrepreneurs: Create. Collaborate. Communicate.
Tools for Entrepreneurs: Create. Collaborate. Communicate.
 
Oscar alert for wearables - Moto 360 & Apple Watch
Oscar alert for wearables - Moto 360 & Apple WatchOscar alert for wearables - Moto 360 & Apple Watch
Oscar alert for wearables - Moto 360 & Apple Watch
 
iAxil Lunch Talk - Lean UX
iAxil Lunch Talk - Lean UXiAxil Lunch Talk - Lean UX
iAxil Lunch Talk - Lean UX
 

Destacado

Neuro Web Design: What makes them click
Neuro Web Design: What makes them clickNeuro Web Design: What makes them click
Neuro Web Design: What makes them clickSusan Weinschenk
 
The Ultimate Guide to Font Pairing
The Ultimate Guide to Font PairingThe Ultimate Guide to Font Pairing
The Ultimate Guide to Font PairingGuy Kawasaki
 
Designing for a Better User Experience
Designing for a Better User ExperienceDesigning for a Better User Experience
Designing for a Better User ExperienceBuiltByHQ
 
Wireframes for WordPress
Wireframes for WordPressWireframes for WordPress
Wireframes for WordPressJohn Housholder
 
Typography in Web Design (WordCamp Toronto 2014)
Typography in Web Design (WordCamp Toronto 2014)Typography in Web Design (WordCamp Toronto 2014)
Typography in Web Design (WordCamp Toronto 2014)Jasmine Vesque
 
An introduction to Usability
An introduction to UsabilityAn introduction to Usability
An introduction to UsabilityErlend Debast
 

Destacado (7)

Neuro Web Design: What makes them click
Neuro Web Design: What makes them clickNeuro Web Design: What makes them click
Neuro Web Design: What makes them click
 
The Ultimate Guide to Font Pairing
The Ultimate Guide to Font PairingThe Ultimate Guide to Font Pairing
The Ultimate Guide to Font Pairing
 
Designing for a Better User Experience
Designing for a Better User ExperienceDesigning for a Better User Experience
Designing for a Better User Experience
 
Wireframes for WordPress
Wireframes for WordPressWireframes for WordPress
Wireframes for WordPress
 
Typography in Web Design (WordCamp Toronto 2014)
Typography in Web Design (WordCamp Toronto 2014)Typography in Web Design (WordCamp Toronto 2014)
Typography in Web Design (WordCamp Toronto 2014)
 
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
 
An introduction to Usability
An introduction to UsabilityAn introduction to Usability
An introduction to Usability
 

Similar a Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)

A Pragmatic View of UX Driven Development
A Pragmatic View of UX Driven DevelopmentA Pragmatic View of UX Driven Development
A Pragmatic View of UX Driven DevelopmentAkshay Luther
 
Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypestec
 
Prototyping for responsive web design
Prototyping for responsive web design Prototyping for responsive web design
Prototyping for responsive web design mrscammels
 
How content strategy fits into the user experience
How content strategy fits into the user experienceHow content strategy fits into the user experience
How content strategy fits into the user experienceNick Finck
 
Application Prototyping - Pablo González - Capturing and Managing Requirements
Application Prototyping - Pablo González - Capturing and Managing RequirementsApplication Prototyping - Pablo González - Capturing and Managing Requirements
Application Prototyping - Pablo González - Capturing and Managing RequirementsVisure Solutions
 
Mobile Design at Gilt
Mobile Design at GiltMobile Design at Gilt
Mobile Design at GiltDavid Park
 
2022 COMP4010 Lecture 6: Designing AR Systems
2022 COMP4010 Lecture 6: Designing AR Systems2022 COMP4010 Lecture 6: Designing AR Systems
2022 COMP4010 Lecture 6: Designing AR SystemsMark Billinghurst
 
baidu开发者大会 - Web App开发框架介绍以及分析
baidu开发者大会 - Web App开发框架介绍以及分析baidu开发者大会 - Web App开发框架介绍以及分析
baidu开发者大会 - Web App开发框架介绍以及分析joylite
 
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipClass 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipallanchao
 
Project Outline v0.1
Project Outline v0.1Project Outline v0.1
Project Outline v0.1John Goode
 
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web SimulatorOSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web SimulatorGail Frederick
 
Latest trends in information technology
Latest trends in information technologyLatest trends in information technology
Latest trends in information technologyEldos Kuriakose
 

Similar a Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) (20)

A Pragmatic View of UX Driven Development
A Pragmatic View of UX Driven DevelopmentA Pragmatic View of UX Driven Development
A Pragmatic View of UX Driven Development
 
Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypes
 
Resume
ResumeResume
Resume
 
Prototyping for responsive web design
Prototyping for responsive web design Prototyping for responsive web design
Prototyping for responsive web design
 
Dominion over domains
Dominion over domainsDominion over domains
Dominion over domains
 
How content strategy fits into the user experience
How content strategy fits into the user experienceHow content strategy fits into the user experience
How content strategy fits into the user experience
 
Application Prototyping - Pablo González - Capturing and Managing Requirements
Application Prototyping - Pablo González - Capturing and Managing RequirementsApplication Prototyping - Pablo González - Capturing and Managing Requirements
Application Prototyping - Pablo González - Capturing and Managing Requirements
 
Mobile Design at Gilt
Mobile Design at GiltMobile Design at Gilt
Mobile Design at Gilt
 
BhagyaRaj S
BhagyaRaj SBhagyaRaj S
BhagyaRaj S
 
2022 COMP4010 Lecture 6: Designing AR Systems
2022 COMP4010 Lecture 6: Designing AR Systems2022 COMP4010 Lecture 6: Designing AR Systems
2022 COMP4010 Lecture 6: Designing AR Systems
 
Ncku
NckuNcku
Ncku
 
portpholio
portpholioportpholio
portpholio
 
Windows 8 design 101
Windows 8 design 101Windows 8 design 101
Windows 8 design 101
 
baidu开发者大会 - Web App开发框架介绍以及分析
baidu开发者大会 - Web App开发框架介绍以及分析baidu开发者大会 - Web App开发框架介绍以及分析
baidu开发者大会 - Web App开发框架介绍以及分析
 
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipClass 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
 
Project Outline v0.1
Project Outline v0.1Project Outline v0.1
Project Outline v0.1
 
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web SimulatorOSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
 
Ux design
Ux designUx design
Ux design
 
Latest trends in information technology
Latest trends in information technologyLatest trends in information technology
Latest trends in information technology
 
vitthal shirke resume
vitthal shirke resumevitthal shirke resume
vitthal shirke resume
 

Más de Holger Bartel

The Untold Benefits of Ethical Design - Topconf Tallinn 2018
The Untold Benefits of Ethical Design - Topconf Tallinn 2018The Untold Benefits of Ethical Design - Topconf Tallinn 2018
The Untold Benefits of Ethical Design - Topconf Tallinn 2018Holger Bartel
 
The Untold Benefits of Ethical Design - Coldfront 2018, Copenhagen
The Untold Benefits of Ethical Design - Coldfront 2018, CopenhagenThe Untold Benefits of Ethical Design - Coldfront 2018, Copenhagen
The Untold Benefits of Ethical Design - Coldfront 2018, CopenhagenHolger Bartel
 
The Untold Benefits of Ethical Design - Web Directions Summit 2018, Sydney
The Untold Benefits of Ethical Design - Web Directions Summit 2018, SydneyThe Untold Benefits of Ethical Design - Web Directions Summit 2018, Sydney
The Untold Benefits of Ethical Design - Web Directions Summit 2018, SydneyHolger Bartel
 
Web Performance in the Age of HTTP2 - Topconf Tallinn 2016 - Holger Bartel
Web Performance in the Age of HTTP2 - Topconf Tallinn 2016 - Holger BartelWeb Performance in the Age of HTTP2 - Topconf Tallinn 2016 - Holger Bartel
Web Performance in the Age of HTTP2 - Topconf Tallinn 2016 - Holger BartelHolger Bartel
 
Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...
Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...
Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...Holger Bartel
 
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015Holger Bartel
 
HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks Holger Bartel
 
Front End Tooling and Performance - Codeaholics HK 2015
Front End Tooling and Performance - Codeaholics HK 2015Front End Tooling and Performance - Codeaholics HK 2015
Front End Tooling and Performance - Codeaholics HK 2015Holger Bartel
 
Building Better Responsive Websites
Building Better Responsive WebsitesBuilding Better Responsive Websites
Building Better Responsive WebsitesHolger Bartel
 
Front End Best Practices
Front End Best PracticesFront End Best Practices
Front End Best PracticesHolger Bartel
 
180 Degrees East, SmartDevCon 2013, Katowice, Poland
180 Degrees East, SmartDevCon 2013, Katowice, Poland180 Degrees East, SmartDevCon 2013, Katowice, Poland
180 Degrees East, SmartDevCon 2013, Katowice, PolandHolger Bartel
 
180 Degrees East, Webshaped 2013, Helsinki, Finland
180 Degrees East, Webshaped 2013, Helsinki, Finland180 Degrees East, Webshaped 2013, Helsinki, Finland
180 Degrees East, Webshaped 2013, Helsinki, FinlandHolger Bartel
 
180 Degrees East at Front Trends 2013, Warsaw, Poland
180 Degrees East at Front Trends 2013, Warsaw, Poland180 Degrees East at Front Trends 2013, Warsaw, Poland
180 Degrees East at Front Trends 2013, Warsaw, PolandHolger Bartel
 
Open Device Labs for A Better User Experience (Mobilliance, Hong Kong)
Open Device Labs for A Better User Experience (Mobilliance, Hong Kong)Open Device Labs for A Better User Experience (Mobilliance, Hong Kong)
Open Device Labs for A Better User Experience (Mobilliance, Hong Kong)Holger Bartel
 

Más de Holger Bartel (14)

The Untold Benefits of Ethical Design - Topconf Tallinn 2018
The Untold Benefits of Ethical Design - Topconf Tallinn 2018The Untold Benefits of Ethical Design - Topconf Tallinn 2018
The Untold Benefits of Ethical Design - Topconf Tallinn 2018
 
The Untold Benefits of Ethical Design - Coldfront 2018, Copenhagen
The Untold Benefits of Ethical Design - Coldfront 2018, CopenhagenThe Untold Benefits of Ethical Design - Coldfront 2018, Copenhagen
The Untold Benefits of Ethical Design - Coldfront 2018, Copenhagen
 
The Untold Benefits of Ethical Design - Web Directions Summit 2018, Sydney
The Untold Benefits of Ethical Design - Web Directions Summit 2018, SydneyThe Untold Benefits of Ethical Design - Web Directions Summit 2018, Sydney
The Untold Benefits of Ethical Design - Web Directions Summit 2018, Sydney
 
Web Performance in the Age of HTTP2 - Topconf Tallinn 2016 - Holger Bartel
Web Performance in the Age of HTTP2 - Topconf Tallinn 2016 - Holger BartelWeb Performance in the Age of HTTP2 - Topconf Tallinn 2016 - Holger Bartel
Web Performance in the Age of HTTP2 - Topconf Tallinn 2016 - Holger Bartel
 
Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...
Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...
Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...
 
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
 
HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks
 
Front End Tooling and Performance - Codeaholics HK 2015
Front End Tooling and Performance - Codeaholics HK 2015Front End Tooling and Performance - Codeaholics HK 2015
Front End Tooling and Performance - Codeaholics HK 2015
 
Building Better Responsive Websites
Building Better Responsive WebsitesBuilding Better Responsive Websites
Building Better Responsive Websites
 
Front End Best Practices
Front End Best PracticesFront End Best Practices
Front End Best Practices
 
180 Degrees East, SmartDevCon 2013, Katowice, Poland
180 Degrees East, SmartDevCon 2013, Katowice, Poland180 Degrees East, SmartDevCon 2013, Katowice, Poland
180 Degrees East, SmartDevCon 2013, Katowice, Poland
 
180 Degrees East, Webshaped 2013, Helsinki, Finland
180 Degrees East, Webshaped 2013, Helsinki, Finland180 Degrees East, Webshaped 2013, Helsinki, Finland
180 Degrees East, Webshaped 2013, Helsinki, Finland
 
180 Degrees East at Front Trends 2013, Warsaw, Poland
180 Degrees East at Front Trends 2013, Warsaw, Poland180 Degrees East at Front Trends 2013, Warsaw, Poland
180 Degrees East at Front Trends 2013, Warsaw, Poland
 
Open Device Labs for A Better User Experience (Mobilliance, Hong Kong)
Open Device Labs for A Better User Experience (Mobilliance, Hong Kong)Open Device Labs for A Better User Experience (Mobilliance, Hong Kong)
Open Device Labs for A Better User Experience (Mobilliance, Hong Kong)
 

Último

WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Yantram Animation Studio Corporation
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Central-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesCentral-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesmilalabial
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfINTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfphriedaoyigada
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
Materi dasar prototype dan figma .pdf
Materi dasar prototype dan figma    .pdfMateri dasar prototype dan figma    .pdf
Materi dasar prototype dan figma .pdfardanaadam1
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 

Último (20)

WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Central-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesCentral-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposes
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfINTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
Materi dasar prototype dan figma .pdf
Materi dasar prototype dan figma    .pdfMateri dasar prototype dan figma    .pdf
Materi dasar prototype dan figma .pdf
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 

Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)

  • 2. Holger Bartel @foobartel h@foobartel.com
  • 3. Responsive Web Design & Workflows for Today's Web
  • 4. What I’ll Talk About Today ★ A Primer on RWD ★ RWD IRL - A Case Study ★ RWD Workflow ★ Conclusions & Lessons Learned
  • 6. “We don’t need a mobile site”
  • 10. New Devices Since 09/12 4"-5" Smartphones 9"-10" Tablets Apple iPhone 5 (4" Apple iOS 6.0) iPad Gen 4 (9.7" Apple iOS 6.0) Nokia Lumia 920 (4.5" Microsoft Windows 8) Microsoft Surface Tablet (10.6" Microsoft Windows 8) HTC Windows Phone 8X (4.3" Microsoft Windows 8) Kindle Fire HD (8.9" Google Android 4.0 modified) HTC Windows Phone 8S (4.0" Microsoft Windows 8) Lenovo ThinkPad Tablet 2 (10.1" Microsoft Windows 8) Motorola Droid RAZR HD (4.7" Google Android 4.0) Acer Iconia Tab W510 (10.1" Microsoft Windows 8) Motorola Droid RAZR M (4.3" Google Android 4.0) Dell Latitude 10 (10.1" Microsoft Windows 8) Google/LG Nexus 4 (4.7" Google Android 4.2) Dell XPS 10 (10.1" Microsoft Windows 8) Asus Vivo Tab RT (10.1" Microsoft Windows 8) 5"-6" Phone/Tablet Hybrids Google/LG Nexus 10 (10.055” Google Android 4.2) Samsung Galaxy Note II (5.5" Google Android 4.0) 11"-17" Laptops & Convertibles (Tablet/Laptop) 7"-8" Tablets 13" MacBook Pro with Retina (13" Apple OSX 10.8) iPad Mini (7.9" Apple iOS 6.0) Lenovo IdeaPad Yoga 13 (13.3" Microsoft Windows 8) Kindle Fire HD (7" Google Android 4.0 modified) Lenovo ThinkPad Twist (12.5" Microsoft Windows 8) Kindle Fire (7" Google Android 4.0 modified) Toshiba Satellite U925T (12.5" Microsoft Windows 8) Google/LG Nexus 7 (7" Google Android 4.2) Dell XPS 12 (12.5" Microsoft Windows 8) Lenovo IdeaTab Lynx (11.6" Microsoft Windows 8) 20"-30" Desktops Samsung ATIV Smart PC 500T/700T (11.6" Microsoft Windows 8) Sony Tap 20 (20" touch screen Microsoft Windows 8) Acer Iconia W700 (11.6" Microsoft Windows 8) 21.5-inch iMac (21.5" Apple OSX 10.8) Sony Vaio Duo 11 (11.6" Microsoft Windows 8) 27-inch iMac (27" Apple OSX 10.8) Samsung Chromebook (11.6" Google Chrome OS) http://www.lukew.com/ff/entry.asp?1646
  • 11. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this. – John Allsopp http://www.alistapart.com/articles/dao/
  • 12. What Is RWD? ★ Fluid Grids ★ Flexible Images ★ Media Queries http://www.macrojuice.com/multimedia/responsive-web-design/
  • 16. Breakpoints ★ basic.css ★ 480.css ★ 600.css (Tablets Portrait) ★ 768.css ★ 992.css (Desktop)
  • 17. Make It Work In Your HTML Code In Your CSS Code
  • 18. Browser Support http://caniuse.com/#feat=css-mediaqueries
  • 19. Resources www.abookapart.com
  • 20. Responsive design is not about mobile. It's not about tablets. It's not about desktops. It's about The Web. – Jeremy Keith (@adactio)
  • 23. Concept ★ Responsive Design or Website + App? ★ Requirements ★ Usability und Performance ★ Project Start: October 2011
  • 24. Experimental Client + Established Trust = Happy Designer & Developer :)
  • 27. By 2013, mobile phones will overtake PCs as the most common Web access device worldwide. – Gartner (13.01.2010)
  • 28. Mobile Access ★ 2010: ~3.300 (ca. 2,5%) ★ 2011: ~8.800 (ca. 6%) ★ 2012: ??
  • 29. Content Strategy ★ Content First! ★ Simplify Structure, What’s Needed? ★ Design With Final Content
  • 30. Designing In The Browser ★ Quick results & real testing ★ Use advantages of HTML5/CSS3 ★ Prototyping extremely fast ★ Easy Changes (Colors, Fontsize, etc.) ★ Decide right in the browser
  • 31. Using photoshop/fireworks for responsive design is like bringing a knife to a gunfight. – Andy Clarke (@malarkey)
  • 33. The Common Workflow Content Strategy Planning And Strategy User Research Copy Wireframes Visual Lorem Ipsum Design Dev Lorem Ipsum Test Pon Kattera (@pkattera) - Design Process in the Responsive Age
  • 34. The RWD Process User Content Iterative Design & Development Prototype Handover Planner, UX Planner, UX, Visual, Tech UX, Visual, Tech UX, Visual Tech Test Prototype User Content Sketch RWD Research Strategy Prototype Visual Design Wireframe Pon Kattera (@pkattera) - Design Process in the Responsive Age
  • 38. Foundation ★ Responsive Grid ★ Navigation & Form Elements ★ Tabs, Buttons, Alerts, Labels, Tooltips ★ Since Foundation 3: Sass/Compass
  • 53. The Waterfall Process Content Strategy Planning And Strategy User Research Copy Wireframes Visual Lorem Ipsum Design Dev Lorem Ipsum Test Pon Kattera (@pkattera) - Design Process in the Responsive Age
  • 54. The RWD Process User Content Iterative Design & Development Prototype Handover Planner, UX Planner, UX, Visual, Tech UX, Visual, Tech UX, Visual, Tech Test Prototype User Content Sketch RWD Research Strategy Prototype Visual Design Wireframe Pon Kattera (@pkattera) - Design Process in the Responsive Age
  • 55. Frontend ★ Rebuild Prototype? ★ Produce valid & clean code ★ Build Modules not pages ★ Create re-usable Code
  • 56. Into The Unknown ★ Display Size & Resolution ★ Different Browsers & -versions ★ Different Device Capabilities ★ Connection Speed, Bandwidth
  • 57. A Website doesn’t have to look exactly the same on different devices!
  • 67. Open Device Labs opendevicelab.com
  • 68. Open Device Labs opendevicelab.hk
  • 70. Responsive Images ★ Avoid unnecessary data ★ Same images for all devices ★ When to use Retina images? ★ <img> Tag isn’t ready yet ★ Polyfills = Just a workaround
  • 76. Alternatives http://css-tricks.com/which-responsive-images-solution-should-you-use/
  • 78. Lessons Learned ★ Do not rush, set timing generously (Content Strategy, RWD, Frontend, CMS) ★ Mobile First - Content First Design
  • 79. Seperate Layout & Design http://styletil.es/
  • 80. Lessons Learned ★ Do not rush, set timing generously (Content Strategy, RWD, Frontend, CMS) ★ Mobile First - Content First Design ★ Separate Layout & Design ★ Use LESS/Sass & Compass
  • 81. Important to Remember ★ Test early and often ★ Put your JavaScript at the bottom
  • 83. The Last 3 Years Year 2010 2011 2012 Mobile 3.300 9.000 20.400 (%) (2,5%) (6%) (14%) Jul-Aug 1.900 4.500 12.500 (%) (3,5%) (7.5%) (18%)
  • 84. The fact is that responsive web design costs more… than doing nothing. Sure, you could continue building sites the old fashioned way and ignore the multitude of web-enabled devices accessing the web now and in the future. But this is 2012. At the very least a web experience should have at least some mobile consideration, and at the very most a site should be full- on mobile optimized. http://bradfrostweb.com/blog/web/how-much-does-a-responsive-web-design-cost/
  • 85. If you want to be relevant on the web today, your website must adapt and perform on all the devices that use the web. – Mobify
  • 86. Thank You. Holger Bartel @foobartel h@foobartel.com Credits: @beckenhaub