Grow your CSS skills. Land your dream job.

Mobile development/responsive design. Where am i going wrong?

  • # December 17, 2012 at 9:17 pm

    My very first site, and I am trying to include smartphone support. I tried to do all this without having a separate css file but rather with media queries. Where am i going wrong? Link to the [site](http://foursquaresummiteast.org/ “link”).

    # December 17, 2012 at 9:58 pm

    Firstly, it seems to be working responsively on my end using Chrome. All I see is a single style-sheet with media queries at the bottom so what are you actually asking or did you solve it? #confused. ;)

    Usually the reasoning behind wanting a single file is to save HTTP requests and bring up performance, however in your case you are using a 9.9mb size background image and an auto-loading youtube video. You can make it as mobile “responsive” as you like but if you don’t account for performance, load time and especially bandwidth, your still not supporting mobile users.

    Take a look at some image optimization tools, css/javascript compressors etc. Then worry about http requests and responsive design.

    # December 17, 2012 at 10:01 pm

    What I am saying is that particularly on smartphones, it for lack of better words, seems zoomed out? Just a smaller version of a compressed chrome window.

    # December 17, 2012 at 10:09 pm

    You need to use the viewport meta tag so that mobile devices know not to zoom the page out:

    <meta name="viewport" content="width=device-width, initial-scale=1">
    # December 17, 2012 at 10:28 pm

    Do you have a smart phone? I prefer the full site always.

    # December 17, 2012 at 10:42 pm

    @joshuanhibbert you sir are fantastic.

    # December 17, 2012 at 10:51 pm

    @matt_sanford Glad I could help!

    @Eric Responsive design done correctly will still give you access to the full site, no matter then device you are on. The layout will just be more device friendly.

    # December 18, 2012 at 6:32 am

    Couple of things I would recommend @matt_sandford.

    Check out FitVids.js (by Chris Coyier & Dave Rupert) – will help downsize/upsize that video.

    Hide, or move the twitter & social links down on smaller screens/mobile. The content should not be a few screen scrolls away, it should come first and then be followed up by less relevant stuff.

    Maybe look at an alternative menu for the nav when on mobile/small screens as it will take up a lot of space. Turning it into a dropdown using JQuery can be a good solution.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".