Your SlideShare is downloading. ×
Responsive design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Responsive design

1,292
views

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 …

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,292
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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