Responsive Design
If you were to really ask yourself, where do you think you browse most of your websites? Is it on your computer? On your phone? Somewhere else, perhaps? Regardless of where you browse, the beauty of it is that you’re able to browse websites on whatever devices you please. This is a result of responsive website design.
What is Responsive Website Design?
Responsive website design is the ability for a website to adapt no matter what screen its being displayed on. For example, according to Oberlo, 67.81% of total website visits are through mobile devices, while only 32.19% are coming from computers. This means that websites need to be able to deliver the same high-quality content across any technological screen. Other devices include: laptops, ipads, phones, apple watches, smart tvs, etc.
How does it work?
Responsive web design, also known as RWD, works mainly through CSS and HTML. CSS (Cascading Style Sheets) is different from HTML because its purpose is to style the web pages while HTML is responsible for structuring the pages. RWD works through CSS, using its style settings to change size, orientation, resolution, color capability, etc.
Viewport
To make a responsive website, you should add the below <meta> tag to your pages.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Media Queries
This allows you to create different styles for different browser types. You can use @media tag to specify each style you’re looking for.
Furthermore, elements such as max-width and height will allow an image to resize depending on the browser size, however, it will never become bigger than the maximum. This helps the image maintain is quality. Below is an example of what the Steve Madden website looks like from different viewports.
Desktop v.s. Smart Phone View
Furthermore, another way to do this is by using ready-to-go softwares. These include…
W3.CSS: a free CSS tool that will create responsive design automatically.
Bootstrap: a framework that uses CSS, HTML and jQuery to make responsive designs
Why is Responsive Design important?
Going back to the beginning of this post, most of the world isn’t just using their laptops to browse their favorite sites. In fact, since our cellular devices are things most people carry around with them everywhere, it makes more sense that all websites should work equally as well on smart phones.
One example of a website that doesn’t have the best responsive design is Quinnipiac’s very own: Blackboard. This is the site that students use to see all of their assignments and grades, however it works very poorly on a phone.
Blackboard site: Desktop v.s. Smart Phone View
As you can see, the view on the left is from a desktop. It clearly shows all the website elements are allows users to navigate it effectively. However, the view on the right is from a smart phone. The title of the site is cut off on the right, all of the text leads off the page making it very difficult to understand the content and the site is not easy to navigate in this view.
The university needs to use the tools mentioned in this blog post to fix this site and move toward the future.