Lollypop Design1. Get started with Wireframes
Wireframes are layout sketches of Website/app interfaces in the form of Box Holders to represent main components such as button positions, text, images,...
When creating your Wireframes, you need to keep the design very simple at this stage. The reason for this is that the Wireframe phase is all about testing different layout solutions to find the one that best suits your target audience. You don't want to waste time optimizing each Wireframe design pixel-perfect. Instead, focus solely on the functionality and information structure of the different layout options.
2. Identify Breakpoints
Breakpoints are the screen width limits where your website will adjust its layout to fit the user's device. These breakpoints are determined using CSS media queries.
Media queries are a feature of CSS that allow you to define and apply responsive CSS rules based on certain device or display environment conditions. Within these media queries, you'll include the breakpoint conditions to determine when specific CSS rules should be applied.
The developer will typically rely on the wireframe designs of responsive designers to determine the appropriate breakpoint values for a project. There is no single standard for selecting breakpoint limits, as it depends on the specific design and content of each website.
However, there are 3 common breakpoint ranges that are widely used today:
320 - 768px: breakpoint for smartphones
768 - 1024px: breakpoint for tablets
1024px: breakpoint for laptops, PCs, TVs...
3. Prioritize design for mobile devices
When designing a responsive user interface, you should prioritize designing the mobile version first, before refining the content for larger viewports. This is called a "mobile-first" design approach. The reason is that mobile-first design forces you to focus on the truly essential content and functionality that your users need, rather than getting caught up in adding unnecessary elements.
While building a mobile responsive website, you should also consider hiding some content to optimize the responsive page layout and space for smaller screens. A common example of this is using a "hamburger menu" on the navigation, which hides the full menu behind an expandable icon on mobile.
In addition, interactive elements should be designed to accommodate touchscreen usability on mobile devices. You can use CSS media queries like orientation and aspect-ratio to detect the user's device type and adjust the design accordingly.
4. Use Fluid Grid
Fluid Grid is a flexible grid system that divides the width of a page into smaller, equally-sized columns to display content.
Fluid Grid will determine the maximum layout size of the interface and divide the grid into a certain number of columns with corresponding width and height. This makes it easy for elements to adjust whenever the screen size changes.
Currently, there are two main types of website sizes:
Fixed layout: Designed in standard sizes (960px or 1024px) and hence the interface becomes unbalanced and cramped as screen size changes.
Fluid layout: This can automatically adjust accordingly according to the % parameter, maintaining a consistent and responsive visual design.
5. Improve image size
Image quality is a crucial factor in user experience (UX). Websites with sharp, well-sized images create a positive impression on visitors. However, when the device screen size changes, some images may become blurred or distorted, leading to a less-than-ideal user experience.
To improve this, you need to resize the image by:
Using Width and Max-width in CSS: The width property sets a fixed width for an image, ensuring it maintains the same size across all dimensions. Pairing width with max-width limits the maximum width while maintaining the original aspect ratio. This means that when the image is scaled, the ratio between width and height is preserved, avoiding distortion.
Using SVG files: Unlike raster images (typically JPEG/PNG format with a fixed resolution), Scalar Vector Graphics (SVG) has an infinite resolution. SVG images can be resized without losing quality, as they are defined by mathematical vectors rather than a fixed pixel grid. This makes SVG a powerful choice for responsive design UX, as the images can scale up or down seamlessly to fit different screen sizes.
6. Optimize Typography
Like images, text quality will also greatly affect visitors' impression of the website. A website with inappropriate typography not only affects the user's reading experience, but also makes them doubt the reputation of the business, as well as the quality of content on the website.
To optimize Typography for your Website, you need:
Choose appropriate fonts: When selecting fonts for your website, prioritize popular and widely-supported options like Helvetica, Roboto, or similar system fonts. These fonts are optimized to display well across different screen sizes and resolutions, ensuring a balanced and legible presentation. Avoid using obscure or decorative fonts that may not render consistently on all devices.
Setting font size with Fluid Units: Use relative font size units like em or rem instead of fixed pixel values (px). This allows the text to scale dynamically in response to the user's screen size, providing a more user-friendly experience across different devices.
Below is an example of a code for font size in rem:
html { font-size:100%; }
@media (min-width: 768px) { body {font-size:1rem;} }
@media (min-width: 1024px) { body {font-size:1.5rem;} }
