• Home
    • User & System Flow
    • Responsive Design
    • Interaction Design & Rapid Prototyping
    • Icon Design / Iconography
    • Interface/Visual Design
    • Logo Design
    • Image Design
    • Presentations
    • Spotlight: X Games

Wilson VisD

Professional Design for your Business

Responsive Design

January 28, 2017 by Christopher Wilson


Breakpoints, Margins & Gutters.

Breakpoints, Margins & Gutters. Frameworks have their own recommendations, but your project may have its own needs.

Desktops, tablets and phones, oh, my!

While each website is unique, the fact is that more than half of the internet traffic these days comes from phones. Back in the day (like 5 whole years ago) folks trying to keep up to date with the growing worked to make their websites ‘mobile ready’. These days, however, the saying is ‘mobile first’.

What does ‘mobile first’ mean? It means a couple of things.

First, it means that, since most of your traffic is likely to be mobile, that mobile is important enough that it should be considered at the very beginning. Not as an afterthought or nice-t0-have. If your main focus is on the desktop, you’re PROBABLY wrong.

Second, mobile first is a design mindset. If you can design the site for a phone, it will also work on the desktop. Not always so the other way around. And even if you CAN squash your beautiful desktop site or app onto a phone, it often takes longer and costs more to work in that direction.

Does this mean that desktop designs are going away? No. While its true that more initial connections are made on the phone and tablet, many sites still have longer engagement times on desktop. So, folks use the phone for search and quick information hits, but if they are going to spend lots of time on a site, are more likely to follow up with a visit from their desktop.

So, design for the phone first, and work up.

In addition, with some forethought, you can minimize the amount of work you do when building responsiveness into your designs (see image above). Sure, you COULD program for 5, 6, 7 or more distinct sizes, but you may not have to.

Responsive Components

Each development team has its own way of handling things. Whether I’m designing for infinite breakpoints, or fixed breakpoints, a critical deliverable for web applications are the component specs. Each individual component should have its own set of specifications, showing where it breaks, how it breaks, and how it interacts with the neighboring components in the application.

Spec Delivery

When necessary, that is.

Modern tools have made most of this very time-consuming work a thing of the past. Still, there are always places where the designer needs to call out items that might not be obvious in tools such as InVision Inspect, Avocode or Zeplin.

These items were spec’d out old-school. By hand. In Photoshop. Likely, to the delight of both you and me, we won’t see anything like that ever again. 🙂

Template Retheming

Often, templates have fixed breakpoints. In this case, you need to account for design shifts across these predetermined breakpoints.

About Christopher Wilson

A seasoned digital designer with more than a decade of experience working in Technology; UX Design for mobile and web apps, Visual Design for websites, video 
games, and print.
--

A current resume can be viewed and downloaded as a PDF here.

Interaction Design & Rapid Prototyping
User & System Flow

Contact Me


Fields marked with an * are required.

0 / 180

Service Area

Wilson VisD Service Area
Service Area

Always happy to work remotely for anyone, anywhere, but I'm also available to work daily, or a few days a week in select areas of Connecticut.

My Other Projects

  • Illustration Portfolio
  • Web Design & Hosting
  • Creative Independence Podcast
  • Answers for Freelancers!
  • Esmaya & Me Board Games

© 2023 · Chris Wilson & Aithene Multimedia