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. User Avatar
    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/

    • User Avatar
      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. User Avatar
    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. User Avatar
    Amit
    Permalink to comment#

    that was just awesome !

  4. User Avatar
    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. User Avatar
    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.

    • User Avatar
      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. User Avatar
    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…

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag