What is Responsive Website Design – Detailed Guide

upqode | Jun 8th, 2018

As more people started accessing the online world through mobile devices, the idea of creating websites that can easily adjust to every screen size took over the development world. Responsive websites have been around for a while, but it’s only now that they’ve not only become an important user experience feature, but also the responsiveness of a website is an industry-standard. If you don’t have a responsive website these days you’re pretty much lagging behind your competitors.

Consider these statistics: according to eMarketer mobile commerce sales will be increasing in the US and is expected to reach $149.79 billions by 2019. Even if you don’t own an e-commerce website, this data can’t be ignored. Apparently, people chose mobile over stationary computers and as a business owner you have to adjust to customer needs.

So what’s responsive design? Responsive design is an approach to web development that aims to make a website appear optimally in a range of devices. Responsive web designs don’t look the same on each device, but the content is readable and easy to navigate regardless of the device or the size of the screen.

Responsive vs adaptive vs mobile

Responsive websites adjust to the size of a browser irrespective of the device type. To create a responsive website means to leverage the front-end development process and program a website in a way that it determines and adjusts its appearance based on the browser’s width and orientation.

Adaptive websites have multiple layouts as opposed to one layout used in responsive websites. When the user visits the site, the website automatically detects the type of device used and presents a chosen layout to the user: a mobile phone layout, desktop or tablet layout.

A mobile website is basically just one layout designed for mobile devices. A mobile website is completely distinct from your main website. They might even have a different URL and modified content. A mobile website is usually a shortened version of a regular website, however, this is not necessarily a negative feature. Sometimes, mobile websites present content in a short and succinct format which greatly improves the user experience. Another way to enhance the mobile user experience is to build a native app. DIY no-code app makers like AppMySite make mobile app development easy and expedite the app-building cycle significantly.

A bit of web design history

In the history of web design, mobile websites came out first, as soon as the iPhone was invented. To help iPhone users access and comfortably browse the online world, separate mobile versions of websites were being developed, often at development costs higher than the main corporate website. Mobile websites required significant time and budget resources. They also had to be SEO optimized and promoted separately from the main website.

Responsive websites came about in 2010 following an article published by Ethan Marcotte on A List Apart. In the article, the web designer drew public attention to the variety of devices and the ever-changing nature of the technology market and described the process of building flexible layouts that can adjust to any screen size.

Responsive web design principles

Responsive web design implies three main development principles.

Principle 1. Fluid grids

The most important principle of a responsive design is fluidity of the layout. A liquid layout expands with the page, unlike a fixed layout that has a fixed number of pixels across. Responsive layouts are based on proportions as opposed to percentage or pixels. This departure from pixels and percentages allows a responsive website to be turned into a size relative to the screen space. So when a layout is placed onto a mobile phone screen or enlarged on a huge desktop computer screen, all the elements of the website adjust their sizes in relation to one another. It’s a complex resizing process, which makes developing responsive websites more challenging but also very exciting.

Principle 2. Media queries

Another crucial part of responsive web design is media queries. Media queries let you gather data about the user device. You then use this data to apply specific CSS styles. For example, you can specify which CSS styles should be applied to a website once the browser window reaches a certain point. Essentially, you assign certain CSS styles to different sizes of the browser and then media queries track what size of a browser is being used, and automatically applies specified CSS styles to the site.

Principle 3. Flexible images and media

If you shrink the size of a browser now you’ll see how the media and images are being adjusted accordingly. For a responsive website to operate smoothly, you want media and images to load differently depending on the size of the screen. This can be achieved either by scaling the images or using the CSS overflow.

Scaling will make the image display 100% of its size within its parent element and available width space. So in simple terms, the image size is set relative to the container and that allows it to adjust whenever the browser’s size changes.

CSS overflow has the same effect on images, only it allows images to be cropped dynamically and then fits them into the parent element.

Responsive website examples

Here are some of the responsive websites examples so you know what we’re talking about:

1. Upqode

UPQODE has a clean design that adjusts depending on the browser size. Whether you’re browsing from your laptop, tablet or phone, Upqode website looks perfectly well on any screen size.

Responsive website example


2. The New York Times

The New York Times website changes according to the device screen dimensions and it’s one of the best responsive websites in the media industry.



3. Food Sense

The website transforms from a regular magazine to a block-by-block layout. Even though the website does lose a bit of an edge on a smaller screen, it still remains readable, easy to navigate, and enjoyable to browse.


food-sense-website responsive

Things to consider

Responsive design, despite its seeming simplicity, can get messy if some basic rules aren’t followed.

1. Remove unnecessary features and elements

You start a responsive design with an understanding of how it will look on the smallest screen. For that, you need to remove elements, that aren’t necessary for the overall perception of the site. As you remove bits and pieces, be mindful of what you remove and be strategic about your choices. You want to keep a subtle balance between giving the visitor enough information and keeping the website clean and responsive.

2. Consider Context

Designing responsive websites isn’t about fitting the website into different screen sizes. You can’t just ignore the content and solely focus on getting the website to fit in. When you decide how and where to place different elements and objects see what value they have for the visitors. For example, when visitors are browsing a website at a spa, they don’t want the information on the spa’s location because they are already at the spa. What they want is the price list and description of services. Pay attention to what devices are being used at certain locations and build websites based on data, not assumptions.

3. Keep in mind input methods

Input methods are the methods the user uses to fill in web and contact forms, press the buttons, and scroll the website. The experience of filling out a web form is different for people who use mobile devices and for those who use a keyboard. Pay attention to how you integrate input forms on the corporate website design and test your designs on at least 5 real users.


Responsive design is a standard of the industry that can’t be ignored. Whether you are running a personal blog or are in charge of a corporate website, you can’t be the best in the industry without a responsive website. Fortunately, WordPress CMS platform offers numerous responsive themes and if you can’t find the one you like, shoot us a message and we’ll be happy to develop a custom responsive site for you.

Filed under: WordPress Development

Related posts


What They Say

This is a team that pays great attention to detail and does great work. I had a design done for my website by a separate designer, and Nick implemented the design perfectly for both mobile and desktop. His team uses project management software to track tasks and break up the work for his team into sprints. You aren’t just getting a developer when you hire Nick, you’re also getting great project management and organization. I 100% recommended it.

Erik DiMarco

Manager, NimbleDesk

UPQODE delivers high-quality web work quickly, thanks to their expertise in PHP and WordPress. Regular communication and reasonable prices further smooth the workflow. We've been very pleased with the results. UPQODE responds far more quickly to development changes than our core team would be able to. They are highly knowledgeable about best practices in WordPress, and their ability to rapidly scale up whenever we need a project completed makes them a valuable asset for us in our development needs.

Jim Kreyenhagen

VP Marketing and Consumer Services, doxo

The engagement resulted in an aesthetically pleasing website that satisfied internal stakeholders. They dedicated capable resources that ensured effective collaboration. UPQODE’s attentiveness and flexibility support a successful partnership. They created a beautiful website that we love. The site functions to advertise a certain medical procedure, so I can’t speak to any traffic metrics. UPQODE's responsiveness was their most impressive quality.

Jessica Echevarria

Administrator, University Division

UPQODE delivered a functioning and accessible website. Their adaptable approach to customer service allowed for a smooth development process and set the foundation for possible future collaborations. The delivered website met all of my requirements and explains everything I need it to. UPQODE was very understanding and accommodating of my changing needs throughout the project. The communication was excellent. I plan to work with them again for future needs.

Darren Devost

Owner, Devost's Dynamic Marketing

The vendor succeeded in creating innovative WordPress solutions. Their availability enabled the client to deliver products more quickly. UPQODE's project management was good—their staff met weekly with the client and was always very punctual. UPQODE brought troubleshooting, recommendations, and ideas that our previous partner was unable to provide. They deliver work on-time and within budget. The design they’ve inserted into the product has enabled us to deliver products more quickly. They have always been very helpful in recommending better solutions.

David Bill

President & Founder, Liquid Knowledge Group
Request a Design