How to Build a Mobile Site with Drupal. Andrew Berry, Lullabot Harris Rashid, Chapter Three

Size: px

Start display at page:

Download "How to Build a Mobile Site with Drupal. Andrew Berry, Lullabot Harris Rashid, Chapter Three"

Marianna Adams
8 years ago
Views:

1 How to Build a Mobile Site with Drupal Andrew Berry, Lullabot Harris Rashid, Chapter Three

2 About Us

3 BADCAMP11 $20 off 1st month, good until October 28

4 We're still figuring out how to "do mobile"

5 Adaptive and Responsive

6 Mobile Apps and Mobile Web

7 An App is typically something that you distribute to your users by pointing them to a store A website loads in a browser such as Mobile Safari Some apps use web technologies (HTML, JavaScript, CSS) while some websites can be installed as Apps!

browser such as Mobile Safari Some apps use web technologies

8 Build an App? Write for multiple platforms, test on multiple platforms

9 Build a website? Write one website, but test in multiple browsers

10 Why not just target Webkit?

11 There is no "one" Webkit

12 The Great WebKit Comparison Table

13 Developing for Mobile (with HTML and JavaScript)

14 Let your website join the party

15 A Mobile Web App Is: 1. An name and icon for the home screen or launcher 2. An indication that the application should run in full-screen mode (ios only) 3. The size of the viewport 4. A startup image (ios only as well) 5. A list of the files needed for offline use (not just mobile, but need a fallback for IE)

3. The size of the viewport 4. A startup image (ios only as well) 5.

16 1. Set your site name! drush -y vset site_name for the hardcore

17 Home Screen Icon

18 2. ios Enhancements

19 3. Ω Rocks (it set the <viewport> for us)

20 4. More ios Enhancements

21 5. A Cache Manifest A plain text file <html manifest="/cache.manifest"> Might need to have your server admin add the content type to Apache First line is CACHE MANIFEST NETWORK:, CACHE:, FALLBACK:

22 Danger! Caveats abound!

24 HTML5 Web Storage Supported by all major mobile browsers! (still a W3C draft) Two types of storage: localstorage and sessionstorage localstorage is permanent unless the user clears it sessionstorage is temporary, and per tab or window of the site Use Web Storage to store data and save on HTTP requests and page size, at the expense of local CPU resources

25 Web Storage is key-value pairs only... and is strings only

26 User searches your site

30 HTML5 Local Storage Example org/sandbox/deviantintegral/

31 (who designed this mess?)

32 Theming for Mobile

33 Two approaches 1) Create a mobile version for an existing site 2) Build a new site with a mobile first approach (responsive web design)

34 Mobile Tools Module

35 Mobile Tools Module Redirection to a mobile domain User-Agent Detection Theme Switching Integration with Panels and Context

36 Mobile Tools Module Redirection to a mobile domain

37 Mobile Tools Module User-Agent Detection

38 Mobile Tools Module Theme Switching

39 Mobile Tools Module Integration with Panels

40 CSS Media Queries Detect a device screen size and load a stylsheet media="screen and (max-device-width: 480px)" <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="style.css" />

41 CSS Media Queries Portrait vs. Landscape /* Portrait screen and (orientation:portrait) { /* Portrait styles */ } /* Landscape screen and (orientation:landscape) { /* Landscape styles */ }

42 Google Bookmark Bubble Create your own:

43 Responsive Web Design One Site & Theme for any device

44 Responsive Drupal Themes Omega Adaptive

45 Responsive jquery Plugins Fittext FitVids

46 Responsive jquery Code Snippets Elastislide Image Gallery

47 Testing Tools

48 Firefox User Agent Add-on Supports ipad and iphone Great for testing mobile browser detection, url and theme switching

49 Apple XCode ios Simulator

50 Awesome Resources

51 Discussion

Designing for the Mobile Web Lesson 3: HTML5 Web Apps

Designing for the Mobile Web Lesson 3: HTML5 Web Apps Michael Slater, CEO Andrew DesChenes, Dir. Services course-support@webvanta.com 888.670.6793 www.webvanta.com Welcome! Four sessions 1: The Mobile