DEV Community

Cover image for 6 Best Practices for Responsive UI design

6 Best Practices for Responsive UI design

Flovet-stack on December 15, 2020

Creating responsive web designs is a routine for professional web developers therefore mastering the skill is very important. today I will give yo...
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 •

Thanks very much, Mr. Cyrille Perois

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
 
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
 
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
 
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
 
elvin profile image
elvin • • Edited

This is a great refresher

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
 
tweenty247 profile image
2tweenty47 •

awsome this what i have been looking for.greate article