Responsive web design, what is it?

Well, nearly every tech or web savvy person has heard of this before but sometimes it can be mistaken for something that is not relevant to the name. A responsive website is a website that allows for optimal viewing no matter the device you are using – from a phone, to a tablet or even a desktop computer. From what I have seen, anyone can design a website, it’s that easy! But it isn’t just a case of throwing images and text on a page and then moving it around to see if it looks okay. A good website design in my opinion is the use of a grid (12 column to be exact) that will allow plenty of room to add content horizontally as well as vertically and being aligned to a grid will make it flow smoothly.

Now that the understanding of responsive web design is covered let’s discuss what it is about these responsive websites that people and businesses find appealing. Well, the main reason is that mobile technology has been on the rise year-on-year since smartphones and tablets emerged, allowing anyone to view web data on a phone. You can now even interact with other types of data such as location services by using your signal to find your GPS location. Another reason that responsive web design is now becoming a must for websites is that when loading a desktop website, files are larger in size due to the screen size difference and on phones, pages need to be optimised to be smaller so that loading is quicker and more appealing to mobile browsers.

In my opinion, there are 2 different types of responsive websites: one that is simply resized to fit the desired screen (also known as a fluid website), and another where is has been totally reworked purely for mobile optimisation (know as an adaptive website). There is one other type of website where dimensions don’t adjust to the size of the browser – this would be a fixed-width website.

Let’s show this in effect with images and how different websites look when they are shown at different sizes depending on the viewing size.

Desktop

Fixed-width desktop

Tablet

Fixed-width tablet

Mobile

Fixed-width mobile

Since a responsive website contains both a fluid and an adaptive layout, I have included these 3 images showing the difference between a desktop, tablet and phone versions and how they adapt depending on the screen size.

Desktop

Responsive desktop

Tablet

Responsive tablet

Mobile

Responsive mobile

The fixed-width website is purely designed for desktop and an example of this is Apple, where their website is purely laid out for larger screen sizes and not optimised for smaller formats.

As a web designer it is my job to not only make sure that the content within a website is visually appealing, but to ensure that they are viewable on other devices and still show the same content but on a smaller scale. A quote by Steve Jobs puts relating your design to clients in a powerful sentence: “It’s really hard to design products by focus groups. A lot of times, people don’t know that they want until you show it to them.” This can be hard at times with remembering grids, dimensions and thinking about how it is going to look on these devices. There are a number of free sources out there that can give you advice and guidance, and here are few examples that help me with my designing.

Sketch 3

I am still fairly new to this program but since being introduced to it a month ago I have learnt a large amount about web design. This program has nearly everything where you can design the website in pixel base and any shapes or text you make can be edited and vectorised in this also. The beauty of Sketch 3 is that all of this can be achieved in one program. It also has a large amount of features for designing in multiple sizes for phones, tablets and websites. This has really enhanced the way I design websites now and with an easy export feature you can export all objects within the document and also CSS Attributes towards an object that you have made.

Grids

It is not standard to use a grid when designing a website but I prefer to use one so that I can make sure that everything is in line as well as setting the width of the website and arranging the content the way I prefer. It depends on your real preference but as of January 2013 90% of computer screens worldwide are viewing at a resolution larger than 1024x768px. From this I was under the impression that 960px was the standard width for a grid? Well currently the most popular size is 1366x768px so from this I now make my websites with a content size of 1024×768 and this content can be centralised or full width depending on the requirements.

The grid set up that works for me is

  • Width: 1024px
  • Columns: 12
  • Gutter Width: 20px
  • Margin Width: None

Skala Mac & Mobile App

This is a neat little feature that I discovered which allows you to copy a picture – or if using Sketch an entire artboard – and copies it as a JPEG. You can then transfer this to your device with the app to view how it will look on your device while you are editing it. The Sketch 3 app does have a feature more responsive called Sketch Mirror where, while editing your design, you can view it in real time, but this feature costs more on top of the Sketch 3 App.

Sketchbook

One of the most useful pieces of kit is a book that you can sketch ideas in. You can use this in client meetings in order to try out layout ideas quickly without wasting time designing it on the computer before you know if it is going to work or not.

Behance

If you have never head of Behance then it is a place where designers, photographer etc. post projects that they have worked on. This is my number 1 stop for design inspiration. I can see what is trending currently at the moment and something that looks good to my style of design. It is also a great place to go if you are stuck for ideas and you can get inspiration from the various designers and apply them to your work.

Conclusion

From the question, “Why is Responsive Design so in demand?” my answer is that the ever-changing technology of phones and tablets is continuously evolving. Screen sizes are constantly being modified and increasing in size, with more detail on them. With the introduction of Retina displays and now 4K screens that are nearly 2x more detailed, web design is only going to get more complex and designing for these large screens is going to become more challenging.

Picture from Brekssmith on Wikimedia Commons