Embracing the mobile frontier and reaching the digital natives
•Download as PPTX, PDF•
0 likes•2,088 views
Jonathan Wall, Director of Product Marketing at Ektron and Jay Burling, Director of Web Application at Hendrix College, discuss: - 9 tips and best practices for mobile engagement - How to use mobile to enrich the student experience - How Hendrix College created a mobile presence in 3 months
Recommended
Recommended
More Related Content
What's hot
What's hot (18)
Similar to Embracing the mobile frontier and reaching the digital natives
Similar to Embracing the mobile frontier and reaching the digital natives (20)
More from Ektron
More from Ektron (20)
Recently uploaded
Recently uploaded (20)
Embracing the mobile frontier and reaching the digital natives
- 1. Embracing the Mobile Frontier and Reaching the Digital Natives Jonathan Wall Jay Burling Jonathan.wall@ektron.com burling@hendrix.edu @jwall @jayburling V1.01
- 2. WHAT YOU WILL LEARN: • Mobile trends: How prospective and current students use mobile today • How to create a mobile strategy • Native apps vs. mobile web: Which is better? • How Hendrix College created a mobile presence in 3 months • Tips and best practices • Where to start
- 4. By the end of 2014, the installed base of devices based on mobile operating systems will exceed the total installed base of all PC based systems.
- 5. Born 1976 - Deceased… ??? 5
- 6. WELCOME TO THE POST PC ERA 15.4m 15.1m 13m 11.9m 9.8m Acer Dell Lenovo HP iPad
- 7. MOBILE TRENDS SMARTPHONE TABLET OWNERSHIP OWNERSHIP AMONG TEENS 70% 70% 60% 60% 63% 50% 20% 50% 58% 40% 40% 30% 30% 20% 44% 20% 10% 10% 0% 0% Currently own Teens 13-17 Undergrads Plan to buy in next 6 months
- 8. MOBILE STRATEGY? Templates? Current Students? m.site.edu?Responsive Web? Faculty and Staff? Smartphones? Tablets?
- 9. MOBILE FIRST 1. GROW TH = OPPORTUNITY 2. CONSTRA INTS = FOCUS 3. CA PA BILITIES = INNOVATION 111
- 10. RESPONSIVE WEB DESIGN “A website that responds to the device that accesses it and delivers the appropriate output.” Ethan Marcotte
- 11. 4. MOBIILE FIRST MOBILE MATURITY MODEL 3. FRIENDLY Think mobile 2. FOCUS Site-wide first 1. FORGET IT Subset of mobile high value experience • Mobile strategy pages, render and vision Stay , limited device • Optimized for • Extensive use of HTML 5 stagnant support speed • Fluid, not fixed • Leverage device design capabilities like • Support popular location, orientat • Mobile enabled • Flash devices & screen ion, cameras, site applications • Fixed Page sizes • Tough centric- • Segment Layout • Simplified user interactions devices by • Slow page loads navigation for – DRAG CLICK screen size and • Complex Nav mobile pages PRESS features TARGETED, RELEVANT CONTENT
- 12. NATIVE APPS VS MOBILE WEB Responsive Web Mobile Web Mobile App Easy to update content Accessible to all, no installation required No need to download new version to upgrade Content discoverable through search User experience similar on different mobile platforms Lower cost/time to develop Full website content providers Only need to update one site Offline use Uses device capabilities – camera, accelerometer http://gomobile.tamu.edu/Texas_A_M_Mobile_Strategy/index.php
- 14. HENDRIX WEB AND MOBILE GOALS • Provide ALL of the site’s content • Reach our constituents where they are now • Be device agnostic • Reach all of our users, but focus on Prospective Students
- 15. HENDRIX APPROACH • No to native app • Mobile website?
- 16. HENDRIX APPROACH - Strategy Refocused Responsive Mobile Content (Adaptive) First and Design Navigation
- 17. HENDRIX APPROACH - Technical • MasterPages • Standard templates • PageBuilder templates • Device Width • Designed on Grid • CSS3 Media Queries • Image resizing tricks
- 19. TIPS AND BEST PRACTICES FOR MOBILE AT YOUR SCHOOL
- 20. 1: AVOID WEBSITE BY COMMITTEE
- 21. 2: UNDERSTAND YOUR VISITORS VISITORS BY STATE Region Percent Massachusetts 12% California 9% Illinois 6% New Hampshire 6% New York 6% Texas 5% VISITORS Virginia 4% BY CITY Pennsylvania 4% Florida 4% Maryland 4%
- 22. 3: HAVE MOBILE FRIENDLY CONTENT FORMATS System Requirements You will need a computer with a soundcard and Adobe Flash Player
- 23. 4: MAKE LAYOUTS FLEXIBLE • Detect devices and screen size • Set breakpoints for common screen sizes
- 24. 700px 5: OPTIMIZE FOR SPEED • Adaptive image resizing • Automatically resize • Perform resizing on the 320px server side • Minimize large chunks of content • Reduce # of form fields
- 25. 6: MOBILE FRIENDLY DESIGN • Use large buttons and touch targets • Vertical navigation for smaller screen sizes • Clear “Home” buttons
- 26. 7: DEVELOP WITH CONTENT IN MIND • Use real content • Design for web, smartphon e and tablet at the same time • Separate content from presentation
- 27. 8: TARGET CONTENT • Know your visitors • Design your site to provide relevant, Student type targeted content • Create simple targeting rules • “If from your_school.edu show class registration info” • If from other_state, show „how to apply‟”
- 28. 9: ENRICH THE STUDENT EXPERIENCE • Use geolocation to surface events • Send text messages to accepted students • Use the camera and social apps • Make your course catalog mobile friendly
- 29. WHERE TO START 1. Start with your strategy 2. Prioritize 3. Start small http://j.mp/emsmash http://j.mp/mmmedu
- 30. Jonathan Wall Jay Burling Jonathan.wall@ektron.com burling@hendrix.edu @jwall @jayburling
Editor's Notes
- Smartphones and tablet utilization continues to skyrocket, and colleges and universities that make great use of mobile technology not only differentiate themselves, but can leverage mobile to help realize crucial recruiting and retention goals. Join us to learn how to improve the overall mobile experience and boost the quality and number of prospective students, engage and retain current students, attract top faculty and more. In this session, Jonathan Wall, Director of Product Marketing at Ektron and Jay Burling, Director of Web Applications at Hendrix College, will help you learn: How to create a mobile strategyHow to use mobile to enrich the student experienceNative apps vs. mobile web: which one is better?How Hendrix College created a mobile presence in X monthsWhat technology you can use to get started today
- Canaway – Canaway to introduce the fact that unless you’ve been living in a cave, you know that mobile is a fact of life (becoming more so). Simon – Give some B2B insight
- Animoca – game dev, testing 400 android devices
- Canaway (can we call it?) is the PC era over? Discussion with Simon, what are some of the characteristics of living in a post-pc era.
- Canaway – in fact more iPads (just one platform of tablets) has sold more than any of the PC manufacturers
- Smartphone ownership - Nielsen and PewTablet ownershipPiper Jaffreyhttp://allthingsd.com/20121010/ipad-iphone-popular-among-teens-with-rich-parents/?KEYWORDS=appleKEYWORDS%3Dapple
- Animoca – game dev, testing 400 android devices
- Mobile forces you to focusMobile devices require software development teams to focus on only the most important data and actions in an application. There simply isn't room in a 320 by 480 pixel screen for extraneous, unnecessary elements. You have to prioritize.So when a team designs mobile first, the end result is an experience focused on the key tasks users want to accomplish without the extraneous detours and general interface debris that litter today's desktop-accessed Web sites. That's good user experience and good for business.3. Mobile extends your capabilitiesThe World Wide Web has been built on a foundation of rather simple capabilities (page markup, styling, and scripting) determined by what Web browsers can support. Web application developers -desperate to add innovative capabilities to this environment- have pushed the limits of JavaScript, browser plug-ins, and even Web browsers themselves to enable rich activities and interactions online.But new mobile application platforms are introducing exciting capabilities that leave many PC-based Web browsers behind. Consider some of the capabilities offered to developers on Apple’s iPhone or Google’s Android platforms: precise location information from GPS; user orientation from a digital compass; multi-touch input from one or more simultaneous gestures; device positioning from an accelerometer; and many more.Building mobile first allows teams to utilize this full palette of capabilities to create rich context-aware applications instead of limiting themselves to an increasingly dated set of capabilities.
- Canaway Example -Ektron delivered responsive design siteStart on the mobile layout built mobile first.MobileFlexible imagesDrop down menuSearch focusedSingle columnTabletTwo column layoutDesktopCarousel4 Column layoutTraditional fixed layoutBrochureFlexible reduces the number of media queries required.Case study on Ektron.com
- Provide all of our content, from the same repository, not hide information from our users.Need to deliver information and messaging to users where they are NOW mobile email means launching your pages in the device.Need site to look excellent across devices, even the newest and oldest onesNeed an architecture that allows users to quickly find relevant content self-selection of roles
- Quickly decided against native apps Strengths were not needed Not device agnostic Hard to maintainEventually decided against mobile website Limits web experience Still hard to maintain
- Started with mobile first design, - added in functionality as scaled up to new design breakpoints - Caused us to evaluate content and navigation structures. MOST IMPORTANT ELEMENTThe committee - Tasked with high level objectives: - Goals of the site - Audiences - Approval of designs (DECISIONS not DESIGNS) - Used wireframes to ensure committee wasn’t distracted by details
- Our site is built on nested masterpages 1 Global masterpage for navigation and primary structure 3 Layout masterpages for template layouts Many, many pages that inherit those masterpages (standard templates)Redesigned our masterpages and updated our CSS to follow.To maximize device support, focused only on device width. Created breakpoints, hit most but supports up (Web refrigerators)Used grid to ensure element sizing flowed mathematically to different breakpointsMedia queries are the engine that allows resizing to work correctlyPolyfill JavaScript for older browsersUsed some tricks to change the size of the delivered image based on the breakpoint. Have since started using the Image Resizing module
- Increased the quality of our site traffic: Bounce rate dropped by 33% Visit duration increased by 21%Big increases in mobile Increased traffic by 143%Anecdotally: Good: People tell us they can find things more easily Unexpected: Support calls for pages on mobile devices for the site have increased (primarily complex student portal pages) because they are USING it and take it for granted that it will work for all devices
- Reduces bandwidth and page weight