5 Simple Actions to Make a Measurable Impact on Your Responsive Site
•Als PPTX, PDF herunterladen•
3 gefällt mir•1,314 views
Our President, Patrick Collins, presented at eTail East 2013 in Philadelphia, PA, on 5 Simple Actions to Make a Measurable Impact on Your Responsive Site. Listen to what he had to say, and contact him with any questions or comments at patrick.collins@5thfinger.com.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (9)
Ähnlich wie 5 Simple Actions to Make a Measurable Impact on Your Responsive Site
Ähnlich wie 5 Simple Actions to Make a Measurable Impact on Your Responsive Site (20)
5 Simple Actions to Make a Measurable Impact on Your Responsive Site
- 1. 0 President patrick.collins@5thfinger.com 415.578.8929 © 2013 5th Finger 5 Simple Actions to Make a Measurable Impact on Your Responsive Site
- 2. 1 • About 5th Finger • Responsive is a Game Changer • 5 Simple Actions to Make a Measureable Impact • Transformative Responsive Design • Questions Contents
- 3. 2 About 5th Finger We are a team of 50 5th Finger employees based in San Francisco and backed by over 1,400 Merkle employees. About 5th Finger We are a team of 50 5th Finger employees backed by over 1,600 big data professionals at Merkle. Our acquisition by Merkle adds multi-channel capabilities that allow us to optimize and expand our client services. 2013 DMA Mobile Innovation Award Finalist 2012 Smarties Winner Best Mobile Campaign
- 4. 3 We consider our clients to be partners in innovation
- 5. 4 Responsive Web Design is a Game Changer REASON 1 For the first time, Responsive is enabling the practical realization of omni-channel marketing and e- commerce. Prior solutions were not maintainable. REASON 2 Responsive completely unifies silo‟ed teams (mobile vs desktop), silo‟ed code, silo‟ed content, and silo‟ed analytics. REASON 3 One Web with a single URL. Greatly improved SEO benefits, much easier URL sharing in email and social.
- 6. 5 Simple Actions for ROI5
- 7. 6 Consumers will transact more on a fully featured responsive site, than a high speed dumbed down experience with less content and functionality. 1Your users want the full site
- 8. 7 1Your users want the full site… proof mDot site Load Time : 6.8s Content : Limited Conversion Rate : 10.6% Responsive Load Time: 7.2s (5.5% slower) Content : Complete Conversion Rate : 11.5% (10% higher conversion rate)
- 9. 8 Prioritize your content on each page. How? Use your analytics package and build a heat map of where people click from your home page. Prioritize those elements first and optimize. 1Your users want the full site.. but prioritize carefully
- 10. 9 Brands still should include a “full- site link” to satisfy user skepticism created from past minimal mobile experiences. 1Your users want the full site..
- 11. 10 2 Speed is Critical to ROI Increased speed means: • Increased ROI • Page load speed • User experience speed
- 12. 11 • Specify your page load speed goals, e.g. LTS on iPad2 < 8 seconds • Expert developers know: 1. Image Selection and Optimization (50-75% page download is here). 2. Careful use of Javascript and lazy loading to make it “feel faster”. 3. Minify and gzip all CSS 2 Speed is Critical to ROI … Page Load Speed
- 13. 12 Experience Speed Reduce form input. Make this a priority! (Learn from the master at lukew.com) 2 Speed is Critical to ROI … Experience Speed
- 14. 13 Experience Speed Specify input type to make keyboard adapt to expected data type (i.e. email or number). 2 Speed is Critical to ROI … Experience Speed
- 15. 14 3 Adopt a Mobile First Design Process Keep the design in a flexible grid to maintain the fluidity of the content. Scale up from 1 column on mobile to 3-5 columns on the desktop.
- 16. 15 3 Adopt a Mobile First Design Process Designers need to understand HTML and CSS. Since designers will be focusing on the percentages of the sites instead of the pixels, use design tools like Axure to create rapid prototypes and try to avoid tools that are too pixel perfect like Photoshop.
- 17. 16 3 Adopt a Mobile First Design Process 670 px 1024 px0 px small and large tablets smartphones desktop 480 px 768px high end smartphones and portrait iPads Nice to have first generation smartphones in portrait mode Must have 1600 px+
- 18. 17 4 Consider your Analytics and AB testing strategies. Requires a complete rethink of A/B testing and analytics strategy. Adds a per breakpoint flavor. Plan early
- 19. 18 Transformative Design is a responsive design approach which doesn‟t require you to rebuild your existing website. You are essentially transforming your current site to be responsive. 5 Consider responsive a journey, not a big rebuild
- 20. 19
- 21. 20
- 22. 21 5th Finger Responsive Technology 5thFinger.js Step 2 – 5thFinger.js tags are added into the existing website‟s HTML code. Step 1 – Define „layout flows‟ for device breakpoint. Step 3 – When the site is loaded, 5thFinger.js re-flows pages dynamically, hiding or expanding any content. On Any Existing eCommerce Platform
- 23. 22 Summary 1. Users want the full site 2. Speed means skilled developers 3. Adopt a mobile first design process 4. Adjust your analytics and A/B testing strategies immediately 5. Consider responsive a journey, not a rebuild
Hinweis der Redaktion
- We are a mobile and tablet commerce solutions provider. <pause>We have a product designed to bring responsive design to legacy platforms which cannot be rebuilt.
- We build digital executions and responsive sites for a range of retailers. Wehave 8 responsive design implementations in market which we believe is the highest number of responsive design implementations in the US.
- I’m going to say something controversial here, because a lot of people have been saying the opposite for many years. Don’t assume you know what the user is looking for or that mobile is on the go. Context ≠ IntentYou have to get substantial coverage of your existing site. It has to “feel” meaningfully similar to your desktop site and have the same level of content. Or people will be looking for the escape hatch.“Argh get me out of here!Where is the full-site link?” syndrome.Consumers don't want the cut down half assed version. Nor do they want the monkey-site version built for a 1995 blackberry.Responsive Design and Transformative Responsive Design are truly the best solution to this problem.<Cheryl, can we find some stats to backup this claim? Something about people wouldn’t recommend a poor mobile site, or wouldn’t come back. Or stats about how people are making decisions in multiple channels?>
- Make it look more connected
- So although I’m suggesting that your users are moving between all channels and expect to see the full site content, you can and must prioritize where content appears. For instance, you might put all menu items under a roll out menu on tablet or mobile, but then only keep the most commonly accessed features of your site linked from the top of the home page above the fold.We typically inform our initial planning session by using the existing web analytics to understand where people are clicking from the home page on different devices. We use that data to inform the multiple designs at each breakpoint.However, once the responsive implementation is complete, this can change, so it is worth planning on doing some optimization with this.
- So let’s take a look at page load speed.Firstly, it is amazing how powerful it is to specify, as part of your project, the page load speed goals. We specify multiple goals. Goals like these are fantastic for focussing and motivating web developers. Speed is a feature and needs to be specified fully accordingly.Take performance seriouslyThere are a lot of tools out there, but you need a skilled responsive shop. This is a, but an enterprise platofmr and make the problem go away situation.But really my main point here is that: Page Load Speed comes from experienced programmers. They are in very short supply but improving. There is no silver bullet, but great tools and experienced team.
- PC to come up with a diagramReduce form input. Make this a priority! Learn from the master at lukew.com
- PC to come up with a diagramReduce form input. Make this a priority! Learn from the master at lukew.com
- Instead of foucsing on pixels, focus on the percentage, and the fluidity of the website. Because we are not designing for each pages but templateAs a designer, you foresee what happens in the different modes.- use Axure helps makes a rapid prototype Photoshop is too pixel perfect. Designer will use Chrome Web Inspector/ Firebugs to check the existing margin and padding on the desktop site For responsive web design, it always better to keep the design in a grid system. It will make the content flow better. For example, from 3-5 columns in desktop down to, 1 column in mobile. Forcing content prioritization discussion, and if it doesn’t belong on mobile, then does it really belong on your site at all?Doing one thing very well as opposed to having too much stuff.You can figure out what to put on the desktop site and it’ll be less clutteredLots of homepage real estate enables less clutter.
- Your designers should be using a more adaptable tool to wireframe the UX of your new experience, like Axure or even HTML/CSS. The design skills are changing and the skills of programmers and designers are starting to meld together. But to be sure bringing photoshop to a responsive project is like bringing a knife to a gun fight.
- Breakpoints for major changesFluidity for smaller changes3 break points – large tablet, small tablet, smartphoneMore breakpoints will cost more time and more moneyWhat’s your return on investment Know your device analytics cold
- Your analytic tags still work but we’ll be putting extra tagsYou don’t know for sure what your users wants, so you should test at a breakpoint level the content hierarchies and if you’re hitting the nail in the head or if you’re missing it. AB testing tools are getting there at tracking on responsive sites. Responsive design makes AB testing really hard. Requires a complete rethink of AB testing strategy per breakpoint.
- Bring up the issue first.Clients are often, into the wireframes, designs, headset, it’s cool, got it let’s go.Holdbacks are: rebuild the site, don’t know what we don’t know, skills issues, should we buy a platform?Transformative design gets you 90% of the way there, in 90% less timeStart with tabletDesigns, but no appetite for big rebuild. The disconnect of the design team and the budget and skills of the engineering team.Refactor from the ground up over time. We’re working with a billion dollar clothing retailer and they’re applying this approach.one of our clients have this as their approach.In order for us to get a full responsive implementation Responsify the containerApply the fluid grid to key page first.
- Amend the menus. Fix broken slideshows, make them touchable. Fix small fonts and rollovers on menus. (JAB)