How to build a mobile website with Drupal?

7,523 views

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,523
On SlideShare
0
From Embeds
0
Number of Embeds
2,634
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
  • 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

    ×