DEV Community

Cover image for The Ultimate Guide For Designing A Professional Responsive Website
Roman
Roman

Posted on • Updated on

The Ultimate Guide For Designing A Professional Responsive Website

This post is originally posted at programmingly.dev.
Please Visit Programmingly.dev to read more articles like this. Thanks

Previously I wrote a blog about responsive design using CSS rem & em units at Medium and Dev.to Website. There I explained with examples of how REM and EM Units work. where to use them? and how they help us in building a responsive website. In this ultimate guide, I’ll explain different methods that help design a perfect responsive website.

Responsive web design refers to the practice of building websites that adapt and resize to look good on all devices, from desktop computers to tablets and mobile phones. It has become essential in modern web development due to the proliferation of internet-connected devices with different screen sizes.

With responsive design, website content dynamically changes layout and scaling to provide an optimal viewing and interaction experience. For example, navigation menus may transform into mobile-friendly dropdowns, images can resize to fit different screen widths, and text will reflow rather than requiring horizontal scrolling. This creates a seamless experience for users no matter how they access the website.

The goal is to serve the same HTML code to all devices and use CSS, flexible grids, and media queries to reformat the page layout and size. This is more efficient for developers than creating and maintaining multiple versions of a website. Responsive design also helps with search engine optimization by having one set of URLs for all devices. Overall, it improves user experience and makes development/management easier. That’s why responsive design is a must-have for modern websites.

CSS Units for Responsive Design

CSS provides several relative units that are key for building responsive websites. Using relative units instead of fixed units like pixels allows elements to scale proportionally across different viewport sizes. This enables responsive design without needing to write unique CSS for each viewport width.

The main relative units for responsive design are:

  • em – Relative to the font size of the parent element
  • rem – Relative to the font size of the root element
  • vw – Relative to 1% of the viewport width
  • vh – Relative to 1% of the viewport height
  • % – Relative to the parent element’s width

The benefits of using relative units like em, rem, vw, and vh include:

  • Elements scale up or down as the viewport size changes. This prevents content from overflowing its containers or looking too small on different devices.
  • Media queries can progressively refine the design by changing font sizes, dimensions, and layouts based on breakpoints. This removes the need to create unique CSS for each viewport width.
  • Dimensions scale appropriately if users zoom in or out on the page.
  • Accessibility is improved since users can resize text to meet their needs.
  • Code reuse is maximized since the same CSS works flexibly across viewport sizes. There’s no need to write separate CSS for mobile, tablet, desktop, etc.

Using relative units is a foundational aspect of responsive web design. It allows websites to respond dynamically to the user’s device and settings for an optimal viewing and interaction experience.

Font-size Property

When designing a responsive website, it’s important to use relative font sizes that will scale according to the viewport size. The most common units used for font sizes in responsive design are em and rem.

Using em units for font sizes are useful because they allow the font sizes to scale relative to the parent element’s font size. For example, setting the base font-size on the <html> or <body> element to 16px, then setting heading sizes in em:

h1 {
  font-size: 2em; /* Equal to 32px */ 
}

h2 {
  font-size: 1.5em; /* Equal to 24px */
}
Enter fullscreen mode Exit fullscreen mode

The em units will scale the headings relative to the base 16px size set on the root element.

The downside of using em is that it can cause compounding size changes when nested elements use em. For example, if a paragraph inside the h2 used 1.2em, it would be 1.2 * 24px = 28.8px.

To avoid this issue, rem units can be used instead, which are relative to the root font size only. For example:

html {
  font-size: 16px; 
}

h1 {
  font-size: 2rem; /* 32px */
}

p {
  font-size: 1rem; /* 16px */
}
Enter fullscreen mode Exit fullscreen mode

Now font sizes won’t compound no matter how elements are nested.

Overall, using em or rem for font sizes is essential in responsive design for accessibility and optimal reading at different viewport sizes.

Width and Height Properties

When designing responsive web pages, it’s important to avoid using fixed pixel values for width and height. Instead, you’ll want to use relative units like percentages (%) or viewport-relative units like vw, vh, vmin, and vmax.

For example, to make a div stretch to fill 100% of its parent container’s width, you can set:

div {
  width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

This allows the div to shrink and expand based on the viewport size.

Similarly for height, you can use vh units to size elements based on the viewport height:

div {
  height: 100vh; 
}
Enter fullscreen mode Exit fullscreen mode

This will make the div take up the full height of the viewport. As the viewport changes size, the div will resize along with it.

The viewport units vw, vh, vmin, and vmax are very useful for creating truly responsive elements. 1vh is equal to 1% of the viewport height, and 1vw is 1% of the viewport width.

So if you want an image to be responsive, you can set:

img {
  width: 50vw;
  height: 50vh;
}
Enter fullscreen mode Exit fullscreen mode

This will keep the image sized at 50% of the viewport width and 50% of the viewport height. As the viewport changes, the image will scale up and down smoothly.

Using relative units instead of fixed pixels is key to creating responsive web pages that adapt to any viewport size.

Media Queries

Media queries are a key component of responsive web design. They allow you to specify different CSS styling rules based on certain conditions like screen width, device orientation, etc.

The basic syntax of a media query is:

@media (media feature) {
  /* CSS rules go here */
}
Enter fullscreen mode Exit fullscreen mode

Some common media features include:

  • width – Target specific screen widths
  • height – Target specific screen heights
  • orientation – Target portrait or landscape orientations
  • aspect-ratio – Target-specific aspect ratios

For example, to apply styles for screens narrower than 600px, you’d do:

@media (max-width: 600px) {
  /* Styles go here */
}
Enter fullscreen mode Exit fullscreen mode

To target high-resolution displays, you can use min-resolution:

@media (min-resolution: 192dpi) {
  /* Styles */ 
}
Enter fullscreen mode Exit fullscreen mode

You can combine multiple media features to target specific scenarios:

@media (max-width: 600px) and (orientation: landscape) {
  /* Styles */
} 
Enter fullscreen mode Exit fullscreen mode

The key is to design for mobile first, then enhance the styling for larger screens using media queries. This allows you to progressively add more advanced styling as screen size increases.

Some common breakpoints to target with media queries:

  • 320px — Extra small mobiles
  • 480px — Small mobiles
  • 600px — Medium mobiles
  • 768px — Small tablets
  • 1024px — Laptops
  • 1200px — Desktops

So in summary, media queries are essential for responsive web design as they allow you to optimize the user experience across different devices and screen sizes.

Responsive Images

Ensuring images look crisp and load fast across varying screen sizes is crucial for responsive web design. There are two main techniques to handle responsive images:

Use srcset and sizes for optimal images

The srcset and sizes attributes allow you to specify different image files for different screen widths. srcset defines the available image sources, while sizes defines the CSS widths that will select each image.

For example:

<img src="small.jpg" 
     srcset="medium.jpg 1000w, large.jpg 2000w"
     sizes="(max-width: 600px) 90vw, 600px" >
Enter fullscreen mode Exit fullscreen mode

This loads the small.jpg for viewports up to 600px wide, medium.jpg from 600-1000px, and large.jpg above 1000px. The sizes attribute tells the browser what image size to use based on the viewport width.

Art direction with the picture element

When you need to display different image compositions for different screen sizes, you can use the element. Inside the picture, you specify multiple elements with different media queries to load the appropriate image source.

For example:

<picture>
  <source media="(max-width: 600px)" srcset="vertical.jpg">
  <source media="(min-width: 600px)" srcset="horizontal.jpg">
  <img src="default.jpg">
</picture>
Enter fullscreen mode Exit fullscreen mode

This displays vertical.jpg below 600px and horizontal.jpg above 600px. The element acts as a fallback if none of the source files match.

The picture element allows true art direction for responsive images.

Flexbox Layout

Image description

Flexbox is a CSS layout module that makes it easier to design flexible and responsive layouts without using float or positioning. Some key benefits of Flexbox for responsive design include:

  • Flex containers automatically resize elements to fit different screen sizes. Setting a flex container to display: flex enable flex properties.
  • flex-wrap: wrap allows elements to wrap to a new line on smaller screens so the content stays within the container.
  • align-items controls the vertical alignment of items in a flex container. This helps keep content organized on mobile screens when stacking elements. Values like center, flex-start, and flex-end align-items.
  • Flexbox makes it simple to switch layouts between mobile and desktop. Media queries can toggle between row and column orientations with flex-direction.
  • Elements can easily expand and contract to fill available space with flex-grow and flex-shrink. This helps content resize responsively.
  • The order property rearranges items visually without affecting the source order. This enables optimizing content order for mobile vs desktop.

Overall, Flexbox provides powerful tools to create responsive layouts that adapt across screen sizes and devices. Properties like flex-wrap, align-items, flex-direction, flex-grow, and order make flexible containers and content ordering easy without floats or fixed positioning.

CSS Grid Layout

Image description

CSS Grid Layout is a powerful tool that makes building fully responsive page layouts much easier. Here are some of the benefits of using CSS Grid for responsive web design:

  • It allows you to define columns and rows to control the layout directly in CSS instead of using floats and positioning.
  • The grid-template-columns and grid-template-rows properties let you specify column and row sizes as fractions, percentages, or fixed widths/heights.
  • Auto-placement flows content into the grid cells in the order they appear in the HTML without needing to position elements.
  • The grid-template-areas property lets you visually map out grid sections and give them semantic names to reference in CSS for placement.
  • grid-auto-rows and grid-auto-columns sizes unspecified rows and columns automatically.
  • minmax() functions in grid-template-columns/grid-template-rows set minimum and maximum ranges for implicit grid tracks.
  • Media queries can rearrange and resize the grid layout at different breakpoints.
  • The auto-fit and auto-fill properties automatically insert rows or columns of the size you specify to fill the container.

So in summary, CSS Grid gives you very fine control over a responsive grid with powerful alignment, sizing, and positioning features that adapt smoothly across screen sizes. By leveraging Grid properties like template areas, auto-placement, minmax(), and media queries, we can create robust responsive page layouts easily.

Conclusion

Responsive web design is crucial for delivering a quality user experience in today’s multi-device world. By leveraging CSS units like percentages, vh, vw, rem, and em, we can build websites that dynamically respond and adapt to different screen sizes and orientations. Combining these relative units with @media queries gives us powerful control to adjust layouts and styling for optimal viewing on anything from small phones to large desktop monitors.

Other important responsive techniques covered include making images flexible, using Flexbox and CSS Grid for intelligent content rearrangement, and implementing responsive. With the right mix of relative units and media queries, we can reuse our code efficiently instead of having to write unique styling for each device. This saves development time and reduces code bloat.

The end result is a website that works well across all devices – which is crucial when mobile browsing now exceeds desktop. Responsive design ensures our content is accessible and enjoyable for every user, regardless of their screen size. As mobile adoption continues to grow globally, responsive techniques will only increase in their importance for delivering a quality, seamless experience to all of our site visitors.

Top comments (10)

Collapse
 
fadekocodeit profile image
Future_Developer

Thank you for sharing

Collapse
 
lotfijb profile image
Lotfi Jebali

This is so helpful

Collapse
 
salpha profile image
Salpha

Amazing information. Thanks for sharing it to me. Its easy to understand.

Collapse
 
shislam profile image
Md Shamsul Islam

Very much informative and easy to understand.

Collapse
 
ephloch profile image
EPHRAIM Juma

This is very useful information

Collapse
 
siavash_sattari_411708108 profile image
siavash sattari

agreed

Collapse
 
shah_sahb_9f9cb212750ace1 profile image
Shah sahb

Amazing and best information ever

Collapse
 
aleksandr_malanyk_8e318b2 profile image
Info Comment hidden by post author - thread only accessible via permalink
Aleksandr Malanyk

Hey there! I just have to share my experience with this amazing cleaning service I tried recently in NYC. With my hectic work schedule, cleaning always falls to the bottom of my to-do list. I decided to hire a professional service, and wow, what a difference it made! The team was incredibly thorough and paid attention to every little detail. My apartment has never looked this clean. They even got those stubborn stains out of the carpet. If you're as busy as I am and need some extra help, definitely check out this cleaning service NYC. You'll love coming home to a spotless place!

Collapse
 
farrah_bayles_24affa03341 profile image
Info Comment hidden by post author - thread only accessible via permalink
Farrah Bayles

STOLEN CRYPTO RECOVERY FIRM - "CYBER GENIE HACK PRO".

  • It may be extremely frustrating and depressing to lose access to one's hard-earned Bitcoin, leaving many people feeling hopeless and unsure of what to do. But in my situation, contacting CYBER GENIE HACK PRO was a smart and fortunate choice. With the technological tools and specialized knowledge needed to comprehend the complex world of blockchain technology, this team of professionals in digital forensics can painstakingly track the movements of your misplaced Bitcoin and eventually retrieve what is rightly yours. This successful outcome and encounter with the marvelous Cyber Genie Hack Pro team has given me the much-needed peace of mind to move forward with life and confidence in rebuilding my life, which was almost ruined while dealing with those shady traders.
Collapse
 
brenda_agie_2c157d7a1e4f3 profile image
Info Comment hidden by post author - thread only accessible via permalink
Brenda Agie

The cryptocurrency journey can be an exhilarating rollercoaster ride of opportunity and risk. My foray into this digital frontier began innocuously enough, with the purchase of a small amount of Bitcoin intended for an online art acquisition. Little did I know that this seemingly inconsequential decision would set the stage for a tumultuous series of events leading to betrayal and financial loss. After opting to hold onto my Bitcoin rather than proceed with the art purchase, I was introduced to Bitcoin investment through an affiliate network. Entranced by the promise of substantial returns, I eagerly invested a significant portion of my funds, only to witness remarkable profits in the ensuing weeks. Buoyed by this success, I readily agreed to participate in a joint investment venture proposed by the network admin—a decision that would prove to be my undoing. As fate would have it, the admin's deceitful machinations shattered the illusion of prosperity, leaving me defrauded of a substantial sum—$217,000. The doctored receipt presented as evidence of a successful transaction was a crude fabrication, riddled with glaring inconsistencies that betrayed its fraudulent nature. Despite mounting evidence to the contrary, the admin remained obstinate, denying any wrongdoing and leaving me grappling with the harsh reality of my predicament. With my financial future hanging in the balance, I embarked on a quest for salvation—a lifeline amidst the wreckage of betrayal and deceit. During this tumultuous period, I encountered ADRIAN LAMO HACKER —a beacon of hope amidst the darkness of digital fraud. Hesitant yet hopeful, I reached out to their team, bracing myself for the inevitable anguish of reliving my ordeal. To my astonishment, ADRIAN LAMO HACKER's response was swift and decisive. In a mere 24-hour period, their team of dedicated professionals executed a flawless recovery operation, reclaiming my lost funds with a level of expertise and professionalism that left me in awe. Their unwavering commitment to justice and relentless pursuit of truth restored my financial stability and my faith in humanity. I am eternally grateful to ADRIAN LAMO HACKER for their steadfast support and dedication in my time of need. Their exemplary service and unwavering integrity serve as a shining example of the triumph of resilience over adversity. To anyone grappling with the devastating effects of digital fraud, I implore you to place your trust in ADRIAN LAMO HACKER. Their track record of success speaks volumes, offering a glimmer of hope in cryptocurrency. Consult Or reach out to them via website: adrianlamohackpro.online/
WhatsApp: ‪+1 (909) 739‑0269‬
Email: Adrianlamo@consultant.com

Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more