Kevin Powell - Community•3y ago

Responsiveness method

Hello 👋 Now when it comes to making website responsive I fellow two design modes, Portrait mode or landscape mode. I use JavaScript to decide which mode to apply based on the screen orientation. I don't use Media queries but only if i wanna add some extra styles for screens that are too big or too small. My question is, what are the cons of this method? I wanna know if this way is good to go or if it has some serious cons 😬 Example of how I set the style mode:

.container {
    display: flex;
}

body.portrait-mode .container {
    flex-direction: column;
}

.container {
    display: flex;
}

body.portrait-mode .container {
    flex-direction: column;
}

28 Replies

Jochem•3y ago

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation

orientation - CSS: Cascading Style Sheets | MDN

The orientation CSS media feature can be used to test the orientation of the viewport (or the page box, for paged media).

13eck•3y ago

You should never use JS for this, this is what media queries are designed and optimized to do. CSS is really good at this, JS not so much. Use the right tool for the job.

~MARSMAN~OP•3y ago

Wut! Damn i never seen it before... I'll check it out, thx!

13eck•3y ago

In addition, you shouldn't always have a "portrait" and "landscape" design since not all sites need or would benefit from it. Let the content decide. Content is king. If you do your media queries right they'll work for both portrait and landscape since you'll set up the breakpoints in such a way that if it's wide enough you'll get side-by-side elements instead of stacked-up elements.

Jochem•3y ago

yeah, I struggle to see the difference between a tablet in landscape mode and a full screened desktop browser, or a phone in portrait and a smaller browser screen?

~MARSMAN~OP•3y ago

I use these two modes for Desktop and small screens so it suits the design, I try to not over engineer it though. For media queries i feel like I'm repeating the same stuff over and over, that's why I went the way to decide the design based on the orientation. And it kinda works for me. But i see what you mean

Mannix•3y ago

I'm curious of your design choices do you have something i can look at 🙂

13eck•3y ago

If you’re repeating yourself over and over you’re probably micromanaging the browser too much

~MARSMAN~OP•3y ago

Just simple design that's why this method suits me 😬 You can take look at my website. https://marsman.pythonanywhere.com

MARSMAN Web Developer & Designer based in Cairo, Egypt.

A web developer and designer ready to shape your digital journey by building creative and impactful website experiences for passionate brands and individuals.

~MARSMAN~OP•3y ago

I guess you're right, or maybe my hate for queries made me not understand it well 😅 Do you have any source for understanding media queries so i can look up ?

13eck•3y ago

A quick search: https://youtu.be/2KL-z9A56SQ https://youtu.be/VQraviuwbzU https://youtu.be/0ohtVzCSHqs

Kevin Powell

YouTube

Tutorial: Learn how to use CSS Media Queries in less than 5 minutes

Start creating responsive layouts with confidence with my free responsive layouts course: https://courses.kevinpowell.co/conquering-responsive-layouts Quickly learn how to using CSS media queries. In this video, I explore what media queries are and how you can start using them right away. If you know how to write your own CSS, you'll be able ...

Kevin Powell

YouTube

5 simple tips to making responsive layouts the easy way

🎓 FREE COURSE: Conquering Responsive Layouts https://courses.kevinpowell.co/conquering-responsive-layouts 🔗 Links ✅ min(), max(), and clamp() - https://youtu.be/U9VF-4euyRo ✅ Creating "squishy" padding with min() - https://youtu.be/7khSaA91e04 ✅ The 100% correct way to do breakpoints: https://www.freecodecamp.org/news/the-100-correct-way-to...

Kevin Powell

YouTube

Are you writing responsive CSS the wrong way?

New free course! Conquer Responsive Layouts: A 21-day challenge: https://courses.kevinpowell.co/conquering-responsive-layouts I know sometimes it's because we have a design file that's only a layout as a desktop layout, or because it's just how we're used to working since we're on a desktop, but I writing mobile-first CSS not only results in le...

Mannix•3y ago

why can't i click on those navigation bars to navigate fix this 😡 🤣

~MARSMAN~OP•3y ago

Thanks! What navigation that isn't working 😰?

Mannix•3y ago

those bars on the left should be clickable imo also the lack of accessibility is killing me 🙂

~MARSMAN~OP•3y ago

The menu button?

Mannix•3y ago

~MARSMAN~OP•3y ago

Can you tell me what is the issue?

Mannix•3y ago

you can't tab into anything

~MARSMAN~OP•3y ago

They gonna need some work 😂 Oh yes i know i turned it off.. it just messed up my transitions 😬 I've been trying to solve it but couldn't

Jochem•3y ago

it looks really nice, but I'm wondering why there's an animation on resizing the viewport? It seems to make everything a bit laggy

~MARSMAN~OP•3y ago

I'm not setting any animation for when the screen is resizing 🤔

Jochem•3y ago

everything slides around and settles when I resize the viewport in responsive mode

~MARSMAN~OP•3y ago

I guess it's the transitions? I'll check it out

13eck•3y ago

https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/

freeCodeCamp.org

The 100% correct way to do CSS breakpoints

by David Gilbertson The 100% correct way to do CSS breakpoints For the next minute or so, I want you to forget about CSS. Forget about web development. Forget about digital user interfaces. And as you forget these things, I want you to allow your mind to wander. To wander

Jochem•3y ago

this should embed

~MARSMAN~OP•3y ago

Yeah I believe it's the transitions

Jochem•3y ago

it's not something a user would ever do, resize their viewport. just making sure you weren't spending a bunch of effort on making that look good or something 🙂

~MARSMAN~OP•3y ago

Oh no i wasn't 😅

Gaming

Programming

Responsiveness method