3. Introductions
Happy Saturday!
Karin Tracy; VP, Creative Services – Confluence
Daniel Ferro; Sr. Interactive Designer – Forum One
Sean Powell; Director– The Engage Group (TEG)
Slide 2Progressive Enhancement: #14NTCThink
@ConfluenceCorp @DFerroF1 @SeanPowell
4. 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:
Slide 3Progressive Enhancement: #14NTCThink
1
Technology planning
and consulting
2 Graphic and web
design
3
Open source CMS / CRM;
Salesforce partner
4 Open source support
and maintenance
5. 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:
Slide 4Progressive Enhancement: #14NTCThink
1 Internet strategy
2 Interactive Design for
Web and Mobile
3 Branding
4 Accessibility and
usability engineering
6. 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.
Slide 5Progressive Enhancement: #14NTCThink
1 Responsive web design
and development
2 Online campaign
management
3 CRM and CMS Migrations
4 Application development
7. Show of Hands
Slide 6Progressive Enhancement: #14NTCThink
1. Heard of responsive design?
2. Considering responsive design?
3. Actively planning responsive?
4. Already have responsive in place?
9. 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).”
Slide 8Progressive Enhancement: #14NTCThink
Ethan Marcotte
Coined term responsive
A List Apart, 2010
10. 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
Slide 9Progressive Enhancement: #14NTCThink
11. 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.”
Slide 10Progressive Enhancement: #14NTCThink
Pete Cashmore
Founder/CEO - Mashable
12. And 2014?
Slide 11Progressive Enhancement: #14NTCThink
Mobile users will
surpass desktop
users in 2014.
This is the year to
redevelop websites
using responsive
design principles.
15. What Can Be Improved?
Slide 14Progressive Enhancement: #14NTCThink
• 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
16. What Can Be Improved?, cont.
Slide 15Progressive Enhancement: #14NTCThink
• 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
17. Responsive Design, Step-by-Step
Slide 16Progressive Enhancement: #14NTCThink
• 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
18. Prototyping / Wireframes
Slide 17Progressive Enhancement: #14NTCThink
• 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
25. Responsive Design, Step-by-Step
Slide 24Progressive Enhancement: #14NTCThink
• 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
26. Design
Slide 25Progressive Enhancement: #14NTCThink
• 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 san-
serif web fonts
27. Flat Design
Slide 26Progressive Enhancement: #14NTCThink
• Less bevels, drop shadows, gradients and realistic
textures in favor of simple shapes and solid color
blocks. Typically incorporates larger fonts as well.
28. Vertical Design
Slide 27Progressive Enhancement: #14NTCThink
• 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
29. Large Interactive Elements
Slide 28Progressive Enhancement: #14NTCThink
• 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.
30. Design - Tools
Slide 29Progressive Enhancement: #14NTCThink
• 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/
31. Responsive Design, Step-by-Step
Slide 30Progressive Enhancement: #14NTCThink
• 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
32. Development – Getting Started
Slide 31Progressive Enhancement: #14NTCThink
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
33. Development – Responsive Techniques
Slide 32Progressive Enhancement: #14NTCThink
• 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
34. Development – Hardest parts/keys
Slide 33Progressive Enhancement: #14NTCThink
• 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
35. Development – Diving In
Slide 34Progressive Enhancement: #14NTCThink
• 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
36. Development – Workflow Tools
Slide 35Progressive Enhancement: #14NTCThink
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)
37. Development – Workflow Tools
Cont.
Slide 36Progressive Enhancement: #14NTCThink
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
38. Development – Other notes
Slide 37Progressive Enhancement: #14NTCThink
• 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
39. Development – More Resources
Slide 38Progressive Enhancement: #14NTCThink
• 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/
40. Development – Website and Repo
Slide 39Progressive Enhancement: #14NTCThink
• Website
• http://ntc.teg.me
• Github
• https://github.com/seanpowell/ntc2014
41. NTEN Website Comparison –
Desktop/Laptop
Slide 40Progressive Enhancement: #14NTCThink
Current New
45. Stay in touch
Slide 44Progressive Enhancement: #14NTCThink
Karin Tracy
@ConfluenceCorp
Daniel Ferro
@DFerroF1
Sean Powell
@SeanPowell
46. 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!