How to build a mobile website with Drupal?

  • 6,771 views
Uploaded 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 …

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.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,771
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
1
Comments
0
Likes
3

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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. HOW TO BUILD A MOBILEWEBSITE WITH DRUPAL ? www.lektum.com stéphane vial stephane@lektum.com twitter : atelierlektum skype : lektum
  • 2. NEW PROBLEMS
  • 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. 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. iPhone 3G(S) iPhone 4320x480 640x960 Case study
  • 6. iPad768x1024
  • 7. NEW SOLUTIONS
  • 8. VIEWPORT<meta name="viewport" content="width=device-width" />
  • 9. CSS3 MEDIA QUERIES<link rel="stylesheet" type="text/css" media="screen and(max-device-width: 480px)" href="mini.css"/>
  • 10. RESPONSIVE WEB DESIGN by Ethan Marcotte http://www.alistapart.com/articles/responsive-web-designhttp://www.abookapart.com/products/responsive-web-design
  • 11. RESPONSIVE WEB DESIGN a french demo
  • 12. 3 DRUPAL METHODS
  • 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. #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. OMEGA THEME IN ACTION
  • 16. RESPONSIVE IMAGES DEMO
  • 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. MOBIFY QUICK DEMO
  • 19. THANKS www.lektum.com stéphane vial stephane@lektum.com twitter : atelierlektum skype : lektum