• Save
How to build a mobile website with Drupal?
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

How to build a mobile website with Drupal?

on

  • 7,848 views

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.

Statistics

Views

Total Views
7,848
Views on SlideShare
5,257
Embed Views
2,591

Actions

Likes
2
Downloads
1
Comments
0

3 Embeds 2,591

http://www.lektum.com 2574
http://www.lektum.info 11
http://paper.li 6

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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? Presentation 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