• 16 JUL 12
    Why Your Site Needs a Responsive Design

    Why Your Site Needs a Responsive Design

    “The web’s moved beyond the desktop, and it’s not looking back. The number of devices we’re designing for is growing just as quickly as mobile traffic.”

    -Ethan Marcotte

    Devices like smart phones and tablets have opened the fashion space to a whole new world of possibilities. Yet, these new tech advances come with some limitations; namely web design on different platforms.

    The original solution is something you’re probably familiar with: mobile sites. If you go to a site like The New York Times on your iPhone, you have to pinch and zoom and scroll to make the text readable. This is because The New York Times doesn’t have a mobile site. These sites offer the same content as the full site, but are designed to makes the content easily viewable on mobile devices. Another option has been to create an app for your web content that is interactive on mobile and tablet devices.

    But having that separation between desktop and mobile sites has proved problematic. As you know, there are many types of mobile screens and even tablets to consider, so mobile and desktop aren’t the only devices worth designing for.

    In 2010, web designer Ethan Marcotte introduced us to a new concept in web design known as responsive web design. A responsive web site can be viewable on a phone, tablet, or computer without needing a separate mobile site or app. Sites are built on a grid system, and many sites have two or three columns of content. Getting three columns of content to fit on a desktop screen is easy, but a tiny iPhone screen is a different story. With responsive design, those three columns are viewable as one long column on your phone!

    Making your website responsive also includes having responsive images and CSS media queries. A media query is just fancy coding speak for simply allowing you to change parts of your site’s design based on the resolution and capability of the device on which you’re viewing the content.

    Here are some great examples of sites that have a responsive design:

    Love & Luxe

    Desktop

    Tablet

    Mobile

    Food Sense

    Desktop

    Tablet

    Mobile

    The Sweet Hat Club

    Desktop

    Tablet

    Mobile

    A fool-proof way to see if a site is responsive is by adjusting the size of your browser. If parts of the site get cut out when you make the browser tablet or mobile-sized, then the site is not responsive. If the columns adjust accordingly, then you’ve found a responsive site!

    In the coming years, more advances will be made and without a responsively designed site, you could be left behind.

    *You need a responsive web design for your site, so here are some links to get you started:

    1. This post by Ethan Marcotte is considered the seminal article on responsive web design. Marcotte goes much more in depth with specifics on coding, so tread lightly if you’re a beginner. He also wrote a book on the subject, aptly titled Responsive Web Design.

    2. .net magazine provides a great list of 50 tools to get your new site design off the ground.

    3. .net magazine also had Marcotte answer readers’ specific questions on responsive design. Click to learn about his views on responsive advertising, breakpoints, and frameworks.

    Allison Mariotti is an Editorial & Research Intern at TWF.

    Did we leave you wanting more? You can hire us or sign up for our mailing list.

    Featured image by TWF’s graphic design intern, Paige Hogan.