Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
@ntrivediaic
Outline
Summary of the problem Design strategy Technical strategy pros/cons How we implemented layout How we implemented toggling Code at: nikhiltrivedi.com
@ntrivediaic
@ntrivediaic
http://www.ickr.com/photos/mikerosen/4921066226
@ntrivediaic
http://www.ickr.com/photos/lutherankorean/2184513921
@ntrivediaic
http://www.artic.edu/aic/collections/artwork/27992
@ntrivediaic
Collections
50,000 of our 150,000 artworks
http://www.ickr.com/photos/marals/3821484254
@ntrivediaic
Collections
Runs Drupal 5, developed by Palantir in 2008
@ntrivediaic
Tonight...
http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ ns827/white_paper_c11-520862.html
@ntrivediaic
7.75% of our visitors in February were on mobile devices, up from 3.25% the previous year
@ntrivediaic
@ntrivediaic
Design strategy
@ntrivediaic
Overall strategy
Hide content thats less essential. Make the rest bigger and more streamlined. Dont over-complicate our work Short turnaround time (about 3 days of work).
http://www.ickr.com/photos/lutherankorean/2184513921
@ntrivediaic
http://www.ickr.com/photos/lutherankorean/2184513921
@ntrivediaic
http://www.ickr.com/photos/lutherankorean/2184513921
@ntrivediaic
@ntrivediaic
Technical strategy
Mobile site is served using the same URLs as our desktop site Server-generated code is exactly the same for both sites CSS and JavaScript used to change the look
@ntrivediaic
Pros
Take advantage of page caching. External links to our content always display relevantly to your device. No additional work for our content creators. Take advantage of script aggregation.
@ntrivediaic
Cons
Mobile users download more than they see. Not be the most exible implementation.
@ntrivediaic
Technical strategy
http://www.ickr.com/photos/depth_of_life_stereophotography/5108635034
@ntrivediaic
What we do
Add a CSS class to the <body> tag Include a mobile.css to every page
@ntrivediaic
Layout
Use body classes to swap layout between mobile and desktop: <body class="mobile"> Create a $vars[body_classes] variable in our themes phptemplate_preprocess_page() and output in page.tpl.php.
@ntrivediaic
Layout
@ntrivediaic
Layout
This CSS le starts with @media screen and (maxdevice-width: 540px) { Limits the CSS in this le to small devices If we want the option to view the mobile site on a desktop, we can leave this wrapper out.
@ntrivediaic
Layout
Each CSS declaration uses the body class dened in the HTML markup:
body.mobile * { float: none; } body.mobile #navbar { display: none;
@ntrivediaic
Layout
All the mobile design goodness happens in this CSS. We dont display elements we want to hide using display: none Reformat elements to look bigger and cleaner on a smaller screen. Dont use pixels to size elements. Use percentages and ems.
http://www.ickr.com/photos/blushingdolphin/5654760787
Almost done
@ntrivediaic
@ntrivediaic
<p id="toggle-mobile-off"> [ <a href="#" class="toggle-mobile">View Full Site</a> ] </p> <p id="toggle-mobile-on"> [ <a href="#" class="toggle-mobile">View Mobile Site</a> ] </p>
@ntrivediaic
@ntrivediaic
Allow Javascript show() methods on our mobile site to actually work. Dont include body.mobile prex
@ntrivediaic
@ntrivediaic
@ntrivediaic
@ntrivediaic
If its set to the desktop site, we remove the mobile body class and add a non-mobile placeholder, display the View mobile site link:
@ntrivediaic
@ntrivediaic
@ntrivediaic
Set the cookie. By setting it here, were only setting it if the user diverges from the default:
@ntrivediaic
http://www.ickr.com/photos/creativephotography64/4692996481
@ntrivediaic
@ntrivediaic
Thats it!
Summary of the problem Design strategy Technical strategy pros/cons How we implemented layout How we implemented toggling Code at: nikhiltrivedi.com
http://www.ickr.com/photos/canam6/3062011498
@ntrivediaic
Questions?
http://www.nikhiltrivedi.com -- @ntrivediaic