Responsive Design, Part 2: The Implementation

Responsive Design, Part 2: The Implementation

We’ve hopefully already convinced you why you need a responsive web site, so now it’s time to take some action: design and build your responsive site!

We understand that as a startup entrepreneur, you may need someone else to actually design and build your site. But it’s never a bad idea to understand what goes into the process. Communication with your graphic designer and web developer is key; they need to know exactly what you want the site to look like and how it should function. We’ve made a list of the key steps you should take to make your site fully responsive:

1. Research Responsive Sites
Scope out the field of responsive sites (here’s a list of responsive e-commerce sites) to figure out what elements will and won’t work for your site. Try out the sites on different devices and make sure to consider the different ways people use these devices. For example, someone viewing your site on a desktop is more engaged than a person viewing it on a mobile device on the go.

2. Decide Which Devices Your Site Should Respond To
Depending on the function of your site, you may only need a site that responds to screen widths: 1024px (Desktop), 768px (iPad portrait), 320px (iPhone portrait). Or, you might decide to design for other tablet devices like the Kindle Fire, Android devices, or even for television internet browsing.

3. Make a Modular Design

When designing the wireframes for the devices you choose, think about the design modularly. Set the breakpoints according to your content and use the device dimensions as a parameter. Think about how the content should move as the screen shrinks. A desktop could have four columns of content; as you move to a tablet, it would have three columns; on a mobile device, it would all move to one column.

4. Consider Font and Image Size
When choosing fonts, simple is always better. You have to make sure that each font size is readable on every device, and using a font like Comic Sans isn’t going to work. (And, please, just never use Comic Sans for anything.)

As for images, there is a simple rule to put into the code that prevents the image from exceeding the width of its container:

img {
max-width: 100%;

This bit of coding will make sure that each image on your site is viewable from any device. Make sure your web developer includes it!

5. Test Your Site
Make sure to test your site right away. It should seamlessly resize for each device you design a wireframe for.

Congratulations, your responsive site is complete! But the work isn’t finished. As new devices come into the market, you’ll need to adjust your wireframes to accommodate the different dimensions. In the long run, this is much easier than designing a new site for every device or developing a mobile app. Now you know your site is future-proofed and one of the few sites leading the way in responsive design.

Third Wave Fashion has been your fashion tech think tank since 2011. We publish the first ever printed fashion tech magazine, Third Wave.  Follow us on Twitter or subscribe to our newsletter to stay on top of the latest in fashion tech + wearables.

Images by TWF’s Graphic Design & Visual Media Intern Paige Hogan.