😳 😳 Which part of a web development project make you feel to escape way? 😳 😳
For me, I always get freaked out about media queries. After making the desktop version, I am always at a loss. How to tackle all the tweaks for different screens! Media queries make the CSS sheets dirty for me.
P.S.: I am curious to know, is it just me who doesn't like media queries a lot 😜?
Cover Photo: Escape from Work! by Alfrey Davilla | vaneltia on dribble.com
Top comments (2)
Working as an accessibility consultant, the part that pains me most is the willful ignorance and endless lame excuses people facing ongoing fines from the courts and continuing litigation people show about actually fixing the coding mistakes that got them in trouble in the first place.
It's not the coding that's the problem, it's the people. People who use these derpy "frameworks" like bootcrap or jquery on the front-end, pissing on usability and accessibility from so on-high you'd think the almighty just got back from a kegger. People using frameworks like react where they abused it to the point nothing works if scripting is blocked or disabled. People not qualified to write a single blasted line of HTML or CSS that wouldn't know semantic markup from a hole in their backside. (like the folks who created and maintain bootstrap).
It's not just that they get suckered into failing to meet accessibility norms by this trash, or that they ended up working 20 times harder having had to write two to twenty times the markup needed to do the job... it's that they are so knee deep in the propaganda BS they flat out refuse to admit wrongdoing, refuse to believe that these frameworks are what got them in trouble, and endlessly and mindlessly parrot every single bald-faced lie that suckered them in.
It's often like dealing with the jokers who park in handicap spaces because "well what entitles them to special treatment".
As to your problem of media queries, you're on the right track. Desktop FIRST. People say mobile first but that's utterly back-assward. Why? Because legacy desktop UA's you might want to still support often don't know media queries, whilst any mobile we care about does. It's easier to undo style than to add it.
Where I think you might be going astray is thinking specific resolutions. DON'T. If like a good little doobie your layout is already semi-fluid (expanding/contracting inside a max-width) and elastic (accessible font-size in EM with 99% of your inner widths and paddings in EM) it's mind-numbingly simple.
Narrow the window until it breaks, figure out how many EM wide that is, add 5% to that for wiggle room, and there's your query width at which to start stripping off columns or adjusting padding. Lather, rinse, repeat on narrowing the window until you're down as small as you want to support (usually in the 15em ballpark).
If you've built properly with progressive enhancement of semantic markup, letting content + logical document order + semantics dictate your layout choices, it should't take much effort if any -- maybe 10 to 15 minutes -- to take a well written desktop layout to being fully mobile friendly.
But you need that solid foundation first -- which is why if you started out dicking around with appearance before you had a full page of content (or facsimile of future content) marked up, you're going to be fighting it every step of the way.
Progressive enhancment: Organize the content in a flat text editor as if HTML and CSS don't even exist. Mark it up semantically saying what things ARE and not what you want them to look like. (which means no div, span, id, or classes at this point). Create your desktop layout adding DIV/SPAN and classes ONLY as needed, with any classes or ID's saying what things ARE and again, NOT what you want them to look like. (It's called separation of presentation from content, and is why frameworks like w3.css or bootcrap are mentally enfeebled halfwitted incompetent derpy trash) Then adjust the screen with till it breaks, add a query, adjust the screen width till it breaks, add a query, etc, etc...
Then and only then giving it a paint-over for colouration and presentational images (if you put presentational images into the IMG tag, /FAIL/)
Then and ONLY then ENHANCE the already working page with JavaScript, since good scripting should ENHANCE functionality and not be your only means of providing it. Another place people bork things up all the time!
You follow this pattern, it will rarely lead you astray.
Try building for mobile first and adding your media queries for larger screens last. You may find you use fewer media queries that way. If you're using CSS-in-JS or some other CSS preprocessor there are ways to store the media query syntax in variables so your CSS looks neater.