Responsive Web Design@b_Amrit

Media Queries & Breakpoints● CSS3 media queries

○ @media only screen and (max-device-width: 480px) {div#wrapper {

width: 460px;}

}

● Breakpoints○ Desktop: 1024px or more○ Tablet: 768px○ Smartphone: 480px

● http://responsivegridsystem.com

What makes for an optimal mobile experience?

● One column● Smaller header● Easy navigation access● Sidebars go below content● More focus on the content

Bootstrap (http://getbootstrap.com)● Sleek, intuitive, and powerful mobile first front-end

framework for faster and easier web development.● Standards based: HTML, CSS & Javascript● Transitions, popover, modal, alert, dropdown,

buttons, scrollspy, collapse, tab, carousel, tooltip, affix

● Browser Support:All modern browsersSome older browsers as well*

Responsive Drupal Themes

● Adaptive theme● Square grid● Zen● Omega

Problem with sub-themes

Creating a Drupal themedrupal.org/node/171194

● mytheme.info● template files● template.php● screenshot, logo, etc.