From "mobile last" to "mobile
first”
a Pragmatic Approach to Responsive
Design
Tatjana Salcedo
Megan Hack
University of Ve...
[source: http://www.flickr.com/photos/carbonnyc/3135103537]
Who already has
a responsive site?
And who is
planning on
laun...
2013
the year of Responsive Web Design
- Pete Cashmore, Mashable
And… The University of Vermont
But are we doing enough to
optimize the mobile
experience?
About three in four (74%) teens ages
12-17 say they access the internet on
cell phones, tablets, and other mobile
devices ...
One in four teens are “cell-mostly”
internet users — far more than the
15% of adults who are cell-mostly.
Among teen smart...
pragmatic
/pragˈmatik/
adjective
dealing with things sensibly and realistically
in a way that is based on practical rather...
2014
the year of Mobile First RWD
[Source: Kris Krug on Flickr]
Designing for mobile first not only prepares
you for the explosive growth and new
opportunities on the mobile internet, it...
Mobile first means that you start your
entire design process off by
designing for the smallest screen.
Mobile First Awesomeness
A mobile first approach promotes better
content and navigation design.
[Source: http://xkcd.com/773/]
[Source: Webdagene on Flickr]
Mobile First Awesomeness
A mobile first approach promotes high
performance websites.
RWD Page Sizes are Increasing
[Source: Guy Podjarny, Real World RWD Performance Take 2]
Mobile RWD in Comparison
[Source: Guy Podjarny, Real World RWD Performance Take 2]
Putting Mobile First RWD
into Practice
UVM’s mobile first rwd objectives
Make it direct
Make it easy to use
Make it beautiful
Make it quick
Make it flexible
Make...
our revised objectives
Make it direct
Make it easy to use
Make it beautiful
Make it quick
Make it flexible
Make it happen!...
So, how is that mobile first?
Mobile first design doesn’t mean starting from
scratch.
It’s a useful process even if you have an existing
desktop site.
S...
FIXED WIDTH RESPONSIVE
it a struggle to
angle content?
s it more
dance?
navigation
Mind Your Buttons
images and top banners
Determine Content Hierarchy
Employ sliders and accordion text
Utilize background images whenever po...
700px wide
1200px wide
sidebars and micro-layouts
complex layouts
≈
FACT AND FIGURES
Mobile First Results:
UVM Homepage Load Times
[Source: pingdom]
Home Page Average Weight:
Mobile vs. Widescreen
0 100 200 300 400 500 600 700
iPhone
Widescreen
Kb
Homepage Performance Stats
Desktop
Mobile (iPhone)
[Source: WebPagetest]
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
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
Mobile Visitor Data
[Source: Google Analytics]
Mobile Visitor Data
[Source: Google Analytics]
The Road Ahead
CONTENT REFINEMENT
Road Ahead:
[Source: Flickr]
NAVIGATION DESIGN
Road Ahead:
Slide and Push Menus
EXTENDING TOUCH
GESTURES
Road Ahead:
PERFORMANCE
OPTIMIZATION
Road Ahead:
Performance:
Limiting HTTP Requests
Performance:
Compression and caching
Performance:
Minify
CSS
JavaScript
HTML
Performance:
Responsive Image Solutions
Lessons Learned from MF RWD
• Plan for content optimization on steroids
• Don’t let navigation and UI controls take
over y...
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
Upcoming SlideShare
Loading in...5
×

From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design

2,246

Published on

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.

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,246
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
36
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • 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
  • From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design

    1. 1. From "mobile last" to "mobile first” a Pragmatic Approach to Responsive Design Tatjana Salcedo Megan Hack University of Vermont @uvmwebteam #mobilefirstrwd
    2. 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. 3. 2013 the year of Responsive Web Design - Pete Cashmore, Mashable
    4. 4. And… The University of Vermont
    5. 5. But are we doing enough to optimize the mobile experience?
    6. 6. 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]
    7. 7. 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]
    8. 8. 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]
    9. 9. 2014 the year of Mobile First RWD
    10. 10. [Source: Kris Krug on Flickr]
    11. 11. 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
    12. 12. Mobile first means that you start your entire design process off by designing for the smallest screen.
    13. 13. Mobile First Awesomeness A mobile first approach promotes better content and navigation design.
    14. 14. [Source: http://xkcd.com/773/]
    15. 15. [Source: Webdagene on Flickr]
    16. 16. Mobile First Awesomeness A mobile first approach promotes high performance websites.
    17. 17. RWD Page Sizes are Increasing [Source: Guy Podjarny, Real World RWD Performance Take 2]
    18. 18. Mobile RWD in Comparison [Source: Guy Podjarny, Real World RWD Performance Take 2]
    19. 19. Putting Mobile First RWD into Practice
    20. 20. 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!
    21. 21. 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
    22. 22. So, how is that mobile first?
    23. 23. 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
    24. 24. FIXED WIDTH RESPONSIVE
    25. 25. it a struggle to angle content?
    26. 26. s it more dance?
    27. 27. navigation
    28. 28. Mind Your Buttons
    29. 29. 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
    30. 30. 700px wide 1200px wide
    31. 31. sidebars and micro-layouts
    32. 32. complex layouts
    33. 33.
    34. 34. FACT AND FIGURES Mobile First Results:
    35. 35. UVM Homepage Load Times [Source: pingdom]
    36. 36. Home Page Average Weight: Mobile vs. Widescreen 0 100 200 300 400 500 600 700 iPhone Widescreen Kb
    37. 37. Homepage Performance Stats Desktop Mobile (iPhone) [Source: WebPagetest]
    38. 38. 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
    39. 39. 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
    40. 40. Mobile Visitor Data [Source: Google Analytics]
    41. 41. Mobile Visitor Data [Source: Google Analytics]
    42. 42. The Road Ahead
    43. 43. CONTENT REFINEMENT Road Ahead:
    44. 44. [Source: Flickr]
    45. 45. NAVIGATION DESIGN Road Ahead:
    46. 46. Slide and Push Menus
    47. 47. EXTENDING TOUCH GESTURES Road Ahead:
    48. 48. PERFORMANCE OPTIMIZATION Road Ahead:
    49. 49. Performance: Limiting HTTP Requests
    50. 50. Performance: Compression and caching
    51. 51. Performance: Minify CSS JavaScript HTML
    52. 52. Performance: Responsive Image Solutions
    53. 53. 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×