Responsive Web Design 101: The Basics Of What And How

Virtually every new client demands a mobile version of their site in addition to the conventional one. This is reasonable at the least – there are users on BlackBerrys, iPhones, iPads, Netbooks, Kindles, and many other mobile devices out there.

We can expect that a new design will be needed to meet the innovations in the world of technology five years from now, and the same will be required time and again with continual evolution.

Web design and development is fast approaching the point where we may not be able to keep up with the devices and resolutions being churned out into the market. It’s impossible, or rather impractical, to create a version of one website for each device in existence. But then again, website owners can’t just sit and sacrifice users who are on certain devices, not with the competition that is out there. So, what’s our other option?

Responsive web design is a technique of web design and development where websites are designed to change layout characteristics depending on the environment (device and platform) and behavior of a user (orientation). In this approach, flexible layouts and grids are used together with the clever application of media queries in CSS.

When a user moves from a laptop to an iPad, the responsively designed website will stick automatically to fit the new image size, resolution and scripting of the latter device. This, therefore, does away with the requirement for creating different design/development phases each time a new gadget hits the market.

How Responsive Web Design Works

Responsive web design was borrowed from a concept known as responsive architecture, where a space/room adjusts automatically depending on the number and movement of people within the space. It uses various techniques and installations to expand, flex or bend wall structures depending on the number of occupants and their movement in relation to the walls.

A similar idea is used in web design; rather than create a custom site for each user group (on different devices), you create a design that automatically adjusts just like responsive architecture.

Now, on a building, motion sensors and robotics can be used, but in web design, the responsive aspect has to be introduced by adopting abstract thinking and building from techniques that are already in practice – media queries, fluid layouts, scripts to seamlessly reformat mark-up and web pages.

Responsive web design is about far more than just images that resize automatically and screen resolutions that adjust; it introduces a whole new way of design, a few features of which will be discussed below:

Screen resolution adjustment

Every new device represents a variation in the orientations, definitions, and resolutions of screens, some of which are designed to support size, functional, and color variations. How does one design for portrait, landscape, square screens, and those that switch from one to the other?

You can group screen sizes to major categories and custom design for each, sure, but that is still overwhelming, given that more devices are still being designed and released. Think also that some users don’t maximize their browsers, or resize according to their preferences – basically, there’s just too much variation.


Making everything flexible

Some years back, flexible layouts were considered luxuries for websites – only text and structural elements had some flexibility. Even then, adding images could still create breaks in the layout and so could the flexible structural elements given the right kind of pressure.

Responsive design increases the flexibility of most things on a website – automatic image readjustment, working around layouts and basically far more options with larger disparities in screen sizes, resolutions and orientations e.g. from laptop to iPad.

Common techniques include creating mixes of fluid images, fluid grids and creating smart mark-ups to step in where necessary. The fluid images are created in three main ways:

  • Concealing and showing image portions
  • Creation of sliding composite images
  • Placing images on the foreground such that they can scale with differences in layout

It may all seem easy, but it’s more than just inserting the features and packing up the toolkit. Some parts may have to resize by cropping in order to preserve quality while others can stand proportional resizing. However, this doesn’t address the quagmire that arises where layouts are extremely shortened or narrowed so that they look weird.

writing code

Working with images

A major part of the challenge that brings responsive web design is how to create image flexibility. A common method is to apply the max-width command in CSS, where the width is set to 100%. Images, therefore, display at 100% except where the screen width is narrower than the 100%. The image narrows accordingly in this case.

However, image download times and resolutions become more significant with mobile devices, especially where images were originally meant for larger devices. A technique to solve this is to include image resolution shrinking properties so that larger images don’t take up unnecessarily large spaces on small devices. This method is supported on all modern browsers, unlike the previous one that precludes Internet Explorer.


Working the layouts

With extreme changes in size, it’s also necessary to change the layouts. You can either have separate style sheets, but a more efficient method is to use a CSS media query. In this method, most styles retain their original characteristics; only specific style sheets would inherit the styles, moving elements around as required using heights, widths, floats etc.

For instance, there might be a single main style sheet as the default to define the major structural elements and the default flexible floats and widths. If the style sheet in use makes content/layout to anything – short, tall, wide, or narrow – this should be detected and a new, more appropriate, style sheet be adopted. This new sheet adopts all characteristics of the default style sheet; only the layout structure is redefined.


How to choose the best projects to your web design portfolio

For starters, you need to take two things into consideration:

  • Your skills
  • Your potential clients/employees

Regarding your skills, you need to know what you are good at before anything else. At this stage of your career, even if you are just looking for your first job, you already know in which kind of projects you excel.

Some people are better at branding, others in apps, for instance. So try and find out which are your strongest points, so you won’t be wasting your time trying to create things that you know won’t make you stand out from the crowd.

On the other hand, you will want to be aware of what your potential clients (if you are searching for a gig) or employers (if you are considering a job) are looking for at the moment. You will need to be well-informed about the demands and trends of your industry so you can present what they are expecting from you in general.

But, also, nothing is stopping from choosing a specific niche and creating a web design portfolio for just one segment. You can be the best web designer when it comes to blogs or online magazines, for example.

So make sure that you got these ideas organized in your mind before deciding what you are going to do about your web design portfolio.

The Essential Projects

After reflecting, you might decide that you are going for something more general, either because you are a newbie in the industry or because you want a web design portfolio that proves how versatile you are.

In this case, these are the essential projects that should be part of any successful web design portfolio. They are the first step to help you to land the job of your dreams, as they combined can show a skill set that will impress any client or employee.

# 1 – Your own web design portfolio

First of all, you will need to spend a decent amount of time trying to create your own web design portfolio. Getting this first step right is essential for you, as nobody will even bother to look at your projects if your website isn’t engaging. Plus, it would be weird to think of contracting a web designer whose own website isn’t their best creation.

# 2 – A complete online branding package

Online branding is a serious job nowadays. With so much noise around the internet, companies need to make an extra effort to ensure that they will be remembered and recognized by their target audience.

Logos and Letterheads have changed, but they are as strong and essential as in the past. An online branding package might also include cover and profile photos for social media, blog headers, icons for apps, etc.

So pick an imaginary company and create all items that you can imagine as if you had been asked to create a complete online branding package. It will show that you are can do more than basic websites.

# 3 – A stock theme for a blog or website

Something that you certainly should add to your web design portfolio is a stock theme to a blog or website. It will give your client or employee an idea of what you could create for them in the future.

The ability to design a website or blog is considered essential in your industry. So make sure that you give special attention to this project.

Do some research and search for trends and new solutions for well-known challenges, such as content-heavy websites, gaming platforms, or over-50 websites.

This way you will be able to prove your skill set and creativity.

web design portfolio

# 4 – A mobile app design

Another project that you should consider adding to your web design portfolio is a mobile app design. As so many companies are creating mobile apps nowadays, this project will show that you understand your industry and that you are updating with the newest technologies available.

And don’t worry about creating a brand new and revolutionary app. Your job is to create the design, something that delivers a great user experience. So the tool itself can be something as basic as a to-do or a time-tracker. Just make sure that you make it cool, engaging, and easy to use.

# 5 – A 365 project

365 projects are another favorite of designers in general. They are a perfect opportunity to demonstrate how you can improve your skills over time and engage in both fun and professional activity. Meaning that they will become a way to show off a bit of your personality as well. You can choose any kind of 365 projects you want here.

To Sum Up

Creating a web design portfolio can be a daunting task to any web designer, especially if it is the first one. But it will give you the opportunity to prove that you are the best professional for the job, so you want to get it right.

Of course, if you got something relevant, you should always add previous jobs to your web design portfolio, for sure. They would be even more interesting if they were assigned by some well-known clients.

On the other hand, you also know that, on that very same projects, you might not have had the chance to show your best due to budget or preferences from your clients.

So your very own projects are, indeed, the best way to demonstrate your skill set. And they should be displayed in an even greater web design portfolio.


Even responsive web design as we now see it cannot offer a final solution to a continuously evolving mobile environment. Correct implementation of responsive web design merely improves user experience, rather than offering a complete solution. Constant work with different resolution technologies and devices in the future will hopefully bring better fitting solutions as time goes by

Leave a Comment