All posts tagged “Redesigning”

Redesigning Yelp: Design Methods Driven By Usability

You’re reading Redesigning Yelp: Design Methods Driven By Usability, originally posted on Designmodo. If you’ve enjoyed this post, be sure to follow on Twitter, Facebook, Google+!

Redesigning Yelp: Design Methods Driven By Usability

Jerry Cao is a content strategist at UXPin — the wireframing and prototyping app — where he develops in-app and online content for the wireframing and prototyping platform. For details and visuals of how to incorporate usability testing into design, check out the e-book User Testing & Design. Before you start improving the UX, you […]


Charged: Redesigning an Icon: We speak with Cadillac’s Lead Designer and Design Manager about the intricacies of redesigning the brand’s legendary crest

Charged: Redesigning an Icon

Since its founding in 1902, Cadillac has stood as an American icon of automobile design that hails straight from the heart of Detroit. When the future-facing brand unveiled its…

Continue Reading…

Cool Hunting

13 questions to ask before redesigning a website

Read more about 13 questions to ask before redesigning a website at

To create the perfect website redesign, you’ll often want to start afresh. However, you risk losing useful elements and throwing the baby out of the bathwater. It’s better to perform a thorough site review to ensure you keep the great bits of an existing site, protect your client’s ability to amend and maintain the site, as well as developing the brand in the best way possible. Here we explain the best way appraise a site prior to redeveloping it.

Creative Bloq

Responsively Redesigning the New, New York Times

New York Times Redesign — Design Work Life -1

For their New Year’s resolution, The New York Times is launching a beyond ambitious redesign of their future web experience and their first since 2006. Offering a new experience, the requisite press release promises a “cleaner, more engaging user experience” that will define the future of the paper’s digital edition. On Twitter, Rhodri Marsden cut through the spin and found the key to redesigning the Grey Lady was actually just about, “humans. As opposed to, say, the elk.”

Already available since Jan. 2 for some users, the new design offers some timely examples of responsive web design, touch first philosophy, user centric thinking, and a whole lot of white space – bonus points for them having a trailer video and microsite of course. To fully appreciate this next generation of the paper, we highly recommend this animated GIF of The New York Times home page history as a good start. 2001 was adorable.

But how do you really redesign a site this large? How large? “Couldn’t even begin to tell you how many pages,” Ian Adelman, Director of Digital Design at The New York Times told us in an interview. “We tend not to think about it in terms of pages, more in terms of views. We see it in terms of how many types of views we need to serve up.”

New York Times Redesign — Design Work Life -2

As many stories and tweets about the redesign have noted, the paper believes this is the last redesign they’ll ever have to do. Adelman believes that, “It’s a beginning. We don’t see this as a redesign in the sense of it being an artifact. It is a new, more dynamic and flexible platform for expressing our journalism. We focused on trying to create a place where people would want to spend their time. We tried to pare it back to the essential elements, so that what is left is more powerful. It’s easier to add enhancements than it is to take things away. Among other things, we are exploring more ways that the experience can be passively personalized, in ways that feel helpful to our readers.”

The design’s influence from our touch interface world is clear from the first click, but it doesn’t forget where a large amount of work actually happens online. “Perhaps the simplest way to put it is that from the very beginning, we approached the UI design with the assumption that it would be used on touch-based devices,” said Adelman. “It sounds obvious, but in an environment where people are still doing most of their work – writing, designing and coding – on machines with a mouse, it’s important to take a very active position on that sort of intent.”

The biggest thing we can see beyond the much-needed responsive design, is the single story scroll. No longer are articles set up in frustrating paginated views, but now on singular scrollable pages. “What’s generally best for the user is good for everyone else too,” said Adelman. “It’s certainly more pleasant. It keeps people engaged as there is no interrupted moment.”

The idea of the interrupted moment and how to solve for this is something that we’re going to see a lot more of going forward in web design. Of course the advertising impact of such a decision is unique to the user interface design of a newspaper website. “Everything about design is negotiation,” said Adelman. “When you take something where the essential product is journalism. Meantime you’re in the business of selling advertising, as well as the business of creating a compelling experience that people are willing to pay for. That’s a constant negotiation.”

Included in this new article design the comments now follow you down the page, and show up on the right hand side — this side-by-side feature for comments is a cool solution for desktopers and commenting addicts.

New York Times Redesign — Design Work Life -3

Another huge change was moving the long list of section navigation that previously appeared down the left side to a drop down navigation item at the top is a real game changer. The design also gives users some exciting new ways to explore content that subtlety lift from popular upstarts Zite or Flipboard is very, very, smart. Providing helpful right/left buttons on every article is a surfers dream, and the carousel of related stories at the top of articles is seemingly right out of Buzzfeed’s bag of design tricks.

What we found in talking with Adelman was how routed every decision was in content and journalism and how they are thinking about that going forward. “We made a lot of improvements in how we assemble the content so that it could express the journalism across platforms,” said Adelman. “We’re not building webpages. They exist now. And they will exist for some time. But what we’re really building is a journalism platform. The better we can articulate the shape of our material, the better we can display it across those platforms.”


Design Work Life

12 questions to ask before redesigning a website

Read more about 12 questions to ask before redesigning a website at

When redesigning an existing website, you’ll often want to start afresh. However, you risk losing useful elements and throwing the baby out of the bathwater.   It’s better to perform a thorough site review to ensure you keep the great bits of an existing site, protect your client’s ability to amend and maintain the site, as well as developing the brand in the best way possible. Here we explain the best way appraise a site prior to redeveloping it.

Creative Bloq

Redesigning A Responsive Youtube with HTML5/CSS3 [Tutorial]

If you have seen YouTube recently you may notice one glaring omission from their website layout. Their design lacks the ability to fold responsively as you resize the browser window. It’s strange how the layout does not even contract to a smaller width; YouTube is currently designed using a fixed-width webpage.

I want to bring in some modern web design techniques and give the YouTube homepage a nice redesign. In this tutorial I’ll explain how we can build a custom mobile-responsive YouTube clone layout from scratch.

Custom YouTube Responsive Layout Redesign in HTML5/CSS3

I’ll be using some newer HTML5 and CSS3 techniques which are supported in mostly all modern browsers.

If you want to see my code in action check out the live demo at the end of the article below.

Creating the Structure

To get us started we should create a single index.html page with the typical HTML5 doctype. Since this is a mobile responsive layout we need to include a few specific meta tags as well.

In this project I’ll be separating our JavaScript and CSS code into different files, and you can see what that looks like in my codes below:

<!doctype html>
<html lang="en-US">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Demo sliding menu test</title>
  <meta name="author" content="Jake Rocheleau">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="icon" href="favicon.ico">
  <link rel="stylesheet" type="text/css" href="css/styles.css">
  <link rel="stylesheet" type="text/css" href="css/responsive.css">
  <script type="text/javascript" src=""></script>
  <script type="text/javascript" src=""></script>
  <script type="text/javascript" src="js/retina.js"></script>
  <script type="text/javascript" src="js/scripts.js"></script>
<!--[if lt IE 9]>
  <script src=""></script>

So along with the viewport meta tag, I’m including a series of external documents. The stylesheets styles.css and responsive.css contain the design rules for our typical layout and over responsive media queries.

Additionally I am including two JS libraries from Google’s CDN hosting: jQuery and jQuery UI. Both will come in handy as the layout shrinks and we use a sliding animation to display the navigation menu.

This animation is tied to the scripts.js file where I’ll be keeping all our custom jQuery codes. Additionally I have another 3rd party script named retina.js which is by far the easiest way to work around retina display images.

If you visit the retina.js website you’ll find a download link for their minified library. Simply include this into your document and the script will auto-scan your images for @2x variations (when on retina devices).

More Responsive Tendencies

For this particular tutorial I have gone with a more atypical approach to website design techniques.

When our layout is displaying in full at 950px, you’ll see two sidebars along with the center video content. However when you get down to the smallest frame, around 320px, you’ll only see the center column and a top toolbar area.

toogle youtube toolbar

This toolbar will have a menu toggle button which you can tap, to slide back and forth. None of the menu links work in my demo because we don’t have any pages with content right now. But you may update these anchor links with new HREF values to get them working on a real website.

Let me copy over just the top header & navigation code from our document body.

  <div id="w" class="clearfix">
    <header id="fulltop">
      <span id="logomini"><a href="index.html"><img src="design-responsive-youtube/logo-mini.png" alt="YouTube - Broadcast Yourself"></a></span>
      <span id="userlogin">
        <img src="design-responsive-youtube/avatar-sm.png" alt="default user pic" class="defaultphoto"> 
        <a href="javascript:void(0)">Log In</a>
      <div id="searchbox">
        <form id="searchform" name="searchform" action="#" method="get">
          <input type="text" name="s" id="s" class="searchbar" placeholder="" tabindex="1">
          <input type="submit" name="sbtn" id="sbtn" value="" tabindex="2">
        <ul id="topsidelinks">
          <li><a href="javascript:void(0)">Browse</a></li>
          <li><a href="javascript:void(0)">Featured</a></li>
          <li><a href="javascript:void(0)">Upload</a></li>
      <ul id="sidenav">
        <li class="heading">User Account</li>
        <li><a href="#login" class="signin"><i></i>Sign In</a></li>
        <li><a href="#register" class="register"><i></i>Register</a></li>
        <li class="heading">Video Categories</li>
        <li><a href="#popular" class="popular"><i></i>Popular</a></li>
        <li><a href="#recent" class="recent"><i></i>Recently Uploaded</a></li>
        <li><a href="#comedy" class="comedy"><i></i>Comedy</a></li>
        <li><a href="#entertainment" class="entertainment"><i></i>Entertainment</a></li>
        <li><a href="#film" class="film"><i></i>Film & Animation</a></li>
        <li><a href="#gaming" class="gaming"><i></i>Gaming</a></li>
        <li><a href="#people" class="people"><i></i>People & Blogs</a></li>
    </nav><!-- end navigation menu -->

So all the content wrapped inside our body is inside another wrapper div with the ID #w. This is how we can fix the page content towards the center and limit the maximum width around 950px. But inside the header tag you’ll notice that many of the features are not displaying on smaller screens. We are using @media queries inside CSS to limit when the search bar and top links will be displayed.

Additionally the sliding nav menu will always appear hidden on smaller screens. Once your browser width passes about 600px then the side navigation is displayed naturally as a left column in the body container. This is the reason why these links should always work properly regardless of the responsive situation.

Common Webpage Styles

I want to jump into discussing a few important blocks of CSS code. To begin we need to understand how the core body is centered and why the two-column layout drops down as you resize the window.

Now these rules are separated into two documents as you saw earlier, so the easiest way to understand this is by downloading my source code directly.

/* page structure */
#w { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 950px; 
  min-width: 300px; 
  height: 100%;
  margin: 0 auto; 
  overflow: hidden;
  position: relative; 
  display: block; 
  -webkit-box-shadow: 0px 0px 9px rgba(0,0,0,0.65);
  -moz-box-shadow: 0px 0px 9px rgba(0,0,0,0.65);
  box-shadow: 0px 0px 9px rgba(0,0,0,0.65); 

#pageWrapper { display: block; width: 100%; }
#page { 
  display: block; 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  min-height: 650px;
  position: relative; 
  top: 0; 
  background: #fff; 
  z-index: 999;  
  padding: 0;
  -webkit-box-shadow: -4px 0px 9px -4px rgba(0,0,0,0.65);
  -moz-box-shadow: -4px 0px 9px -4px rgba(0,0,0,0.65);
  box-shadow: -4px 0px 9px -4px rgba(0,0,0,0.65);
#content { display: block; padding: 10px 14px; }

#fulltop { display: none; visibility: hidden; }
#secondary { display: none; visibility: hidden; }

Initially we are hiding the top header section and the secondary sidebar from view. All the HTML is still in our document, but none of this will be displayed until the width has surpassed 600px.

The secondary sidebar is actually hidden until 800px because there simply isn’t enough room in the layout.

/* header */
#topbar { 
  display: block; 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 60px;
  padding: 0px 6px;
  padding-top: 10px;
  text-align: center;
  border-bottom: 1px solid #677282;
  background-color: #6279a3;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#8da1c2), to(#6279a3));
  background-image: -webkit-linear-gradient(top, #8da1c2, #6279a3);
  background-image: -moz-linear-gradient(top, #8da1c2, #6279a3);
  background-image: -ms-linear-gradient(top, #8da1c2, #6279a3);
  background-image: -o-linear-gradient(top, #8da1c2, #6279a3);
  background-image: linear-gradient(top, #8da1c2, #6279a3);
  -webkit-box-shadow: 0px 1px 0px rgba(255,255,255,0.5) inset;
  -moz-box-shadow: 0px 1px 0px rgba(255,255,255,0.5) inset;
  box-shadow: 0px 1px 0px rgba(255,255,255,0.5) inset;

#logo { position: relative; top: -5px; }

#slidelink { 
  display: block; 
  font-size: 0.01em; 
  line-height: 1.8em; 
  width: 50px; 
  height: 35px; 
  position: relative;
  top: 2px;
  left: 10px;
  background: url('../design-responsive-youtube/menu.png') top left no-repeat; 
  float: left; 
  z-index: 999;

All the header codes are pertaining to the responsive mobile top navigation toolbar with the blue gradient background. We are creating all of this through CSS3 except for the sliding button, which uses a background image.

For retina devices I have included an @2x copy of the menu icon, along with all of the sidebar icons which are from the Glyphish icon pack.

When using CSS background images we cannot rely on the retina.js script. That will only parse images which are loaded into the page using an HTML5 <img> tag. Instead we need to setup new responsive rules inside the stylesheet named responsive.css.

I’ve copied over my block of code below:

/* retina display devices only */
@media only screen and (-webkit-min-device-pixel-ratio: 2),	only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
 #slidelink { background: url('../design-responsive-youtube/menu@2x.png') top left no-repeat; background-size: 50px 35px; }
 #sbtn { background: url('../design-responsive-youtube/search@2x.png'); background-size: 24px 24px; }
 #sidenav li a.signin i { background-image: url('../design-responsive-youtube/user@2x.png'); background-size: 24px 21px; } 
 #sidenav li a.register i { background-image: url('../design-responsive-youtube/gear@2x.png'); background-size: 26px 26px; }
 #sidenav li a.popular i { background-image: url('../design-responsive-youtube/star@2x.png'); background-size: 26px 26px; }
 #sidenav li a.recent i { background-image: url('../design-responsive-youtube/coffee@2x.png'); background-size: 24px 26px; }
 #sidenav li a.comedy i { background-image: url('../design-responsive-youtube/mic@2x.png'); background-size: 12px 24px; }
 #sidenav li a.entertainment i { background-image: url('../design-responsive-youtube/tv@2x.png'); background-size: 24px 24px; }
 #sidenav li i { background-image: url('../design-responsive-youtube/film@2x.png'); background-size: 20px 25px; }
 #sidenav li a.gaming i { background-image: url('../design-responsive-youtube/joystick@2x.png'); background-size: 22px 20px; }
 #sidenav li a.people i { background-image: url('../design-responsive-youtube/pencil@2x.png'); background-size: 23px 23px; }

The background-size property along with an @2x copy is what performs all the magic here. We need to squeeze an image twice as large into the typical sizing constraints.

This will look a whole lot better on retina devices where your natural images would look blurry and upscaled in comparison.

Important Responsive CSS Blocks

Much of the responsive codes should be straightforward for web developers who are familiar with using the syntax. But I’ll copy over some other sections from my responsive.css document and explain the layout effects.

/* first responsive changes between mobile and desktop layout */
@media only screen and (min-width: 600px) {
  #sidenav { z-index: 999; width: 250px; }
  #page { z-index: 1; padding-left: 250px; }
  #topbar { display: none; visibility: hidden; }
  #fulltop { display: block; visibility: visible; height: 45px; padding: 8px 14px; border-bottom: 1px solid #d8d8d8; }
  #logomini { display: block; float: left; margin-right: 40px; }
  #searchform { display: block; float: left; }
  #s { 
    width: 310px; 
    border: 1px solid #ccc;
    padding: 8px 7px;
    color: #999;
    background: #f7f7f7;
    font-size: 1.45em;
    text-shadow: 0px 1px 0px #fff;
    outline: none;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5) inset;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5) inset;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5) inset;
    -webkit-transition: all .4s linear;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -moz-transition: all .4s linear;
    transition: all .4s linear;
  #s:focus { color: #666; background: #fff; border-color: #b8b8b8; }
  #sbtn { cursor: pointer; width: 24px; height: 24px; border: 0; background: none; background-image: url('../design-responsive-youtube/search.png'); position: relative; top: -4px; left: -35px; opacity: 0.7; }
  #sbtn:hover { cursor: pointer; }

Right when your browser viewport hits 600px the whole layout should change immediately. We are no longer using the toggle menu and now wish to display it openly as a left sidebar.

We also need to change the visibility of the older responsive toolbar and display the #fulltop header div instead.

Additionally you may get a kick out of the CSS3 transitions and box shadow effects I’m using on the search field. These effects should perform exactly the same in most browsers including Firefox, Opera, Safari, and even IE9-10.

It’s a nice additional touch giving this YouTube layout some modern aesthetics.

/* as the layout widens display a secondary sidebar and top user links */
@media only screen and (min-width: 810px) {
  #userlogin { display: block; float: right; margin-right: 35px; margin-top: 4px; height: 30px; line-height: 30px; }
  #userlogin .defaultphoto { display: block; float: left; border: 1px solid #ddd; margin-right: 3px; }
  #userlogin a { line-height: 35px; }
  #secondary { display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: visible; width: 240px; padding: 10px 14px; z-index: 999; position: absolute; right: 0; }
  #secondary h2 { font-size: 1.3em; font-weight: bold; font-style: italic; line-height: 1.45em; color: #66666d; margin-bottom: 7px; }
  .videoblock { display: block; visibility: visible; width: 100%; }
  .videoblock a .vidimg { display: block; visibility: visible; }
  .videoblock a { display: block; width: 100%; margin-bottom: 7px; padding: 5px 0px; text-decoration: none; border-bottom: 1px solid #fff; }
  .videoblock a:hover { border-bottom: 1px solid #ebebeb; background: #f6f6f6; }
  .videoblock a .vidimg img { display: inline-block; visibility: visible; border: 1px solid #cdcdcd; }

  .videoblock a h4 { font-weight: bold; font-size: 1.3em; color: #333; margin-bottom: 1px; }
  .videoblock a:hover h4 { color: #5a7aaa; }

  .videoblock a .uploader { display: block; font-size: 1.1em; color: #666669; }
  .videoblock a .views { display: block; font-size: 1.1em; color: #666669; }
  .videoblock a:hover .uploader, .videoblock a:hover .views { color: #525252; }
  #page { padding-right: 240px; }

Now this last bit of responsive code takes effect once the browser window is slightly larger than 800px. I have included a secondary sidebar area which supports “featured videos”, among other similar blocks of code.

I haven’t included much dummy content since the focus of this tutorial is on working responsive codes. But this new secondary sidebar is perfect for extra page content which just can’t be fitted into the smaller layouts.

You may also notice these styles add a small set of links into the full top header display. When a user is logged in this is the perfect opportunity to present more impactful profile-related links. These could pertain to user account settings, favorite videos, channel subscriptions, or recent uploads.

Developing JS with jQuery

There are just two core functions I’ve built into the scripts.js asset file: whenever the user taps on our mobile responsive menu, it opens/closes the panel accordingly and if the user opens the menu and then resizes their browser, all the content is pushed over to the right.

In this scenario we need to handle if the menu is open and the browser is resized large enough to hide the menu, then reposition the main content area. I’ll break down each of these code snippets into two segments.

  var page = $  ("#page");

  // show and hide navigation menu
  $  ("a#slidelink").on("click", function(e){
    var position = page.position();
    var winwidth = $  (window).width();
    if(position.left == 0) {
      $  (page).animate(
        { left: '+=240px' },
        function() {
          // callback
    } else {
      $  (page).animate(
        { left: '-=240px' },
        function() {
          // callback	

The #slidelink refers to our menu button which is displayed in the top mobile toolbar area. Whenever the user clicks on this link then we find the current position of our page content. If the left position returns a value of 0 then we know the menu is still closed, and we need to open it.

If the value is anything except 0 then we can assume the menu is already open and we’re looking to close it.

Both of these effects use the jquery .animate() method which is why we’re including a copy of the jQuery UI library as well. None of the callback functions are active, but it’s easy to add in your own codes.

Inside you can place anything you want to execute immediately after these animations are complete.

  // check content position on browser resize
  var resizeTimer;
  $  (window).resize(function() {
    resizeTimer = setTimeout(resetPagePosition, 150);
  function resetPagePosition() {
    var position = page.position();
    var winwidth = $  (window).width();
    if(winwidth >= 600 && position.left != 0) {
      // if the window is above 600px and the menu is open we need to reset back into position
      $  (page).animate({left: "0px"}, 110);

The second function will handle repositioning of our page content whenever the menu is open & the browser window gets resized wide enough to hide it. This event handler which is attached to the window object listens for jQuery’s .resize() method. I have set a timer for 150 milliseconds so the function isn’t firing immediately after the resize.

All the interactive code can be found inside my custom function resetPagePosition(). Inside the function I have created another position variable to determine where our page is located.

If the left value is not 0, then we know the menu was open and we have now passed the 600px threshold. It’s a simpler solution for cleaning up this annoying bug, which you will likely run into if you’re using any type of sliding mobile menu techniques.

Secondary Sidebar design - YouTube Responsive tutorial CSS3 media queries

Demo & Download

Feel free to play around with the live demo version and see if you can get a working solution on your desktop, laptop, tablet, or smartphone.

Final Thoughts

I hope this tutorial has demonstrated a few key traits for building responsive websites. The developers at YouTube could be drawing in more attention to the site if it was directly supported on mobile devices. YouTube does have their own mobile subdomain but it’s just not the same experience.

If you have any questions or comments about the tutorial, you can share with us in the post discussion area below.

Swissted: redesigning the vintage punk poster

The ongoing graphic design project by Mike Joyce will be released as a brand new book this March.

Creative Bloq

Antiga Barbearia de Bairro: Redesigning the face of Portuguese shave culture

Antiga Barbearia de Bairro

Long known for its exemplary soaps and shaving supplies, Portugal’s grooming culture is being given new life in Antiga Barbearia de Bairro, a heritage shaving line from creative group 100ml. Marked by spot-on design and vibrant colors, the packaging alone might be a tenable selling point. Beyond the branding,…

Continue Reading…

Cool Hunting

Redesigning the dollar bill

It’s the world’s best-known currency, but does the design of the American dollar need a rethink? Jakub Alexander thinks so, and he’s created these alternatives to stimulate debate…

Creative Bloq