The document discusses building responsive websites with Drupal. It covers responsive design concepts like flexible grids, images, and CSS media queries. It explains the mobile-first methodology and different breakpoints used in responsive design. The document also discusses Drupal themes and modules that support responsive design, as well as Drupal 8's mobile initiative.

1. www.techday7.com
Build a Responsive Website
with Drupal
By Shyamala
rajaram.shyamala@gmail.com
www.unimity.com

2. Presentation Path
1. What are Responsive websites?
2. Websites for mobile past, present &
future
3. Flexible Grids
4. Flexible images
5. Css Media queries
6. What is Mobile first methodology?
7. Break Points
8. Responsive vs Adaptive
9. Drupal 8 & mobile initiative
www.techday7.com
www.unimity.com

3. Website for Mobile - Past
MOBILE DESKTOP
m.site.com www.site.com
DETECT &
REDIRECT
Request
www.techday7.com
www.unimity.com

4. Website for Mobile - Present &
Future
www.techday7.com
www.unimity.com

5. Flexible Grids
Use percentages: allow grow & shrink of
web pages
Target / Context =
results
(5grids) / (8grids) =
62.5%
OR
(600px) / (960px) =
62.5% www.techday7.com
www.unimity.com

6. Flexible Grids
www.techday7.com
www.unimity.com

7. Flexible Images
www.techday7.com
www.unimity.com

8. Flexible Images
www.techday7.com
www.unimity.com

9. Flexible Images
Use max-width to contain images within the
grid
Drupal modules that support flexible
images include
• responsive_image:
http://drupal.org/project/responsive_images
• fasterimages: http://drupal.org/project/fasterimages
• css_emimage: http://drupal.org/project/css_emimage
www.techday7.com
www.unimity.com

10. CSS3 Media Queries
Not only allows you to target certain devices classes, but can actually
inspect the physical characteristics of device rendering the workNew
media features, including max-width, device-width, orientation and color
@media screen and (max-device-width: 480px){
.classForiPhoneDispaly {
font-size: 1.2em;
}
www.techday7.com
www.unimity.com

11. Apple - auto-adjust feature
Use of view-port metatags
<meta name="viewport"
content="width=device-width;
initial-scale=1.0">
www.techday7.com
www.unimity.com

12. Mobile first appraoch
Ensure the site works on all devices,
devices that do not support Media
queries: take a MOBILE FIRST
APPROACH!
global.css -> mobile
reponsive.css -> media queries
www.techday7.com
www.unimity.com

13. Break Points
1200px : Larger screens
1024px: Smaller desktops & Larger tablets Landscape
768px: Portrait for Larger Tablets, Landscape for
smaller tablets
600px: Portrait & Landscape for smaller layouts &
Kindle
480 px: Landscape mode for smart phones
320 px: Portrait mode for smart phones
www.techday7.com
www.unimity.com

14. Responsive vs Adaptive design
"Adaptive web design" refers more to the
secondary and less fluid approach of
adapting existing web designs, or
designing for controlled adaptation as
opposed to a truly fluid and flexible
"Responsive" design.
www.techday7.com
www.unimity.com

15. Drupal Themes
• omega: http://drupal.org/project/omega
• zen: http://drupal.org/project/zen
• adaptive: http://drupal.org/project/adaptivetheme
• terrain: http://drupal.org/project/terrain
www.techday7.com
www.unimity.com

16. Drupal 8 & Responsive Designs
• Issue queues tagged as mobile in
Drupal 8
• For info on Drupal 8 mobile
initiative:http://groups.drupal.org/node/207248
www.techday7.com
www.unimity.com

17. www.techday7.com
www.unimity.com

18. www.techday7.com
www.unimity.com