Overview
Responsive web design (RWD) involves developing web pages that render well across various devices and screen display sizes to ensure usability. With mobile traffic accounting for nearly half of all web traffic globally, it’s become increasingly important for websites to be responsive on any device. I created a responsive website sample for my client, who offers outdoor teamwork retreats for organizations.
Objective
Unplugged requested the development of a simple website to summarize their amenities, FAQ, and location. They needed a responsive website because their target clients often access their site by mobile phone, and they wanted to keep the content concise yet well-informed.
Approach
From a design comp, I programmed this multipage site on a HTML boilerplate with CSS and JavaScript. I strategically used a “mobile-first” approach to prioritize the essential content for mobile users, ensuring a seamless user experience across all devices. From there, by adding media queries, I expanded the content responsive for tablets and desktop screens.
Media queries breaking points:
- Mobile
- Tablet (min-width: 768px)
- Desktop (min-width: 1200px)
The responsive site allows users to view content seamlessly, rendering legible text sizes and appropriate image sizes.
This 20-second screencast has no audio.
Delivery
The deliverable is developed on Visual Studio Code and uploaded to a client’s server.
The source code is uploaded to GitHub.
Result
The programming structure improves page loading speed, which returns users’ lower bounce rate. In addition to providing valuable and accessible content, establishing a mobile-first strategy prioritizes user experience to engage with the site and increases social shares from a fingertip.