SlideShare uma empresa Scribd logo
1 de 46
Baixar para ler offline
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)
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:
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
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
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
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?
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).”
Slide 8Progressive Enhancement: #14NTCThink
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
Slide 9Progressive Enhancement: #14NTCThink
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
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.
RESPONSIVE REDESIGN
Guinea pig? NTEN!
Current NTEN Website - www.nten.org
Slide 13Progressive Enhancement: #14NTCThink
Desktop/Laptop Tablet Phone
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
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
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
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
Low Fidelity Wireframes
Slide 18Progressive Enhancement: #14NTCThink
High Fidelity Wireframes
Slide 19Progressive Enhancement: #14NTCThink
High Fidelity Wireframes
Slide 20Progressive Enhancement: #14NTCThink
Code-based Wireframes
Slide 21Progressive Enhancement: #14NTCThink
bit.ly/1gMcnGq
Wireframing - Tools
Slide 22Progressive Enhancement: #14NTCThink
• 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)
Wireframing - Tools, cont.
Slide 23Progressive Enhancement: #14NTCThink
• 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)
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
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
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.
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
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.
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/
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
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
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
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
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
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)
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
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
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/
Development – Website and Repo
Slide 39Progressive Enhancement: #14NTCThink
• Website
• http://ntc.teg.me
• Github
• https://github.com/seanpowell/ntc2014
NTEN Website Comparison –
Desktop/Laptop
Slide 40Progressive Enhancement: #14NTCThink
Current New
NTEN Website Comparison - Tablet
Slide 41Progressive Enhancement: #14NTCThink
Current New
NTEN Website Comparison - Phone
Slide 42Progressive Enhancement: #14NTCThink
Current New
QUESTIONS?
Don’t Be Shy
Stay in touch
Slide 44Progressive Enhancement: #14NTCThink
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!

Mais conteúdo relacionado

Mais procurados

Designers are from Venus - Presentationas Given to CD2
Designers are from Venus - Presentationas Given to CD2Designers are from Venus - Presentationas Given to CD2
Designers are from Venus - Presentationas Given to CD2Chad Udell
 
Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014Lewis Lin 🦊
 
Going from Here to There: Transitioning into a UX Career
Going from Here to There: Transitioning into a UX CareerGoing from Here to There: Transitioning into a UX Career
Going from Here to There: Transitioning into a UX Careerdpanarelli
 
Web design and development trends
Web design and development  trendsWeb design and development  trends
Web design and development trendsCool Sky
 
UI Design Patterns for the Web, Part 2
UI Design Patterns for the Web, Part 2UI Design Patterns for the Web, Part 2
UI Design Patterns for the Web, Part 2Lewis Lin 🦊
 
How we got everyone at MYOB hooked on UX, and how we're managing their addict...
How we got everyone at MYOB hooked on UX, and how we're managing their addict...How we got everyone at MYOB hooked on UX, and how we're managing their addict...
How we got everyone at MYOB hooked on UX, and how we're managing their addict...Megan Dell
 
Top 20 Design & Wireframing Tools
Top 20 Design & Wireframing ToolsTop 20 Design & Wireframing Tools
Top 20 Design & Wireframing ToolsMopinion
 
UX Capabilities Presentation
UX Capabilities PresentationUX Capabilities Presentation
UX Capabilities PresentationLaurel Tripp
 
Design Systems: Parts, Products & People
Design Systems: Parts, Products & PeopleDesign Systems: Parts, Products & People
Design Systems: Parts, Products & Peoplenathanacurtis
 
User centered design workshop
User centered design workshopUser centered design workshop
User centered design workshopPatrick McNeil
 
Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping EssentialsRachel Hinman
 
UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1Lewis Lin 🦊
 
UX Bootcamp @ General Assembly Atlanta
UX Bootcamp @ General Assembly AtlantaUX Bootcamp @ General Assembly Atlanta
UX Bootcamp @ General Assembly AtlantaJacklyn Burgan
 
Designing for Accessibility (SOFLUX)
Designing for Accessibility (SOFLUX)Designing for Accessibility (SOFLUX)
Designing for Accessibility (SOFLUX)Mike Donahue
 
UX Portfolios: How to tell your story
UX Portfolios: How to tell your storyUX Portfolios: How to tell your story
UX Portfolios: How to tell your storyPatrick Neeman
 
UX Debt: The Cost of Taking Short Cuts
UX Debt: The Cost of Taking Short CutsUX Debt: The Cost of Taking Short Cuts
UX Debt: The Cost of Taking Short CutsHirajaved10
 

Mais procurados (20)

Designers are from Venus - Presentationas Given to CD2
Designers are from Venus - Presentationas Given to CD2Designers are from Venus - Presentationas Given to CD2
Designers are from Venus - Presentationas Given to CD2
 
Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014
 
Prototyping
PrototypingPrototyping
Prototyping
 
Going from Here to There: Transitioning into a UX Career
Going from Here to There: Transitioning into a UX CareerGoing from Here to There: Transitioning into a UX Career
Going from Here to There: Transitioning into a UX Career
 
Web design and development trends
Web design and development  trendsWeb design and development  trends
Web design and development trends
 
UI Design Patterns for the Web, Part 2
UI Design Patterns for the Web, Part 2UI Design Patterns for the Web, Part 2
UI Design Patterns for the Web, Part 2
 
How we got everyone at MYOB hooked on UX, and how we're managing their addict...
How we got everyone at MYOB hooked on UX, and how we're managing their addict...How we got everyone at MYOB hooked on UX, and how we're managing their addict...
How we got everyone at MYOB hooked on UX, and how we're managing their addict...
 
Top 20 Design & Wireframing Tools
Top 20 Design & Wireframing ToolsTop 20 Design & Wireframing Tools
Top 20 Design & Wireframing Tools
 
Concepting Flik
Concepting FlikConcepting Flik
Concepting Flik
 
Building a UX Brand
 Building a UX Brand Building a UX Brand
Building a UX Brand
 
UX Capabilities Presentation
UX Capabilities PresentationUX Capabilities Presentation
UX Capabilities Presentation
 
Design Systems: Parts, Products & People
Design Systems: Parts, Products & PeopleDesign Systems: Parts, Products & People
Design Systems: Parts, Products & People
 
User centered design workshop
User centered design workshopUser centered design workshop
User centered design workshop
 
Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping Essentials
 
UX roles
UX rolesUX roles
UX roles
 
UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1
 
UX Bootcamp @ General Assembly Atlanta
UX Bootcamp @ General Assembly AtlantaUX Bootcamp @ General Assembly Atlanta
UX Bootcamp @ General Assembly Atlanta
 
Designing for Accessibility (SOFLUX)
Designing for Accessibility (SOFLUX)Designing for Accessibility (SOFLUX)
Designing for Accessibility (SOFLUX)
 
UX Portfolios: How to tell your story
UX Portfolios: How to tell your storyUX Portfolios: How to tell your story
UX Portfolios: How to tell your story
 
UX Debt: The Cost of Taking Short Cuts
UX Debt: The Cost of Taking Short CutsUX Debt: The Cost of Taking Short Cuts
UX Debt: The Cost of Taking Short Cuts
 

Semelhante a Progressive Enchancement: Crafting a Responsive Redesign

UX design for every screen
UX design for every screenUX design for every screen
UX design for every screenFour Kitchens
 
Technologies: Expert in the Room Webinar: Optimizing your Website for Mobile
Technologies: Expert in the Room Webinar: Optimizing your Website for MobileTechnologies: Expert in the Room Webinar: Optimizing your Website for Mobile
Technologies: Expert in the Room Webinar: Optimizing your Website for MobileRandstad USA
 
PSEWEB 2013 - Make it responsive - TERMINALFOUR
PSEWEB 2013 - Make it responsive - TERMINALFOURPSEWEB 2013 - Make it responsive - TERMINALFOUR
PSEWEB 2013 - Make it responsive - TERMINALFOURTerminalfour
 
Responsive Web Design ~ Best Practices for Maximizing ROI
Responsive Web Design ~ Best Practices for Maximizing ROIResponsive Web Design ~ Best Practices for Maximizing ROI
Responsive Web Design ~ Best Practices for Maximizing ROIJuan Carlos Duron
 
[Seminar] hwiyeon 200709
[Seminar] hwiyeon 200709[Seminar] hwiyeon 200709
[Seminar] hwiyeon 200709ivaderivader
 
UX-Driven & Inclusive Data Visualizations
UX-Driven & Inclusive Data VisualizationsUX-Driven & Inclusive Data Visualizations
UX-Driven & Inclusive Data VisualizationsMichelle Michael
 
Responsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit ScoreResponsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit ScoreWendy Fischer
 
IxDA Helsinki meet-up at Smartly.io, Thu, 25th August 2016
IxDA Helsinki meet-up at Smartly.io, Thu, 25th August 2016IxDA Helsinki meet-up at Smartly.io, Thu, 25th August 2016
IxDA Helsinki meet-up at Smartly.io, Thu, 25th August 2016Pekka Hartikainen
 
Software and Website Development Company
Software and Website Development CompanySoftware and Website Development Company
Software and Website Development Companysamyakmahendra
 
Future Scope of Website Designing in India
Future Scope of Website Designing in IndiaFuture Scope of Website Designing in India
Future Scope of Website Designing in IndiaGagandeep Singh Rawat
 

Semelhante a Progressive Enchancement: Crafting a Responsive Redesign (20)

UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 
Webinar presentation-startups and mobility
Webinar presentation-startups and mobilityWebinar presentation-startups and mobility
Webinar presentation-startups and mobility
 
Mobile web development
Mobile web development Mobile web development
Mobile web development
 
Technologies: Expert in the Room Webinar: Optimizing your Website for Mobile
Technologies: Expert in the Room Webinar: Optimizing your Website for MobileTechnologies: Expert in the Room Webinar: Optimizing your Website for Mobile
Technologies: Expert in the Room Webinar: Optimizing your Website for Mobile
 
PSEWEB 2013 - Make it responsive - TERMINALFOUR
PSEWEB 2013 - Make it responsive - TERMINALFOURPSEWEB 2013 - Make it responsive - TERMINALFOUR
PSEWEB 2013 - Make it responsive - TERMINALFOUR
 
Web Design
Web DesignWeb Design
Web Design
 
Responsive Web Design ~ Best Practices for Maximizing ROI
Responsive Web Design ~ Best Practices for Maximizing ROIResponsive Web Design ~ Best Practices for Maximizing ROI
Responsive Web Design ~ Best Practices for Maximizing ROI
 
[Seminar] hwiyeon 200709
[Seminar] hwiyeon 200709[Seminar] hwiyeon 200709
[Seminar] hwiyeon 200709
 
UX-Driven & Inclusive Data Visualizations
UX-Driven & Inclusive Data VisualizationsUX-Driven & Inclusive Data Visualizations
UX-Driven & Inclusive Data Visualizations
 
Responsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit ScoreResponsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit Score
 
IxDA Helsinki meet-up at Smartly.io, Thu, 25th August 2016
IxDA Helsinki meet-up at Smartly.io, Thu, 25th August 2016IxDA Helsinki meet-up at Smartly.io, Thu, 25th August 2016
IxDA Helsinki meet-up at Smartly.io, Thu, 25th August 2016
 
webdesign.ppt
webdesign.pptwebdesign.ppt
webdesign.ppt
 
webdesign.ppt
webdesign.pptwebdesign.ppt
webdesign.ppt
 
webdesign.ppt
webdesign.pptwebdesign.ppt
webdesign.ppt
 
webdesign.ppt
webdesign.pptwebdesign.ppt
webdesign.ppt
 
webdesign.ppt
webdesign.pptwebdesign.ppt
webdesign.ppt
 
Webdesign
WebdesignWebdesign
Webdesign
 
Webdesign
WebdesignWebdesign
Webdesign
 
Software and Website Development Company
Software and Website Development CompanySoftware and Website Development Company
Software and Website Development Company
 
Future Scope of Website Designing in India
Future Scope of Website Designing in IndiaFuture Scope of Website Designing in India
Future Scope of Website Designing in India
 

Último

Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 

Último (20)

Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 

Progressive Enchancement: Crafting a Responsive Redesign

  • 1. Progressive Enhancement: Crafting a Responsive Redesign #14NTCThink Karin Tracy; Daniel Ferro; Sean Powell
  • 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.
  • 14. Current NTEN Website - www.nten.org Slide 13Progressive Enhancement: #14NTCThink Desktop/Laptop Tablet Phone
  • 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
  • 19. Low Fidelity Wireframes Slide 18Progressive Enhancement: #14NTCThink
  • 20. High Fidelity Wireframes Slide 19Progressive Enhancement: #14NTCThink
  • 21. High Fidelity Wireframes Slide 20Progressive Enhancement: #14NTCThink
  • 22. Code-based Wireframes Slide 21Progressive Enhancement: #14NTCThink bit.ly/1gMcnGq
  • 23. Wireframing - Tools Slide 22Progressive Enhancement: #14NTCThink • 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)
  • 24. Wireframing - Tools, cont. Slide 23Progressive Enhancement: #14NTCThink • 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)
  • 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
  • 42. NTEN Website Comparison - Tablet Slide 41Progressive Enhancement: #14NTCThink Current New
  • 43. NTEN Website Comparison - Phone Slide 42Progressive 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!