I should probably be a little more specific. I love writing the CSS that produces a responsive website. I've been reading up on responsive design since it's inception and then popularity. And why wouldn't it be popular? A massive percentage of browsing these days is done on the ever faster and better mobiles. Responsive design takes the middle-ground between a website built for the desktop, and an app built for the phone. It covers both with beauty and simplicity!
Of course, when I say simplicity I mean it's simple when you know how. But the fundamentals to create a responsive website are pretty basic thanks to CSS media queries, and the plethora of responsive toolkits you can find on the web today (Bootstrap, Foundation, Skeleton to name but a few). In fact, if you want to go ahead and don't want to do it yourself, dropping any of these into your site (with a few tweaks) will see you all responsive in no time!
If you're like me, however, and like to get your hands dirty then that's pretty easy too. I've not really had much of a demand to create a responsive site and seeing as a lot of my older sites are just horrible to go back to, I've not had the will to try (especially with this one... coming soon!). But, in a new project I'm undertaking I figured I might as well get the basic foot in the door. So I did!
The website in question is called Morecambe Sunsets, and for a bit of a back story I walk to work along a sea front in Morecambe, UK everyday and am privy to some spectacular views. But because the bay heads out to the west, it's also a really beautiful place to see some amazing and often dramatic sunsets. I've been taking photos of them for a while so decided to build a site dedicated to it. You can check it out here. I'll start off by saying it was built with Twitter Bootstrap, so not all the responsive is mine. I also put Flat UI on top of Bootstrap to try that out too, and it's lovely. But it wasn't quite there so my first delve into responsive CSS commenced!
What Did I Do?
Actually, this bit is probaly going to be the shortest part of this article. I basically just added a layer of responsive design, focussing on media queries to make everything that little bit neater for mobile users. If you're really knew to responsive CSS then this is probably a good place for you to start too. Do some reading on it, there are loads of resources out there. One thing I did find was that, for me at least, it was much easier to build on top of what I already had to turn a desktop site into a mobile-friendly one. For larger projects it would be much easier to start with mobile, or coincide the design process with both desktop and mobile in mind.
On to some code! The basic code for a media query detecting is as follows:
@media all and (max-width: 979px) {
/* Your CSS here */
.container {
padding: 10px
}
}
So what does this do? Well, any styles you put in that section will only apply when the width of the browser window is LESS that 979 pixels. You can change that number to anything you want to target specific widths. You can place a few with different widths one after another so that as the browser gets smaller the styles change again and again. The first bit that says "all" refers to the stylesheet type, so you could just use "screen" or "print" to target specific devices.
However, at this point there is a problem. If you add these queries and look at your site on mobile you may notice that your site still looks as it did before with the mobile browser trying to fit as much as possible on the screen, which makes the media queries a little redundant. But don't panic, there is a solution!
All you have to do is tell the browser that you've catered for them by adding a meta tag to the head of your page with the following name and value:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
This tells the mobile browser that it should use the devices natural width for the viewport and not attempt to scale the content. Et voila! Check out Morecambe Sunsets in your desktop browser and resize the viewport. You'll see some stuff shrinks, moves about and generally attempts to fit in to the space provided as best possible.
One thing to note, it's always best practice to NOT hide content with media queries. Everything on your page should be there for a reason, and hiding it with CSS does not stop it loading so you're technically adding bloat to your page needlessly. Granted, there are times when you may have to do this, but try to keep it to a minimum where possible. Have fun!
Comments (3)