Making the Library Catalog Mobile-Friendly · • Use CSS3 media queries to dynamically load...
Transcript of 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