19 Feb 2013 Responsive development – The basics

Posted in Tutorial, Web Development. 8 Comments.
Resonsive_Basics

Responsive design and development really seems to be the flavour of the past year. CSSMania are prioritising responsive designs over all other submissions and there are even companies with the sole USP of building sites that respond to the device they’re viewed on. There is a tendency, however, for this kind of technical hype to alienate even the experienced developer. With so many responsive ‘dos and don’ts’, frameworks and convoluted tutorials out there it’s not hard to feel somewhat overwhelmed by this new ‘technology’. The truth is, you don’t have to worry! Responsive development simply means adjusting your CSS properties for when the screen width gets a bit too small to display your beautiful 980px layout. It’s even a little bit fun – watching your page jump around as you play with your window width gets addictive. Trust me. Let’s see how it’s done.

First things first, if you want a really nice, comprehensive responsive foundation to work with from the start of your project, I recommend trying out frameworks such as http://foundation.zurb.com/, http://gumbyframework.com/ and http://lessframework.com/. These grid approaches to your CSS structure really make for an adaptable, logical and thorough coding approach. However, chances are you’re happy with your project so far, it looks great on your desktop and you want to add some provisions for mobile visitors. I don’t blame you! Luckily I’ve found an awesome boilerplate for doing just that by Paulund. Check it out here:
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles In Here */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles In Here */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles In Here */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles In Here */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles In Here */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles In Here */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles In Here */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles In Here */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles In Here */
}

Simply add that to the bottom of your stylesheet and apply different styles to the same classes you used for version 1 of your project.

A few things to note: You probably want to get rid of all animation for viewing on devices like iPhones and other mobiles. The user experience with CSS animations on a mobile device isn’t great and gets a little annoying. Keep your layouts clean and straightforward on smaller devices. Remove animations by adding this to the appropriate declaration:
* {
/*CSS transitions*/
-o-transition-property: none !important;
-moz-transition-property: none !important;
-ms-transition-property: none !important;
-webkit-transition-property: none !important;
transition-property: none !important;
/*CSS transforms*/
-o-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
/*CSS animations*/
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}

8 Responses to “Responsive development – The basics”

    • Matt

      Hi Prajith,

      Thanks for the feedback. We’re glad you found it useful. Remember it is best to start your projects with mobile in mind though :)

      All the best,

      Matt

      Reply
  1. Lai Gregersen

    I’m amazed, I have to admit. Rarely do I come across a blog that’s both educative and interesting, and let me tell you, you have hit the nail on the head. The problem is something which not enough folks are speaking intelligently about. Now i’m very happy I came across this in my hunt for something concerning this.

    Reply
  2. Amsu Muhammed

    It is really useful for beginners. Hope u will post a few more tips like this.

    Best wishes
    Amsu Muhammed

    Reply
    • Matt

      Thanks Amsu. Yes, we’ll be posting a lot more tutorials like this. Glad you found it useful.

      Matt

      Reply
  3. Vinny

    Hi Matt,

    Wondering if you can spare a couple of minutes for an in-experienced developer. I am using WordPress Twenty Twelve Theme. I have created a child theme Style sheet that overwrites the main style.css sheet. Twenty Twelve is a responsive theme but where I have no clue is this:

    Where I use the child theme style sheet to add my own div’s and styling to my pages – I would like to know how I go about styling the child theme so that it becomes responsive just like the style.css main style sheet. I hope you understand my question.

    I need to make my additions to the project responsive but I am unsure of how to go about this. Do I need to create 3 or four child style sheets for the project? Or is there an easier way.

    I look forward to hearing from you.

    Regards

    Vinny

    Reply
    • Matt

      Hi Vinny,

      Good question! The answer is yes, all your responsive styling can go in your main child theme’s stylesheet.

      Let us know how it goes! :)

      Matt

      Reply

Leave a Reply

  • (will not be published)