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.
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
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
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
Hinweis der Redaktion
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 businessConsumerization 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