What is responsive website design? Unlike static websites which appear the same on any screen size, responsive websites use CSS and HTML to automatically adapt websites to the screen widths and viewports of various devices (including desktops, tablets, and smartphones). A responsive website uses CSS to readjust images and text, and media queries to apply different styling based on browser sizes (W3Schools, 2022). Web designers can use responsive web design frameworks to ease the design process.

An example of a responsive website is Bite Toothpaste Bits. The website sells sustainable, plastic-free personal care products like bamboo toothbrushes and toothpaste bits. The website is an example of responsive web design, According to Aigars Silkalns, the website uses the responsive web design framework, Bootstrap (Silkalns, 2021). The source code backs this conclusion because it mentions Bootstrap several times.

Bootstrap is one of the most popular responsive web design CSS frameworks. It incorporates HTML, CSS, and jQuery to create responsive webpages (W3Schools, 2022). Web designers adapt existing Bootstrap templates. Using a framework like Bootstrap guarantees that web designers can build a website according to the specifications of responsive web design.

The Bootstrap framework, Bite Toothpaste Bits, has several responsive web design characteristics.

• The most elementary component of Bootstrap is the grid. The grid defines the width of every HTML component occurring on the webpage. The grid divides the webpage into twelve equal columns and lets elements occupy one to three columns. Splitting the website into equal sections, the website is easily adaptable to different screen sizes. (Maina, 2017). Many product pages on the Bite Toothpaste Bits website are “arrayed in grids with stunning hover effects” (Silkalns, 2021).
• Bootstrap uses responsive web design to modify a website to different screen sizes. In total, the framework uses four different resolution constraints (specifically the horizontal widths): large (1200 pixels), medium (992 pixels), small (768 pixels), and extra small (less than 768 pixels) (Maina, 2017). Using Google Chrome Develop Tools, I entered these different widths. As expected, the website easily adapted to any of these widths. Furthermore, I used the various screen sizes built into the application to view the website, including smartphone-sized screens smaller than 768 pixels. For example, I used the dimensions of the iPhone Pro 12 to evaluate the website. Again, the website’s responsive design allowed it to conform to any of these resolutions.
• Responsive web design involves setting the viewport, “which will give the browser instructions on how to control the page’s dimensions and scaling.” To set the viewport, web designers include a <meta> tag, <meta name=”viewport” content=”width=device-width,initial-scale=1″> (W3Schools, 2022). I found this code in the website’s source code (Bite Toothpaste Bits, 2022).
• Responsive websites use responsive images “that scale nicely to fit any browser window.” This process involves setting the CSS max-width property to 100%. This alteration allows the image to scale upwards and downwards (W3Schools, 2022). Google Developer Tools show that the website’s images scale to different device sizes.
• Bootstrap allows for responsive text size. Developers can set the text size with the “vw” or “viewport width” unit. Text scales based on the browser window’s size. The website includes the “vw” code several times in its source code (W3Schools, 2022). Changing the screen sizes in Google Developer Tools reinforces the website’s responsive text size.
• Bootstrap-based websites have a responsive navigation bar as well. Typically, Bootstrap collapses the navigation bar when the screen size shrinks to less than 768 pixels. The web view “contains all of the navigation links aligned horizontally across the page, while as the mobile view is more compact and makes use of a navigation icon which when clicked displays the navigation links aligned vertically.” Bootstrap has a special class called “navbar” that it uses to create this effect (Maina, 2017). Like other Bootstrap websites, the Bite Toothpaste Bits website has a horizontal menu at first until the screen width is less than 768 pixels when the horizontal menu morphs into a vertical one.

I used different browsers to view the example website. First, I looked at the homepage with Google Chrome on my desktop computer. The site design easily filled the layout space with no element cutoff. Notably, in this format, the website has five navigation tiles in the header section along with the Bite logo. The website’s responsive web design changes in several smaller screen sizes. Second, I used another browser, Microsoft Edge, to analyze any differences from Google Chrome. The website looks identical in its desktop format to Google Chrome. Then I used Microsoft Developer Tools to assess the same screen sizes as in Microsoft Chrome. Again, the website’s responsive web design adapted beautifully to each iteration.

References

Bite Toothpaste Bits. (2022). Bite. https://bitetoothpastebits.com/

Maina, D. (2017, July 26). Responsive web design with Bootstrap. Medium. https://medium.com/@duncandevs/responsive-web-design-with-bootstrap-70147ecd9d98

Silkalns, A. (2021, December 29). Twenty Bootstrap websites inspiration to build fresh and innovative design 2022. Color Lib. https://colorlib.com/wp/bootstrap-websites/

W3Schools. (2022). HTML responsive web design. https://www.w3schools.com/html/html_responsive.asp