This morning I stumbled
across what appeared to be a sponsored tweet from Google.
Discover 42 new online
historical exhibits telling the stories of the 20th century at
google.com/culturalinstit…. Details: goo.gl/LHMOX
I like history so I
followed the link. Am I glad I did. What I found was an amazingly well done site
full of enriching content. Maybe more
importantly, considering my background, it was cool. Within minutes I was browsing the site on the
Mac, the iPad, and finally on my Galaxy III (Android OS). The site delivered a consistent experience on each device.
As an eLearning developer
looking for the best tools and practices for both traditional and mobile web I
was very intrigued by An HTML5 site, incorporating responsive design and images
that that works across multiple platforms and devices. So how'd they do
it? I was determined to find out, or at
least get some more insight.
First Things First...
On initial inspection they seem to have
actually hidden things pretty well. Right-clicking to view the source is
disabled, so I had to use Chrome's Developer Tools to view the source. I copied
and pasted into a new document in Dreamweaver and then used the "Apply Source
Formatting" command to make it nice and neat. There appeared to be only a few
linked JavaScript files. YouTube API, JS
API, and Plus One API. Most everything
else seems to be behind the scenes written on the fly. I did take a quick look at two of the JavaScript
files but as they had been minimized (extra spaces removed to reduce file size)
anything meaning full was going to take a good deal of time to dig up.
Viewing the document in
Design View did not provide the results I had expected. I was presented with a few division (DIV)
tags but the majority of the document was populated by list items (<LI>)
tags. Search engines use a number of things including header, division, and
list item tags to discern the structure of information on a page. It was as surprising to find the content laid
out in such a format, as it was to find no supporting CSS styles to define how
this information should appear.
Digger Deeper
Take for example the list
item highlighted in the first image below. It defines the piece of content that
can be seen in the lower right hand corner of he homepage and in the second
image below. Where is the graphical
information? It's not on the page so it
must be in the CSS, right?
No. The first
clue can be found in the class the list item uses. It's empty.
Therefore there is no clear tie from this list item to anything in the
CSS. To confirm this I searched the CSS
for anything that might be associated with "Anne Frank House". A quick look
through the 4800 line document did not appear to even turn up anything that
defined how ANY list item should appear, let alone this specific one.
Flip, Switch, Repeat...
Since I was not getting
very far in my investigation using Dreamweaver, I decided to switch over to
Chrome Developer Tools.
For anyone not familiar,
Chrome Developer Tools is a built in piece of the browser that among other
things let you view live code on a page. Dynamic elements or scripts activated
as the page is rendered will be visible here.
Moussing over an element in the code view will highlight the same
element in the browser window. It even displays what CSS descriptor is tied to
selected item.
Using this method I
drilled down to the <DIV> tag associated with my example from above. Yes, that is correct - <DIV> tag. The list item in the static html appeared to
be describing the "Anne Frank House" graphic, as I could find no other
reference to it.
Now I seemed to be
getting some answers. The list item I initial saw when viewing the source was
now defined on the live page in a much more complex fashion seen below.
Hints and Allogations...
Based on my discovery so
far It's my best guess that the scripts used on the page utilize the basic
structure found in the static <DIV>, <UL>, and <LI> item tags
as a data source for formatting content to a specific browser and size. For
further evidence of this, focus on the highlighted section in the image
above. Now not only do we have a CSS
class associated with the <DIV> container, we also have information that
defines the background image used in the style attribute of the <DIV>.
I now had some pretty
solid information to confirm what I had already believed; the site is using
responsive design to tailor how the page appears across browsers, platforms and
devices. What about responsive
images? Images that are delivered to the
browser to based on the available size.
I also had some good information on this as well.
I have read up on two methods of responsive images. One uses CSS
and media queries. A style sheet is attached to the page based on
different minimum and maximum sizes of the browser. When the page loads the
correct style sheet is applied. The images delivered through these style
sheets are sized to cover a range. Scaling the image covers the difference.
The
other method I have seen uses PHP to return an image. Instead of your
typical source URL for an image it would be to a PHP script to determine the
most appropriate image to deliver. You toss in some additional parameters
on the query string and the server side script sends you back the correct
image. Even these I don't believe are exact. It seems to me a great deal
of processing power would be required to generate and exact image size you needed
on the fly. If anyone would have
processing power to spare it just might be Google.
A Test of Wills
What
method is being used to return the background in the "Anne Frank" example? It might be a little of both as I did see
some signs of media queries being used in the CSS. To get a better idea I devised a test. With the Developer Tools open I sized my
browser to about a quarter of the screen size.
I re-selected the <DIV> that defined the example I had been
using. As I mentioned this displays the
associated CSS of this element. I then
right clicked on the linked assigned to the URL attribute and had it open in a
new tab.
This
returned the rather small image seen below.
I then saved the file and looked at it properties; 255 pixels wide and
96 pixels high with a files size of just 12kb.
I then opened the browser window up as large as I could and repeated the
process. This produced and image 511 pixels wide and 193 pixels high with a
file size of 41kb. Not only was the
image appearing larger it also had a larger files size. Though I am not certain Google is using PHP
as in the second responsive image method I described it does appear they are
performing something similar.
The Score...
Though
I don't quite know the exact details of how Google has pulled off the site, I do
have a far better understanding of some of the methods they have used. This understanding has lead me to wonder
about other areas. How have they integrated
the horizontal click and drag, horizontal mouse wheel scrolling and replicated the functionality with gestures on mobile devices?
Be
sure to check back and see what I have discovered.
Did
I miss something? Do you have a
different take? I would love to hear
from you.
.jpg)