Progressive Enchancement: Crafting a Responsive Redesign

Progressive Enhancement: Crafting a Responsive Redesign#14NTCThink

Karin Tracy; Daniel Ferro; Sean Powell

INTRODUCTIONSWho 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)

Slide 2Progressive Enhancement: #14NTCThink

@ConfluenceCorp @DFerroF1 @SeanPowell

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:


1Technology planning

and consulting

2 Graphic and web

design

3Open source CMS / CRM;

Salesforce partner

4 Open source support

and maintenance

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

2 Interactive Design for

Web and Mobile

3 Branding

4 Accessibility and

usability engineering

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

2 Online campaign

management

3 CRM and CMS Migrations

4 Application development

Show of Hands


1. Heard of responsive design?

2. Considering responsive design?

3. Actively planning responsive?

4. Already have responsive in place?

RESPONSIVE DESIGNIn 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

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


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

And 2014?


Mobile users will surpass desktop users in 2014.

This is the year to redevelop websites using responsive design principles.

RESPONSIVE REDESIGNGuinea pig? NTEN!

Current NTEN Website - www.nten.org


Desktop/Laptop Tablet Phone

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

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

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

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

Low Fidelity Wireframes


High Fidelity Wireframes


High Fidelity Wireframes


Code-based Wireframes


bit.ly/1gMcnGq

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)

http://www.guideguide.me

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)

http://getbootstrap.com

http://uxpin.com

http://foundation.zurb.com

http://getwirefy.com











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 san-serif web fonts

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.

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

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.

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/

http://html.adobe.com/edge/reflow

http://macaw.co/

https://webflow.com/











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

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

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

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

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)

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

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

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/

http://bradfrost.github.io/this-is-responsive/

http://lesscss.org/

http://sass-lang.com/

http://progrium.com/localtunnel/

Development – Website and Repo


• Website

• http://ntc.teg.me

• Github

• https://github.com/seanpowell/ntc2014

http://ntc.teg.me

https://github.com/seanpowell/ntc2014

NTEN Website Comparison –Desktop/Laptop


Current New

NTEN Website Comparison - Tablet


Current New

NTEN Website Comparison - Phone


Current New

QUESTIONS?Don’t Be Shy

Stay in touch


Karin Tracy@ConfluenceCorp

Daniel Ferro@DFerroF1

Sean Powell

@SeanPowell

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!

http://www.nten.org/ntc/eval