RESPONSIVE WEB DESIGN & MIVA MERCHANT
MATT ZIMMERMANN
Do I need a responsive website?
Dedicated Mobile Website
Native Mobile App
What is responsive web design then?
The Good
• A single site
• Coexists with other mobile strategies
• Improved search ranking
• Simpler maintenance
The Bad
• Smartphones are frustrating
• Page load time can increase
• Imprecise or generic looking content
• Starting over
The Ugly
Okay, so why should I care?
• 60% of the average global mobile Web users now use mobile as either their
primary or exclusi...
The Prediction
The Reality
How does responsive web
design help me?
Where to start?
• Bootstrap by Twitter [http://getbootstrap.com/]
• Foundation by Zurb [http://foundation.zurb.com/]
• Pur...
Miva Merchant Bootstrap Framework
http://www.mivamerchant.com/bootstrap-framework
Responsive Web Design & Miva Merchant by Matt Zimmermann
Upcoming SlideShare
Loading in …5
×

Responsive Web Design & Miva Merchant by Matt Zimmermann

522 views

Published on

MivaCon 2014 Breakout Session: Responsive Web Design & Miva Merchant
Presented by Matt Zimmermann

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
522
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Let’s start by clearing up a common misconception. Contrary to what has been said, responsive design is not the silver bullet or panacea that will magically take your site to the next level. However, it is the first step.
  • The first step you need to take is to look at your analytics and determine the amount of traffic coming into your site from mobile and tablet devices. You may find that your current site converts well on tablets, leaving only mobile to be addressed.
  • Pros:Specialized website for one device classificationFairly straight-forward to createCons:Doesn’t address spectrum of devices in use todayDepending on your implementation there is the possibility of duplicated contentNot aligned with SEO best practices
  • Pros:Very specialized and optimized task-focused experienceDevice-specific capabilities (geo-location, notifications)Constant reminder of your brand/siteCons:Difficult to create and must be created for multiple platformsMust pre-package for multiple app storesSits outside of Miva Merchant
  • Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.Helps to maintain a consistent user experience.Moving forward, a device-agnostic mobile strategy, capable of delivering optimized experiences to ALL of devices, will be the only way to go.
  • You create a single site that serves various devices, rather than spend time and money on desktop, table and smartphone sites.If you choose to develop a mobile application, you will sill have a mobile-friendly fallback for those without the app.Your site may show up higher in natural search results because all the credit from the original content and inbound links accrues to a single URL.You’ll maintain a single code base and make changes once which will appear on all devices. The site changes look based on screen size and page orientation by applying appropriate styling conventions.
  • Paring your site content for a smartphone screen is difficult; responsive design calls for an even more austere approach for every type of device.Due to the “All-In” approach of responsive design, it is possible to load elements which are not displayed thus increasing load time.Designing for all screens means content may not look as good as it might on a site designed specifically for the device.Developers must design for responsive from the outset or rewrite all desktop code.
  • This is the Aye-Aye of Madagascar. Aya-ayes are primates, which may account somewhat for it superficially resembling a scary grandfather.
  • The Census Bureau of the Department of Commerce announced on February 18th that the estimate of U.S. retail e-commerce sales for the fourth quarter of 2013, adjusted for seasonal variation, but not for price changes, was $69.2 billion, an increase of 3.4 percent from the third quarter of 2013. Total retail sales for the fourth quarter of 2013 were estimated at $1.15 trillion, an increase of 0.6 percent from the third quarter of 2013. The fourth quarter 2013 e-commerce estimate increased 16.0 percent from the fourth quarter of 2012 while total retail sales increased 3.8 percent in the same period. E-commerce sales in the fourth quarter of 2013 accounted for 6.0 percent of total sales.
  • By giving you the ability to unify your resources, responsive web design will help you provide visitors with all the information they need to make complete discussions when purchasing your products…no matter what device they are on.
  • There are a number of ways you can go about creating a responsive website. Here are a couple of frameworks worth looking into.
  • Responsive Web Design & Miva Merchant by Matt Zimmermann

    1. 1. RESPONSIVE WEB DESIGN & MIVA MERCHANT MATT ZIMMERMANN
    2. 2. Do I need a responsive website?
    3. 3. Dedicated Mobile Website
    4. 4. Native Mobile App
    5. 5. What is responsive web design then?
    6. 6. The Good • A single site • Coexists with other mobile strategies • Improved search ranking • Simpler maintenance
    7. 7. The Bad • Smartphones are frustrating • Page load time can increase • Imprecise or generic looking content • Starting over
    8. 8. The Ugly
    9. 9. Okay, so why should I care? • 60% of the average global mobile Web users now use mobile as either their primary or exclusive means of going online. • Multi-screen behavior is common, 61% of mobile web users engage in mobile activities (e.g., social networking, text messaging) while watching TV. • Mobile is an important companion particularly for in-between times, 83% of respondents use mobile while waiting for something, and 81% while lying in bed.
    10. 10. The Prediction
    11. 11. The Reality
    12. 12. How does responsive web design help me?
    13. 13. Where to start? • Bootstrap by Twitter [http://getbootstrap.com/] • Foundation by Zurb [http://foundation.zurb.com/] • Pure by Yahoo [http://purecss.io/] • Create Your Own
    14. 14. Miva Merchant Bootstrap Framework http://www.mivamerchant.com/bootstrap-framework

    ×