responsive web design layout

by 28 replies
32
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
#website design #design #layout #responsive #web
  • 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).
  • 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.
  • Responsive web design - Wikipedia, the free encyclopedia
  • 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.
  • What is auto9 ? Never heard.

    However... just some media queries is for sure NOT enough to make something responsive.
    • [1] reply
    • 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.
  • 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, ...

    ;-)
    • [1] reply
    • 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.
      • [1] reply
  • Check out WordPress | ThemeForest. This site contains some very good examples of responsive web design in the form of WordPress templates.
  • 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
  • I think Michael and Blake should meet over a friendly cocktail meetup and discuss responsive design...
    • [1] reply
    • Maybe it would lead to a romantic relationship between the two.
      • [1] reply
  • I am "taught only how to do it that way"?

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

    Thanks.
    • [1] reply
    • I am entitled to my assumptions upon impression.

      Please do not get offensive, I do not wish to "flame"..
      • [1] reply
  • 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.
  • Here is the video which will explain you everything.

    Responsive Web Design: A Visual Guide | Nettuts+
  • 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
  • if you are going to build a theme, simply use Bootstrap
    • [1] reply
    • 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
  • Try to use bootstrp, which I think is one of the best responsive framework. It will save you lots of time.
  • Foundation: The Most Advanced Responsive Front-end Framework from ZURB

    Check out yourself
    • [1] reply
    • Cool, thanks for the link. This line right here really excites me!

      Do you happen to know off-hand any documentation that explains how this is done? I've been designing and coding for years, but I've kind of been asleep at the wheel with the whole mobile/responsive movement.

      edit: Oh my gosh! I clicked this link from the foundation site for a national geographic site built on the framework and it's AWESOME! I need to learn how to build sites like that!
Join the discussion

Next Topics on Trending Feed

  • 32

    responsive web design layout

    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,