Basic principles of Responsive Web Design. How to make a site mobile-friendly. RWD for Drupal. Examples and a case study. Date: June 7th, 2014 Event: Drupal White Nights 2014 (http://camp2014.drupalspb.org/en)

1. Responsive Web Design &
Drupal
Konstantin Komelin
@kkomelin

2. One Brief Book
Has Changed the Web

3. What is RWD?
Desktop Mobile
mailchimp.com

4. Advantages
• Kind of device doesn’t matter any more
• No need to support a separate mobile site
• Recommended by search engines*
• A good alternative for mobile applications
• You care about users
* Google: http://goo.gl/e0Gvy

5. Basic Principles

6. Fluid Grid
% em rem
50% 50%
width: 100%

7. Flexible Media
max-width: 100%

8. @media Queries
@media all and (min-width: 480px) {…}
<link rel=“stylesheet” href=“tablet.css”
media=“all and (min-width: 480px)” />
@import url(“tablet.css”)
all and (min-width: 480px);
stylesheets[all and (min-width: 480px)][] = tablet.css
Drupal theme (*.info)

9. Demo
http://goo.gl/SpZKUz

10. Case Study (explorable.com)

11. Desktop
explorable.com

12. Tablet
explorable.com

13. Mobile
explorable.com

14. Mobile Menu
explorable.com

15. Mobile Search
explorable.com

16. Explorable.com Challenges
• Drupal 6
• Child of Omega (fixed size)
• Complex layout
• Different commercials
• Media content (Youtube, Vimeo, images)

17. Frameworks
• Bootstrap ( > 68000 stars* )
• Foundation ( > 16000 stars )
• Pure ( > 8000 stars )
* GitHub stargazers (June 6, 2014)

18. Drupal Extensions
Themes:
bootstrap (drupal.org)
designless (github.com)
zurb_foundation (drupal.org)
Mobile menus:
responsive_menus (drupal.org)
responsive_dropdown_menus (drupal.org)
responsive_navigation (drupal.org)
mobile_navigation (drupal.org)

19. RWD in Drupal 8

20. RWD in Drupal 8

21. RWD in Drupal 8

22. Thank you!
@kkomelin