Stocktwits & Responsive Web Design, social network meets flexible framework
4 likes6,622 views
The document discusses Stocktwits' implementation of responsive web design (RWD) to optimize user experience across various devices, including mobile and desktop. It outlines the processes of research, design, coding, and iteration involved in creating a responsive platform that supports real-time financial communications. Additionally, it addresses the importance of user feedback and metrics in evolving the design to better meet the needs of the investing community.
Stocktwits & Responsive Web Design, social network meets flexible framework
- 1. STOCKTWITS & RESPONSIVE WEB DESIGN Social network meets flexible framework.
- 2. The real-time financial communications platform for the investing and trading community. Chris Corriveau Sean Gilbert John Strott CTO CD UX HELLO from a small part of the StockTwits team.
- 3. Mobile Tablet Web sites Apps, Sites Apps Smart Phones, E-Readers, Tablets, Netbooks, Notebooks, Desktops, Monitors, TVs, Etc. RWD RESPONSIVE WEB DESIGN The use of with fluid grids, flexible images, and media queries to provide optimal viewing experiences on multiple devices.
- 4. <link rel="stylesheet" media="screen and (max-width:500px)" href="example.css" /> Rule Type Feature @media screen and (max-width: 500px) { body { font-size: 1.5em; } } MEDIA QUERY GEN NEXT CSS3 Media Queries, the hip cousin of the CSS2 Media Type.
- 5. Research Engineering Iterate Wireframe Visual Design GETTING THERE Steps toward the first release of our responsive web design.
- 6. REQUIRED RESEARCH Find out what devices are being used to access your site and how to best deliver your content to them.
- 7. A A A B B C C D B C D WIRE-FRAMED-UP Create wireframes that feature your most important content at each breakpoint.
- 8. VISUALIZE THE DESIGN Quickly find out what changes are needed at each breakpoint.
- 9. CODE, CODE AND MORE CODE. Define your breakpoints using media queries.
- 10. 1. .btn { 2. background-color: #69CA24; 3. background-image: linear-gradient(top,#93DA70, 4. border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 5. border-radius: 3px; 1. @font-face { 2. font-family: 'FontAwesome'; 3. src: url('../font/fontawesome-webfont.eot'); 4. } 1. <img alt=”SVG Example” src="image.svg" /> FUTURE FORWARD Create UI elements with pure CSS, Font Icons and SVG.
- 11. SCRATCH THAT, MAKE IT BETTER Gather feedback, define problems, devise solutions, deploy, & iterate again.
- 12. Convert font sizing to EMs Up Next: JQuery Touch for mobile Explore creating logo as a TrueType font CSS3 Spec Candidates: h1 { div { a{ font-size: 10vw; margin: 0 20px; font-size: 1rem; } width: calc(50%-40px); } } Viewport-percentage lengths: The calc() function: The rem unit: Relative to the size of the Allows mathematical expressions Equal to the computed value of initial containing block. to be used as component values. ‘font-size’ on the root element. THE NEXT BIG THINGS The definitive answer to: “Are we there yet?” is: “Not quite.”
- 13. Top Down Design WHAT ABOUT MOBILE::FIRST-CHILD? Build the theme for mobile devices first, then progressively enhance the UX on other devices, such as desktops.
- 14. ONE SIZE FITS ALL Browser Limitations, Image Sizing/Load Times, Lack of Feature Support, Testing Fitment & more. DOES THIS HAT LOOK FUNNY ON ME? RWD is a great solution for many organizations. However, it's not always a one size fits all.
- 15. GOOD UX BETTER UX BEST UX Improved Mobile UX Improved UX Across Media Best UX Faster Browsing CSS Based Device-specific Integration Manage Context Easy Maintenance Offline Access Cost-Effective Cost-Effective Flexible Data/Network Usage WHO DOES RESPONSIVE WORK FOR? A few business cases by approach for mobile design.
- 16. Metrics Strategy Resources THE CASE FOR RESPONSIVENESS With traffic diversifying, limited resources, and having shipped native apps, creating a RWD made sense for us.
- 17. Love the redesign! If i had enough money, i would try to buy you guys out! Vastly improved user luv the Mega Pop-out experience on iPad capability with the this morning, I love it. auto screen re-sizing. HATE the new layout. Its always change for the sack of change OH NO YOU DIDN’T! Some feedback from our users.
- 18. Reading & Following: Examples: Ethan Marcotte (@beep), RESPONSIVE WEB DESIGN Boston Globe: http://www.abookapart.com/products/responsive-web-design/ http://bostonglobe.com/ Luke W (@lukew), MOBILE FIRST World Wildlife Fund http://www.abookapart.com/products/mobile-first/ http://worldwildlife.org/ Brad Frost (@brad_frost) http://bradfrostweb.com/responsive-web-design-newsletter/ Manchester-Boston photo credit: WWF, Regional Airport: worldwildlife.org Responsive Web Design (@rwd) http://flymanchester.com/ Frameworks: Quick Reference: Twitter bootstrap: http://twitter.github.com/bootstrap/ Can I Use: http://caniuse.com/ The Semantic Grid System: http://semantic.gs/ Media Query Snippets: http://nmsdvid.com/snippets/ Foundation 3: http://foundation.zurb.com/ Google Analytics: http://www.google.com/analytics/ RWD REFERENCE MATERIAL Look it up.
- 19. Chris Corriveau Sean Gilbert John Strott Chief Technical Officer Creative Director Senior Designer, UX chris@stocktwits.com sean@stocktwits.com jstrott@stocktwits.com @genevate @seangilbie @MrJohnnyLane FIN. MERCI. Let us know if you have any questions.