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.

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

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

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

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 THEMES
FOR 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 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

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