Everyone is going mobile these days and Drupal is no exception. There are lots of techniques for building mobile-friendly websites with Drupal from full-blown mobile applications to using a mobile-specific theme. Responsive design is a simpler way of designing for mobile. The goal of responsive design is to design a site so that the layout adapts to the width of the user's screen, making websites usable on all kinds of devices from mobile phones to large monitors.
This webinar will discuss how you can apply responsive design techniques to a Drupal website and will include the following topics:
* Steps to building a responsive Drupal 7 theme
* Challenges when designing a responsive layout
* Drupal elements that are particularly challenging to adapt
* CSS techniques for responsive design
* Responsive Drupal base themes
3. • Mobile First
• Responsive Design
• Building a Responsive Drupal Theme
• Designing Responsive Elements
• Tools & Resources
• Outstanding Challenges
4. WHAT IS MOBILE FIRST?
• Design
your website for the mobile experience
(phones, tablets, and everything in between)
• Allow the mobile experience to impact the
overall design
7. RESPONSIVE DESIGN
• Create
a single site and design framework that adapts to any
browser size
• Tweak the design at different browser sizes to improve the
experience
• Usually easier than building separate experiences for different
devices
9. RESPONSIVE DESIGN
PROCESS
1. Create a Flexible Width website
2. Set limits for large screens if needed
3. Figure out how content fits best at different widths
4. Add breakpoints to accommodate different widths
5. Deal with tricky elements like tables, grids, images, iframes,
etc.
10.
11.
12. WHAT WORKS ON MOBILE?
• Make links big enough to touch
• Show the most important information
• Show only the most important information
• Make the menu easily accessible
13. DESIGN APPROACHES
• Prototype rather than make mockups
• No pixel-perfect design
• Allow the design for mobile to impact the design for desktop
16. MEDIA QUERY COMPONENTS
• Media Type (i.e. screen or print)
• Media Feature (i.e. max-width, min-width)
17. TARGETING LARGE SCREENS
Use the min-width media feature
<link rel="stylesheet" type="text/css"
media="screen and (min-width: 960px)" href="/style.css" />
@media screen and (min-width: 960px) {
left-column {
float: left;
width: 60%;
}
}
18. TARGETING SMALL SCREENS
Use the max-width media feature
<link rel="stylesheet" type="text/css"
media="screen and (max-width: 480px)" href="/style.css" />
@media screen and (min-width: 480px) {
.panels-pane {
float: none;
}
}
20. OTHER MEDIA FEATURES
• min-device-width
• max-device-width
• resolution
• color
• aspect-ratio
21. IN YOUR DRUPAL THEME
Inline in your CSS files:
@media screen and (min-width: 960px) {
left-column {
float: left;
width: 60%;
}
}
22. IN YOUR DRUPAL THEME
In your .info file:
stylesheets[screen and (min-width: 960px)][] = css/screen-
min-960.css
stylesheets[screen and (max-width: 480px)][] = css/screen-
max-480.css
stylesheets[screen and (max-width: 240px)][] = css/screen-
max-240.css
stylesheets[screen and (min-width: 480px) and (max-width:
760px)][] = css/screen-480-760.css
24. ANDROID DEVICES
You need to set the viewport meta tag to make media
queries work on android devices.
<?php
$meta_viewport = array(
'#type' => 'html_tag',
'#tag' => 'meta',
'#attributes' => array(
'name' => 'viewport',
'content' => 'width=device-width'
)
);
drupal_add_html_head($meta_viewport, 'viewport');
?>
25. INTERNET EXPLORER
Versions 6-8 don’t support media queries
In your .info file:
stylesheets-conditional[lt IE 9][all][] = ie-960.css