A Mobile Solution for #TheUnderdogbySylvia NicosiaDirector of Web Programming and Development

@synicosia #TheUnderdog

Growing use of mobile devices

2010 – Time for a change

Needed a centralized solution

Uniform look

Keep track of content

Workflow = CMS

Unforeseen obstacles emerged…

February 2012, official launch.

Then a new dilemma emerged…

Something needed to be done and a new search began for a solution

An app for one device oran app for all of them??

Better yet, a mobile site :)http://www.hammer.net/template.asp?nav_id=438

Responsive Web Design - RWD?

Inventory of existing resources

What we had:

CMS with RSS Feeds Athletics Website with

XML feeds Calendar with iCal

feeds Analytics information Downloadable PDF

Campus Map

What we wanted:

Affordable solution Robust and efficient

system Technical support To work perfectly with

what we had Better map for mobile

devices

There’s no need to fear, Underdog is here!

Open-source mobile framework Kurogo to the rescue

Data integration Cross-platform user

experience Customization=

Image source: http://kurogo.org/home/

Well documented set-up and installation

* Based on Version 1.5 installation: http://kurogo.org/guide/setup.html

No complicated coding for theme customization

Out-of-the-box modules fetch content from CMS to mobile site

A mobile framework that allows you integrate your data sources with customized modules

Emergency Module:Content from XML feed.

And a very powerful Map module.

Google Earth map Map rendered on mobile

KML File

If RWD is not an immediate option, a mobile framework can be a temporary solution.

But wait…

Isn’t it better just to have a RWD site?

Are there any advantages/disadvantages for RWD and separate mobile sites?

Responsive Web Design - RWD

Advantages

One design fits all Optimized Web

experience Website updates done

in one place No need to URL redirect

Responsive Web Design - RWD

Disadvantages

Images/content are hidden in smaller devices. Images still load causing bandwidth issues.

Scrolling involved Takes 30% extra time to

implement

Separate Mobile Site

Advantages

Specific content geared to mobile situations

Download time is faster Takes advantage of

mobile devices features: Geo-location, click-to-call, touch events

Faster to implement

Separate Mobile Site

Disadvantages

Only certain content from full site is available on mobile site

Two separate places to update code and content

URL redirect does not always work right from mobile to desktop and vice versa

Advantage of mobile frameworks: they come with out-of-the-box modules ready to use.

Image source: https://www.modolabs.com/platform

We worked mobile disadvantages to our advantage:

No URL redirect. Provide options and let user decide.

Provide cross-links on both sites to allow users to make choices.

According to Brad Frost’s article, “Separate Mobile Website Vs. Responsive Website”…

Responsive sites avoid “disparate experiences”

that “deprive certain users

of valuable information

and features”; while mobile dedicated websites include

“only a fraction of the full website’s features.”

Frost, B. (2012). Smashing Magazine. Separate mobile website vs. responsive website. Retrieved from http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/

Image source: http://www.rspmarketing.com/trending-topics/responsive-design-vs-mobile-optimized

Ethan Marcotte, on the other hand, states the following:

“Responsive Web Design isn’t intended to serve as a replacement for mobile sites.”

It should be viewed as part design philosophy and part-end development strategy.

“Research how your audiences access your site: not only the devices and browsers they use, but how, where, and why they use them.”

Marcotte, E. (2011). Responsive web design. Page 108. New York: A Book Apart.

Wrap up…

Nothing is impossible Know your audience

and provide them with what will serve them best.

Make an inventory of your web assets.

Follow your analytics like your sixth sense.

Do your homework when researching open-source. Yes, you want support with that.

For URL redirects, always provide a choice for both full and mobile site.

Provide a link on your full site to your mobile site.

Always provide cross-links from both platforms.

Useful resources for open-source mobile frameworks for Higher Education…

Name Link By Documentation Support

Molly http://mollyproject.org/

University of Oxford

http://molly.readthedocs.org/en/latest/index.html 

http://mollyproject.org/community.html

UCLA Mobile Web Framework

http://mwf.ucla.edu/ 

UCLA https://github.com/ucla/mwf/wiki 

http://mwf.ucla.edu/?go/develop

MIT Mobile Web

https://github.com/MIT-Mobile/MIT-Mobile-Web 

MIT ------- A better README is forthcoming…

Mobile Web OSP

https://github.com/dmolsen/MIT-Mobile-Web 

A fork from MIT Mobile Web

http://mobilewebosp.pbworks.com/w/page/27923975/FrontPage 

---------

Kurogo http://kurogo.org/home/ 

Modo Labs http://kurogo.org/docs/ 

https://groups.google.com/forum/#!forum/kurogo-dev

Useful resources for RWD frameworks…

Name Link Documentation SupportGumby http://gumbyframewo

rk.com/http://gumbyframework.com/docs 

https://plus.google.com/communities/108760896951473344451

Bootstrap http://twitter.github.io/bootstrap/

http://twitter.github.io/bootstrap/getting-started.html  

https://github.com/twitter/bootstrap/issues?state=open

Susy http://susy.oddbird.net/ 

http://susy.oddbird.net/guides/getting-started/  

http://stackoverflow.com/questions/tagged/susy-compass

Foundation http://foundation.zurb.com/

http://foundation.zurb.com/docs/

https://groups.google.com/forum/#!forum/foundation-framework-

More good stuff…

More Responsive Web Design - RWD frameworks: http://stunningfeed.com/25-best-css-frameworks-for-responsive-webdesign/

Adaptive Images (yes, you will need that too): http://adaptive-images.com/

Sebarmeli – JS Redirection Mobile Site: https://github.com/sebarmeli/JS-Redirection-Mobile-Site

Tutorials to get you started in Google Analytics: http://blog.kissmetrics.com/50-resources-for-getting-the-most-out-of-google-analytics/

Good book to read about GA: Web Analytics 2.0 by Avinash Kaushik

Two great classes by Higher Ed Experts

Responsive Web Design for Higher Ed (RWD) http://higheredexperts.com/studyrwd/

Web Analytics for Higher Ed (WAHE) http://higheredexperts.com/studywahe/

Thank you all. Last year this conference helped us tremendously. This presentation is our way for us to give back to you. Enjoy the rest of the conference.

PowerPoint presentation available at: sylvianavarronicosia.com/portfolio/eduweb-2013

Q & A

*Slide presentation available at: sylvianavarronicosia.com