Categories / Trends

A Rough Guide to Responsive Design

Mark Potter March 31, 2021 · 5 min read

Nearly everyone wants a mobile version of their website. According to a survey by Ofcom, 92% of adults have owned a mobile phone in the UK in 2012 alone. 39% of these adults accessed websites through their phones, and this figure is expected to grow. Although dedicated mobile websites have been in use since 1999, the introduction of tablets in the early 2000s has confronted webmasters with thousands of different monitor resolutions. Even some video game consoles can access the internet with their own dedicated browsers. It’s perfectly understandable that a mobile-compatible website is essential, but with more internet-accessible technology being invented every year, it’s impractical creating a single dedicated website for every single device.
Is it possible to create a single website that can adapt to these new devices with little or no development time? Responsive web design is one solution to this problem. By combining design and development, responsive web design suggests that websites should respond appropriately to a user’s behavior and the device they use. Designers achieve this through flexible grids, layouts, images, and carefully considered use of CSS media queries. They can develop websites that will accommodate for nearly any resolution when users switch devices, crafting the ideal web experience for each user. The process of creating your very first responsive website can be intimidating at first, allow us to guide you through the process of starting your first responsive website from content strategy, design and development. We’ll also provide tips and tricks to help your site evolve, plus some handy tools to help you get started.

Why should I consider a responsive site?

Responsive web design is far from a trendy buzz-word in the world of the web. The term was coined by web designer Ethan Marcotte in 2010 in his seminal article on A List Apart (http://alistapart.com/article/responsive-web-design). Within this article, Marcotte describes the growing concern amongst web designers for adaptable websites. Technology is constantly evolving, and the internet needs to be able to adapt to the changing demand on each device. Consequently, content needs to be as accessible as possible to your users. Alienating users on a specific device is far from ideal, especially if you run an e-commerce site. Every device you fail to support is potentially a lost customer. Failing to provide a resource for these lost customers could be detrimental to your business.
responsivedesign

 How do I start designing my responsive site?

The best place to start your responsive web design is right at the wireframing stage. Begin by designing the mobile version of your website in simple blocks on a piece of paper, indicating the location of each piece of content. Work your way up progressively in size, designing the tablet resolution, netbook resolution, and then laptop resolution, finishing with a typical desktop-based website. Consider the resolutions of devices; 3 columns of content fit fine in a larger netbook, laptop or large scale desktop screen but not in a smaller tablet screen. You’ll begin to see a structure in your designs. This structure or grid is great for maintaining a consistent appearance across the whole site and can be easily adjusted and modified in the development process. Later, this grid will also become a key into successfully implementing the responsive part of your website.
As you continue to craft the rough foundations of your site’s structure, consider the potential users of your website and how they will interact with the content on each device. You will need to organise this content according to its priority to your potential users. For example, when designing a train or airline ticket website, the most important section of your website will be a form allowing a user to buy or book tickets. You don’t need to create a wireframe for every single page in your site, but make sure you feel confident in knowing how each page in your site will be organised.
When you have completed your wireframes, you can then start considering the visual appearance of your site. Keep things simple in your design, keeping to the grid you have created in your wireframes. Keep to a maximum of 5 colours and keep complex texture to a minimum. Again, start with the mobile version of your site and gradually work upward. Try to avoid using huge images in smaller resolutions; these will put pressure on older mobile phones.
wireframe

How do I develop my responsive site?

There are several approaches to developing your full-blown website, depending on how your site will behave. Ideally, start by developing the basic grid for your website in CSS, based on your initial design. Web designer Chris Coyier has a great video tutorial explaining the simple process of developing your own grid. Work from the desktop version of your website and work your way down each resolution with media query declarations. When developing in this way, your default resolution widths or ‘breakpoints’, may not correspond with your own content. Use your instincts and work step by step, adjusting your content when it doesn’t behave as it should. In this way, you can create a strong, durable scaffolding for your site, ready to add your own content. Alternatively, if you’d like to develop your site quickly, we recommend starting with a responsive framework and customizing it to your needs. A framework is a fully functional template for your site that can include some useful scripts and resources to get your site finished in virtually no time at all.

Helpful Resources and Starting Blocks

Responsive frameworks

Skeleton
Initializr
Bootstrap
Foundation
Frameless

Reading materials

Responsive Design is Easier than you Think
Responsive Layouts – Kevin Clark

 Handy tutorials

Getting Started with Responsive Design
Building a Responsive Site from Scratch
CSS Tricks – Braindump on Responsive Web Design

Useful tools

FROONT
Define Responsive – Fine Citizens

Inspiration

Media Queries

+++++++

This post was written exclusively for Creative Market by Mark Potter of Namecheap.com, a leading ICANN accredited domain registrar and web host.

Lettering Worksheets
Getting started with hand lettering?
Free lettering worksheets

Download these worksheets and start practicing with simple instructions and tracing exercises.

Download now!
About the Author
Author
Mark Potter
Related Articles