Your SlideShare is downloading. ×
HOW TO BUILD A MOBILEWEBSITE WITH DRUPAL ?         www.lektum.com       stéphane vial       stephane@lektum.com        twi...
NEW PROBLEMS
IE6 COMPLIANT OR MOBILE   DEVICES COMPLIANT ?  It was expected for 2013, it happened in the USA in 2011. A study published...
Web Apps VS Native AppsSafari Mobile, Fennec, IE Mobile...                                      320x480    240x320      24...
iPhone 3G(S)   iPhone 4320x480        640x960    Case study
iPad768x1024
NEW SOLUTIONS
VIEWPORT<meta name="viewport" content="width=device-width" />
CSS3 MEDIA QUERIES<link rel="stylesheet" type="text/css" media="screen and(max-device-width: 480px)" href="mini.css"/>
RESPONSIVE WEB DESIGN                  by Ethan Marcotte  http://www.alistapart.com/articles/responsive-web-designhttp://w...
RESPONSIVE WEB DESIGN       a french demo
3 DRUPAL METHODS
#1. CLASSICAL METHOD1. use Domain Access module to create a separate domainname, ex. http://mobile.drupalcamp.lv2. use Mob...
#2. RESPONSIVE METHOD1. use Omega theme, the “Responsive HTML5 base theme”,absed on a fluid 960 grid system2. use Responsiv...
OMEGA THEME IN ACTION
RESPONSIVE IMAGES DEMO
#3. SAAS METHOD1. use some online service like Mobify.com2. Mobify provides a full integration for Drupal3. just generate ...
MOBIFY QUICK DEMO
THANKS   www.lektum.com stéphane vial stephane@lektum.com  twitter : atelierlektum      skype : lektum
Upcoming SlideShare
Loading in...5
×

How to build a mobile website with Drupal?

7,019

Published on

A modern website cannot exist anymore nowadays without a powerful mobile version compatible with various types of smartphones and mobile platforms. I will give guidelines about general web mobile design process and problems (content strategy, touch-screen issues…). I will present some special features of mobile devices that must be considered (screen sizes, viewport…). I will explain the main different possible approaches for Drupal mobile website building (dedicated modules, Responsive Web Design and CSS3 media queries, Cloud services...) and I will show some cases studies.

Published in: Technology, Business
1 Comment
3 Likes
Statistics
Notes
  • I am very interested to work on HTML5, CSS3 and in CMS' I love WordPress now you tutorial on your responsive website design is excellent. Wordpress development is best to choose for web development. http://www.mobitsolutions.com/website-design-development.php
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
7,019
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "How to build a mobile website with Drupal?"

    1. 1. HOW TO BUILD A MOBILEWEBSITE WITH DRUPAL ? www.lektum.com stéphane vial stephane@lektum.com twitter : atelierlektum skype : lektum
    2. 2. NEW PROBLEMS
    3. 3. IE6 COMPLIANT OR MOBILE DEVICES COMPLIANT ? It was expected for 2013, it happened in the USA in 2011. A study published by Flurry last June shows that time spent onthe Internet via mobile applications for smartphones and tablets exceeded this year time spend on the web via desktop computers and laptops.
    4. 4. Web Apps VS Native AppsSafari Mobile, Fennec, IE Mobile... 320x480 240x320 240x260 768x1024 640x960 Webkit iOS 540 x 960 800 x 480 480 x 320 Android 320x420
    5. 5. iPhone 3G(S) iPhone 4320x480 640x960 Case study
    6. 6. iPad768x1024
    7. 7. NEW SOLUTIONS
    8. 8. VIEWPORT<meta name="viewport" content="width=device-width" />
    9. 9. CSS3 MEDIA QUERIES<link rel="stylesheet" type="text/css" media="screen and(max-device-width: 480px)" href="mini.css"/>
    10. 10. RESPONSIVE WEB DESIGN by Ethan Marcotte http://www.alistapart.com/articles/responsive-web-designhttp://www.abookapart.com/products/responsive-web-design
    11. 11. RESPONSIVE WEB DESIGN a french demo
    12. 12. 3 DRUPAL METHODS
    13. 13. #1. CLASSICAL METHOD1. use Domain Access module to create a separate domainname, ex. http://mobile.drupalcamp.lv2. use Mobile Tools and Browscap modules to detect user agentand redirect to the mobile domain3. create a separate mobile theme + create dedicated contentsto your mobile version4. It works, but it is double working time
    14. 14. #2. RESPONSIVE METHOD1. use Omega theme, the “Responsive HTML5 base theme”,absed on a fluid 960 grid system2. use Responsive Images module (using 2 images presets)3. play with Viewport and CSS3 Media Queries4. only one website for all devices, that’s the future !
    15. 15. OMEGA THEME IN ACTION
    16. 16. RESPONSIVE IMAGES DEMO
    17. 17. #3. SAAS METHOD1. use some online service like Mobify.com2. Mobify provides a full integration for Drupal3. just generate your mobile website and design it with CSS4. fast and furious, but you are not independent
    18. 18. MOBIFY QUICK DEMO
    19. 19. THANKS www.lektum.com stéphane vial stephane@lektum.com twitter : atelierlektum skype : lektum

    ×