The Mobile Web on Drupal!




Thursday, January 13, 2011
Where are we going today?

               Mobile Web development theories and philosophies
               Reality check!
 ...
How technical is this going to be?


                     We’ll start high level (everyone)

                     We’ll ta...
Nope.
               This topic is huge. We won’t have time to talk about:
                     Detailed (HTML/CSS) markup...
By The Way



               This presentation is
               based on Drupal 6

                                      ...
Leading Philosophies of
          Mobile Web Development



Thursday, January 13, 2011
The “One Web”




Thursday, January 13, 2011
One Web means making, as far as is reasonable, the
                             same information and services available to...
That means...

               Separate mobile site or domain (e.g. m.mysite.com) is
               discouraged.
          ...
Responsive Web Design (RWD)




Thursday, January 13, 2011
RWD
               Using sophisticated markup and CSS techniques to
               make the “One Web” ideal more attainabl...
I am a CSS Media Query:

                             <link rel="stylesheet" type="text/css"
                             ...
Progressive Enhancement




Thursday, January 13, 2011
Progressive Enhancement


               Not just a mobile concern
               Luke W’s “Mobile First” credo is in the ...
Server-Side Device Detection and
          Adaptation




Thursday, January 13, 2011
Who goes there?




Thursday, January 13, 2011
Server-Side Device Detection

               Based on using User Agent strings to make an
               educated guess at...
WURFL

               http://wurfl.sourceforge.net/
               Maintained/moderated by Luca Passani.
               Exh...
Let’s Look at some WURFL Capabilities




               Tera-WURFL Explorer
                     http://www.tera-wurfl.com...
DeviceAtlas

               Licenses run from $99/yr (per server) to ... well, more.
                     You get guarante...
Client-Side Adaptation




Thursday, January 13, 2011
Whereas server-side detection asks “Who
          goes there?,” client-side adaptation allows
          you to say things ...
Oh, yeah? prove it.




Thursday, January 13, 2011
Client-Side Adaptation


               Determining real client capabilities a la Modernizr
               Using CSS Media...
Modernizr (A Quick Aside)
               Runs tests on the client
               Adds CSS classes to the <html> element ba...
So, that all sounds lovely and clean and
          unicorn-shaped.




Thursday, January 13, 2011
The Reality




Thursday, January 13, 2011
Thursday, January 13, 2011
“One Web” is vague
                             Dear Puny Human,

                             Make one Web site such that...
RWD has performance and bandwidth implications

               Image resizing on devices can be inefficient and uses
      ...
Shoving a 153,600-pixel image at a phone that only has about
                             16,000 pixels of real estate to ...
Server-side device detection via UA is not infallible...


                    Who goes
                     there?




  ...
Who goes
                     there?




                                         Web Server! I am
                       ...
Client-side enhancement can be pretty tricky if your
          user’s device isn’t up to it


                            ...
Thursday, January 13, 2011
Duct Tape Programming

               “Duct tape programmers are pragmatic...

               “A 50%-good solution that pe...
Thursday, January 13, 2011
So, how do we keep our nose clean in
          this tragicomical environment?
          Staying True to a Couple of Tenets...
1. Don’t send bits to a
           device that it won’t use



Thursday, January 13, 2011
bits == dollars
          bits == waiting
          bits ~= processing


Thursday, January 13, 2011
2. The client is always
          right*

                             * This one gets me in a bit of trouble




Thursday...
Remember how I said that User Agents
          aren’t always 100% honest and
          forthcoming? Or, at least, sane?


...
Whose User Agent is this?


               Mozilla/5.0 (Macintosh; U; Intel Mac OS X
               10_5_7; en-us) AppleWe...
A Sane Person would guess...



               Desktop Safari
               And that’s what WURFL will tell you, too




...
But




               It’s Skyfire for Android.




Thursday, January 13, 2011
“Load web pages as either traditional Android user agent or as
                              a desktop browser. The deskto...
Upcoming SlideShare
Loading in …5
×

Mobile Web on Drupal!

7,756 views
7,368 views

Published on

Presentation from Jan. 12, 2011 meeting of Portland (Ore.) Drupal Users Group (PDXDUG). A whirlwind tour of mobile Web topics from a Drupal 6 viewpoint. As much as I could get into a 45-minute slide deck! Whew.

Published in: Technology
1 Comment
12 Likes
Statistics
Notes
No Downloads
Views
Total views
7,756
On SlideShare
0
From Embeds
0
Number of Embeds
1,283
Actions
Shares
0
Downloads
123
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide

Mobile Web on Drupal!

  1. The Mobile Web on Drupal! Thursday, January 13, 2011
  2. Where are we going today? Mobile Web development theories and philosophies Reality check! Core tenets I like to stick to So, about Drupal...the good and the bad Digging in and putting some pieces together (CODE!) Stuff to read so you can learn more Thursday, January 13, 2011
  3. How technical is this going to be? We’ll start high level (everyone) We’ll talk about strategy and device grouping (everyone/solution architects) We’ll talk about Drupal’s strengths and weaknesses and 3rd-party stuff. (everyone/somewhat technical) We’ll look at code for a hypothetical module and work with Drupal hooks and whatnot. (devs/code) We’ll talk about mobile theming strategy. (designers) I’ll recommend some books, blogs and mailing lists. (everyone) Thursday, January 13, 2011
  4. Nope. This topic is huge. We won’t have time to talk about: Detailed (HTML/CSS) markup for mobile devices. The finer points of device-specific support for technologies (CSS/JS/HTML5/whatever). Design and UX best practices. Testing. All of these areas are incredibly important, though! Thursday, January 13, 2011
  5. By The Way This presentation is based on Drupal 6 My current feeling about D7* * Sorry Thursday, January 13, 2011
  6. Leading Philosophies of Mobile Web Development Thursday, January 13, 2011
  7. The “One Web” Thursday, January 13, 2011
  8. One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using. However, it does not mean that exactly the same information is available in exactly the same representation across all devices. The context of mobile use, device capability variations, bandwidth issues and mobile network capabilities all affect the representation... ...it is considered best practice to provide as reasonable experience as is possible given device limitations and not to exclude access from any particular class of device, except where this is necessary because of device limitations.... Errr... Thursday, January 13, 2011
  9. That means... Separate mobile site or domain (e.g. m.mysite.com) is discouraged. All users should get, for the most part, the same text, features, markup, images, functionality, etc. (within reason, which you get to determine). Develop once (I do like this part). Thursday, January 13, 2011
  10. Responsive Web Design (RWD) Thursday, January 13, 2011
  11. RWD Using sophisticated markup and CSS techniques to make the “One Web” ideal more attainable. Using CSS Media Queries to adapt content, allowing for “One Web” success Fluid grid designs For the most part, send the same HTML markup and media (e.g. images) to everyone http://www.alistapart.com/articles/responsive-web- design/ Thursday, January 13, 2011
  12. I am a CSS Media Query: <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" /> Thursday, January 13, 2011
  13. Progressive Enhancement Thursday, January 13, 2011
  14. Progressive Enhancement Not just a mobile concern Luke W’s “Mobile First” credo is in the same family Design your baseline site for mobile, then go from there http://www.lukew.com/ff/entry.asp?933 Thursday, January 13, 2011
  15. Server-Side Device Detection and Adaptation Thursday, January 13, 2011
  16. Who goes there? Thursday, January 13, 2011
  17. Server-Side Device Detection Based on using User Agent strings to make an educated guess at what a device is and what capabilities it has Several device libraries support this. Two of the best known are: WURFL DeviceAtlas Thursday, January 13, 2011
  18. WURFL http://wurfl.sourceforge.net/ Maintained/moderated by Luca Passani. Exhaustive details about mobile device and client capabilities based on User Agent. Contributors have created APIs in several languages. Free and open source. Thursday, January 13, 2011
  19. Let’s Look at some WURFL Capabilities Tera-WURFL Explorer http://www.tera-wurfl.com/explore/ Thursday, January 13, 2011
  20. DeviceAtlas Licenses run from $99/yr (per server) to ... well, more. You get guaranteed updates. API is PHP, Java, .Net Analytics as well. Web site is free and a useful reference for looking up devices right quick. http://deviceatlas.com Thursday, January 13, 2011
  21. Client-Side Adaptation Thursday, January 13, 2011
  22. Whereas server-side detection asks “Who goes there?,” client-side adaptation allows you to say things like: Thursday, January 13, 2011
  23. Oh, yeah? prove it. Thursday, January 13, 2011
  24. Client-Side Adaptation Determining real client capabilities a la Modernizr Using CSS Media queries Taking delivered markup the final mile Ensures that the client can walk the walk Thursday, January 13, 2011
  25. Modernizr (A Quick Aside) Runs tests on the client Adds CSS classes to the <html> element based on what it discovers You, noble developer/themer, can: Write your CSS accordingly Use JavaScript to extend your stuff Based on what the browser can actually do http://www.modernizr.com Thursday, January 13, 2011
  26. So, that all sounds lovely and clean and unicorn-shaped. Thursday, January 13, 2011
  27. The Reality Thursday, January 13, 2011
  28. Thursday, January 13, 2011
  29. “One Web” is vague Dear Puny Human, Make one Web site such that it’s, like, the same on all devices, except, well, make sure that it is appropriately different on some devices. Don’t exclude anyone, except when “device limitations” force you to. I’ll leave deciding what a device limitation is as an exercise for the reader. Love, The W3C http://www.w3.org/TR/mobile-bp/#OneWeb Thursday, January 13, 2011
  30. RWD has performance and bandwidth implications Image resizing on devices can be inefficient and uses bandwidth you might not need to use. CSS media query support is fragmented and only on modern devices. For the most part, images hidden in CSS still get downloaded. We’re sending the device bytes that it is not going to use. http://www.cloudfour.com/css-media-query-for-mobile- is-fools-gold/ Thursday, January 13, 2011
  31. Shoving a 153,600-pixel image at a phone that only has about 16,000 pixels of real estate to work with is like giving 4-by-8- foot sheets of plywood to a kid who wants to build a miniature birdhouse. Even if wood is cheap, it tastelessly wastes a lot of trees... —Lyza Gardner (Me) Adventures on the Mobile Web Frontier, Nov. 4, 2010 * http://www.cloudfour.com/adventures-on-the-mobile-web-frontier-wrangling- drupal-third-party-apis-and-server-oomph-into-an-enterprise-class- experience/ * Sorry about that URL; my bad Thursday, January 13, 2011
  32. Server-side device detection via UA is not infallible... Who goes there? Hello, Web Server, I am a sheep! Thursday, January 13, 2011
  33. Who goes there? Web Server! I am also a sheep!* *Not really a sheep. Thursday, January 13, 2011
  34. Client-side enhancement can be pretty tricky if your user’s device isn’t up to it “Hi, I’m BlackBerry version 4.5. You’d be surprised at how many people at big companies still use me and love me. You cannot manipulate my DOM and my JavaScript performance is very sad. Sorry.” Thursday, January 13, 2011
  35. Thursday, January 13, 2011
  36. Duct Tape Programming “Duct tape programmers are pragmatic... “A 50%-good solution that people actually have solves more problems and survives longer than a 99% solution that nobody has because it’s in your lab where you’re endlessly polishing the damn thing. “Shipping is a feature. A really important feature. Your product must have it.” —Joel Spolsky The Duct Tape Programmer, Sept. 23, 2009 Joel on Software http://www.joelonsoftware.com/items/2009/09/23.html Thursday, January 13, 2011
  37. Thursday, January 13, 2011
  38. So, how do we keep our nose clean in this tragicomical environment? Staying True to a Couple of Tenets... Thursday, January 13, 2011
  39. 1. Don’t send bits to a device that it won’t use Thursday, January 13, 2011
  40. bits == dollars bits == waiting bits ~= processing Thursday, January 13, 2011
  41. 2. The client is always right* * This one gets me in a bit of trouble Thursday, January 13, 2011
  42. Remember how I said that User Agents aren’t always 100% honest and forthcoming? Or, at least, sane? Thursday, January 13, 2011
  43. Whose User Agent is this? Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_7; en-us) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Safari/530.17 Thursday, January 13, 2011
  44. A Sane Person would guess... Desktop Safari And that’s what WURFL will tell you, too Thursday, January 13, 2011
  45. But It’s Skyfire for Android. Thursday, January 13, 2011
  46. “Load web pages as either traditional Android user agent or as a desktop browser. The desktop option gives you more flexibility in accessing web sites and allows discovery of video content that might not be visible on the mobile site.”

×