From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
•Télécharger en tant que PPTX, PDF•
4 j'aime•3,182 vues
Responsive web design is taking higher ed web development by storm. This session will cover how the University of Vermont recently converted their existing fixed-width web design into a responsive one using a mobile-first strategy. We'll discuss both the advantages (and disadvantages) of the mobile first approach as well as tips and techniques used to create a nimble foundation for rapidly converting fixed width sites to responsive ones throughout the institution. In addition, we'll reveal a post launch assessment of the effectiveness and performance of the responsive design.
![[source: http://www.flickr.com/photos/carbonnyc/3135103537]
Who already has
a responsive site?
And who is
planning on
launching one this
year?](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommandé
Contenu connexe
Tendances
Tendances (17)
En vedette
En vedette (20)
Similaire à From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
Similaire à From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design (20)
Dernier
Dernier (20)
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
- 1. From "mobile last" to "mobile first” a Pragmatic Approach to Responsive Design Tatjana Salcedo Megan Hack University of Vermont @uvmwebteam #mobilefirstrwd
- 2. [source: http://www.flickr.com/photos/carbonnyc/3135103537] Who already has a responsive site? And who is planning on launching one this year?
- 3. 2013 the year of Responsive Web Design - Pete Cashmore, Mashable
- 10. And… The University of Vermont
- 11. But are we doing enough to optimize the mobile experience?
- 12. About three in four (74%) teens ages 12-17 say they access the internet on cell phones, tablets, and other mobile devices at least occasionally. [source: 2013 Pew Teens and Technology Report]
- 13. One in four teens are “cell-mostly” internet users — far more than the 15% of adults who are cell-mostly. Among teen smartphone owners, half are cell-mostly. [source: 2013 Pew Teens and Technology Report]
- 14. pragmatic /pragˈmatik/ adjective dealing with things sensibly and realistically in a way that is based on practical rather than theoretical considerations [Source: Oxford Dictionary of American English]
- 15. 2014 the year of Mobile First RWD
- 16. [Source: Kris Krug on Flickr]
- 17. Designing for mobile first not only prepares you for the explosive growth and new opportunities on the mobile internet, it forces you to focus and enables you to innovate in ways you previously couldn’t. - Luke Wroblewski, 2011
- 20. Mobile first means that you start your entire design process off by designing for the smallest screen.
- 21. Mobile First Awesomeness A mobile first approach promotes better content and navigation design.
- 23. [Source: Webdagene on Flickr]
- 24. Mobile First Awesomeness A mobile first approach promotes high performance websites.
- 27. RWD Page Sizes are Increasing [Source: Guy Podjarny, Real World RWD Performance Take 2]
- 28. Mobile RWD in Comparison [Source: Guy Podjarny, Real World RWD Performance Take 2]
- 29. Putting Mobile First RWD into Practice
- 31. UVM’s mobile first rwd objectives Make it direct Make it easy to use Make it beautiful Make it quick Make it flexible Make it happen!
- 33. our revised objectives Make it direct Make it easy to use Make it beautiful Make it quick Make it flexible Make it happen! Preserve existing layouts for desktop size screens
- 34. So, how is that mobile first?
- 35. Mobile first design doesn’t mean starting from scratch. It’s a useful process even if you have an existing desktop site. Start by asking what would the mobile version of this site or app look like? You’ll determine what priorities matter on key screens and flows. By the time you’re done, you’ll be likely to able to make the desktop version better based on what you learned designing for mobile. ~ Luke Wroblewski
- 38. it a struggle to angle content?
- 40. s it more dance?
- 41. navigation
- 48. images and top banners Determine Content Hierarchy Employ sliders and accordion text Utilize background images whenever possible Use html for text and css for buttons whenever possible
- 57. complex layouts
- 59. ≈
- 62. FACT AND FIGURES Mobile First Results:
- 63. UVM Homepage Load Times [Source: pingdom]
- 64. Home Page Average Weight: Mobile vs. Widescreen 0 100 200 300 400 500 600 700 iPhone Widescreen Kb
- 65. Homepage Performance Stats Desktop Mobile (iPhone) [Source: WebPagetest]
- 66. Template File Sizes: Non-Responsive vs. Mobile 1st RWD 0 5 10 15 20 25 30 HTML Template CSS JavaScript Kb Non-RWD MF RWD
- 67. Mobile Visits Increasing 0 1000 2000 3000 4000 5000 6000 7000 8000 1-Jan 1-Feb 1-Mar 1-Apr 1-May 1-Jun 1-Jul 2013 2012
- 68. Mobile Visitor Data [Source: Google Analytics]
- 69. Mobile Visitor Data [Source: Google Analytics]
- 70. The Road Ahead
- 72. [Source: Flickr]
- 74. Slide and Push Menus
- 84. Lessons Learned from MF RWD • Plan for content optimization on steroids • Don’t let navigation and UI controls take over your screen • Turning the visual design process on its head is not always easy • The development process goes more smoothly … usually • Performance optimization easier to achieve than with non-MF aproaches
Notes de l'éditeur
- Why and how to take a Mobile First approach to Responsive DesignSome real world example of this approach used in the University of Vermont responsive projectMeasuring the effectiveness of such an approach both in terms of performance and user experience
- The year RWD becomes mainstream across a wide range of sectors
- From tech…
- …with rapid adoption in higher ed.
- Mobile is a challenge in the higher ed sphere where it’s hard to measure ROI and resources are tight. So it makes sense to take a pragmatic approach to projects emphasizing efficiency and long term investment.
- So I’d like to make 2014 the year of mobile first responsive web design
- “Mobile First” published in 2011 by Luke Wroblewski is the seminal work on this concept. It’s not a book about responsive design per se but the basic concepts apply.
- Many responsive design projects start out with a goal to create a site that performs well across a large range of screen resolutions, but many start the process from the traditional perspective of a large screen. Working backwards… but there are a lot of pitfalls to this method.
- Trying to fit all that stuff down to that small container is tricky… and not always elegant.
- The result is almost always a focused, cleaner, and more usable design for all resolutions. Additionally, this focus on delivering content on a small screen often improves the overall accessibility and usability of the site, support search optimization efforts and …
- Karen McGrane
- Faster, leaner and easier to maintain.
- These numbers are compelling. We all know that mobile is important, but I say mobile is critical and posit that it’s time to let mobile take center stage.
- I’m going to tell the story of how we took all that theory and put it into practice. Before starting something new, you have to know where you are. In early 2012, the webteam was at a crossroads or was it more of a road to nowhere? We had a dedicated mobile site using the Kurogo framework. We had a two year old iphone app. So we’d been keeping an eye on mobile traffic for some time. We knew our mobile viewership was growing by leaps and bounds and we wanted to provide a more full featured experience. Mobile first rwd seemed like the most obvious and most awesome solution.So we got started by coming up with our objectives:
- We planned to transform our entire site, so our goals were broad sweeping:Conduct content audit. Make necessary changes and address issues of content choreography and hierarchyfull featured interactive experience designed around a touch screen not a mouseMake it beautifulPerformance optimizedMake it easily adoptable by others in the template systemComplete and launch in a timely fashion
- So this is where pragmatism comes in again. Here “pragmatism” is really about action under the influence of experience, as opposed to theory. In theory, we should redesign, reprogram, and rewrite the site entirely to meet those objectives and make our mobile presence the most powerful it could be. But we live in the real world. And our experiences in the real world told us that reshaping the web that much would probably double our project timeline in part because of the lengthy review process that tends to accompany big change, and we wanted to get this out the door.Our new pragmatic approach looked like this:The problem was that for most people who were stakeholders, or webmasters, or content contributors, mobile was still an afterthought.
- Note the last line - minimal to no redesign for desktop version
- At this point we were wondering “Is this still mobile first?” is is it more like mobile second? Mobile “close, but no cigar”?But as we started our work we realized that yes, it was mobile first, because we had undergone a complete and utter change in the way our team thought, designed, wrote, developed and tested.
- It’s ok!Tatjana mentioned Luke, and I will too. Because he described close to exactly what we planned to do.
- So on the surface, on a desktop it DID look and function the same, but under the hood it was quite different.
- And on a tablet or handheld, the experience was entirely changed. Optimized for hands instead of a mouse, easy to read and navigate, and performance optimized.Ok, so now I’m going to delve into the dry development details.
- Just kidding – this issuper exciting!! We are going to pretend to rip the shoes off our website!!
- If we think back to our list of objectives, our first objective was to Make it direct and that was about content choreography But I think there is another, more OVERALL Choreography that happens between all that important content, the beautiful photography, branding elements, critical navigation elements, interactivity, and of course performance optimization.
- It could be a push and pull, a battle, or a dance.I LIKE TO KEEP Things POSITIVE, SO I’m calling it The DANCE OF DEVELOPMENTThree parts of our dance that I’m going to dig into are :NavigationImages Sidebars and widget-like content blobs
- NavigationWhat do folks need right away, and will they be willing to dig in to find?These are pieces pulled out of the desktop siteMain navigationSecondary navigationAudience for homepageOptional audience navigationSearchMost used links (a-z, directory)
- And these were some things we tried out. And here is an important point, we started with wireframes and mockups, but we very quickly learned that when you are developing for mobile first, you have to test early in the development process.
- We focused on a few issues and worked through them with extensive testing.finding the right tappable area –crazy tiny buttons too close to each otherAnd adjusting the proximity of tappable areas
- This is final version of our top menu. Employed a show and hide technique One limitation we were working under was that we couldn’t reprogram the way our menus worked nor could we make major changes to the information architecture.
- And here is the submenu, using a similar technique.
- We had show and hide functionality on our side, but it was still pretty long. We knew that not all users have patience to dig through menus whatever the size or format, so so we made sure that the search bar was on every page.
- We new that people might just go straight for search or a-z, as is backed up by AnalyticsSo this was the best solution for the existing system and existing architecture
- In our template system, top Banners are prime real estate On a handheld they can account for a majority of the initial screen. are used for a variety of purposeGoals were the same for all usages:Maximize effectivenessMaximize spacedevelopment Used Progressive enhancement to make them load quicklyKeep the content flexible and accessible Here was our dance of again , where we took apart are reassembled based differing priorities
- Here the banner is Not top content.Most important is the text.The rest of page was lightweight, so we could afford to use images in the html. Image was not a background, flexible, until a certain size – had a min-width so that it wouldn’t get obscenely tiny
- Here the content added a lot of value. This is a real student, a real story that reinforces and enriches the page content. used background for landscape, that was not there in small sizes, image for person is the html as is the text.
- UGRad homepageEverything, all the time!Critical content was in the top banner, so it kept full size. Some images were of campus, but others were of faculty.Images were flexible instead of background so the whole would be visible and there would be less breakpoints, text was layered on top for flexibility
- In this case the dance of our elements was graceful. Here there are actually several different background images. Smallest gets loaded for small screens. As the screen size increases the larger version replaces the small.The text is not embeded in the image, so we can resize and move it at will.
- Just a little peek under the hood.The site loads quickly on a mobile device because it only loads what it needs. It was about 20 kb smaller than the full size which doesn’t sound like much except that this banner has a slider – so there are actually 6 backgrounds that are loaded into the page – so that difference really adds up.
- Asses content hierarchy page by pageProvide several layout options and template features to address the different needs on mobile and desktopIn certain scenarios, the right column content could come before the most left as opposed for a standard left to right ordering.
- Left column needed to occur before the rest.
- Some of the layouts I was working under were pretty tricky. Luckily I personally love a good challenge.
- Tips and tricks for working on complex layoutsMaximize space and readability with sliderJquery Accordion functionalityUsed the modernizr library to attach functionality to media queries – explain
- What we are up to now:Now we are moving in colleges and schools and supporting webmasters who want to make the conversion on their own. We work together to prepare content and images and address any special needs.Each site is launched when it is in good shape, we never play catch up or have fires to put out, it is steady adoption with good results.The process has been a little different with each site.
- Some sites, like the School of Business came in quite willingly.
- Right now I’m working with the college of medicine, who is here somewhere!I had a great meeting with stakeholders from the College of Medicine. Some folks were concerned that their audience was different, and was more likely to look on a desktop so they didn’t want to compromise that experience. But then their analytics expert pulled out some figures showing that despite being lower than other units, their mobile viewership was growing at an alarming rate so they needed to plan for the near future.That cemented the deal.We have more sites lined up to move in, and we have started to look at our Analytics data on the new site to inform our process as we move forward.
- Vast improvements in page weight and speed using the MF approachUser experience improvements as measured by Google Analytics
- Thinking like mobile apps or dedicated sites