Responsive Design Workflow
 

Responsive Design Workflow

on

  • 1,007 views

In this presentation, Intergen's Mark Delaney (Interactive Designer, Portals and Content) talks about mobile content strategy, context, device experience and gives advice on how to start your journey ...

In this presentation, Intergen's Mark Delaney (Interactive Designer, Portals and Content) talks about mobile content strategy, context, device experience and gives advice on how to start your journey on creating a responsive website.

Statistics

Views

Total Views
1,007
Views on SlideShare
731
Embed Views
276

Actions

Likes
8
Downloads
22
Comments
1

5 Embeds 276

http://www.intergen.co.nz 124
https://www.behance.net 77
http://www.behance.net 48
http://intergen-prod.preview.intergen.net.nz 17
http://www.intergen.com.au 10

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Thanks for the Like!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive Design Workflow Responsive Design Workflow Presentation Transcript

  • _MOBILE UX RESPONSIVE DESIGN WORKFLOW (SO FAR) Mark Delaney Experience Designer
  • Responsive Design Workflow (so far) Device Diversity Responsive Web Design A Revised Workflow Content Strategy
  • _MOBILE UX DESIGN FOR DEVICE DIVERSITY
  • ZOMBIE APOCALYPSE OF MOBILE DEVICES Source: www.flickr.com/photos/digitalsextant/3624030270
  • 4.3” Screen: 4.3” with 960 x 540 & 256 ppi Browser: Chrome for Android (Chrome 18) OS: Google Android 4.0 Motorola Droid RAZR M Responsive Design – A Workflow that Works | 5
  • 4.3” 5.5” Screen: 5.5” with 720 x 1280 & 276 ppi Browser: Android Webkit OS: Google Android 4.1 Motorola Droid RAZR M Samsung Galaxy Note II Responsive Design – A Workflow that Works | 6
  • 4.3” 5.5” 7.9” Screen: 7.9” with 768 x 1024 & 163 ppi Browser: Apple Safari 6 OS: iOS 6 Motorola Droid RAZR M Samsung Galaxy Note II Responsive Design – A Workflow that Works Apple iPad Mini | 7
  • 4.3” 5.5” 7.9” 12.5” Screen: 12.5” with 920 x 1080 & 163 ppi Browser: IE 10 OS: Microsoft Windows 8 RT Motorola Droid RAZR M Samsung Galaxy Note II Responsive Design – A Workflow that Works Apple iPad Mini Dell XPS 12 | 8
  • Close to 40 new devices released from major manufacturers in about a 7 week window
  • SPOT THE TREND Source: www.flickr.com/photos/whiteafrican/2938685296
  • Smart Phone 3.5” iPhone 3GS Responsive Design – A Workflow that Works 4.0” HTC Windows Phone 8S 4.3” 4.5” Motorola Droid RAZR M Nokia Lumina 920 4.7” LG Nexus 4 | 11
  • Notice a trend?
  • Smart Phone 3.5” iPhone 3GS Responsive Design – A Workflow that Works 4.0” HTC Windows Phone 8S 4.3” 4.5” Motorola Droid RAZR M Nokia Lumina 920 4.7” LG Nexus 4 | 13
  • 3.5” Motorola Droid RAZR M 4.5” Nokia Lumina 920 Responsive Design – A Workflow that Works 4.7” 5.3” 5.5” LG Nexus 4 Samsung Galaxy Note Samsung Galaxy Note II | 14
  • “Yeah, nah, I‟ m talking on a book” Responsive Design – A Workflow that Works | 15
  • WHAT ABOUT TABLET DEVICES? Source: www.flickr.com/photos/johanl/4816110696
  • Tablet 9.7” Apple iPad Responsive Design – A Workflow that Works 10.1” Acer Iconia Tab W510 Dell XPS 10 Asus Vivo Tab RT | 17
  • Tablet 7.0” Google Nexus 7 Responsive Design – A Workflow that Works 7.9” Apple iPad Mini 8.9” Kindle Fire HD 9.7” Apple iPad | 18
  • Notice a trend?
  • One Single Continuum Desktop Laptop Tablet Smart Phone 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” Size Continuum Source: LukeW.com Responsive Design – A Workflow that Works | 20
  • iPhone Wrist Responsive Design – A Workflow that Works | 21
  • Smart TV Responsive Design – A Workflow that Works | 22
  • You only need one web design: A multi-device a.k.a responsive design
  • _MOBILE UX RESPONSIVE WEB DESIGN
  • RWD BALANCING ACT Source: www.flickr.com/photos/jordanfischer/63832583
  • Responsive Web Design The 3 core ingredients ■ A flexible, grid-based layout The benefits of creating a liquid layout are becoming too great to ignore Responsive Design – A Workflow that Works | 26
  • Responsive Web Design The FED ingredients ■ A flexible, grid-based layout The benefits of creating a liquid layout are becoming too great to ignore ■ Media queries Allow you to gather data about site visitors and use it to apply the appropriate styles Responsive Design – A Workflow that Works | 27
  • Responsive Web Design The FED ingredients ■ A flexible, grid-based layout The benefits of creating a liquid layout are becoming too great to ignore ■ Media queries Allow you to gather data about site visitors and use it to apply the appropriate styles ■ Flexible images and media Being able to create flexible images is an important consideration when trying to create a flexible layout Responsive Design – A Workflow that Works | 28
  • Responsive Design is not a panacea… Rather a great step in the right direction
  • Mobile is so much more than a small screen Source: www.flickr.com/photos/jurvetson/5201796697
  • _MOBILE UX A MORE FLEXIBLE WORKFLOW
  • TRADITIONAL APPROACH Source: www.flickr.com/photos/jurvetson/5201796697
  • Design Process A typical waterfall approach to task planning Project Kick-off Meeting and User Research IA, Interaction Design and Wireframes High Fidelity Visual UI Designs (PSDs) Front-End Development and Testing Conduct internal and external stakeholder research, establish project goals and design direction. Planning IA and creating wireframes to determine content and layout for key page templates Detailed PSD mock-ups of key page templates to illustrate visual UI design („look and feel) HTML & CSS is created for key templates to be handed over to the development team. Discover Define Responsive Design – A Workflow that Works Design Deliver | 33
  • Designing only pixel perfect mock-ups makes it difficult near impossible to then think responsively —Mark Delaney, Designer
  • AN EMERGING PROCESS Source: www.flickr.com/photos/rhinoneal/6200358032
  • Set better expectations Source: www.flickr.com/photos/carbonnyc/2154870998
  • Lead more productive design conversations Source: www.flickr.com/photos/zenilorac/698514624
  • Increase collaboration Source: www.flickr.com/photos/aon/7184559114
  • Test designs before committing to them Source: www.flickr.com/photos/jcfrog/4692750598
  • Staying lean & collecting feedback often Minimises the time heading down the wrong path
  • Responsive Workflow User Research & Collaborative Sketches Low-fi HTML Prototype Sketches can involve the whole team & can help everyone communicate. HTML & CSS templates can begin as soon as initial wireframes are complete Content Analysis, Modelling & IA Planning content, IA, & templates should occur prior to design details. Discover & Define Define & Design Visual Design & Style Prototype Front-End Development and Testing Style prototyping can begin as soon as consensus forms around content & components allowing for the concurrent, but independent exploration of style. As low fidelity & style prototypes evolve, they can converge into a single higher fidelity prototype ready for testing & final sign-off. Define & Design Define, Design & Deliver Static or Interactive Wireframes Design & Deliver Model key pages, map content & define components & variations. Design & Deliver Responsive Design – A Workflow that Works | 41
  • _MOBILE UX MOBILE CONTENT STRATEGY
  • CONTENT & CONTEXT Source: www.flickr.com/photos/joeshlabotnik/2359224681
  • Adaptive Content ■ Structured content Small chunks of content that adapt to other devices. Responsive Design – A Workflow that Works | 44
  • Adaptive Content ■ Structured content Small chunks of content that adapt to other devices. ■ Presentation-independent content Raw content without formatting. Responsive Design – A Workflow that Works | 45
  • Adaptive Content ■ Structured content Small chunks of content that adapt to other devices. ■ Presentation-independent content Raw content without formatting. ■ Reusable content Content that is used on multiple platforms and in many formats. Responsive Design – A Workflow that Works | 46
  • Adaptive Content ■ Structured content Small chunks of content that adapt to other devices. ■ Presentation-independent content Raw content without formatting. ■ Reusable content Content that is used on multiple platforms and in many formats. ■ Meaningful metadata Data that describes the content for easy interpretation. Responsive Design – A Workflow that Works | 47
  • “Content is like water. You put water into a cup it becomes the cup. You put water into a bottle it becomes the bottle”. Josh Clarke – Seven Deadly Mobile Myths
  • OLD CONTEXT Source: www.flickr.com/photos/joeshlabotnik/2359224681
  • Mobile Stereotypes www.flickr.com/photos/oimax/3800475934
  • New Context www.flickr.com/photos/othree/5224045406
  • New Context www.flickr.com/photos/othree/5224045406
  • Mobile is not the “light” version
  • MOBILE FIRST RESPONSIVE DESIGN www.flickr.com/photos/pete-karl/4637024524
  • Mobile Last Degraded and retro-fitted? Responsive Design – A Workflow that Works | 55
  • Mobile First Progressively enhanced & future-friendly Responsive Design – A Workflow that Works | 56
  • A FEW FINAL THOUGHTS _MOBILE UX
  • THE MOBILE WEB IS DIFFICULT … BUT IT‟S WORTH IT Source: Kathy Slamen Photography
  • Responsive Design Some of the things that we‟ve learnt along the way ■ Challenge traditional processes Responsive Design – A Workflow that Works | 59
  • Responsive Design Some of the things that we‟ve learnt along the way ■ Challenge traditional processes ■ You can’t wing content Responsive Design – A Workflow that Works | 60
  • Responsive Design Some of the things that we‟ve learnt along the way ■ Challenge traditional processes ■ You can’t wing content ■ Optimize for touch Responsive Design – A Workflow that Works | 61
  • Responsive Design Some of the things that we‟ve learnt along the way ■ Challenge traditional processes ■ You can’t wing content ■ Optimize for touch ■ Design for mobile first Responsive Design – A Workflow that Works | 62
  • Where do I start?
  • mobilewebbestpractices.com www.flickr.com/photos/perfectoinsecto/4871175954
  • Develop your mobile strategy… but in the meantime there are some useful things you can do today
  • Step 1 Review your traffic logs and determine what mobile devices are accessing your site today
  • Step 2 Test your site on those devices to determine where the experience breaks down
  • Step 3 Develop an action plan to address common issues – e.g. small touch targets, large images…
  • Let‟s create future friendly experiences www.flickr.com/photos/lorena-s/6285307719
  • It‟s going to be fun. www.flickr.com/photos/othree/5224045406
  • Thank you Email: mark.delaney@intergen.co.nz Mobile: 021 466 027 Twitter: @TeamIntergen