drupal 5, css and mobile
TRANSCRIPT
-
8/2/2019 Drupal 5, CSS and mobile
1/47
-
8/2/2019 Drupal 5, CSS and mobile
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
-
8/2/2019 Drupal 5, CSS and mobile
3/47
-
8/2/2019 Drupal 5, CSS and mobile
4/47
@ntrivediaic
The Art Institute of Chicago website
http://www.artic.edu/aic
-
8/2/2019 Drupal 5, CSS and mobile
5/47
@ntrivediaic
The Art Institute of Chicago website
http://www.artic.edu/aic
-
8/2/2019 Drupal 5, CSS and mobile
6/47
Everything but Collections
Runs on Serena Collage
http://www.fl
ickr.com/photos/mikerosen
/4921066226 @ntrivediaic
-
8/2/2019 Drupal 5, CSS and mobile
7/47
Everything but Collections
Currently being redesigned in Drupal 7
http://www.fl
ickr.com/
photos/lutherankorean
/2184513921 @ntrivediaic
-
8/2/2019 Drupal 5, CSS and mobile
8/47
Collections
50,000 of our 150,000 artworks
http://www.artic.e
du/aic/collections/artwork/27992 @ntrivediaic
-
8/2/2019 Drupal 5, CSS and mobile
9/47
Collections
Runs Drupal 5, developed by Palantir in 2008
http://www.flickr.com/photos/marals/3821484254 @ntrivediaic
-
8/2/2019 Drupal 5, CSS and mobile
10/47
Tonight...
Ill be talking about our collectionssite
http://www.artic.edu/aic/collections
@ntrivediaic
-
8/2/2019 Drupal 5, CSS and mobile
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
-
8/2/2019 Drupal 5, CSS and mobile
12/47
our website isnt
growing with our users
@ntrivediaic
-
8/2/2019 Drupal 5, CSS and mobile
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
-
8/2/2019 Drupal 5, CSS and mobile
14/47
-
8/2/2019 Drupal 5, CSS and mobile
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
-
8/2/2019 Drupal 5, CSS and mobile
16/47
Mobile design is simpler
Single column so each feature is larger
http://www.fl
ickr.com/photos/lutherankorean/2184513921 @ntrivediaic
-
8/2/2019 Drupal 5, CSS and mobile
17/47
Mobile design is simpler
Silo the content to just our artwork objects
http://www.fl
ickr.com/photos/lutherankorean/2184513921 @ntrivediaic
-
8/2/2019 Drupal 5, CSS and mobile
18/47
Mobile design is simpler
Content first, navigation below
http://www.fl
ickr.com/photos/lutherankorean/2184513921 @ntrivediaic
-
8/2/2019 Drupal 5, CSS and mobile
19/47
-
8/2/2019 Drupal 5, CSS and mobile
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
-
8/2/2019 Drupal 5, CSS and mobile
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
-
8/2/2019 Drupal 5, CSS and mobile
22/47
Cons
Mobile users download more thanthey see.
Not be the most flexible
implementation.
@ntrivediaic
-
8/2/2019 Drupal 5, CSS and mobile
23/47
Technical strategy
Quick iterative releases
Allow mobile users to view desktopversion
@ntrivediaic
-
8/2/2019 Drupal 5, CSS and mobile
24/47
The dirty detailshttp://www.fl
ickr
.com/photos/depth_of_
life_
stereophotograph
y/5108635034 @ntrivediaic@ntrivediaic
-
8/2/2019 Drupal 5, CSS and mobile
25/47
-
8/2/2019 Drupal 5, CSS and mobile
26/47
What we do
Add a CSS class to the tag
Include a mobile.css to every
page
@ntrivediaic
-
8/2/2019 Drupal 5, CSS and mobile
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
-
8/2/2019 Drupal 5, CSS and mobile
28/47
Layout
Include a new mobile.css with
drupal_add_css() in our themes
phptemplate_preprocess_page().
@ntrivediaic
-
8/2/2019 Drupal 5, CSS and mobile
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
-
8/2/2019 Drupal 5, CSS and mobile
30/47
Layout
Each CSS declaration uses the bodyclass defined in the HTML markup:
body.mobile *{float: none;
}
body.mobile #navbar{display: none;
@ntrivediaic
-
8/2/2019 Drupal 5, CSS and mobile
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
-
8/2/2019 Drupal 5, CSS and mobile
32/47
Almost done
http://www.fl
ickr.com/
photos/blushingdolphin/5654760787 @ntrivediaic@ntrivediaic
-
8/2/2019 Drupal 5, CSS and mobile
33/47
-
8/2/2019 Drupal 5, CSS and mobile
34/47
Toggle between desktop
and mobile
[ ViewFull Site ]
[ ViewMobile Site ]
@ntrivediaic
-
8/2/2019 Drupal 5, CSS and mobile
35/47
Toggle between desktop
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
-
8/2/2019 Drupal 5, CSS and mobile
36/47
Toggle between desktop
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
-
8/2/2019 Drupal 5, CSS and mobile
37/47
Toggle between desktop
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
-
8/2/2019 Drupal 5, CSS and mobile
38/47
Toggle between desktop
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
-
8/2/2019 Drupal 5, CSS and mobile
39/47
Toggle between desktop
and mobile
Pull the cookie that we set for the userpreference:
@ntrivediaic
-
8/2/2019 Drupal 5, CSS and mobile
40/47
Toggle between desktop
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
-
8/2/2019 Drupal 5, CSS and mobile
41/47
Toggle between desktop
and mobile
Otherwise, leave the defaults and
show the View desktop site link:
@ntrivediaic
-
8/2/2019 Drupal 5, CSS and mobile
42/47
Toggle between desktop
and mobile
Add a listener for the toggle links:
@ntrivediaic
-
8/2/2019 Drupal 5, CSS and mobile
43/47
Toggle between desktop
and mobile
Set the cookie. By setting it here, were onlysetting it if the user diverges from thedefault:
@ntrivediaic
-
8/2/2019 Drupal 5, CSS and mobile
44/47
Toggle between desktop
and mobile
Then scroll the user to the top of the page:
@ntrivediaic
-
8/2/2019 Drupal 5, CSS and mobile
45/47
Toggle between the two versions happensquickly
http://
www.fl
ickr.com/photos
/creativephotography6
4/4692996481 @ntrivediaic
-
8/2/2019 Drupal 5, CSS and mobile
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
-
8/2/2019 Drupal 5, CSS and mobile
47/47