We start out with playing with our blog post module, fiddling around with spacing. We also add the little colored square in the upper left of the module, a visual signifier of the type of content that it is.

The next change we make is to lessen some of the outside gaps at narrower screen sizes. On wide screens, the content is 80% wide (10% width edges) but it feels better to go more like 90% on smaller screens (5% width edges).

We add in a little transition for when that media query hits, which can be a really fun designer-y trick. I like it in this video, but eventually this got pulled from the design. It can get choppy when there is a lot more content on the page and rather distracting.

We alter our grid system to have a breakpoint at the smallest size. It's super easy, we just stop floating the columns and make them width: 100%; Yay for not overthinking grids! We battle some specificity problems on the way.

We open up the real iOS simulator to check out the grid working on a "real" mobile device. We struggle a bit finding the proper meta tag, but ultimately go snag the correct one off CSS-Tricks.com. It works! But of course we have some positioning issues we'll need to work out. For the record, that meta tag is:

<meta name="viewport" content="width=device-width">

We tinker tinker tinker with spacing and sizing until things look OK. Things are looking pretty nicely responsive by the end!

Comments

  1. raik
    Permalink to comment#

    The iOS simulator is hidden in the app itself in new xcode. You need to make an alias and bring the alias outside the app then spotlight will find it. The new location is:

    /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone Simulator.app

    More information at:
    http://osxdaily.com/2012/07/09/ios-simulator-without-launching-xcode/

    • Chris Coyier
      Permalink to comment#

      OK Cool I’m not crazy. Since then I’ve just left the icon permanently in my Dock so I always have one-click access.

  2. karlwills7@gmail.com
    Permalink to comment#

    Hey Chris,

    You can Zoom in/out when using the IOS simulator by holding down the Option key and dragging your mouse.

  3. Amit
    Permalink to comment#

    that was just awesome !

  4. Juan Diego Garcia Quiroga
    Permalink to comment#

    I love this screencasts Chris!
    You really make this things looks much easier than they sound.
    Keep it coming!

  5. marinade
    Permalink to comment#

    I am a windows user and had the hardest time trying to get android sdk to work (it worked but accessing the unique url through the local host was an issue I could not resolve)

    So I found something else which is light and easy for anyone to try
    an open sourced browser based, platform agnostic mobile application development and testing tool.

    • Roy
      Permalink to comment#

      I’m also a Windows user, I just use my phone HTC One at this time. I connect to the WAMP server over my WiFi.

      This is how

      I use WAMP and just edit the Apache httpd.conf

      # Controls who can get stuff from this server.
          #
      #    Require all granted
      #   onlineoffline tag - don't remove
           Order Deny,Allow
           Deny from all
           Allow from 127.0.0.1
           Allow from ::1
           Allow from localhost
      

      Just change the

      Deny from all   
      

      to

      Allow from all
      

      Then just browse to your WAMP server using the IP address of your PC…

      Easiest way to find your IP is to open a command prompt and type

      ipconfig 
      

      type it in to your phones browser should look something like this 192.168.0.1

      I use the same method using laptops and tablets.

      Hope this helps…

  6. Roy
    Permalink to comment#

    I’m a Windows user, I just use my phone HTC One at this time. I connect to the WAMP server over my WiFi.

    This is how

    I use WAMP and just edit the Apache httpd.conf

    # Controls who can get stuff from this server.
        #
    #    Require all granted
    #   onlineoffline tag - don't remove
         Order Deny,Allow
         Deny from all
         Allow from 127.0.0.1
         Allow from ::1
         Allow from localhos
    

    Just change the

    Deny from all 
    

    to

    Allow from all
    

    Then just browse to your WAMP server using the IP address of your PC…

    Easiest way to find your IP is to open a command prompt and type

    ipconfig
    type it in to your phones browser should look something like this 192.168.0.1

    I use the same method using laptops and tablets.

    Hope this helps…

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.