drupal 5, css and mobile

8/2/2019 Drupal 5, CSS and mobile

1/47


2/47

Outline

Summary of the problem

Design strategy

Technical strategy pros/cons

How we implemented layout

How we implemented toggling

Code at: nikhiltrivedi.com

@ntrivediaic


3/47


4/47

@ntrivediaic

The Art Institute of Chicago website

http://www.artic.edu/aic


5/47

@ntrivediaic

The Art Institute of Chicago website

http://www.artic.edu/aic


6/47

Everything but Collections

Runs on Serena Collage

http://www.fl

ickr.com/photos/mikerosen

/4921066226 @ntrivediaic


7/47

Everything but Collections

Currently being redesigned in Drupal 7

http://www.fl

ickr.com/

photos/lutherankorean

/2184513921 @ntrivediaic


8/47

Collections

50,000 of our 150,000 artworks

http://www.artic.e

du/aic/collections/artwork/27992 @ntrivediaic


9/47

Collections

Runs Drupal 5, developed by Palantir in 2008

http://www.flickr.com/photos/marals/3821484254 @ntrivediaic


10/47

Tonight...

Ill be talking about our collectionssite

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

@ntrivediaic


11/47

Mobile users are growing

7.75% of our visitors in February were onmobile devices, up from 3.25% the previousyearh

ttp://www.c

isco.com/en/US/solutions/co

llateral/ns341/ns525/

ns537/ns705/

ns827/white_

paper_c11

-520862.html

@ntrivediaic


12/47

our website isnt

growing with our users

@ntrivediaic


13/47

Our immediate future

Everything but Collections site isbeing redesigned with mobile in

mind.

Collections site has no immediateplans to upgrade.

How do we satisfy our mobile usersneeds today.

Restyle our current site for mobile

@ntrivediaic


14/47


15/47

Overall strategy

Hide content thats less essential.

Make the rest bigger and morestreamlined.

Dont over-complicate our work

Short turnaround time (about 3 daysof work).

@ntrivediaic


16/47

Mobile design is simpler

Single column so each feature is larger

http://www.fl

ickr.com/photos/lutherankorean/2184513921 @ntrivediaic


17/47


Silo the content to just our artwork objects

http://www.fl



18/47


Content first, navigation below

http://www.fl



19/47


20/47

Technical strategy

Mobile site is served using the same

URLs as our desktop site

Server-generated code is exactlythe same for both sites

CSS and JavaScript used to changethe look

@ntrivediaic


21/47

Pros

Take advantage of page caching.

External links to our content alwaysdisplay relevantly to your device.

No additional work for our contentcreators.

Take advantage of scriptaggregation.

@ntrivediaic


22/47

Cons

Mobile users download more thanthey see.

Not be the most flexible

implementation.

@ntrivediaic


23/47

Technical strategy

Quick iterative releases

Allow mobile users to view desktopversion

@ntrivediaic


24/47

The dirty detailshttp://www.fl

ickr

.com/photos/depth_of_

life_

stereophotograph

y/5108635034 @ntrivediaic@ntrivediaic


25/47


26/47

What we do

Add a CSS class to the tag

Include a mobile.css to every

page

@ntrivediaic


27/47

Layout

Use body classes to swap layout

between mobile and desktop:

Create a $vars[body_classes]

variable in our themesphptemplate_preprocess_page()

and output in page.tpl.php.

@ntrivediaic


28/47

Layout

Include a new mobile.css with

drupal_add_css() in our themes

phptemplate_preprocess_page().

@ntrivediaic


29/47

Layout

This CSS file starts with

@media screen and (max-device-width: 540px) {

Limits the CSS in this file to smalldevices

If we want the option to view themobile site on a desktop, we canleave this wrapper out.

@ntrivediaic


30/47

Layout

Each CSS declaration uses the bodyclass defined in the HTML markup:

body.mobile *{float: none;

}

body.mobile #navbar{display: none;

@ntrivediaic


31/47

Layout

All the mobile design goodnesshappens in this CSS.

We dont display elements we wantto 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.

@ntrivediaic


32/47

Almost done

http://www.fl

ickr.com/

photos/blushingdolphin/5654760787 @ntrivediaic@ntrivediaic


33/47


34/47

Toggle between desktop

and mobile

[ ViewFull Site ]

[ ViewMobile Site ]

@ntrivediaic


35/47


and mobile

In our Drupal theme CSS:

#toggle-mobile-on,

#toggle-mobile-off{visibility: hidden;display: none;

}

This protects from Javascriptshow() methods on Desktop site.

@ntrivediaic


36/47


and mobile

In our mobile.css:

#toggle-mobile-on,

#toggle-mobile-off{visibility: visible;

}

Allow Javascript show() methods onour mobile site to actually work.

Dont include body.mobile prefix

@ntrivediaic


37/47


and mobile

For the desktop site, Javascriptcannot control whether the togglelinks display, they are alwayshidden.

For smaller devices, Javascript cancontrol whether these links display.

@ntrivediaic


38/47


and mobile

On the initial page load both togglelinks are still hidden.

By default we should display theView desktop site link.

If a user has requested to view thedesktop version, all subsequentpages should also and display theView mobile site link.

Use jQuery with cookie plugin.

@ntrivediaic


39/47


and mobile

Pull the cookie that we set for the userpreference:

@ntrivediaic


40/47


and mobile

If its set to the desktop site, weremove the mobile body class and add

a non-mobile placeholder, display theView mobile site link:

@ntrivediaic


41/47


and mobile

Otherwise, leave the defaults and

show the View desktop site link:

@ntrivediaic


42/47


and mobile

Add a listener for the toggle links:

@ntrivediaic


43/47


and mobile

Set the cookie. By setting it here, were onlysetting it if the user diverges from thedefault:

@ntrivediaic


44/47


and mobile

Then scroll the user to the top of the page:

@ntrivediaic


45/47

Toggle between the two versions happensquickly

http://

www.fl

ickr.com/photos

/creativephotography6

4/4692996481 @ntrivediaic


46/47

Thats it!

Summary of the problem

Design strategy Technical strategy pros/cons

How we implemented layout

How we implemented toggling Code at: nikhiltrivedi.com

@ntrivediaic


47/47

drupal 5, css and mobile

Documents