responsive web design layout

by zoobie
28 replies
  • WEB DESIGN
  • |
Hi Friends, I am wondering if I need to draw few a different layouts for phones, tablets and desktop?

I constantly having problems that some clients wants us do the coding but they provide the layouts,

I know I can do with fluid layouts but what needed to be done on the graphics as well?

Anyone knows?

Thanks

Proson
#design #layout #responsive #web
  • Profile picture of the author Michael71
    Could you provide some layouts for tablets, phones and desktops?

    I am only using ZURB Foundation and not 3 different layouts...

    Responsive design does NOT mean 3 different layouts...

    3 different layouts would mean 3 coded websites, one for each device (width).
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[8128286].message }}
  • Profile picture of the author webcosmo
    One layout should be optimized for all layouts, that means responsive - your website should be visible and functional across all platforms, and that doesn`t mean changing the graphics, just optimizing their sizes dinamycally.
    {{ DiscussionBoard.errors[8128474].message }}
  • Profile picture of the author Michael71
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[8128537].message }}
  • Profile picture of the author Blakos
    Responsive design is pretty straight forward once you realize it is not a "different" or "new" script, nothing is changed, not even the graphics.

    You just need to you apply some media queries and define changes for different screen size.

    Here is an example:

    Code:
    @media screen and (max-width: 478px) {
    	//Re-style elements to suit screen size
    }
    
    @media screen and (max-width: 740px) {
    	//Re-style elements to suit screen size
    }
    
    img {
    	max-width: 100%;//Keep the max-width at 100%
    	height: auto;//Define height according to screen width
    	width: auto9; /* Internet Explorer 8 fix for width*/
    }
    You may also need tamper with some padding and overflow to get it to respond properly, you can do what I do to divide sections easily and create a division and use "clear: both;" to prevent elements overlapping.
    {{ DiscussionBoard.errors[8133371].message }}
  • Profile picture of the author Michael71
    What is auto9 ? Never heard.

    However... just some media queries is for sure NOT enough to make something responsive.
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[8133506].message }}
    • Profile picture of the author Blakos
      Originally Posted by Michael71 View Post

      What is auto9 ? Never heard.

      However... just some media queries is for sure NOT enough to make something responsive.
      Typo xD

      Its enough to get him understanding what he needs to do.

      EDIT: Lol its a CSS "hack" for IE...was waiting to see what you said, but xD, Google is your friend dude, ask him anything, he will answer you xD

      EDIT 2: Use the code I supplied and use it correctly with a simple HTML5 layout, and it WILL make it responsive.
      {{ DiscussionBoard.errors[8133589].message }}
  • Profile picture of the author Michael71
    oh come on...

    hack for ie? who the hell uses useless hacks for ie?

    learn to code then you dont need "hacks" ...

    and read something about RWD

    Responsive web design - Wikipedia, the free encyclopedia

    and css frameworks, modernizr, html/css specs, ...

    ;-)
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[8134126].message }}
    • Profile picture of the author Blakos
      Originally Posted by Michael71 View Post

      oh come on...

      hack for ie? who the hell uses useless hacks for ie?

      learn to code then you dont need "hacks" ...

      and read something about RWD

      Responsive web design - Wikipedia, the free encyclopedia

      and css frameworks, modernizr, html/css specs, ...

      ;-)
      If your not styling your scripts to support IE 8 etc. you are either lazy, or oblivious of the fact some people STILL run those browsers(or don't you feel better when your script is bullet proof? I do.)

      Also if your using frameworks, your not a confident hard coder like I am and know what I supplied WILL get a BASIC layout responsive(my bad forgot the meta data + html5shiv in previous posts as supplied below) WITH the proper styling(will STILL respond to a degree)

      Code:
      <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <!--[if IE]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
      </head>
      Before you rave on anymore, bare in mind this has triggered me to develop a tutorial on how to hard-code a HTML5 responsive layout from scratch and will link you to it back here when I am done.
      {{ DiscussionBoard.errors[8134636].message }}
      • Profile picture of the author Michael71
        How can you say I am lazy?

        Just because I am using frameworks like ZURB Foundation instead of doing all CSS from scratch?

        How can you say I do not support IE8?

        By the way, I would load an external stylesheet for IE.

        You do not know what I am doing and how I am working... so please stop assuming.

        "You are the good one and I am the bad one"....

        You are right, I am wrong. Thanks for the discussion.

        Originally Posted by Blake Michelutti View Post

        If your not styling your scripts to support IE 8 etc. you are either lazy, or oblivious of the fact some people STILL run those browsers(or don't you feel better when your script is bullet proof? I do.)

        Also if your using frameworks, your not a confident hard coder like I am and know what I supplied WILL get a BASIC layout responsive(my bad forgot the meta data + html5shiv in previous posts as supplied below) WITH the proper styling(will STILL respond to a degree)

        Code:
        <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        </head>
        Before you rave on anymore, bare in mind this has triggered me to develop a tutorial on how to hard-code a HTML5 responsive layout from scratch and will link you to it back here when I am done.
        Signature

        HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
        ---
        Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

        {{ DiscussionBoard.errors[8135139].message }}
  • Profile picture of the author cleanerupper
    Check out WordPress | ThemeForest. This site contains some very good examples of responsive web design in the form of WordPress templates.
    {{ DiscussionBoard.errors[8134787].message }}
  • Profile picture of the author Michael71
    One more thing...

    it's not auto9

    there must be a backslash before the 9 (can't be shown here).

    but I would recommend using conditional comments.

    CSS - Conditional comments
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[8135195].message }}
  • Profile picture of the author Patrick
    I think Michael and Blake should meet over a friendly cocktail meetup and discuss responsive design...
    {{ DiscussionBoard.errors[8135893].message }}
    • Profile picture of the author mojojuju
      Originally Posted by Patrick View Post

      I think Michael and Blake should meet over a friendly cocktail meetup and discuss responsive design...
      Maybe it would lead to a romantic relationship between the two.
      Signature

      :)

      {{ DiscussionBoard.errors[8136728].message }}
      • Profile picture of the author Blakos
        Ok, ok, NOW it is getting weird xD

        I am a hard-coder, hacker and self-taught programmer, I am sure I just have my ways and he has his, I prefer to find my own way to do things, using minimal code and flawless indentation(and if i can do something never done before I will proudly do so)

        I am sure he is the total opposite, most likely more experienced, and taught only how to do it that way.

        I am not here to flame anyone, yet will not be afraid to have my say when appropriate.
        {{ DiscussionBoard.errors[8137690].message }}
  • Profile picture of the author Michael71
    I am "taught only how to do it that way"?

    You don't know anything about me... stop talking.

    Thanks.
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[8137982].message }}
    • Profile picture of the author Blakos
      Originally Posted by Michael71 View Post

      I am "taught only how to do it that way"?

      You don't know anything about me... stop talking.

      Thanks.
      I am entitled to my assumptions upon impression.

      Please do not get offensive, I do not wish to "flame"..
      {{ DiscussionBoard.errors[8137993].message }}
      • Profile picture of the author Michael71
        Blake,

        honestly... I am workin with HTML since 1995 (AMIGA days). I made intranet tools for big companies in 1998/1999, I worked for an "internet startup" 2000/2001 ... bla bla

        However, I am using frameworks because after years of trying different frameworks/templates/own stuff I was sick of starting from scratch all the time.

        My last bigger projects were custom built (no CSS framework involved) and styling all the UI elements and all the other stuff took a lot of valuable time.

        I can do everything from scratch. I did that a lot of times. Small sites, big sites, ...

        But as I said, after trying different frameworks (960.gs,Twitter Bootstrap, 320andup, ZURB Foundation) it was time for me to make a decision.

        Nobody taught me how/what and so on...

        My decision is ZURB Foundation, superb framework... at least for me.

        Farish

        Read this : IE8 and responsive web design. - CSS-Tricks Forums

        IE 8 and mobile = nope

        Originally Posted by Blake Michelutti View Post

        I am entitled to my assumptions upon impression.

        Please do not get offensive, I do not wish to "flame"..
        Signature

        HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
        ---
        Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

        {{ DiscussionBoard.errors[8138636].message }}
        • Profile picture of the author Farish
          Originally Posted by Michael71 View Post

          Blake,

          honestly... I am workin with HTML since 1995 (AMIGA days). I made intranet tools for big companies in 1998/1999, I worked for an "internet startup" 2000/2001 ... bla bla

          However, I am using frameworks because after years of trying different frameworks/templates/own stuff I was sick of starting from scratch all the time.

          My last bigger projects were custom built (no CSS framework involved) and styling all the UI elements and all the other stuff took a lot of valuable time.

          I can do everything from scratch. I did that a lot of times. Small sites, big sites, ...

          But as I said, after trying different frameworks (960.gs,Twitter Bootstrap, 320andup, ZURB Foundation) it was time for me to make a decision.

          Nobody taught me how/what and so on...

          My decision is ZURB Foundation, superb framework... at least for me.

          Farish

          Read this : IE8 and responsive web design. - CSS-Tricks Forums

          IE 8 and mobile = nope
          My whole point was that there is no need to worried about responsive design and ie8.
          {{ DiscussionBoard.errors[8139973].message }}
        • Profile picture of the author Blakos
          Originally Posted by Michael71 View Post

          Blake,

          honestly... I am workin with HTML since 1995 (AMIGA days). I made intranet tools for big companies in 1998/1999, I worked for an "internet startup" 2000/2001 ... bla bla

          However, I am using frameworks because after years of trying different frameworks/templates/own stuff I was sick of starting from scratch all the time.

          My last bigger projects were custom built (no CSS framework involved) and styling all the UI elements and all the other stuff took a lot of valuable time.

          I can do everything from scratch. I did that a lot of times. Small sites, big sites, ...

          But as I said, after trying different frameworks (960.gs,Twitter Bootstrap, 320andup, ZURB Foundation) it was time for me to make a decision.

          Nobody taught me how/what and so on...

          My decision is ZURB Foundation, superb framework... at least for me.

          Farish

          Read this : IE8 and responsive web design. - CSS-Tricks Forums

          IE 8 and mobile = nope
          Tell me this is not RWD, using what I shown in the 1st place:

          Simple Responsive Layout [LIVE DEMO] - by Blake Michelutti

          EDIT:

          Tested on the latest versions of Firefox/Chrome/IE & Android
          {{ DiscussionBoard.errors[8142495].message }}
        • Profile picture of the author longblog
          Originally Posted by Farish View Post

          I am still waiting for somebody to show me what mobile device uses IE 8, since we are talking about responsive design here.

          FYI if you bring up windows 7 mobile that has been fixed and updated with mobile IE9 for this very reason.

          And laptops have much larger screens than what responsive design adjusts for.
          You should design for as many different possible situations as possible. It's frightening how many people never update. The fact that IE doesn't force updates has made me want to drive to Microsoft and personally strangle people more times than I can count.

          Originally Posted by Michael71 View Post

          Blake,
          However, I am using frameworks because after years of trying different frameworks/templates/own stuff I was sick of starting from scratch all the time.

          But as I said, after trying different frameworks (960.gs,Twitter Bootstrap, 320andup, ZURB Foundation) it was time for me to make a decision.

          My decision is ZURB Foundation, superb framework... at least for me.

          IE 8 and mobile = nope
          Would you mind sharing why ZURB is superior? I've never heard of them, and I've just been using 960. I find 960 to be problematic in some situations and have been wondering if there was a better framework out there that's as straightforward as 960 is.
          {{ DiscussionBoard.errors[8155128].message }}
  • Profile picture of the author Farish
    I am still waiting for somebody to show me what mobile device uses IE 8, since we are talking about responsive design here.

    FYI if you bring up windows 7 mobile that has been fixed and updated with mobile IE9 for this very reason.

    And laptops have much larger screens than what responsive design adjusts for.
    {{ DiscussionBoard.errors[8138258].message }}
  • Profile picture of the author kstep
    Here is the video which will explain you everything.

    Responsive Web Design: A Visual Guide | Nettuts+
    {{ DiscussionBoard.errors[8140117].message }}
  • Profile picture of the author Michael71
    I did not say it is NOT RWD...

    however, fact is that IE8 (without additional JS) is NOT able to process media queries.

    Oh, and just a "CSS hack" regarding images does NOT make IE8 understand media queries

    I still like ZURB
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[8142700].message }}
  • {{ DiscussionBoard.errors[8151957].message }}
    • Profile picture of the author Edge360
      Originally Posted by InteliSoft View Post

      if you are going to build a theme, simply use Bootstrap
      I don't think it's the best advice to simply throw resources at people and say use them. These days there are so many frameworks and boilerplates on offer, it really comes down to knowing which to use and when.

      Every new project we get through our [self-promotional link moderated] team, we have to make sure we choose the right tool for the job in hand. Otherwise we risk wasting time on a framework that isn't quite suited for the project.

      You're right in saying bootstrap is a great route to go down for a responsive theme. But honestly, let's show point this guy in a few directions and let him make his own choice

      Zurb Foundation - A great front end framework for fast prototyping, built upon SASS CSS. Well worth looking into.

      As mentioned above, Bootstrap, obviously a great choice rapid development. With it being built with LESS CSS it gives the user a faster way to make changes on the fly. We use it over at EdgeThreeSixty for various projects, but I myself have started leaning more towards SASS development and I'm now starting to prefer Foundation because of this. The usage of mixins and arguments really give it that advantage over Less in my opinion.

      In conclusion there are so many front end frameworks out there right now, it would be unwise to throw people in a single direction
      Signature
      {{ DiscussionBoard.errors[8152089].message }}
  • Profile picture of the author ColorVila
    Try to use bootstrp, which I think is one of the best responsive framework. It will save you lots of time.
    Signature
    PREMIUM WORDPRESS THEMES ON A BARGAIN: COLORVILA.com (70+ themes total for $58)
    {{ DiscussionBoard.errors[8152131].message }}
  • Profile picture of the author Michael71
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[8155169].message }}

Trending Topics