The Magic of Media Queries

Library websites aren’t thrown together with nary a thought. They are not designed in a slapdash manner. A lot of thought is put into the look and feel as well as the content on the page. One of the driving forces in web design is a little thing called responsive design. This is the answer to the vast array of devices that folks use to access library web sites. From widescreen Apple TVs to full-sized laptops, from iPads to smartphones the size of the screen varies greatly. When it comes to real estate on the screen, web designers must be like Indiana Jones in the Last Crusade and choose wisely. Luckily, there’s a type of code called a media query that can step in and pick up the assist.

A media query is a line (or lines) of code that query the media you’re using to view the page and then pass certain parameters. Now again, in English this time: a media query talks to your device and sees what the value is for a specific property and then re-designs the content based on that value. For an example we can turn to the screen size I mentioned above. Here is a media query that will ask your device if it matches a certain screen size:

@media (max-width:760px)

{

h1  {font-size:170%; width:100%; }

h2  {display:none;}

}

If your device is 760 pixels wide, then all h1 tags will be increased to 170% of its normal size and go 100% across the page. Additionally, any h2 tags will be hidden.  You can have multiple media queries that redo the design at various widths. When I was first learning about this, it took a while to sink in. In fact I only really understood it when I saw it in action. So let’s do a bit of show and tell, shall we? As a bonus, I’ll also touch upon the content choices that were made.

Below is a picture of the splendid Robbins Library website on a full-sized screen. You can see that each section of the page has plenty of elbow room. Your eyes are immediately drawn to the search box because it’s front and center. Not only that, but you can see there’s nothing in the surrounding area. This is because the vast majority of folks that visit the library web site are there to find materials; books, eBooks, DVDs, etc. You’ll notice that you’re given subtle choices as to what you want to search. While the catalog is the default search option, the designers of the site realized that sometimes folks would want to search for something one of the fantastic librarians blogged about or some event going on in the library. So clicking BLOG or SITE will allow a user to search there in the stead of the catalog.

Below the search box you find hours, which is probably the second most popular bit of information sought after on a library website. Again, plenty of room around that section so that you can read it easily. To the right of that is a list of other popular destinations. If those choices aren’t to your liking the navigation menu (USING THE LIBRARY to SUPPORT ROBBINS)  on the top of the search box offer you more choices. Rounding out the features you have the phone number on the top left and a few more functional links on the top right. The home page of the web site can be likened to a table of contents. It doesn’t overwhelm you by jumping right into detailed information but rather points you in the direction you need to go.

Picture of the Website on a big screen

Click on the picture for a larger image

All those features are useful, but what if you’re viewing the site on a tiny smartphone screen. Say you’re in-between dropping little Mikey at soccer practice and picking up little Molly from day care and you want to know if the library will still be open by the time you get back into the neighborhood? You’d just need the hours, right? Well thanks to media queries, calling up the site on your iPhone will give you the hours without all the other options.

The picture below shows you how the information is rearranged. The search box is still the most prominent part of the page, in case you want to search for materials, blog entries, or events. The hours have been moved to the center of the page and the quick links dropped below the hours. The navigation menu has completely collapsed. It’s still there and can be used but it’s not taking up nearly as much of the screen space that is so precious on a small device.

Picture of the Website on a small screen

Click on the picture for a larger image

Scroll back up a moment and try to imagine the first picture squeezed into the width of the second picture. Forget the fact that it would be tough to read, the navigation menu items would be too small to use. I’ve been bestowed what is kindly referred to as “sausage fingers.” It’s nigh on impossible for me to use my finger to “click” a link on a smartphone or tablet if the button is half the width of my finger. I usually end up clicking two buttons at once. Even those of you blessed with dainty fingers may have trouble with sites that ignore responsive design.

On a final note I ask what about our physically disadvantaged colleagues?  Folks with poor eyesight, folks with arthritis, folks with prosthetics, they all would most likely be physically unable to use the site on a smaller screen. Granted those folks would probably be less likely to use a smartphone with a small screen. However, the industry is moving towards touchscreen technology and even larger screens present problems. Think about the traditional way of clicking, the mouse. The cursor is vastly smaller than a fingertip.

Device choice and disabilities are just two of the questions that media queries can help answer. Libraries want to help people find the information they need and the library website is an extension of this desire. So, naturally, a lot of thought goes into what users will see on the website from device to device.

Advertisements
This entry was posted in Technology and tagged , , , , . Bookmark the permalink.

2 Responses to The Magic of Media Queries

  1. CK says:

    Brad, well done. Thank you.

  2. Jenny says:

    Great post, Brad. For those who don’t know, “h1” means a large heading, and “h2” is a smaller sub-heading, still usually larger than the regular text on the page.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s