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.
2. PRESENTERS TODAY:
Sanjay Patel, President of WebFirst
President and Co-Founder of WebFirst, Inc., an implementer of innovative social
media based content management solutions, global health training systems, and
mobile development technologies for federal and non-profit clients. Mr. Patel holds
a degree in biomedical engineering from Case Western Reserve University and a
Masters in Computer Science from Johns Hopkins University.
Ted Gifford, Sr. Developer
With more than 10 years of programming, CSS, theming and Drupal Development
experience, Ted has been lead developer on many of our Drupal and web
engagements. Including NIH, Centers for Disease Control (BioPHusion), Jhpiego,
and USAID’s Famine Early Warning System database. Mr. Gifford holds a
Bachelor of Science Degree in Biomedical Engineering from The John Hopkins
University.
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 web
design in which a site is crafted 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 computer
monitors to mobile phones).
7. RESPONSINATOR
www.responsinator.com
Site for Testing different screen
widths / tablet / phone sizes
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 optional
2. 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 each
user 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
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
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 ISSUES
Versions 6-8 do not support media queries
Thus 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 RESPONSIVE
1. Defeats user expectation
2. Costs more than non-responsive design / more effort
3. Non-responsive can often work
4. Often times there is no load time benefit
5. 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 / BOOKS
Responsive Web Design
by Ethan Marcotte
http://amzn.com/B005SYWGXW
The Book of CSS3: A Developer's Guide to the Future of Web Design
by Peter Gasston
http://amzn.com/1593272863
Designing with the Mind in Mind: Simple Guide to Understanding User
Interface Design Rules
by Jeff Johnson