Just a thought that came to mind. As I re-develop my portfolio after a year or so of coding hibernation, I have been thinking a lot on media queries.
It has been general practice (for me anyway) to throw in a bit of css, get the site looking good and then incrementally add in media queries as I progress. I have been currently doing this with the portfolio with accessibility on my mind (ensuring good sized text and contrasting colors), and I’m glad to say that it’s currently hitting AAA WCAG standards for these features.
But I’ve been struck today by the thought that perhaps I should establish my media queries for mobile BEFORE I do any styling for larger screens. As I’ve read, if it you don’t need it on mobile, then you probably don’t need it on desktop.
Just wondering what the community thought of media queries before any other css.
Yeh you should always keep in mind that your site will also be viewed on a phone or tablet.
I like to use Screenify to help me see what it looks like on different screens.
Also that’s the thing about frameworks. You can use bootstrap to just add some classes to your html tags and it does all the media queries and styling for you. it’s basically a premade stylesheet so you don’t have to waste time reinventing the wheel every time you build a new website.
time == money
I think everyone understands and expects that your site should always be responsive since websites are long past the days of just being exclusive to your PC monitor.
All because everyone uses there phone mainly as a pocket computer now.
That’s a nice link thanks. I usually just used the dev tools in chrome but I’m liking Screenify. I was hoping to not use bootstrap just for the hell of it but I think I may go back to that. Hoping to integrate React into it too.
No, you’ve got it right doing it the way you’re doing it, just add them when needed for specific things, you can’t really do them first as it doesn’t make sense without any styling in place.
think of media queries as different css for different screen sizes in the same style sheet.
you still have to do the general styling for the page no matter what screen size; things like color, font, animations and so on.
you use @media if you need it to look a certain way on different screen sizes.
when i say keep responsiveness in mind is just saying before you get too complex with your css keep the screen sizes in mind so that you don’t have to go back and patch together some code so that it works how you want it.
not so much media queries BEFORE styling on larger screens but rather ALONG-SIDE.
better answer:
think about who you’re actually coding for and think about how those users will be engaging with your site. if you do it right they wont even notice the difference whether its on a monitor or a phone.
never learn frameworks until you understand how they work.
Don’t use bootstrap till you completely understand css.
I usually start laying out and styling my pages from a mobile width, then increase the width and when i see my content breaks i’m adding a media query to fix the way it looks.
Think that content driven layout makes more sense than devices width/height in deciding when to add a breakpoint.
This is not quite correct - you can do it that way, and Bootstrap (amongst other tools) pushes users towards this way of doing things, but it doesn’t really work. You can’t code media queries for all screen sizes, so if you start off with a set of media queries of set sizes there’s already an issue - this is generally how to do it:
That way, media queries get applied only to elements that need them to stop the required layout breaking
Interesting conversation going on here. I tried the bootstrap method just now (I should be working ssssshhh!!!) and styled with a few breakpoints moving backwards although I must start going the opposite direction as @sorinr suggests.
Updated site here. (Really just the landing page so far and have added in background changes as a help for myself)
Many people promote “mobile first” design. In practice this is very much like what you’re doing: design your site/application and add responsiveness where needed. The difference is that it promotes the idea that looking good on a mobile should be the default. Generally speaking, if it is usable on a mobile device it will be usable on a desktop. It just may not make the best use of the space. Designing for desktop, however, often gets you something really unusable on mobile. Sot the “mobile first” design paradigm is that you make something that works on a mobile screen (including paying attention to a touch interface as opposed to a mouse and keyboard) and you use media queries to add styling for large screens.
It’s fine. It’s becoming much less ubiquitous than it used to be - largely because developers are using tools like Angular, React, or Vue instead. If you don’t need all that overhead though, jQuery is a very helpful library.
Some people just hate jQuery. In the internet age, anytime something becomes very popular, some people will trip over each other to rag on it. jQuery is a useful tool in some situations. There’s nothing you can do with it that you couldn’t do without it, but it may be a lot more work. And sometimes there are better tools for specific tasks. But it is a good tool for what it does.