Going Responsive - Media Queries (CSS) vs. JavaScript
Now accommodating desktop, 7" tablet, and mobile browsers.
I spent a few hours tonight changing things around here, most notably incorporating Google Web Fonts and making the site responsive using CSS media queries. That means it’ll render differently on desktop, tablet, and mobile. Try it yourself by resizing your browser window.
This was the first time I’ve used media queries. I’ve worked on a responsive design at work powered by JavaScript, meaning we’d determine the page dimensions via JS and swap out things like JS functions, stylesheets, etc. as necessary. I think my takeaways are:
- If you have a JS-heavy site that needs to fire different functions based on device/layout, use something like adapt.js and its callbacks.
- If you just want to degrade structure/styles simply without a lot of JS changes, use media queries.
When I refer to “JS-heavy site” I mean a site with a lot of functional differences between screen sizes: interactions, forms, AJAX, i.e. things that can’t be handled by a simple hiding/showing of elements. A site like this blog is probably the ideal candidate for media queries, or most blogs in general with a generally redundant page structure.
If I had to guess most non-massive websites probably fall within category #2.