Are you looking at my blog on your desktop computer? If so, does it look like…
Maybe you’re looking at my blog on your phone instead. If that’s the case, does it look like…
No matter which device you are looking at my content on, it should look good. This is, by definition, Responsive Web Design. If you are looking to design a website for the first time, then this concept is crucial to understand in order to give your visitors the best possible experience.
Responsive web design is the ability for a webpage to automatically fill the screen size of the device it is being loaded on. It is very popular in today’s world of varying screen sizes because it enables developers to focus on one design and “let it flow like a liquid to fill all ‘containers.'” Responsive designs were not needed until about eight years ago, when the amount of people surfing the web on mobile devices became too large to ignore.
How can people implement responsive web designs into their own website? Just like any other web building feature, coding is required in order to make a webpage responsive.
According to W3Schools, adding the above <meta> tag to the <head> section of your html documents will make your website responsive. This will make your text larger and fit the size of a mobile screen.
W3Schools have also provided the line of code needed to make images more mobile friendly. By adding the attribute “max width” and setting it to 100%, the image will never exceed its original size and thus fit nicely with varying screen sizes. The image will not be cropped and instead fill the border with its original dimensions.
Due to the high popularity of responsive web designs, and how easy it is to design one, many organizations have built their websites with a responsive web design in mind. The website Media Queries currently lists 532 websites that have responsive web design, and Microsoft’s official website is one of them.
It is easy to tell that these four images are for the exact same website. They are also laid out exactly the same across all four images: the Microsoft logo is in the top left corner, their Surface Pro laptop is in front of a grey background at the top of the page, and their “Discover” and “for home” tabs are underneath the laptop, laid out neatly for users to see. As the width of the website shrunk, so did the images, borders, and overall layout.
Is there an alternative to Responsive Web Design?
Believe it or not, there is another way developers can make their web pages appear nicely on mobile screens without implementing a responsive design. They can make multiple versions of the same website and give each of them their own fixed dimensions so they can fit on their respective screens.
According to UXPin, the six common webpage width sizes are (in pixels): 320, 480, 760, 960, 1200 and 1600, meaning developers need to replicate the website code six times in order to have a favorable option for each screen size.
Adaptive web design has some advantages over responsive design. It may be easier for an existing website to use adaptive web designs to make it more mobile friendly and to have more control over the final layout of the mobile site. Using adaptive web design is also more advertiser-friendly because you can choose which ads to place on which size website based on the device the user is logging onto your site from.
If you are reading this post, however, even after gaining an understanding on adaptive web design, I would highly recommend building your website with responsive design in mind. It is much easier to create than making multiple identical web documents with adaptive design in mind. Responsive web design automatically makes your site more mobile friendly when loaded on smaller screens, which will therefore give it higher search engine optimization (SEO), and considering Google recommends responsive web designs for this very reason, building your website in this manner is the smartest move you can make.