4 Tips to start your first responsive design

Gorilla_Scratching_Head

When creating a website with responsive design there are a lot of variables that need to be considered to provide the best experience to the user regardless of the device or connection they have available.

This article will show you the usability and accessibility considerations you need to start and finish a project faster.

1. Start with a mobile first approach, don’t worry about screen sizes

I start my responsive design with a canvas of 300px in width  and as the height will be determined by the content. Once you have all the wireframes ready, jump to coding  to start testing on the browser as soon as possible. (This will save you lots of time when testing and taking design decisions)

2. Find your breakpoints

The breakpoints will determine when the layout changes on your design.  Your breakpoints will be determined by your content, not by the size of the popular devices out there, here is how:

Start with the small screen first, then expand until it looks like shit. TIME FOR A BREAKPOINT! – Stephen Hay

Different elements might need different breakpoints in your design and that is ok. Here are some patterns that you could use.

3. Independent modules

Each element on the project might have a different behavior in each breakpoint, we need to create modules that work as standalone, delivering functionality wherever they are included  and that allow testing separately from other content. The modules must work nicely with the other modules as well.

4. Design for touch

Always allow to access the content with clicks or taps. Actions activated by ‘mouse hover’, ‘mouse in’ and ‘mouse out’ must be optional and should not be important part to show content  since we are in a world where touch interfaces are dominating.

Tip: areas to be tap on should be at least 45×57 pixels   for best results.

I am originally from Venezuela but I have been living in Austin, Texas for the last 8 years. Web development has been part of my life for more than a decade; It started in the middle of my College years and by the time I got my bachelors degree in Electronics Engineering I was already known for delivering complex projects while delivering a good user experience.