Your SlideShare is downloading. ×
0
Responsive Web Design & Drupal
Responsive Web Design & Drupal
Responsive Web Design & Drupal
Responsive Web Design & Drupal
Responsive Web Design & Drupal
Responsive Web Design & Drupal
Responsive Web Design & Drupal
Responsive Web Design & Drupal
Responsive Web Design & Drupal
Responsive Web Design & Drupal
Responsive Web Design & Drupal
Responsive Web Design & Drupal
Responsive Web Design & Drupal
Responsive Web Design & Drupal
Responsive Web Design & Drupal
Responsive Web Design & Drupal
Responsive Web Design & Drupal
Responsive Web Design & Drupal
Responsive Web Design & Drupal
Responsive Web Design & Drupal
Responsive Web Design & Drupal
Responsive Web Design & Drupal
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive Web Design & Drupal

506

Published on

Basic principles of Responsive Web Design. …

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)



Published in: Software, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
506
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×