Why and How to Build a Mobile First Web Strategy
•
2 j'aime•1,155 vues
With the rise in mobile web browsing, there has been a shift in website design philosophies from responsive to mobile first. We'll tell you what this means for your business, what the benefits are and how you can implement your own mobile first web strategy.
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (20)
Similaire à Why and How to Build a Mobile First Web Strategy
Similaire à Why and How to Build a Mobile First Web Strategy (20)
Dernier
Dernier (20)
Why and How to Build a Mobile First Web Strategy
- 1. Prashant Kumar, VP of Solutions and Strategy Annie Bustos, Director of Marketing Why and How to Create a Mobile First Web Strategy Your Hosts:
- 2. Today’s Agenda Part 2 Mobile First vs. Mobile Responsive Part 3 Benefits of a Mobile First Approach Part 4 Considerations for Mobile Developers Part 5 Mobile First Checklist5 4 3 2 Part 1 Introduction1
- 3. • users If You’re not Mobile You’re not in Business! Over 1.2 billion mobile web users worldwide More than 40% of consumers cited mobile as the most important media source for information 60% of consumers use mobile exclusively to make purchase decisions In 2014 10.6 billion online visits via smartphone vs. 5.8 billion on PC HOW DOES IT IMPACT YOU? The global enterprise mobility market could be worth $140 billion by the year 2020 90% of IT managers strongly agree that mobile devices should be managed and supported equally to desktops in the Enterprise
- 4. Mobile Landscape Mobile Applications Native Web Hybrid • Built for a single platform • Installed on user device • Downloaded from app store • Gain user analytics • Run and feel better • Multiple platforms • Run on web browser • Look and feel of native app • Easier to maintain than native • Multiple platforms • Hosted within native app but run through browser • Increased functionality & customization • Visually intensive (games) UX Device
- 5. Mobile First Mobile Responsive Mobile First vs. Mobile Responsive
- 6. Mobile First Mobile Responsive • One size fits all approach • Layout dictates content • UX is not as rich • Potential bandwidth issues • Requires specialized design knowledge • Requires minimal resources • Provides flexibility and control but with loss of content, functionality and navigation • Mobile centric • Content dictates layout • Provides rich UX • Algorithmic design, streamlined performance • Straightforward design approach • Requires increased resources to maintain • Improved functionality and navigation Mobile First vs. Mobile Responsive
- 7. Benefits of Mobile First Content First Design Increased ROI Strategic Capabilities Improved Information Architecture Omnichannel Customer Experience Enhanced Customer Segmentation Fills Performance Gaps Empowered Customers
- 8. Challenges Constraints of Starting Small Maintenance Design & Development Setbacks Balance of User Needs vs. Wants Universal Compatibility Functionality Expectations
- 9. Approaches Mobile First 2 Methodologies 1 Graceful Degradation Progressive Enhancement
- 10. 1. Do you wish to deliver content? Website is best. 2. Do you wish to deliver functionality or tools to your end user? Mobile First Mobile Responsive Beginners Guide to Mobile First Calculate the Benefits Define How you Will Measure Success 1. How will the mobile experience be better or different from the desktop? 2. What do you want your end user to accomplish? 3. Mobile First as a competitive agile business strategy 1. What are your business objectives? 2. Do you have a strategy for measuring ROI? 3. What will be your KPIs?
- 11. 1. Do you wish to deliver content? Website is best. 2. Do you wish to deliver functionality or tools to your end user? Mobile First Mobile Responsive Mobile First Checklist Choose the Right Vehicles for Your Goals Define Your Marketing Approach 1. Do you wish to deliver content? 2. Do you wish to deliver functionality or tools to your end user? 3. How does social fit in the mix? 1. How will your distribute your website to your users? 2. How will you implement SEO? 3. How will you create and distribute your messaging consistently?
- 12. 1. Do you wish to deliver content? Website is best. 2. Do you wish to deliver functionality or tools to your end user? Mobile First Mobile Responsive Mobile First Checklist Explore Revenue Models Design Your User Experience 1. This is dependant on your business type and goals 2. Will you charge users for your apps? 3. Consider and ad-supported revenue model 1. What is most important to the user? 2. What do we want to communicate to the mobile user? 3. What challenges do we face by adopting this approach?
- 13. 1. Do you wish to deliver content? Website is best. 2. Do you wish to deliver functionality or tools to your end user? Mobile First Mobile Responsive Mobile First Checklist QA & Testing 1. What platforms and technologies are relevant? 2. Go from clickable to touch enabled 3. Simplified navigation 4. What systems will you need to integrate with? Develop and Build 1. Test out across different configurations and operating systems 2. Accommodate beta testers to aid in the testing phase
- 14. First Mobile Responsive Get started with a free TechBlocks assessment!! http://info.tblocks.com/get-your-free-mobile-strategy-assessment Next Steps Included in Your Assessment: • Evaluation of your existing mobile landscape • Identification of pain points (communication, security, access) • Recommendations for the best mobile approach for your business • Recommendations for POC (prototype) to evaluate user experience
- 15. Consulting, Creative, Technology Thank You! Now Taking Questions Prashant Kumar, VP of Solutions and Strategy Prashant@tblocks.com Annie Bustos, Director of Marketing Annie@tblocks.com http://tblocks.com twitter.com/techblocks linkedin.com/company/techblocks facebook.com/TechBlocks
Notes de l'éditeur
- consumer side vs. operational side – customer experience vs. backend? how mobile is affecting operations-it’s impacting the entire business – BYOD stats, operational efficiency operations, retail Introduction: There are over 1.2 billion mobile web users worldwide (2014 Mobithinking Report) 60% of consumers use mobile exclusively to make purchase decisions (2014 Mobile Path-to-Purchase Report) In 2014 10.6 billion online visits via smartphone vs. 5.8 billion on PC (2014 Mobile Path-to-Purchase Report) More than 40% of consumers cited mobile as the most important media source for information (2014 Mobile Path-to-Purchase Report) Talk about how consumer behaviour is changing, what’s the impact on business How big is the impact of mobile How business models are being threatened A Mobile First Strategy is competitive and agile Mobile as an operational strategy for business Consumerization of IT is happening and analysts believe that this will open up a wide range of possibilities which will allow marketing and content targeting to be done at a more personal level than ever before. Now more than ever it’s important to cater to mobile users with fully optimized websites Mobile First: In the past designers have built websites focusing on the desktop user first and the mobile user was secondary. Based on mobile browsing growth, the recent trend has been to turn this process on it’s head. The term ‘mobile first’ refers to the approach in web design where the initial focus of a project is directed toward mobile usage – all decisions and thinking are made with only the mobile version of the website in mind. Mobile first is becoming the new mobile responsive as it allows for increased personalization and a richer user experience which we will talk about shortly.
- slide-share, reduce content and add a graphic add graphic for presentation and put the bullet points in the notes Responsive website design is based around the idea of adjusting the website design process according to the viewport size of the device and media queries. A good viewport device would get additional styling and a website ramp up whereas the website would be dumbed down to minimal resolution for smaller devices. Mobile first web design is simply the extension of support to mobile devices with no change occurring in the design or resolution with device variance. Mobile first web design adopts a basic one for all approach regardless of device type. These designing strategies are not competitive, instead they complement each other and we will outline this later in the presentation.
- slide-share, reduce content and add a graphic add graphic for presentation and put the bullet points in the notes Responsive website design is based around the idea of adjusting the website design process according to the viewport size of the device and media queries. A good viewport device would get additional styling and a website ramp up whereas the website would be dumbed down to minimal resolution for smaller devices. Mobile first web design is simply the extension of support to mobile devices with no change occurring in the design or resolution with device variance. Mobile first web design adopts a basic one for all approach regardless of device type. These designing strategies are not competitive, instead they complement each other and we will outline this later in the presentation.
- Content First Design- it’s easier to fill a house than it is to move from one into an apartment. In the desktop there is a tendency to add functions, images and content just to fill space. This creates clutter when it is translated to mobile. In a mobile first environment there is simply no real-estate for clutter. Increased ROI- you typically spend less time and money on design and with the increase in personalized experiences for your users you will benefit from higher engagement and conversion Improved Site Navigation- in the mobile world less is more. Clear navigation and smaller menus will lead to increased user engagement and conversions. Drop downs can be removed as they tend to be problematic and do not translate well to mobile due to the lack of rollover function. Fills Performance Gaps- helps to address and solve main issues of mobile responsive designs including navigation, content hierarchy, ease-of use and loss of critical functions. Strategic capabilities - Omnichannel Customer Experience- Many retail stores are currently working on providing customers with applications that gives them the exact layout of the store and allow people to make searches about the products they are looking for. Sales people can be added and this will provide a comfortable experience to the user. This is not only restricted to retail and can translate to other service providing firms. Enhanced Customer Segmentation- Mobile devices have a whole slew of new capabilities that don’t exist on personal computers. Smartphones can pinpoint you down to 10m with GPS, down to 50m with Wi-Fi. They know the direction you’re facing, the direction you’re moving, how fast your device is moving, the position it’s in – the list goes on. And if you start thinking about mobile first you can take full advantage of these capabilities.” Empowered Customers- While you are paving a new path for customers, you can also help them make better buying decisions by providing them quality information about the products. Your customer can make searches about the product and your application will provide them with authentic reviews and if the product doesn’t exist in your inventory, it can provide with better alternatives. Talk about social integration here as well.
- Functionality Expectations: users expect functionality on mobile to be equal to or supersede the desktop version. They overlook the technical inhibitions that mobile devices put up such as lack of plugin support. In order to deal with this situation, most enterprises develop a two way approach. A mobile website is developed that can cater to primitive devices and an application is designed which can provide additional functions and ease-of-use. Constraints of Starting Small: less room to work with, reducing content can be challenging. Balancing Act: designers need to find a happy medium between offering the users what they need and want, but not excluding larger and more powerful devices and their users, who could potentially feel disappointed and underwhelmed by the stripped back, bare-bones design approach and potential lack of functionality or wow factor. Potential design/development setbacks: The downside to this approach is that it is heavily reliant on trust from the client, craft & spontaneity from the design agency, and frequent open communication between both parties — okay, not necessarily a downside but potentially a difficult combination. Maintenance/Cost: multiple URLs or redirects, additional SEO work, maintaining two different sites separately. Not always universally compatible: You have to consider that there are two different types of mobile devices. A single mobile website won’t look and work the same way across all device types.
- Main Considerations: Mobile lacks the capability to seamlessly support content unlike desktop browsers A mobile first design requires a reduction in features while at the same time maintaining functionality Users with the simplest setups Functionality across multiple platforms One of the following methodologies should be adopted: Graceful Degradation: stripping/simplifying the desktop design to remove various elements so it can fully cater to mobile devices that have decreased functionality Progressive Enhancement: this approach on the other hand is the idea of gradually enhancing the simple mobile based website to suit devices that have advanced capabilities such as support for additional third party plug-ins, better processing power or storage options. This methodology is adopted when a company starts off with a mobile first approach or when a simple mobile-based website or application is improvised and enhanced to accommodate high-end mobile devices or even desktops.
- Calculate the benefits for both your business and your users from a mobile first approach. Ask yourself: How will the mobile experience be better or different from the desktop? What specific tasks do you want your user to be able to accomplish through your mobile strategy? Would it be faster to achieve the desired results from a smartphone? It’s not just about mobility, it’s about carrying out tasks much faster than a desktop.
- Choose the Right Vehicle - Mobile Apps vs. Mobile Site: What do you aim to deliver to your target audience? This will influence your decision and your marketing. Ask yourself: Do you wish to deliver content? Website is best. Do you wish to deliver functionality or tools to your end user? Application works best here. Will you have a need to integrate social and if so how will you do this?
- We can build small prototypes, applications or application portfolios