1) Mobile is exploding Luke made this point in late 2009 and its even more true today given consumers insatiable appetite for all things smartphone and tablet. It's clear that mobile is well past the tipping point of consumer adoption, and has forever changed computing.2) Mobile forces you to focus While expanding screen resolutions and increased browser capabilities appeal to designers and developers, often the net result is a website that resembles an episode of Hoaders, with distracting content, unnecessary links, and an overall poor user experience. Just because you can doesn't mean you should. Instead, Luke argues, the user experience should begin with the most important audience, the users. Designing for mobile first requires a minimalist, zen-list approach to design that focuses on the key tasks users hope to achieve.3) Mobile extends your capabilities Today's mobile browser goes well beyond the native capabilities of most desktop browsers. For example, iOS and Android devices provide real-time location information via integrated GPS. iOS Users swipe and touch instead of point and click. Newer Android devices support "Near Field Communication", providing news ways to connect mobile computing to the physical world, like sending payments or even replacing the traditional hotel key. Marketers have a massive opportunity to leverage mobile device capabilities to drive new levels of engagement.
What you want is more sales and what I want is to accomplish a task
The Mobile RevolutionMove Beyond Mobile Friendly and Engage Mobile Visitors Tom Wentworth CMO Ektron Mark Jarvis April Hobbs Nutter Morehead State University
Agenda The undeniable business case for treating mobile as a primary customer channel Mobile friendly or mobile first? A maturity framework. The shift from desktop to mobile- a case study from Morehead State University Resources and next steps
Tweet questions and comments during (and after) the webinar to #mobilerevolution
54.3 Million People in the United States own smartphones Source: ComscoreMobilens http://www.flickr.com/photos/pictfactory/2796367140
Mobile usage will eclipse desktops by 2013 Source: Gartner
“Google programmers are doing work on mobile applications first, because they are better apps and that’s that top programmers want to develop” – Eric Schmidt, former Google CEO “We’re just now starting to think about mobile first and desktop second for a lot of our products” – Kate Aronowitz, Design Director of Facebook “We really need to shift now to start thinking about building mobile first. This is an even better shift than the PC revolution.” – Kevin Lynch, CTO Adobe http://www.flickr.com/photos/toasty/3538820892/
Presenters Mark Jarvis, Senior Web Shared Services Administrator Office of Information Technology firstname.lastname@example.org April Hobbs Nutter, Web Marketing Director Office of Communications & Marketing email@example.com
About Morehead State University Founded in 1887 Enrollment – approximately 9,000 students Public Regional University Location – 1 hour east of Lexington, KY and 1 hour west of Huntington, WV on the edge of the Daniel Boone National Forest in Morehead, KY Average class size – 19 students Ranked for the 7th consecutive year as one of the top 20 public regionals in U.S. News & World Report Morehead State is d than you might expect!
About the MSU Website Managed by the Office of Communications & Marketing with support from the Office of Information Technology – Web Shared Services First deployment with Ektron (CMS300) in 2004 Contracted with Ektron for an upgrade to version 8 with new site construction; new design launched in October 2010 Uses Ektron-developed templates for flexible design More than 200 content contributors manage content on Ektron CMS400
Redesign 2010 2004 needed a new look; the content needed an overhaul We needed to evolve to meet the needs of our customers – prospective students and their families, donors and friends of MSU. Refocused our external site – www.moreheadstate.edu – on these key audiences. Working to move our internal content to MyMoreheadState portal. New design needed to include flexible templates for homepage, academic sites, services, etc., including delivery of content for mobile devices.
Why Mobile Matters at MSU Increased use of mobile devices (iPhone, iPad, Droid, Android and Blackberry) on MSU’s site (thanks to Google Analytics) Statistics show that’s how our target demographic (prospective 16-18 year olds) look for content Requests from departments and offices for “mobile-friendly” version of their sites “Mobile-friendly” means making sites easier to use – with a mobile device or not, by focusing on simple navigation, user-friendly language and clear and accurate content
How We Made Our Website Mobile Using Ektron CMS400 Flex Template – our site isn’t just “mobile-friendly” – every page on the new site is delivered in a template specifically for mobile devices. Our site auto detects if a user has a mobile device and automatically delivers the mobile version (with option for full site). Content is created in the CMS and uses different templates to deliver the content in standard (content.aspx), mobile (mobile.aspx), or other custom formats. So, only one point of content entry for the contributor. The content and the design are separate; allowing us to have much more flexibility with how we display content.
MSU Website – Mobile View Uses menu technology to deliver a mobile-specific homepage. Menu includes text and icons Links include most popular sites Mobile template designed to look like an app Full site view available at bottom of screen
How We Made Our Website Mobile The mobile template by default displays the content block of the page and moves the navigation menu below to keep them mobile friendly. Our mobile homepage is built using a custom navigation menu and does not include a content block. 2 options to enhance the mobile experience: 1. All content on our site can be rendered using the mobile template (example: MSU News site). or 2. A “custom” site can be delivered using menus, without recreating content (example: MSU Homepage and Dept. of Music, Theatre and Dance.)
MSU Website – News and Mobile News Standard content template Mobile template
MSU Website – Mobile News Release In the mobile version, the menu appears under the content, for easy navigation. The template redelivers the content for mobile – no need for the contributor to do a separate version.
How We Made Our Website Mobile Friendly Contributors may create custom mobile sites using navigational menus. A mobile redirect (set in the configuration smart form) sends mobile visitors to the custom mobile site instead of displaying the content block and default navigation menu in the mobile template. Our entire site is mobile-friendly, but by using menus we can deliver what appear to be custom mobile sites, without recreating any content.
How We Made Our Website Mobile This custom menu is used as the mobile version of our home page – just menu items, no new content – with an icon and link for each item.
How We Made Our Website Mobile This is our Department of Music, Theatre and Dance (MTD) site. In the next slide, we’ll show you this same menu displayed as their “mobile site” compared to viewing this exact page on a mobile device.
How We Made Our Website Mobile 1 2 3 Screen shots 1 & 2 are the mobile view of the MTD site; #3 shows an alternative mobile site for MTD, using the menu as the mobile site.
What Have We Learned? Check your stats (we recommend Google Analytics) – you may be surprised how many mobile users you have. Instead of doing a mobile version, just make your entire site mobile ready using flexible templates. Manage the content in one location and use templates for standard, mobile, etc. Handy tool for testing: Firefox User Agent Switcher (let’s you simulate iPhone view in your browser) Flexible templates can provide brand and design consistency from standard to mobile. When designing pages and creating navigation – simpler is better – mobile or standard. Give users options: view full site, navigation, search tools.
What Have We Gained? This is a comparison of Nov. 2009-May 2010 compared to Nov. 2010-May 2011. Our new site launched at the end of October 2010. Much more mobile traffic! Thanks to the new site (and to our men’s basketball and the NCAA Tournament win over the University of Louisville – March 17, 2011).
What Have We Gained? Stats showing the top 6 devices. Traffic has increased dramatically from 2009-10 to 2010-11. This demonstrates why you should be not just thinking mobile, but doing mobile. Our applications and acceptance rates are up considerably too, especially among key demographics.
Much More Information Website: http://www.moreheadstate.edu Mobile Website: http://www.moreheadstate.edu/mobile.aspx Mark Jarvis, Senior Web Shared Services Administrator Office of Information Technology firstname.lastname@example.org April Hobbs Nutter, Web Marketing Director Office of Communications & Marketing email@example.com
Resources Mobile Revolution slides http://slideshare.net/ektron Mobile First – Luke Wroblewski http://www.lukew.com/ff/entry.asp?933 Why the “Web Versus Application” debate is Irrelevant http://blogs.forrester.com/thomas_husson/11-05-03-why_the_web_versus_application_debate_is_irrelevant How Loading Time Affects Your Bottom Line http://blog.kissmetrics.com/loading-time/
Continue the conversation at #mobilerevolution