DEV Community

Cover image for 6 Best Practices for Responsive UI design
Flovet-stack
Flovet-stack

Posted on • Edited on

6 Best Practices for Responsive UI design

Creating responsive web designs is a routine for professional web developers therefore mastering the skill is very important.

today I will give you tips that will get your front-end skills to another level.

By the end of this article you will:

  • Build layouts that adapt to any screen size, creating a frustration-free user experience.
  • Unlock the power of breakpoints for a seamless transition between different devices.
  • Design text that scales beautifully, ensuring readability on any platform.
  • Embrace the mobile-first approach for a user-centric design experience.

1. Relative Units

Gif portraying difference between relative and static units

using relative units is a very useful and efficient way to simplify your responsive web dev workload. as it permits you to define property values once for different screen sizes.

2. Breakpoints

different breakpoints for most used devices

Essentially, breakpoints are pixel values that a developer/designer can define in CSS.

When a website reaches those pixel values, a transformation occurs so that the website offers an optimal user experience.

Knowing the standard breakpoints for every screen size is essential in responsive web design.

3. Nested HTML Objects

Different elements nested together

Using nested HTML elements allow you to easily position the as one body other than individually as can be seen on the card in the image above.

4. Bitmap vs Vector graphic images

bitmap vs svg comparism

Bitmaps are made of pixels, while vector images are software-created and based on mathematical calculations which allows them to grow or shrink to any size without a loss in the definition of the image.

5. CSS Clamp for Fine-Tuning Typography ✨

implementation of css clamp

CSS clamp allows you to define a minimum, preferred, and maximum font size for a specific element. The font size will then adjust within that range depending on the screen size.

6. Mobile or desktop first design approach

Alt Text

Mobile-first design is a design philosophy that aims to create better experiences for users by starting the design process from the smallest of screens while the desktop first design approach which is mostly used means designing for the highest specifications — the best achievable by design- and then going down to smaller resolutions.

Which one you use is up to you but mastering both will definitely come in handy.

Takeaways

  • How to use relative units for flexible layouts
  • The importance of breakpoints for adapting to different screens
  • Why nested HTML is your friend for responsive design
  • How vector graphics can save you from blurry images
  • The art of responsive typography for clear reading on any device
  • Mobile Users First: The Winning Approach

Top comments (15)

Collapse
 
drazik profile image
drazik

Mobile first looks cleaner than desktop first to me. Because I see mobile first as progressive enhancement. Most of the time a layout optimized for a small screen is still usable on a large screen (even if not ideal). In my experience, the opposite is false.

This is well summarized by this illustration from Stéphanie Walter : stephaniewalter.design/wp-content/...

See stephaniewalter.design/blog/freebi... for more infos about the illustration

Collapse
 
flovetstack profile image
Flovet-stack

I have seen the image and I now have a better understanding of what the mobile-first design is and will definitely try it out in the future

Collapse
 
flovetstack profile image
Flovet-stack

Thanks very much, Mr. Cyrille Perois

Collapse
 
blossom profile image
Blossom Babs • Edited

This is helpful!

AS regards Bitmap and Vector graphic images; how do I tell bitmap and vector graphic images apart? Are they pngs and svgs?

Collapse
 
flovetstack profile image
Flovet-stack

yes exactly you can easily tell from the file extension with .svg for vector graphic files and .png, .jpg, .jpeg and more for others

Collapse
 
blossom profile image
Blossom Babs

Noted, thank you.

Collapse
 
tomaz_on profile image
Tomaz, Osvaldo Neto

I get started with desktop first , but right now I do mobile first, and I did think that desktop first was better but today I don't. Mobile First is a lot more important, because the greater part of the web are using a smartphone to surf the web , then I am grateful to be changed my mind , because the greater part deserves a best construction in the process , in my state is more than 90% in mobile devices and I things is easier doing so ... But is good to know both approaches ... But today every web development I do , I do with mobile first approach :)

Collapse
 
flovetstack profile image
Flovet-stack

thanks very much forth points you made

Collapse
 
yashraj021 profile image
Yash

Well, I used to do Destop first, but it really never gave good result. I saw this post and elarnt something new indeed.
Will do Mobile first approach. Thank You for this awesome post brother.

Collapse
 
flovetstack profile image
Flovet-stack

you are very welcome bro

Collapse
 
drew_mc profile image
Drew McConville

"Mobile first" is not just a design philosophy. it also referrers to how you use media queries in css, load resources, etc.

Collapse
 
pedromagalhaes profile image
Pedro Magalhães

I never saw a clear benefict in doing mobile first in opposite of desktop first. In any case great article, loved the graphical explanation!

Collapse
 
flovetstack profile image
Flovet-stack

I do desktop first too, I started that way, and now its a habit

Collapse
 
tweenty247 profile image
2tweenty47

awsome this what i have been looking for.greate article

Collapse
 
elvin profile image
elvin • Edited

This is a great refresher