PASSION. INNOVATION. SOLUTIONS.Designing for web, smartphone and tablets?Responsive Web Design may be the answer!         ...
PRESENTERS TODAY:   Sanjay Patel, President of WebFirstPresident and Co-Founder of WebFirst, Inc., an implementer of inno...
CURRENTLY WORKING AT / PAST PERFORMANCE:
COMPANY OVERVIEW – AREAS OF EXPERTISE   Mobile Health (mHealth)              Geographic    Technologies                 ...
PRESENTATION AGENDA What is Responsive Design? Demo Live Sites Terminology Mobile First Designing Responsive Elements...
WHAT IS RESPONSIVE DESIGN?Responsive web design (RWD) is an approach to webdesign in which a site is crafted to provide an...
RESPONSINATOR     www.responsinator.com Site for Testing different screen   widths / tablet / phone sizes
RESPONSINATOR       Demo Live Sites using Responsinator
DESIGN APPROACHES   Fixed sites – set width, resizing browser does not affect look   Fluid – Relative width, resizing af...
WHY IMPLEMENT A RESPONSIVE DESIGN?1. Mobile is no longer optional2. Native mobile Apps only work on certain devices and op...
WHAT IS MOBILE FIRST? Designyour website for the mobile experience (phones, tablets, etc.) Prioritize   your info for th...
WHAT IS IMPORTANT FOR MOBILE?   Make Links (urls) & buttons big enough to touch   Make the menu easily accessible   Rev...
RANGE OF SCREEN / BROWSER SIZES
RESPONSIVE DESIGN PROCESS   Create a flexible width website   Set limits for large screens if needed   Determine how co...
EXAMPLE OF RESPONSIVE DESIGN
DESIGN APPROACHES   Prototype rather than make full mockups   No pixel-perfect design
USING DRUPAL THEMESFOR RESPONSIVE DESIGNOmega Adaptive Zen Fusion
Grid System
GRID SYSTEM
EXAMPLE OF RESPONSIVE DESIGN    LANCASTER UNIVERSITY
MEDIA QUERIES   Media Type (for screen or print)   Media Feature (min-width, max-width)
MEDIA QUERIES EXAMPLE FOR LARGE SCREEN(NORMAL)<style media="all and (min-width: 980px) and (min-device-width: 980px)" type...
MEDIA QUERIES EXAMPLE FOR TABLETS(NARROW)<style media="all and (min-width: 740px) and (min-device-width: 740px)" type="tex...
INTERNET EXPLORER ISSUESVersions 6-8 do not support media queriesThus we need to build a separate conditional in your CSS:...
ARGUMENT AGAINST USING RESPONSIVE1.   Defeats user expectation2.   Costs more than non-responsive design / more effort3.  ...
GREAT SITES RELATED TO RESPONSIVE   www.css-tricks.com   Responsive tables     – http://css-tricks.com/responsive-data-t...
RESOURCES / BOOKSResponsive Web Designby Ethan Marcottehttp://amzn.com/B005SYWGXWThe Book of CSS3: A Developers Guide to t...
QUESTIONS
CONTACT INFORMATION           WebFirst, Inc.           15800 Crabbs Branch Way, Suite 120           Rockville, MD 20855   ...
Upcoming SlideShare
Loading in...5
×

Responsive design

1,375

Published on

An increasing number of people are using tablets and mobile devices to access the web. The Gartner Group predicts that close to 400m tablets will be sold worldwide by 2016. Users are demanding a user-friendly, easy to navigate experience across all devices - from desktops to mobile devices. The challenge is to design a single site that will address various different screen sizes and formats. Responsive Web Design (RWD) can be a strong solution to addressing the problem of designing for multiple devices. RWD is a new way to create web and mobile designs. With RWD your users will experience a seamless user experience with minimum of resizing and scrolling — across a wide range of devices (monitors to mobile phones to tablets). We will go beyond the marketing hype – and drill down into the real guts of RWD.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,375
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive design

  1. 1. PASSION. INNOVATION. SOLUTIONS.Designing for web, smartphone and tablets?Responsive Web Design may be the answer! WebFirst, Inc. www.webfirst.com
  2. 2. PRESENTERS TODAY: Sanjay Patel, President of WebFirstPresident and Co-Founder of WebFirst, Inc., an implementer of innovative socialmedia based content management solutions, global health training systems, andmobile development technologies for federal and non-profit clients. Mr. Patel holdsa degree in biomedical engineering from Case Western Reserve University and aMasters in Computer Science from Johns Hopkins University. Ted Gifford, Sr. DeveloperWith more than 10 years of programming, CSS, theming and Drupal Developmentexperience, Ted has been lead developer on many of our Drupal and webengagements. Including NIH, Centers for Disease Control (BioPHusion), Jhpiego,and USAID’s Famine Early Warning System database. Mr. Gifford holds aBachelor of Science Degree in Biomedical Engineering from The John HopkinsUniversity.
  3. 3. CURRENTLY WORKING AT / PAST PERFORMANCE:
  4. 4. COMPANY OVERVIEW – AREAS OF EXPERTISE Mobile Health (mHealth)  Geographic Technologies Information System (GIS) – Android / HTML 5 / iOS/ – ESRI Blackberry – Google Maps – SMS / Twilio / RapidSMS / FrontLineSMS  Accessibility/Section 508 Compliance – Open Data Kit  Web Design / Content Public Health Informatics Management Systems / – Data Collection Social Media – Data Analysis – Drupal, Wordpress (open – Data Visualization / source) Dashboards (e.g. Histograms, – Use of Social Media as a Scatterplots) Health Promotion / – Reporting Recruitment Tool (Twitter, Facebook, RSS Feeds, Crowdsourcing)
  5. 5. PRESENTATION AGENDA What is Responsive Design? Demo Live Sites Terminology Mobile First Designing Responsive Elements Grid System Tools & Resources Questions (via Webex Chat)
  6. 6. WHAT IS RESPONSIVE DESIGN?Responsive web design (RWD) is an approach to webdesign in which a site is crafted to provide an optimalviewing experience—easy reading and navigation witha minimum of resizing, panning, and scrolling—acrossa wide range of devices (from desktop computermonitors to mobile phones).
  7. 7. RESPONSINATOR www.responsinator.com Site for Testing different screen widths / tablet / phone sizes
  8. 8. RESPONSINATOR Demo Live Sites using Responsinator
  9. 9. DESIGN APPROACHES Fixed sites – set width, resizing browser does not affect look Fluid – Relative width, resizing affects layout, no media queries. Adaptive – fixed (set) or relative widths (fluid), uses media queries Responsive - fluid grid, relative widths, media queries.
  10. 10. WHY IMPLEMENT A RESPONSIVE DESIGN?1. Mobile is no longer optional2. Native mobile Apps only work on certain devices and operating systems.3. Responsive web design saves you time and money.4. Responsive designs are future-proof.5. What is the Alternative - separate subdomains (m.yourorg.org) for eachuser agent?
  11. 11. WHAT IS MOBILE FIRST? Designyour website for the mobile experience (phones, tablets, etc.) Prioritize your info for the small screen
  12. 12. WHAT IS IMPORTANT FOR MOBILE? Make Links (urls) & buttons big enough to touch Make the menu easily accessible Review Popups, JavaScript, Slideshows – may not be mobile friendly Prioritize information – Only show the most important information
  13. 13. RANGE OF SCREEN / BROWSER SIZES
  14. 14. RESPONSIVE DESIGN PROCESS Create a flexible width website Set limits for large screens if needed Determine how content fits best for different devices Add breakpoints for different widths Deal with tricky elements like tables grids, images, frames
  15. 15. EXAMPLE OF RESPONSIVE DESIGN
  16. 16. DESIGN APPROACHES Prototype rather than make full mockups No pixel-perfect design
  17. 17. USING DRUPAL THEMESFOR RESPONSIVE DESIGNOmega Adaptive Zen Fusion
  18. 18. Grid System
  19. 19. GRID SYSTEM
  20. 20. EXAMPLE OF RESPONSIVE DESIGN LANCASTER UNIVERSITY
  21. 21. MEDIA QUERIES Media Type (for screen or print) Media Feature (min-width, max-width)
  22. 22. MEDIA QUERIES EXAMPLE FOR LARGE SCREEN(NORMAL)<style media="all and (min-width: 980px) and (min-device-width: 980px)" type="text/css">@import url("mcerf-alpha-default.css");@import url("mcerf-alpha-default-normal.css");@import url("alpha-default-normal-12.css");</style>
  23. 23. MEDIA QUERIES EXAMPLE FOR TABLETS(NARROW)<style media="all and (min-width: 740px) and (min-device-width: 740px)" type="text/css">@import url("mcerf-alpha-default.css");@import url("mcerf-alpha-default-narrow.css");@import url("alpha-default-narrow-12.css");</style>
  24. 24. INTERNET EXPLORER ISSUESVersions 6-8 do not support media queriesThus we need to build a separate conditional in your CSS:e.g.If IE LT Version 9 then ie-960.css- Typically a fixed width design
  25. 25. ARGUMENT AGAINST USING RESPONSIVE1. Defeats user expectation2. Costs more than non-responsive design / more effort3. Non-responsive can often work4. Often times there is no load time benefit5. Compromise of the design
  26. 26. GREAT SITES RELATED TO RESPONSIVE www.css-tricks.com Responsive tables – http://css-tricks.com/responsive-data-tables A list apart – http://www.alistapart.com/articles/responsive-web-design/ Responsive Layouts http://www.lukew.com/ff/entry.asp?1514 Drupal Base Themes – http://groups.drupal.org/node/175234 Design Sites using the responsive grid system – http://www.netmagazine.com/tutorials/design-sites-using-responsive-grid- system Examples of responsive design: – http://www.tripwiremagazine.com/2012/06/responsive-website-design.html
  27. 27. RESOURCES / BOOKSResponsive Web Designby Ethan Marcottehttp://amzn.com/B005SYWGXWThe Book of CSS3: A Developers Guide to the Future of Web Designby Peter Gasstonhttp://amzn.com/1593272863Designing with the Mind in Mind: Simple Guide to Understanding UserInterface Design Rulesby Jeff Johnson
  28. 28. QUESTIONS
  29. 29. CONTACT INFORMATION WebFirst, Inc. 15800 Crabbs Branch Way, Suite 120 Rockville, MD 20855 301.670.1690 x208 Presenters Sanjay Patel, spatel@webfirst.com Ted Gifford tgifford@webfirst.com www.webfirst.com

×