Going mobile with your website? This presentation will walk you through some things to consider when thinking about the functionality and content of your library’s mobile presence, and point to useful tools for building your mobile website.
Library Mobile Web Design: Tips, Tricks and Resources
1. Library Mobile Web
Design: Tips, Tricks
and Resources
Rachel Vacek, Head of Web Services
University of Houston Libraries
Berika Williams, Web Services Librarian
Victoria College/University of Houston – Victoria
Texas Library Association District 8 Fall Conference
October 22, 2011
2. The mobile phone is history’s fastest growing
communication device
3. In 2009,
530 million people
used a cell phone or smartphone
to access the mobile web
Strategy Analytics, March 2010
4. By 2015,
that number is expected
to rise to over
ONE BILLION people
Strategy Analytics, March 2010
12. Reference RSS feeds
Mobile services from blogs
friendly
databases
Library
Open access instruction
resources
Your SMS
QR codes services
library
website Event calendar
Location guides
or floor maps here
Research or Catalog
homework
guides Social media
Augmented
Videos reality Image
Audio
collections
tours
13. With so many options,
how do you begin to plan
for a mobile website?
14. Get to know your users
• Conduct surveys or interviews of library
users who use mobile devices
• Ask in different geographic regions and cover
all your demographics
• Understand their mobile habits
• Learn their device
ownership trends
15. Get your users more
involved in the process
• Look at focus group alternatives
• Create a “Developer’s Lab”
• Create Internships
• Conduct mobile evaluations, testing, and
marketing through embedded librarianship
16. Ask questions
• Why does your library
want a mobile presence?
• What are your peer
libraries doing?
• Do you know what your
users want?
• What defines success?
17. You want your
users to feel good
using the services
and resources you
provide on your
mobile library site
18. Which do you choose?
mobile website
or
native application
19. Mobile Application Mobile Website
Performance
• Runs locally, resulting in quick • Relies on the Internet, resulting in
loading time slower load and response time
• An app has to be developed for • Device agnostic, so only one
each platform, pushed to each website needs to be built
Access platform’s app store, and then • Access is through a web browser
downloaded to a smartphone for • Can be viewed on many devices,
users to access including feature phones
• Updates are deployed through • Relatively simple to support as
an app store that has a multi- there are less things to go wrong
week submission and approval on the user’s device
Supportability process • Potential to become more
• Updates require users to complex
download new versions • No interaction with an app store
• Updates to server are instant for
users
• Mobile platforms such as • HTML standards evolve more
Application Android, Apple iOS, Symbian, slowly
Evolvement RIM and Windows Mobile are
evolving rapidly
20. Mobile Application Mobile Website
• Runs locally, resulting in quick • Potentially less satisfying
loading time depending on Internet
• Made for mobile so it has fluid connection and speed
interaction and intuitive interface • If a mobile stylesheet is applied,
Quality of User • Can access sensors such as GPS users might have usability issues
Experience and accelerometers with access to webpages that are
• Can take advantage of touch not mobile-friendly
screens and gestures • With the exception of social
• Can take advantage of augmented media and games, users still
reality prefer mobile sites over apps
• More risky because they can be • Less risky because site exists
Technical more complex, riskier to develop • A mobile version can be created
Risk and harder to test by applying a mobile stylesheet
or by building a simplified site
• Testing for native apps is slower • Only one site has to be tested
and more complex if multiple • Quality assurance and usability
Testing platforms are supported testing is simpler because there
• Testing might involve UX such as is less involved
touchscreens or GPS
21. Mobile Application Mobile Website
• More investment because it • Less investment because it’s
requires more resources, time quicker and easier to build
Cost and skills • Can support any device that has
• Have to develop for multiple a web browser
platforms
• Thousands of mobile apps • Users can find your mobile
available on each platforms’s website via search engines, links
Marketing store, making the audience from other websites, and links
smaller and more focused embedded in emails
Operational • Must have room on the • Good cellular or wifi signal is
smartphone to download required
Issues
• Application development • Knowledge of HTML and CSS
demands more sophisticated for basic mobile theming
skills • Skills in HTML5 and PHP are
Skill Set • Developers with these skills are useful for creating more engaging
harder to find websites, but not all smartphone
browsers support HTML5 yet
22. Summary of features
Mobile Application Mobile Website
• Easy to locate in an app store • Platform agnostic
Pros
• Faster speed because it’s installed • Flexible and easier control over
locally maintenance of content
• Specialized functionality • Can be built in HTML & CSS
• Requires specific knowledge and • Slower than a mobile app
skills to develop • Less functionality than a mobile
Cons • Built differently for each platform app, but HTML 5 is changing that
• Approvals are required to place
in app store
25. You know what’s on your website
You know the needs of your users
You know what tech skills you have
available to you
You know the limitations of your
library’s wifi
27. Options for building
mobile native apps
• Native platform SDK (software development kit)
• General purpose multi-platform tools - attempts
to “write once, run anywhere”
• Outsource the development, or hire a developer
with mobile app development experience on
each platform you want to create
28. Options for building
mobile websites
• Develop a mobile CSS
• Do nothing - users will still see your site, but it
won’t be optimized for the best mobile user
experience
• Google sites - mobile templates
- http://sites.google.com/mobilize
• Have an open-source cms like Wordpress or
Drupal that power your website? Find a mobile
friendly theme!
30. Options for building
mobile websites
• Mobile application tool with web capability
- Completely home-grown approach
• JavaScript framework and code libraries
- jQuery Mobile, iUI, jQtouch, iWebKit
• Use Chad Haefele’s Mobile Site Generator
- http://www.hiddenpeanuts.com/msg/
31. Hybrid Approach
You can do more than one of the methods for
creating your library’s mobile presence
32. Managing your mobile site
• Design & Functionality
- Can be determined by the stylesheet or the
framework chosen
- Keep your branding consistent
• Content
- Have a strategy for maintaining the content
- Pull (RSS feeds, from other systems if you
can
in content
APIs, etc.)
47. An iPhone app for searching the UH Libraries’ Catalog
was developed by graduate students in the the
“Ubiquitous Computing” course in the
University of Houston Computational Physiology Lab
48. Mobile Website - m.lib.uh.edu
Think differently about the RSS feeds are quick and
hierarchy of your homepage easy but have limitations
49. Include catalog and/or
LibGuides comes with a
discovery platform, but be
mobile interface, too
clear on tool’s purpose
50. You have videos? Create a Show off your images on
channel and include them your library’s Flickr site
52. Features we’re considering
• Mobile campus walking tour with historic images
pulled from our Digital Library collection
• Mobile version of the Digital Library
• Expanded computer availability to other labs in the
library, possibly branches
• Laptops available for checkout
• Room/computer reservation
• More research tools specifically made for mobile
• More social media integration
• Augmented reality layar
53. Reference RSS feeds
Mobile services from blogs
friendly
databases
Library
Open access instruction
resources
Your SMS
QR codes services
library
website Event calendar
Location guides
or floor maps here
Research or Catalog
homework
guides Social media
Augmented
Videos reality Image
Audio
collections
tours
54. Final thoughts
• Understand your users’ mobile behaviors and needs
and look at the tools at your disposal before you
decide between a mobile app or website
• Sometimes a simple mobile stylesheet is a good
enough place to start
• Don’t just recreate your entire website in a whole
new mobile website
• Start small, add more complex features over time
• Walk a day in your users’ shoes to get a feel for
what services might be helpful on a mobile device
55. Helpful resources
• “Choosing Between Native and Mobile Web Applications.”
Gartner Report by Analyst Nick Jones. February 23, 2011.
• The Anywhere Library: A Primer for the Mobile Web.
Courtney Greene, Missy Roser, and Elizabeth Ruane. ACRL
2010.
• M-Libraries, Library Success Wiki -
http://www.libsuccess.org/index.php?title=M-Libraries
• Chad Haefele’s Mobile Site Generator -
http://www.hiddenpeanuts.com/msg/
• Google Mobile Sites - http://sites.google.com/mobilize
56. Thanks!
Rachel Vacek
Head of Web Services
University of Houston Libraries
revacek@uh.edu
Berika Williams
Web Services Librarian
Victoria College/University of Houston – Victoria
williamsbs@uhv.edu
Presentation available online:
slideshare.net/vacekrae
Hinweis der Redaktion
We each introduce one another, and Berika kicks it off. :)\n
\n
\n
\n
In fact, when it comes to sales, smartphones have overtaken pc sales. With more consumers trading in their old feature phones for smartphones, the smartphone market actually eclipsed the PC market during the last quarter of 2010 for the first time, according to data from the IDC (International Data Corporation –a market intelligence source). Vendors shipped 100.0 million smartphones during the fourth quarter, while IDC logged 92.1 million PC shipments during the same time period, according to IDC numbers from January.\n\n
Mostly good feelings. Some people don’t like the feeling of being connected all the time. But people have deep connections with their mobile devices, it seems. Those connections - and feelings - are part of the user experience. Our mobile library websites should also also give users these same feelings.\n
\n
Stop and interact with the audience. Get them thinking....Ask them to name 5 things their users do when visiting the physical library.\n
After they have named a few things, ask them to name 5 things users do on their websites.\n
Should those resources, services, AND experiences (user experiences) be replicated on a mobile site? \n
\n
\n
\n
\n
•Focus Group Alternatives: Informal setting such as a library open house, planned social event in a party-esque /social type atmosphere. You can collaborate with other departments or organizations by “hosting” the event and initiating informal discussions, conversations with topics including, but not limited to - mobile web access to get an insider’s perspective on what users are doing while advocating library resources and services[perfect for all types of libraries]\n•“Developers Lab”: Take advantage of students or patron users’ capital (their skill sets) by giving them a chance to further develop them, gain experience and get exposure by participating in the process. [perfect for academic, school, and public libraries;]Corporate Libraries can garner\n•Internships: Partner up with talented students who would like to further develop their skillsets and make meaning contributions to meet a need or provide a service to users that hasn’t been met through the building of mobile apps. Corporate and other libraries can do competitions for their user or consumer base to rally up ideas to stimulate creativity and boost maximum PR for the library and its services.\n•Mobile Evaluation, Testing, and Branding through Embedded Librarianship: Ask questions to see what users are thinking, how they are behaving in their environment while in development. Create a deliberate, “casual” encounter with mentions of the finished mobile website or product during a reference session or at the point of need.\n\n
•We went mobile to reach a larger subset users that were already using mobile devices to access our desktop site based on our web statistics and generalized national indicators such as the research found on Pew Internet and American Life Project.\n•A great website that gives a peak at how a portion of other libraries are going mobile is: http://www.libsuccess.org/index.php?title=M-Libraries\n•Based on our research, we knew that users wanted a quick and convenient way to access information from our library. They wanted something user friendly, intuitive and easy to navigate.\n•We simply define success with our mobile site based on traffic and repeat visitors. We rely on comments and feedback and constantly question: what keeps bringing them back? Are there any frustrations or obstacles that keep them from using it again?\n\n
having a good user experience is vital to people coming back and using it again.\n
Rachel picks up here.\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Berika picks up here again.\n
\n
\n
\n
\n
\n
Based on our resources and staff, we started off with a mobile website. Over time we may go more advanced offering apps, but we are starting off small based on basic needs of our users and the ability to reach cross platforms in the least expensive way possible.\n\n
On our desktop homepage of the VC/UHV Library’s website, we created a portal for users to access the information that was most important to them through research. We also accessed the most commonly visited pages and most asked questions at the reference desk to present this content. When it came to our mobile website, we selected the “basics” where physical and online needs intersected by placing our library hours, maps and directions, library catalog and ways to contact us on our mobile site. Additionally, we created a research section with select mobile friendly databases with subjects that generated the most traffic on her desktop site and at the reference desk. \n
The VC/UHV Library’s approach was (sort of) hybrid. We took advantage of certain features that were already mobile optimized like Google Maps, their APIs, LibGuides, and select databases to offer on our mobile website. For everything else, we coded in HTML and CSS, such as building an interface for our catalog and ASKALIBRARIAN chat. The only drawback with the actual online catalog results, was that our OPAC is not mobile optimized. (We have Horizon through Sirsi Dynix) It is actually a miniature desktop version of the OPAC, which is not exactly the best solution, but it works for now.\nThe usage statistics from the VC/UHV Library’s website and most commonly asked reference questions set the tone for how we chose to arrange the hierarchy of our homepage. We also used RSS feeds for library hours, but an important consideration is that the source content still needs to be maintained.\n\n
\n
\n
•Publicize different areas of the mobile website by creating QR codes (free on sites such as www.qrstuff.com), which can be scanned for quick access to those webpages\n•QR codes can be used in the library stacks for instant help, such as access to study guides or tutorials, or even an interactive library call number floor map.\n•I’ve learned that the shorter the URL, the more simple the QR Code, and thus the easier it is to scan. \n•I recommend URL shortners like bitly.com that can instantly gauge the traffic of who uses the link without going through web analytics software.\n• Must carefully plan the QR Code information representing the library or you’ll overdo it… like a child with pages of stickers! \n\n