Responsive Design ProTips for Front-End Developers

So you want to create a bad ass responsive design website but don’t know where to begin? It’s frustrating you because you’ve been developing websites for years… dare I say even flash sites. Have no fear, Delphic Digital is here to calm you down and show you the way. I’m not going to get technical, this is more of an introduction for intermediate developers. You should already know how to include JavaScript and CSS files, for instance.

First things first, what is a responsive website? You can always Google it, but in case you don’t want to open up another tab (you’re already reading this anyway), responsive sites are developed to work across many devices. This includes mobile phones to large computer monitors, or even HDTVs.

What Front-End Developers Need to Know

Modern browsers with support for CSS3 can natively render content based on screen resolution. They are called Media Queries. I won’t get into detail about them because you should read how to use them on your own. They are the key to responsive development. Are the creators of media queries genius? Probably. Just think about this: Want your site to morph into something different for phones without having a separate website? Read about media queries. GO. Do it. You’ll be happy and will become a better developer.

What about JavaScript?

Ok, so media queries are CSS based and allow you to change styles, but what about all your JavaScript code? You JUST wrote this awesome calendar web app with jQuery, but you don’t want it on phones for whatever reason. Maybe your boss doesn’t want you spending too much time and effort on mobile. Or maybe your client doesn’t want a complicated mobile site, but they wanted a complicated desktop site. You don’t agree, but whatever, you have to re-develop your calendar app for mobile. But in a responsive site, all your JavaScript code is in one place, across all media contexts. How can you swap out your calendar app for another based on device or resolution?! Don’t worry, Delphic Digital is here to help.

Browsers don’t have native support for responsive javascript, so we need to include a library in our project that adds it. The one I like and have been happy with is onMediaQuery. It uses native media queries to trigger JavaScript! Genius. How can it do this, you ask? Well, you can always follow the link I already posted, but here’s a brief explanation:

You add a font-family into your CSS for each of your media contexts. For instance a font-family: ‘mobile’ would go into your mobile media query.

@media screen and (max-width: 320px){ 				html { 				font-family: "mobile"; 				} 				}

When your browser recognizes this media, it will set the font-family accordingly. Neat! Just make sure you set your real font in the body tag to override this, because “mobile” isn’t a real font. We aren’t using it to actually style anything. Now you can define your contexts for onMediaQuery by using these font families:

var queries = [ 				{ 				context: 'mobile', 				match: function() { 				console.log('Mobile callback. Maybe hook up some tel: numbers?'); 				// Your mobile specific logic can go here 				initMyAwesomeMobileOnlyFunction(); 				}, 				unmatch: function() { 				// We're leaving mobile 				cleanUpMyMobileFunctions(); 				} 				} 				];

These examples came straight from the onMediaQuery developers page (mostly). What can I say – they are useful and straight to the point.

You can run a function when contexts are matched or unmatched. It’s very useful and provides a nice and clean way to trigger JavaScript. With this way, your max-widths and/or min-widths are defined in one place, the CSS file. This makes it easy to maintain and develop and why I’m a fan.

CSS media queries and the onMediaQuery JS plugin are the starting tools for you. Use them, my friend. Play with them, and stay tuned for even more techniques on responsive development.

You’re welcome.


Jeff Mills is a Senior Front-End Developer at Delphic Digital. He is raising his 2 year old son to be a computer wiz. He enjoys robotics in his free time, and watching movies and tv shows with his family on his homebrew Home Theater PC (HTPC).

« Prev Article
Next Article »