• Save
Responsive design
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Responsive design

on

  • 1,759 views

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 ...

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.

Statistics

Views

Total Views
1,759
Views on SlideShare
1,759
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive design Presentation Transcript

  • 1. PASSION. INNOVATION. SOLUTIONS.Designing for web, smartphone and tablets?Responsive Web Design may be the answer! WebFirst, Inc. www.webfirst.com
  • 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. CURRENTLY WORKING AT / PAST PERFORMANCE:
  • 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. PRESENTATION AGENDA What is Responsive Design? Demo Live Sites Terminology Mobile First Designing Responsive Elements Grid System Tools & Resources Questions (via Webex Chat)
  • 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. RESPONSINATOR www.responsinator.com Site for Testing different screen widths / tablet / phone sizes
  • 8. RESPONSINATOR Demo Live Sites using Responsinator
  • 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. 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. WHAT IS MOBILE FIRST? Designyour website for the mobile experience (phones, tablets, etc.) Prioritize your info for the small screen
  • 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. RANGE OF SCREEN / BROWSER SIZES
  • 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. EXAMPLE OF RESPONSIVE DESIGN
  • 16. DESIGN APPROACHES Prototype rather than make full mockups No pixel-perfect design
  • 17. USING DRUPAL THEMESFOR RESPONSIVE DESIGNOmega Adaptive Zen Fusion
  • 18. Grid System
  • 19. GRID SYSTEM
  • 20. EXAMPLE OF RESPONSIVE DESIGN LANCASTER UNIVERSITY
  • 21. MEDIA QUERIES Media Type (for screen or print) Media Feature (min-width, max-width)
  • 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. 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. 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. 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. 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. 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. QUESTIONS
  • 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