Agency Web Template
Technology Overview
Michael Karr,
Web Developer
NIC Maryland
July 22 & 23, 2013
Responsive Design – Agency Template
Desktop View (Default)
Mobile View
Responsive Design – Media Queries
@media (max-width: 767px) {
#header { … }
#content { … }
#footer { … }
}
Responsive Design – Twitter Bootstrap
• Template provides core responsive layout grid
for you
• You’re encouraged to use grid classes when
adding your own layouts inside the template
• Responsive Design concepts are essential to
providing a good user experience, even
through your content.
Mobile First
Key Constant
• Always consider the MOBILE context FIRST
• Considered how the user on their smart phone will
interact with navigation, content, etc…
• We make compromises along the way, but focused
on MOBILE FIRST.
HTML5
• Agency template is valid HTML5
compatible
• Using HTML5 Doctype
• Supports all new HTML5 tags and
APIs
Accessibility
• Structure and code contain no barriers to those with
visual disabilities
• 80% of web accessibility issues involve a site’s
template or global markup.
• The remaining 20% involves page content (images,
links, etc…)
• 80% of this work is already done for you
Accessibility – Template Features
• Skip To Main Content Link
• Montage Slider
– Empty Alt Attribute on Images
– Use Headings to Convey Image Link Destinations
– Fully Tab Navigable
• Semantic HTML Markup
– Only One H1 Heading
– Proper Heading Levels
• HTML5 Nav Tag
Technical Considerations - Images
• max-width: 100%
• Ensures images do not break layout
Responsive Design – Additional Learning
• Twitter Bootstrap Documentation
– http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem
• Google Chrome Browser
– https://www.google.com/intl/en/chrome/browser/
– The Google Chrome browser is the best web browser for testing and working with
responsive and leading-edge web development.
• Responsive Design Google Chrome Extensions
– https://chrome.google.com/webstore/search/Responsive
• Influential Blogs and People
– Brad Frost
• http://bradfrostweb.com/
– Ethan Marcotte
• http://ethanmarcotte.com/
• http://www.abookapart.com/products/responsive-web-design
– Smashing Magazine
• http://mobile.smashingmagazine.com/tag/responsive-design/
• Wikipedia Entry
– http://en.wikipedia.org/wiki/Responsive_web_design
Thank You!
Michael Karr,
Web Developer
NIC Maryland
July 22 & 23, 2013
