DEV Community

Cover image for Chronicles of Supermarket website #2: responsive design
Dhokia Rinidh
Dhokia Rinidh

Posted on

1

Chronicles of Supermarket website #2: responsive design

From #1 and moving ahead:

I previously posted my journey into building a simple (no fuss or perplexity; for beginners) supermarket website. I had only used HTML & CSS to construct a straight forward, unornamented website. As per the modern craze in web development, all websites should appear dazzling on however small of a screen it may be viewed. I therefore persuaded my brain to review my code and add a couple of media queries as well as beautify the previous code to achieve my goals.

However, this section also never went by without upskilling my brain-content.

Key lessons

  • Prefer using absolute units eg cm, mm, in, pt, px etc. for content to be printed to hardcopy. Avoid them to the most in responsive layouts.
  • Try to avoid setting fixed width in px, in etc. especially for large elements e.g. large banner images, <section>s or whatever forces a user to scroll horizontally. It may be tempting to initially satisfy your design by this, but always remember to replace with relative units such as ---%, rem, em, vw, vh.
  • Either set specific height & width (in relative or absolute units) to the parent flex_container, hence the nested_divs occupy space variably (I call this technique ‘fixed-container’), or height and width of containers as auto (flexible upto even zero) and hence fixed sizes of nested_divs determine the resultant size of the flex_container (I call this techique ‘fixed-nested-divs’). Most used is ‘fixed-container’.
  • Always design mobile-first (unless majority of audience are desktop users). Write default styles for small screens first, and use media queries for larger screens. Avoid extra fluff in headers, navbars… for mobile screens. Use media queries to modify very few properties for larger screen sizes (@media only screen and (min-width: 600px) applies styles for screens’ width of 600px and above).
  • Use (min-device-width: 400px) instead of (min-width: 400px) to check for device actual screen size instead of web document size. Styles under this are not affected by changing window size or by rendering another html file inside an html file by<iframe>s.
  • Use different images on different screen sizes using <picture>, more so the same image but of different resolutions as well ot reduce load bundle e.g. can use url('../assets/flowers-lg') on large screens and url('../assets/flowers-sm') on phones.
  • --em when set on font-size means relative to parent element while em in other properties s e.g. width: 3em means relative to font-size of current element.
  • Use em when you always want text to be certain size according to its immediate parent. Use rem in deep nesting scenarios when you want the size relative to fontsize of the root element (stays unchanged).
  • Properties commonly set with em and rem: font-size, margin & padding.
  • Properties commonly set with %, vw and vh: width, height, postioning (fixed & absolute), flex-basis, margin and padding.
  • Classifications of design technqiues (can use any one or combine):
    • Link diff stylesheets OR
    • Media queries within CSS OR
    • Flexible grids & css column + Relative values & calc() + min & max

Please don’t hesitate to criticize and suggest edits 😘

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay