making the library catalog mobile-friendly · • use css3 media queries to dynamically load...

Making the Library Catalog Mobile-Friendly

in 5 Easy Step!

1. Use CSS3 media queries 2. Create mobile style rules 3. Implement <meta> tag 4. Hide navigation bar5. Create bookmark icon

5 Steps to Mobile-Friendly

CSS3 Media Query Step 1

Dynamically load stylesheetbased on

specified parameters

Different from CSS2 Media Types

• Size of Browser Window

• Size of Device

• Orientation of Device

Media Queries detect:

Internally in HTML file

Externally in CSS file

Media Queries can be used:

Internal Media Queryin HTML

Using Browser Window Size

About Media Queries - Internal - Browser Window Size

<link rel="stylesheet" media="only screen and (max-width: 480px)" href="/

screens/smallscreen.css" type="text/

css"/>

About Media Queries - Internal - Browser Window Size

<link rel="stylesheet" media="only

screen and (max-width:

480px)" href="/screens/smallscreen.css" type="text/css"/>

Using Device Screen Size

About Media Queries - Internal - Device Screen Size

<link rel="stylesheet" media="only screen and (max-device-width: 480px)"

href="/screens/smallscreen.css"

type="text/css"/>

About Media Queries - Internal - Device Screen Size

<link rel="stylesheet" media="only

screen and (max-device-width:

480px)" href="/screens/smallscreen.css" type="text/css"/>

External Media Queryin CSS

About Media Queries - External - Browser Window & Device Size

body{background:blue;

}

@media only screen and (max-width: 480px), only screen and (max-device-width:480px){

body{background:red;

}}

About Media Queries - External - Browser Window & Device Size

body{background:blue;

}

@media only screen and (max-width: 480px), only screen and (max-device-width:480px){

body{background:red;

}}

Alternate CSS Rule!Step 2

• Navigation for Mobile

• Re-size Fonts

• Display/Hide Elements

• Single-Column Layout

Style Considerations:

Single-Column Layout in Log In Page

Useful Information in Search Results

Font Resizing in Detailed Records

Toggle Logos & Navigation

Toggle Logos & Navigation#mobileHeader

Toggle Logos & Navigation

#mobileNavigation

#mobileHeader

Toggle Logos - in HTML

<!--MOBILE HEADER & NAVIGATION--><div id="mobileHeader">

<a href="http://www.simmons.edu/library/m/"><img src="http://www.simmons.edu/library/m/images/mobile-logo.png"/></a>

</div>

<div id="mobileNavigation"><a href="http://library.simmons.edu:2082/search" class="basic">Basic Search</a> | <a href="http://library.simmons.edu:2082/search/j" class="journal">Journal Search</a> | <a href="http://library.simmons.edu:2082/patroninfo">Login</a> | <a href="http://library.simmons.edu/screens/help.html"> FAQ </a>

</div>

#mobileHeader{display:none;

}

#mobileNavigation{display:none;}

Toggle Logos - in Default CSS

#header{display:none;

}

#mobileHeader {display:block;

}

#mobileNavigation{display:block;

}

Toggle Logos - in Mobile CSS

Viewport Meta TagStep 3

Use the viewport meta tag to override mobile browser

defaults.

Without Viewport Meta Tag

With Viewport Meta Tag

• Content Width

• Initial Scale

• Ability to Zoom

Viewport Meta Tag

Viewport Meta Tag

<meta name="viewport"

content=”width=device-width,

initial-scale=1, maximum-

scale=1”/>

Viewport Meta Tag

<meta name="viewport"

content=”width=device-width, initial-scale=1, maximum-scale=1”/>

Viewport Meta Tag

<meta name="viewport" content=”width=device-width,

initial-scale=1, maximum-scale=1”/>

Viewport Meta Tag

<meta name="viewport" content=”width=device-width,

initial-scale=1, maximum-

scale=1”/>

Hide Addre" Ba#Step 4

Automatically hide the address bar in mobile browsers to

maximize content view.

Hide Address Bar with Javascript

function hideURLbar() { window.scrollTo(0, 1);}

if (navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('Android') != -1) { addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);}

B$kmark IconStep 5

Create a bookmark icon for saving site to home screen.

Bookmark Icon

iOS & Android Compatible

<link rel="apple-touch-icon-precomposed" href="http://www.yoursite/images/custom_icon.png"/>

Bookmark Icon

iOS & Android Compatible

<link rel="apple-touch-icon-precomposed" href="http://www.yoursite/images/custom_icon.png"/>

Bookmark Icon

iOS & Android Compatible

<link rel="apple-touch-icon-precomposed" href="http://www.yoursite/images/custom_icon.png"/>

Quick Revie%

• Use CSS3 media queries to dynamically load stylesheet rules

Making Your Site Mobile-Friendly

• Use CSS3 media queries to dynamically load stylesheet rules

• Create mobile style rules to optimize site for view on mobile devices

Making Your Site Mobile-Friendly

• Use CSS3 media queries to dynamically load stylesheet rules

• Create mobile style rules to optimize site for view on mobile devices

• Implement <meta> tag to override default mobile browser settings

Making Your Site Mobile-Friendly

• Use CSS3 media queries to dynamically load stylesheet rules

• Create mobile style rules to optimize site for view on mobile devices

• Implement <meta> tag to override default mobile browser settings

• Hide navigation bar to optimize content size

Making Your Site Mobile-Friendly

• Use CSS3 media queries to dynamically load stylesheet rules

• Create mobile style rules to optimize site for view on mobile devices

• Implement <meta> tag to override default mobile browser settings

• Hide navigation bar to optimize content size

• Create bookmark icon for brand consistency

Making Your Site Mobile-Friendly

Amy Deschene!Beatley Library, Simmons College

Resources: bit.ly/V1xC0L