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.

1. HOW TO BUILD A MOBILE
WEBSITE 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 on
the 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 Apps
Safari 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 4
320x480 640x960 Case study

6. iPad
768x1024

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-design
http://www.abookapart.com/products/responsive-web-design

11. RESPONSIVE WEB DESIGN
a french demo

12. 3 DRUPAL METHODS

13. #1. CLASSICAL METHOD
1. use Domain Access module to create a separate domain
name, ex. http://mobile.drupalcamp.lv
2. use Mobile Tools and Browscap modules to detect user agent
and redirect to the mobile domain
3. create a separate mobile theme + create dedicated contents
to your mobile version
4. It works, but it is double working time

14. #2. RESPONSIVE METHOD
1. use Omega theme, the “Responsive HTML5 base theme”,
absed on a fluid 960 grid system
2. use Responsive Images module (using 2 images presets)
3. play with Viewport and CSS3 Media Queries
4. only one website for all devices, that’s the future !

15. OMEGA THEME IN ACTION

16. RESPONSIVE IMAGES DEMO

17. #3. SAAS METHOD
1. use some online service like Mobify.com
2. Mobify provides a full integration for Drupal
3. just generate your mobile website and design it with CSS
4. 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