the Blog

Tips & Tricks

Responsive Development by CSS and/or jQuery

Posted on November 8, 2012 by Michael Rosario  |  Comments

If you decided to fore-go the use of a responsive framework/boilerplate. Here is a quick way to get you started.  This approach might be more work, but it may be fruitful in terms of broadening your skills and understanding of responsive design/development - not to mention a more light-weight code in that you only use what you need.

First, using CSS, we can now add the following statements that specifically target browser size or display area:

/* CSS for all browser goes here */
@media only screen and (max-width900px{
/* CSS for browser screen with 900px and below goes here */

@media only screen and (max-width600px{
/* CSS for browser screen with 600px and below goes here */

So you can create multiple definitions of style… amazing!  There’s also specific CSS code to target the size of the device screen:

@media only screen and (max-device-width480px
/* CSS goes here */

Here are other examples for iPad, iPhone, Android and detection of landscape/portrait modes:

@media only screen and (device-width768px) and (orientationlandscape{
/* CSS rules for iPad in landscape orientation */

@media only screen and (min-device-width320px) and (max-device-width480px{
/* Android, iPhone CSS rules here */

Using jQuery (Javascript) is another way.  jQuery can detect the size of the window or specific elements in your screen.  In my case, I have the following DIV element:

#SiteWrapper { width: 100%; max-width: 960px; margin: 0 auto; } 

This encloses all content of my HTML and it resizes only when the browser screen is less than 960px.

For jQuery, we need to take into consideration of two things: (1) Page load and (2) User changing the size of the browser:

/* JQuery code here when page loads */

/* Detect when user or the browser size changes */

/* When #SiteWrapper DIV is less than 960px */

/* When #SiteWrapper DIV is less than 600px */

So, now you know how to detect the size of the browser in jQuery. Now what?  I use the following code:

/* This replaces the class */

/* This add the class (for multiple classes) */

/* Changing the CSS  */

$("#SiteWrapper A").animate({'font-size':'20px'},1000);
/* Animating the elements via CSS  */ 

I tend to use both jQuery and CSS when creating responsive sites.  I hope that this post can get you started. I believe that this is the future of web development and It looks like I’ve got a lot of work to update all my sites to responsive UI.

comments powered by Disqus

Other Recent Blog

Meta Tags for Social Media
Posted on January 5, 2014  |  Comments We have meta tags for keywords, descriptions - now we have additional meta tags for sharing specific information for Twitter, Facebook, and Google+. The list goes on.