You are on page 1of 47

Drupal 5, CSS and Mobile

nikhil trivedi -- @ntrivediaic http://www.nikhiltrivedi.com

@ntrivediaic

Outline
Summary of the problem Design strategy Technical strategy pros/cons How we implemented layout How we implemented toggling Code at: nikhiltrivedi.com

Summary of the problem

@ntrivediaic

The Art Institute of Chicago website


http://www.artic.edu/aic

@ntrivediaic

The Art Institute of Chicago website


http://www.artic.edu/aic

http://www.ickr.com/photos/mikerosen/4921066226

@ntrivediaic

Everything but Collections


Runs on Serena Collage

http://www.ickr.com/photos/lutherankorean/2184513921

@ntrivediaic

Everything but Collections


Currently being redesigned in Drupal 7

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...

Ill be talking about our collections site


http://www.artic.edu/aic/collections

http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ ns827/white_paper_c11-520862.html

@ntrivediaic

Mobile users are growing

7.75% of our visitors in February were on mobile devices, up from 3.25% the previous year

our website isnt growing with our users

@ntrivediaic

@ntrivediaic

Our immediate future


Everything but Collections site is being redesigned with mobile in mind. Collections site has no immediate plans to upgrade. How do we satisfy our mobile users needs today. Restyle our current site for mobile

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

Mobile design is simpler


Single column so each feature is larger

http://www.ickr.com/photos/lutherankorean/2184513921

@ntrivediaic

Mobile design is simpler


Silo the content to just our artwork objects

http://www.ickr.com/photos/lutherankorean/2184513921

@ntrivediaic

Mobile design is simpler


Content rst, navigation below

Technical strategy pros and cons

@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

Quick iterative releases Allow mobile users to view desktop version

http://www.ickr.com/photos/depth_of_life_stereophotography/5108635034

The dirty details


@ntrivediaic

How we implemented layout

@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

Include a new mobile.css with drupal_add_css() in our themes phptemplate_preprocess_page().

@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

How we implemented toggling

Toggle between desktop and mobile

@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>

Toggle between desktop and mobile


In our Drupal theme CSS: #toggle-mobile-on, #toggle-mobile-off { visibility: hidden; display: none; } This protects from Javascript show() methods on Desktop site.

@ntrivediaic

Toggle between desktop and mobile


In our mobile.css:
#toggle-mobile-on, #toggle-mobile-off { visibility: visible; }

@ntrivediaic

Allow Javascript show() methods on our mobile site to actually work. Dont include body.mobile prex

Toggle between desktop and mobile


For the desktop site, Javascript cannot control whether the toggle links display, they are always hidden. For smaller devices, Javascript can control whether these links display.

@ntrivediaic

Toggle between desktop and mobile


On the initial page load both toggle links are still hidden. By default we should display the View desktop site link. If a user has requested to view the desktop version, all subsequent pages should also and display the View mobile site link. Use jQuery with cookie plugin.

@ntrivediaic

Toggle between desktop and mobile

@ntrivediaic

Pull the cookie that we set for the user preference:

Toggle between desktop and mobile

@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:

Toggle between desktop and mobile


Otherwise, leave the defaults and show the View desktop site link:

@ntrivediaic

Toggle between desktop and mobile


Add a listener for the toggle links:

@ntrivediaic

Toggle between desktop and mobile

@ntrivediaic

Set the cookie. By setting it here, were only setting it if the user diverges from the default:

Toggle between desktop and mobile

@ntrivediaic

Then scroll the user to the top of the page:

http://www.ickr.com/photos/creativephotography64/4692996481

@ntrivediaic

Toggle between the two versions happens quickly

@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

You might also like