OUR COVID-19 RESPONSE: Free Consultations for local businesses

February 9, 2016
Responsive Design

How to go about ensuring your website is responsive

Firstly, what is a responsive web design? Everyone knows what it is but with different names or just a description: a website designed and developed that opens perfectly formatted on any device with any resolution. Mobile traffic has overtaken desktop traffic on social media and Google Searches. This is why a responsive website is an absolute requirement. Some simple ways to ensure your website is responsive whether or not you’re working with a website design company in Dubai:

Step No.1: Responsive Design

If you’re working with a website design agency Dubai then you have to tell them from the outset that you need a responsive design from them. Most people assume the responsive part of the website is in the coding. That’s true for the most bit but a website’s inception has to come from a responsive thought process that’s baked into the design.

If you’ve chosen to DIY your website design, then make sure you’re investing in a responsive theme and carefully read through the features you’re getting from it.

Step No.2: Media

Once you’ve got your responsive theme and you’re looking into the coding yourself, focus on the very important aspect of a modern website i.e. media such as videos and images. Here is an example of a media query that you can add to your stylesheet,

@media screen and (max-width:480px) {

       #sidebar { display: none;}


The above example advises the browser not to display the sidebar on devices with a maximum width of 480 pixels.

Step No 3:  Typography

Though one may assume this comes under the “design” aspect, typography should be handled as a separate beast in all forms of design. This important step is often neglected when it comes to responsive websites. Till now, we’ve used pixels to define font sizes. Although pixels are fine when your site has a fixed width, a responsive website it should have a responsive font. Responsive font size should be linked to its parent container width, so it can adjust to the screen of the client.

Subscribe to our Blog


Subscribe to our Blog

Get our latest blog posts sent directly to your inbox. You’ll also receive our newsletter along with a look into our latest work.