Transcript Progressive Enchantment Slide Deck (PPT 8 MB)

Progressive Enhancement:
Crafting a Responsive Redesign
#14NTCThink
Karin Tracy; Daniel Ferro; Sean Powell
INTRODUCTIONS
Who We Are
Introductions
Happy Saturday!
Karin Tracy; VP, Creative Services – Confluence
Daniel Ferro; Sr. Interactive Designer – Forum One
Sean Powell; Director– The Engage Group (TEG)
@ConfluenceCorp
@DFerroF1
@SeanPowell
Progressive Enhancement: #14NTCThink
Slide 2
Introductions - Confluence
Confluence is a technology planning and web design
/development company created to serve nonprofit
organizations and foundations. We have 4 areas of service:
1
Technology planning
and consulting
3
Open source CMS / CRM;
Salesforce partner
2
Graphic and web
design
4
Open source support
and maintenance
Progressive Enhancement: #14NTCThink
Slide 3
Introductions – Forum One
Forum One is a digital communications firm focused on
driving progress on issues of importance such as health,
education, the environment, and international development.
Service offerings include:
1
Internet strategy
3
Branding
2
Interactive Design for
Web and Mobile
4
Accessibility and
usability engineering
Progressive Enhancement: #14NTCThink
Slide 4
Introductions – The Engage Group
The Engage Group manages all production phases of online
communication, marketing, and fundraising for nonprofits and the
agencies that serve them.
1
Responsive web design
and development
3
CRM and CMS Migrations
2
Online campaign
management
4
Application development
Progressive Enhancement: #14NTCThink
Slide 5
Show of Hands
1. Heard of responsive design?
2. Considering responsive design?
3. Actively planning responsive?
4. Already have responsive in place?
Progressive Enhancement: #14NTCThink
Slide 6
RESPONSIVE DESIGN
In Four Slides!
Quick Overview of Responsive Design
“a web design approach aimed at crafting sites to provide an
optimal viewing experience—easy reading and navigation
with a minimum of resizing, panning, and scrolling—across a
wide range of devices (from desktop computers to mobile
phones).”
Ethan Marcotte
Coined term responsive
A List Apart, 2010
Progressive Enhancement: #14NTCThink
Slide 8
Summary
Responsive Design is basically
1. One site to rule them all
Responsive Design is not
1. Separate mobile site
2. Simply being visible on a mobile device
Progressive Enhancement: #14NTCThink
Slide 9
2013: The Year of Responsive Design
“For those of us who create websites and services, all of this
leads to a singular conclusion: A million screens have
bloomed, and we need to build for all of them.”
Pete Cashmore
Founder/CEO - Mashable
Progressive Enhancement: #14NTCThink
Slide 10
And 2014?
Mobile users will
surpass desktop
users in 2014.
This is the year to
redevelop websites
using responsive
design principles.
Progressive Enhancement: #14NTCThink
Slide 11
RESPONSIVE REDESIGN
Guinea pig? NTEN!
Current NTEN Website - www.nten.org
Desktop/Laptop
Tablet
Progressive Enhancement: #14NTCThink
Phone
Slide 13
What Can Be Improved?
• Site reflects outdated design trends
• Site is a fixed, static width (1,024 pixels wide)
• Was the “lowest common denominator” in
2004/2005 and we have stuck with it
• Most importantly, it’s NOT responsive
• Notice how the visual display is the same on all
three devices
• Fonts and column sizes just don’t make sense
on smaller devices
• No fluidity in column widths/ratio
• Have to zoom in to read, click, search < laptop
or large tablet
Progressive Enhancement: #14NTCThink
Slide 14
What Can Be Improved?, cont.
• Content never changes based on device size
• Content decisions for one size might not be
appropriate for all sizes / bandwidth
• Responsive allows you to show/hide content
based on device width
• “Finger-friendly” decisions haven’t been made
• Buttons, search field, links
Progressive Enhancement: #14NTCThink
Slide 15
Responsive Design, Step-by-Step
• Design discovery phase
• Understanding audience members
• Reviewing Google Analytics
• Creation of user personas
• Functional Requirements
• Content plan / Information Architecture
• Prototyping / Wireframes
• User interface design
• HTML / CSS development
Progressive Enhancement: #14NTCThink
Slide 16
Prototyping / Wireframes
• Determining breakpoints (3, 4?)
• Planning content for each breakpoint
• May decide that phone-sized breakpoints should
display less content, for example
• Consider types of wireframes
• Low fidelity (paper sketches)
• High fidelity (static, electronic)
• Code-based prototype (HTML, CSS – can be
based on an existing framework)
• Wireframe, then test! Gather actual users for
feedback
Progressive Enhancement: #14NTCThink
Slide 17
Low Fidelity Wireframes
Progressive Enhancement: #14NTCThink
Slide 18
High Fidelity Wireframes
Progressive Enhancement: #14NTCThink
Slide 19
High Fidelity Wireframes
Progressive Enhancement: #14NTCThink
Slide 20
Code-based Wireframes
bit.ly/1gMcnGq
Progressive Enhancement: #14NTCThink
Slide 21
Wireframing - Tools
• Low Fidelity Sketch Templates
• App Sketchbook (bit.ly/1pSiBee) – paper
notepads with different breakpoints
• SneakPeek (sneakpeekit.com) – ready to print
templates
• High Fidelity Templates
• Illustrator templates by Rubber Cheese
(bit.ly/1g3Op7T)
• Guide creator (plugin) for Photoshop
(www.guideguide.me)
• Great article by Smashing Magazine about
wireframing within InDesign (bit.ly/1eJF494)
Progressive Enhancement: #14NTCThink
Slide 22
Wireframing - Tools, cont.
• Wireframe in the browser
• Bootstrap (getbootstrap.com)
• UX Pin (uxpin.com)
• Adobe Edge Reflow (part of Adobe Creative
Cloud; html.adobe.com/edge/reflow/)
• Foundation (foundation.zurb.com)
• Wirefy (getwirefy.com)
• Jetstrap (jetstrap.com)
• Balsalmiq (www.balsamiq.com)
Progressive Enhancement: #14NTCThink
Slide 23
Responsive Design, Step-by-Step
• Design discovery phase
• Understanding audience members
• Reviewing Google Analytics
• Creation of user personas
• Content plan / Information Architecture
• Prototyping / Wireframes
• User interface design
• HTML / CSS development
Progressive Enhancement: #14NTCThink
Slide 24
Design
• Finger-friendly mobile interface elements played a
large part in the interface design decisions of this
redesign
• The “hero” photo is an important factor in the
emotional impact of a homepage and was carefully
selected to tie in with the idea of technology being
leveraged to drive positive social change
• The visual design incorporates many modern web
trends to make it feel current, such as rounded sanserif web fonts
Progressive Enhancement: #14NTCThink
Slide 25
Flat Design
• Less bevels, drop shadows, gradients and realistic
textures in favor of simple shapes and solid color
blocks. Typically incorporates larger fonts as well.
Progressive Enhancement: #14NTCThink
Slide 26
Vertical Design
• Primarily Vertical, single
column design instead of
multiple columns of content
• Is more friendly for mobile
browsing
• Allows more focus on content
blocks. Less distraction by side
“widgets”
• Is more simple. Less content is
being thrown at user at once.
• bit.ly/1iuPBIy
Progressive Enhancement: #14NTCThink
Slide 27
Large Interactive Elements
• Large finger-friendly interactive elements even in
desktop view.
• Makes traditionally boring or frustrating web
elements such as forms, buttons and links seem
more fun and easy to use.
Progressive Enhancement: #14NTCThink
Slide 28
Design - Tools
• Traditionally, web design has primarily been done in
tools such as Photoshop, Fireworks or Illustrator.
• These programs have limitations when it comes to
responsive design: the designs are fixed. The
programs have no simple way of rearranging
elements based on browser width without creating
an entirely new document.
• New tools are emerging that allow designs that
dynamically change as the browser width changes:
• Adobe Edge Reflow:
http://html.adobe.com/edge/reflow
• Macaw: http://macaw.co/
• Webflow: https://webflow.com/
Progressive Enhancement: #14NTCThink
Slide 29
Responsive Design, Step-by-Step
• Design discovery phase
• Understanding audience members
• Reviewing Google Analytics
• Creation of user personas
• Content plan / Information Architecture
• Prototyping / Wireframes
• User interface design
• HTML / CSS development
Progressive Enhancement: #14NTCThink
Slide 30
Development – Getting Started
Picking a framework or not using one at all…
•Be judicious about the framework components that you use
•
•
•
If you are going to use a framework like Foundation or
Bootstrap
Do customize to your specific needs
Don’t load the entire framework
• Avoid the kitchen sink approach
•Or simply assemble the parts you need
• Your favorite grid + CSS helpers + js library
• Reinforces a spartan approach
Progressive Enhancement: #14NTCThink
Slide 31
Development – Responsive Techniques
• Grids/media queries
• There are elevenbilliony grids out there
• Create your own:
http://www.adamkaplan.me/grid/
• Fluid and fixed (ish) width
• Reflow
• Tables
• Handling images on multiple devices
• Srcset
• Picturefill.js
• Imager.js
• Cross browser/fallback support
Progressive Enhancement: #14NTCThink
Slide 32
Development – Hardest parts/keys
• Deciding on breakpoints
• Flow and resizing
• Knowing the ins and outs of viewport, zoom and
reference pixels
• High res/retina displays
• Figuring out proportions
• Target/context = result*
• A way to determine font size or relative size
• 24/16=1.5em
*http://alistapart.com/article/fluidgrids
Progressive Enhancement: #14NTCThink
Slide 33
Development – Diving In
• Mobile first perspective
• Initial framework and implementation testing on
mobile based width browsers and device
simulators (short iterations)
• First breakpoint is a mobile phone width and
move up from there
• Globalize your CSS
• Headers, fonts, colors, etc
• Break the design down into components
• Separating out navigation or the footer into
separate components
• Allows for easier testing and troubleshooting
Progressive Enhancement: #14NTCThink
Slide 34
Development – Workflow Tools
Yeoman = Grunt + Bower + Yo Scaffolding
For this presentation’s project I used the Yeoman Mobile
generator which comes bundled with…
•Live reload, responsive screenshot automation, Browserstack
automation, responsive image generator, minification and image
compression/optimization, jshint, and many more
<2 minute setup time (you’ll need Nodejs/Yeoman installed)
Progressive Enhancement: #14NTCThink
Slide 35
Development – Workflow Tools
Cont.
Step-by-step…
1.“yo mobile”
2.Code some, benefit from live reload, code some
more, benefit some more from live reload
• Across multiple devices simultaneously
3.Negotiate what feels like a multinational peace treaty
across browser and device through Browserstack
4.Create distro
• Minified and compressed: 2.5 mb to 800kb
5.(Non) Profit
Progressive Enhancement: #14NTCThink
Slide 36
Development – Other notes
• Custom fonts took up 80% of page load
• Didn’t test cross browser compatibility
• Positioning, differences in how margin and
padding is applied
• Fallback support for media queries
• Modernizr, respond.js, selectivzr
Progressive Enhancement: #14NTCThink
Slide 37
Development – More Resources
• Brad Frost’s comprehensive collection on Responsive
patterns, resources and news
• http://bradfrost.github.io/this-is-responsive/
• Less
• http://lesscss.org/
• Sass
• http://sass-lang.com/
• Localtunnel – tunnels your local environment to the
web
• http://progrium.com/localtunnel/
Progressive Enhancement: #14NTCThink
Slide 38
Development – Website and Repo
• Website
• http://ntc.teg.me
• Github
• https://github.com/seanpowell/ntc2014
Progressive Enhancement: #14NTCThink
Slide 39
NTEN Website Comparison –
Desktop/Laptop
Current
New
Progressive Enhancement: #14NTCThink
Slide 40
NTEN Website Comparison - Tablet
Current
New
Progressive Enhancement: #14NTCThink
Slide 41
NTEN Website Comparison - Phone
Current
New
Progressive Enhancement: #14NTCThink
Slide 42
QUESTIONS?
Don’t Be Shy
Stay in touch
Karin Tracy
@ConfluenceCorp
Daniel Ferro
@DFerroF1
Sean Powell
@SeanPowell
Progressive Enhancement: #14NTCThink
Slide 44
What did you think?
Evaluate this session!
Or, search by session title at www.nten.org/ntc/eval
When you evaluate a session, you will be entered to win a prize!