Overview
Responsive web design (RWD) involves developing web pages that render well across various devices and screen display sizes to ensure usability. I created a responsive landing page prototype for Tulip Town’s online tourist guide.
Objective
The client wanted a one-page sample of an online tourist guide featuring the charming attractions of their picturesque little village. It has to be mobile accessible since most of the visitors will be navigated through a QR code to the landing page.
.
Approach
I styled a responsive feature using CSS flexbox and grid from a static landing page. I used a “mobile-first” approach to prioritize the essential content for visitors accessing the landing page on mobile phones. From there, by adding media queries, I expanded the content to be responsive for tablets and desktop screens.
Media queries breaking points:
- Mobile
- Tablet (min-width: 640px)
- Desktop (min-width: 1024px)
The CSS flexbox and grid render the container sizes according to the breaking points, letting users view content seamlessly with legible texts and appropriate image sizes.
This screencast has no audio.
Delivery
The deliverable is developed on Code Sandbox.
The source code is uploaded to GitHub.
Result
The prototype showed a quick overview of the town, highlighted with images. By adding navigation, it can link to more branching pages without crowding the landing page with too much information.