DEVELOPING SITES OPTIMIZED FOR

MOBILE DEVICES

1. Getting Started

2. Tools to Create

3. Rules to design by…

4. Just when you think you’re done…

Brendan RyanLibrary Commons AssistantPhillips Memorial LibraryProvidence College

•Key considerations when developing for mobile devices•What purpose does this site serve?•Assess your resources•Browse other mobile sites•Helpful web resources

Getting Started1

Key considerations

Device screen-width varies widely Simplicity in design enhances legibility Do not use absolute text sizes Detailed images will not translate well to

most devices Mobile devices are not as powerful as

computers Pages will load slowly Flash objects will not work properly

What purpose does this site serve?

•PURPOSES:

IM a librarian

Get hours & directions

Search the catalog

Etc.

Clearly identify your audience

Helps the library determine what services to offer

Assess your Resources

Work with what you have Providence College is a small liberal arts

college so the project was largely the library’s responsibility We kept it simple because that’s what skills

were available Large universities may be able to draw

support from computer science or design students

Constraints largely dictate what is possible at your institution

Browse other mobile sites Allows you to find models at

other library sites Determine what works and what doesn’t

Access sites outside of the library world in order to get new perspectives They may be done by professional web-designers

Helpful web resources

Excellent mobile sites from libraries: Public: http://m.nypl.org/ Academic: http://m.library.oregonstate.edu/

Development tools http://www.mobify.me/ http://www.webpagefx.com/design-build

-mobile-web-site.html http://www.mobisitegalore.com/index.ht

ml http://www.developershome.com/ http://library.gameology.org/2009/11/24/

iphone/

•Device Emulators•Free Editors•Drawbacks to Dreamweaver•Good mobile coding sites

Tools to Create2

Device Emulators

Found on many mobile devices

Excellent for working with different screen widths of devices

Handy when ensuring designs work with Microsoft OS

Firefox add-on Customizable

Allows users to simulate all cell-phone operating systems with the proper device profile code

Opera Browser Firefox User-Agent Switcher

Free Editors

Notetab Pro is available as a free download for 30 days• The basic version that is free does not include

text line numbers• More features than Notetab or Code Lobster

Code Lobster:• Free editor which matches Notetab Pro

OpenOffice.org Bluefish• GNU/Linux free option

Searching the web for editors will net a number of possibilities

Drawbacks to Dreamweaver

Very sloppy coding Initially worked with this to develop our site After designing it fully I then had to re-edit it in order to

validate the code of the pages Excessive

File size become unmanageable Essential that they be small for ease of loading on mobile

devices Not cross-compatible

DW files are saved in a unique format that is only accessible by the program DW is expensive Regular editors like Notetab, Code Lobster, Bluefish, and any

number of others are interchangeable w/ .html and .txt

Simple hints that can start you down the right path and help you avoid frustration and wasted time.(or things I wish I knew then)

Rules to design by…3

Clickstream

Limit the amount of sites the user has to navigate to get the desired information Often sites load slowly on mobile devices

They are difficult to access

Using Image Files

Use .gif Image Files

•I incorporated all images into my CSS• This made the XHTML code simpler while making my CSS files very large• Needed class tags for each image•Conversely, Russ placed all images in the XHTML

Mobile devices feature small screens

Limit the size and detail of your graphic images

Smaller size than .jpg’s results in quicker loading

http://m.providence.edu/library/mobile.css

http://m.providence.edu/library/index.html

The combination of the xhtml coding and the .css coding results in the images on the http://m.providence.edu/library/index.html

+

=

Use percentages or ems to size text

This will allow it to scale to proper sizing A tremendous variable in designing for

mobile devices is screen dimensions Ems and percentages are malleable and allow

text to fit proportionally Ems 1em is 16pt font on standard web browsers

Sized to window

This won’t work with image files as they are not resizable to device window while remaining conspicuous

CSS is your friend

Link to external style-sheet (CSS) to format all pages This reduces XHTML file size, and

consequently load time Simplifies large editing of site style, as

pages are linked to the same CSS

DO NOT: Use tables or frames Format pages through XHTML

Essential steps to ensure that your site is really done

Just when you think you’re done…4

Validate all code

W3 Schools provides the most authoritative source General sites: http://validator.w3.org/ Mobile checker:

http://waxler.w3.org/mobileok/index.html

This step is essential to creating any proper, well-functioning website

Dreamweaver did not magically create valid code, so I was left with a lot of clean-up work to do

Design with the limitations of Internet Explorer in mind

Mobile devices often use this operating system Ex. Rounded button coding doesn’t work w/

IE, making the code and images required for this effect cumbersomeRequires the use of an image file for each corner, adding 4 images to load for each button

Constantly have to evaluate the importance and value of features

Often most effective to keep it very simple

Things I’d like to do

Automatically direct mobile devices from the general library site to the mobile site

Create an overriding webpage that would give users the status of the library in inclement weather We have snow days!

Create a fully searchable library catalog for mobile devices

Contact Information

Brendan RyanLibrary Commons AssistantPhillips Memorial LibraryProvidence Collegebryan1@providence.edu401.865.1993