responsive web design
TRANSCRIPT
RO
UND
TA B L
E
Welcome Responsive Design Round-Table
Christian Glover WilsonWednesday June 12, 2013 @ 8am to 10am
RO
UND
TA B L
E
Responsive Design Round-Table
Welcome and Overview
What is Responsive Web Design?
! Topic 1 - RWD and The User Continuum
Topic 2 - Mobile Web vs RWD vs App
Q&A
Agenda
RO
UND
TA B L
E
Fragmented LandscapeResponsive Design Round-Table
RO
UND
TA B L
E
Device WidthsResponsive Design Round-Table
RO
UND
TA B L
E
What is it?Responsive Design Round-Table
Wha! i" responsiv# desig$?Wha! i" desig$?
responsiv#
RO
UND
TA B L
E
Design and development that responds to the user’s behavior and environment based on screen size, platform and orientation.
!
The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.
What is Responsive Web Design?Responsive Design Round-Table
Wha! i" responsiv# desig$?Wha! i" desig$?
responsiv#
RO
UND
TA B L
E
Origins of Responsive Web DesignResponsive Design Round-Table
• a.k.a. Responsive / Responsive Design / RWD • Coined by Ethan Marcotte in 2010 !
• Adapts the usable layout of a website to a device’s screen width/resolution • Is a web design methodology made achievable by the use of CSS3 • Works universally on any modern browser-enabled device
Wha! i" responsiv# desig$?Wha! i" desig$?
responsiv#
RO
UND
TA B L
E
Media QueriesResponsive Design Round-Table
320px768px
1024px 1280px1920px
SMARTPHONE TABLET NETBOOK MONITOR DISPLAY
Wha! i" responsiv# desig$?Wha! i" desig$?
responsiv#
RO
UND
TA B L
E
Fluid GridsResponsive Design Round-Table
Header
A
B
C
Header
A
D
F
B
E
G
C
H
Header
A
I
B
J
E
Header
C
F
H
D
G
K
320px 1024px +768px
Wha! i" responsiv# desig$?Wha! i" desig$?
responsiv#
RO
UND
TA B L
E
Flexible MediaResponsive Design Round-Table
320px 1024px +768px
Aa Bb CcAa Bb CcAa Bb Cc
76kb
200kb
1.4MB
Wha! i" responsiv# desig$?Wha! i" desig$?
responsiv#
RO
UND
TA B L
E
Let’s have a playResponsive Design Round-Table
Using http://quirktools.com/screenfly
Look for: • Dynamic changes in image and text size • Different images for different views !• Search bar moving around • Change in navigation shape / structure / position • Text changes to menu items or key elements !• Simplification of content on the page • Content moving down the page or disappearing altogether
Wha! i" responsiv# desig$?Wha! i" desig$?
responsiv#
RO
UND
TA B L
E
Responsive Design Round-Table
Topic 1 Responsive Web and the User Continuum
RO
UND
TA B L
E
Multi-screeningResponsive Design Round-Table
Source: http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
90% use multiple screens sequentially to accomplish a task
22% use multiple screens to complement a task
78% use multiple screens when multi-tasking
RO
UND
TA B L
E
Mobile ContextResponsive Design Round-Table
Contextual Influences
User’s Considerations
Device Capability
RO
UND
TA B L
E
User Sentiments / Archetypes / PersonasResponsive Design Round-Table
RO
UND
TA B L
E
Responsive Design Round-Table
RO
UND
TA B L
E
Responsive Design Round-Table
RO
UND
TA B L
E
Responsive Design Round-Table
Topic 2 Mobile Web vs RWD vs Native App !!!
+
RO
UND
TA B L
E
Mobile Web vs RWD vs Native AppResponsive Design Round-Table
Does the experience need to work in no data connection situations?
Does the experience require intense graphical rendering?
Does the experience require access to device functionality?
Will users download in order to engage/consume?
Is the experience for task focussed utility or information consumption?
Is the experience intended for enterprise users or consumers?
Are users looking for simultaneous or sequential experience?
Does the project have an imminent deadline/budget?
Does the experience need to work on any/every platform/device?
+
RO
UND
TA B L
E
The ProsResponsive Design Round-Table
Single Code Base
SEO Advantage App-store agnostic
Device Agnostic
Future Proofing
Multi-Device Experience Progressive Workflow Fast, easy updates
Universal Code Base
+
+
RO
UND
TA B L
E
The ConsResponsive Design Round-Table
Longer development cycle Longer User Testing Slow performance depending on UI/UX/IA
Content requires ongoing focusOften requires front-end rebuild Thorough learning curve
+
RO
UND
TA B L
E
Responsive Design Round-Table
Topic 3 Mobile First and Progressive Enhancement
RO
UND
TA B L
E
Overview of mobile design methodologiesResponsive Design Round-Table
Adaptive Web
Progressive Enhancement
Mobile First
Responsive Web Design
Adaptive Web The big picture of ‘one web’ !Progressive Enhancement Being mindful of technical accessibility !Mobile First Being mindful of context and device functions !Responsive Web Design The flexible layout and design methodology
RO
UND
TA B L
E
Progressive EnhancementResponsive Design Round-Table
“Progressive enhancement isn’t about browsers. It’s about crafting experiences that serve your users by giving them access to content without technological restrictions.”
— Aaron Gustafson, Adaptive Web Design
Image source: http://www.laternastudio.com/blog/progressive-enhancement-in-2012
RO
UND
TA B L
E
Mobile FirstResponsive Design Round-Table
Prioritize content aggressively !!!Use the device’s native capabilities !!!Re-think forms and embrace input types !!!Natural User Interface (NUI) is primal !!!Respect the data connection
Navigation styles must not obscure content !!!Conditional and Lazy Loading for secondary content !!!Use typography and font-size for readability !!!Use Scalable Vector Graphics (SVGs) and Font Icons !!!Load speed matters - reduce HTTP requests.
— — —
RO
UND
TA B L
E
Responsive Design Round-Table
Topic 4 Planning a responsive website
Mobile First = Progressive Enhancement !!!Determine Sequential vs Simultaneous Usage !!!Determine Content Context (location, date, time) !!!Display Advertising Strategy
RO
UND
TA B L
E
Content Strategy ConsiderationsResponsive Design Round-Table
— — — Content Management (role, platform, integration) !!!User Generated Content vs Brand !!!Determine Content Types and Quantity !!!Determine Update Frequency !
RO
UND
TA B L
E
Mobile FirstResponsive Design Round-Table
Design with mobile-first, progressive enhancement mindset !!Create a pattern and styles library !!Use Scalable Vector Graphics (SVGs) !!Use high-res images (retina display) and scale them with services like sencha.io !!No hover state challenge !!Still gotta give love to IE6 AlphaImageLoader and max-width issues
Use typography and font-icons !!Use Minify to compact and gZip to compress HTML/CSS/JavaScript file sizes !!Don’t go overboard with CSS effects !!Use a responsive CSS framework like Zurb or Bootstrap for speed !!Minimize the initial loading time • Try to use external js and CSS files • Use lazy loading and conditional loading !!It’s an agile team sport - not true waterfall Get development and content team involved early
RO
UND
TA B L
E
Getting StartedResponsive Design Round-Table
Step 1 Build a responsive project team
• UI/UX Designer • IA Architect / Content Strategist • Front-End Developer • Stakeholder !
Productivity Tip • Keep it lean and agile • Start together, finish together
Step 2 Research real use cases
• Create personas/archetypes • Create workflows and user journeys • Validate with data - not just hunches • Identify real behaviors and usage patterns !
Productivity Tip • Rapid prototype to test internally • Follow Mobile-First (Progressive Enhancement)
Step 4 First prototype
• Dev/UI/UX to lo-fi wireframe first draft • Agree to a grid system prior to wire-framing • Be ruthless with navigation and functionality • Perform regular design feedback loops !
Productivity Tip • Use tools to live preview wire-frames in device frames • Design with modularity and style guides/style tiles
Step 3 Create a robust content strategy
• Apply mobile-first thinking for focus • Apply usage insights to content creation • Assign strict deadlines for key content • Ensure devs are clear about the strategy !
Productivity Tip • Set realistic content deliverables • Workshop to discuss content consumption
RO
UND
TA B L
E
Getting StartedResponsive Design Round-Table
RO
UND
TA B L
E
SupplementaryResponsive Design Round-Table
Supplementary
RO
UND
TA B L
E
Useful ResourcesResponsive Design Round-Table
!!!!!
Flexible Grid Standards http://tgrs.pk/u7kjy !Responsive Images Standards http://tgrs.pk/9849p !Using Sencha for image optimization http://tgrs.pk/so2ho !Content Handling http://tgrs.pk/p8iui !Responsive CMS http://modx.com/ http://wordpress.com !Performance Best Practices http://tgrs.pk/7pya9 !Examples of great responsive designs http://mediaqueri.es
Adaptive Content Management http://tgrs.pk/3gkod !Thought Leadership http://tgrs.pk/tst71 http://tgrs.pk/sjsqn http://tgrs.pk/kfs07 !Tigerspike Live Example http://www.careconnectivity.org !Test a responsive design http://tgrs.pk/4cyx7 http://tgrs.pk/96u9l !Modularity and Style Guides http://tgrs.pk/4jfqe !Style Tileshttp://styletil.es/ !
Great video by Brad Frost!Anatomy of an Adaptive Web Experience http://tgrs.pk/5j514
RO
UND
TA B L
E
Upcoming EventsResponsive Design Round-Table
New York Thursday July 25th, 2013 8am to 10am EST!
Cyber security and Mobility Round-Table Rise of Mobility Proliferation of Personal Technology and Enterprise Mobility
The Internet of Things Dealing with a network of IP-enabled components and appliances !Understanding the Threats Prepare for threats to the device, the network and accidental losses!Securing Communication Encryption and unsecured networks!Addressing the Problem Protecting the device and best practice around BYOD
RO
UND
TA B L
E
Americas133 W 19th Street7th FloorNew York NY 10011+1 646 330 [email protected]
EMEALevel G, 1 & 318 Buckingham GateLondon SW1E 6LB+44 20 7148 [email protected]
Asia PacificLevel 1 28 Richards Avenue, Surry Hills Sydney NSW 2010+61 2 9361 [email protected]
Alex Hall, [email protected] | +1 646 388 0036 !
Christian Glover Wilson, VP of Technology & [email protected] | +1 917 310 5249
Contact InformationResponsive Design Round-Table