Three Tips for Starting a Responsive Design

As designers we need to account for a multitude of devices. Knowing the basics of how responsive and adaptive designs are developed helps us to communicate our static designs to the developer. This post covers 3 things to keep in mind when starting your design work.


Relative units

Instead of thinking strictly in pixel heights and widths, consider using percentages as a way to communicate relative sizes. You will likely need to sit down with a developer to work our the details, but the end result will look much better on large screens.

02_Relative-Units-vs-Static-Units-1.gif

Breakpoints & Max and Min values

Knowing your breakpoints allows you to optimize each view of your design. Think about how you want your design to scale. Does stacking items make it easier or harder for the user to navigate your site? If the design shrinks down and the proportions remain the same, do the touch points become too small for mobile users?

03_With-Breakpoints-vs-Without-Breakpoints-1.gif

Mobile or Desktop first

Depending on your audience it may make sense to start your design work at a mobile or desktop breakpoint first. I personally take a mobile also approach when designing for the web. The mobile also approach starts with a desktop design, but continually considers the design implications for the mobile experience. I have found this helpful for clients that have a hard time conceptualizing a mobile first design approach. On the other hand, if you know for a fact that the majority of users will be accessing your site on their phones, then starting your work at the mobile breakpoint will make the most sense for you.