Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Responsive Webdesign | WHAT?!

    So for the last weeks i have been browsing the web/books/videos/etc.... about responsive webdesign. Ethan Marcotte has boosted my hunger about this!

    Fluid grids, fixed grids, boilerplate, grid960, bootstrap, etc.... you name it....it seems endless.

    So i've got a couple of questions.


    /* I love to make my design first in photoshop, it gives me freedom and i can be creative all i want. Now i've been experimenting with grids and am i wrong to say that i'm being limited on creativity with that?

    /* Am I required to use a grid/framework to get into responsive webdesign?

    /* I don't want code to run in the background of my website that i haven't coded to sort things out. It makes me feel like wordpressgenre. (no offense, i just like my freedom)

    /* If it rly requires to use grids/framework, what would you suggest? I've been hearing a lot of good things about bootstrap!

    My goal is to make websites that are responsive, from phone to desktop with as much freedom as i can get and without TOO much interference from other injections such as grids etc...

    Thx to read this wall of text!

    Hopefully someone can help me out!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,665
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    OK, first and foremost: No, you are not required to use grids or frameworks whatsoever. And my honest opinion is that all this bootstrap/boilerplate/grid system crap is mostly redundant, unnecessary bloat to the average web designer/developer. Unless you’re pulling off new major websites on a daily basis this is way too much overhead. Also I think before using systems that someone else has developed one should learn the basics of (semantic) coding from scratch. The problem of many amateur web designers/developers is that they are relying on frameworks and CSS preprocessors (which basically require learning a new coding language) without understanding what they are doing.

    That said, I do also think that a grid as a design pattern doesn’t limit creativity but actually allows for clean and well structured designs. Note that I’m talking about design here, not code, and there is a great article about grid-based design on Smashing Magazine. But it’s your choice whether your design is based on a grid or free-form. You certainly don’t need it for a responsive website.

    Actually, about the only thing you need to make your website responsive is CSS media queries. Don’t let yourself get distracted by all these empty buzzwords. Basic HTML and CSS is all you need, and if you learn it properly you will eventually either create your own reusable templates over time or you will learn when and how to use frameworks appropriately according to your actual needs.

  • Users who have thanked VIPStephan for this post:

    samtaleterapi (09-01-2013)

  • #3
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    HeY VIPStephan, thanks for the extended reply! I took a lot of info from it! But with responsive design, it's always better to use a grid (in Photoshop)? Or not? So that it becomes easier to sort things out later? I don't think if someone wants a responsive design later on that he can just open Photoshop and put things all over the place? Is that what's the grid is for?

    Thx again for the reply!!!

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,665
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    It’s not the point to “put things all over the place” anyway if you have a good design. And with decreasing or increasing viewport size the layout in general will change. On mobile devices you won’t have much of a grid anyway, it’s mostly top-to-bottom there. Also, grid designs are not reduced to responsive websites, don’t mix things that have nothing to do with each other. A responsive website is just a website that “responds” to different device prerequisites (e. g. changing layout with different viewport sizes). A grid design is a design pattern that can be applied to print or web, and there it can be used in any kind of website, be it static or responsive. A grid is just a way to structure content in a certain visual manner. The only thing to keep in mind to create successful responsive sites is that your HTML is structured in a modular way and you keep HTML and CSS (and JavaScript, if applicable) separated so that you can change the layout without ever touching any HTML etc.
    Last edited by VIPStephan; 08-31-2013 at 10:49 AM.

  • #5
    New Coder
    Join Date
    Oct 2007
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts

    px dpi ppi?

    Quote Originally Posted by VIPStephan View Post
    Actually, about the only thing you need to make your website responsive is CSS media queries
    I read the page referred to and the the one it links to: http://css-tricks.com/resolution-specific-stylesheets/

    If I understand the the idea in the link I mention above I dont understand responsive web design (and that might very well be as I have only heard the term a few days ago)

    When I look at my website samtaleterapi.com on my 13 inch macbook pro, my iPad (1. generation) and my iPhone5 - it looks all the same

    The point Im wondering is: if the iPhone has almost the same screen resolution as my macbook (because it has a high ppi count), how is something like

    <link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

    going to help me?

    What I need is different stylesheets for different physical size screens - and that is what responsive web design is about isnt it?

    Is there some crucial point Im dont understand?

    Thanks
    Rasmus

  • #6
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,263
    Thanks
    10
    Thanked 277 Times in 276 Posts
    You need to use the "viewport" meta tag (which is non-standard, but supported in most browsers), to address the difference in ppi on various devices. Essentially, you tell the browser to use a fixed size in "css pixels" for these devices, so that the site is displayed at a reasonable viewing size, not microscopic just because the device has a high ppi count.

    There are various options, but:
    Code:
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    is typical.

    Dave

  • Users who have thanked tracknut for this post:

    samtaleterapi (09-01-2013)

  • #7
    New Coder
    Join Date
    Oct 2007
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tracknut View Post
    "viewport" meta tag (which is non-standard, but supported in most browsers)
    Thanks

    And that really leads me to the next question -
    Can I actually use a responsive design, not much more advanced than the one implied here, across devices (desktop, tablet and mobile) and browsers? Does it work? Does it validate? Or does responsive web design only target a proportion of internet viewers?

    And the browsers that dont support the viewport meta tag, how will they behave? Do they decline gracefully or mess up my site? And if the first is the case, how do I specify which stylesheet should be used there?

    Cheers
    Rasmus

  • #8
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,263
    Thanks
    10
    Thanked 277 Times in 276 Posts
    Quote Originally Posted by samtaleterapi View Post
    Thanks

    And that really leads me to the next question -
    Can I actually use a responsive design, not much more advanced than the one implied here, across devices (desktop, tablet and mobile) and browsers? Does it work? Does it validate? Or does responsive web design only target a proportion of internet viewers?
    It's pretty good. Typically you will place your default rendition first in the stylesheet, and if a browser doesn't support media queries, then they don't get implemented and your default rendition will apply. So you make your default something like you have now, and that's the baseline that would appear on a non-mq device. Yes it validates. Here's an example of a responsive web site that should look decent across a lot of screen sizes - http://www.ncracing.org/index.php

    And the browsers that dont support the viewport meta tag, how will they behave? Do they decline gracefully or mess up my site? And if the first is the case, how do I specify which stylesheet should be used there?
    They will look the same as the design made for their physical resolution. So if you had a phone size device that has 1000px across, your site will be displayed really small, and they will need to pinch-zoom to read it.

    Your other option (to responsive design) is to develop separate sites for separate devices. This is what a lot of us are grateful not to need to do anymore, now that mq exists. You'd sense the device type (ie test specifically "is this an iPhone?") and then use a different stylesheet or even a completely different web page for that device. This is of course infinitely customizable, and has the advantage of being light-weight in the sense that you don't have large images that were intended for large monitors being downloaded on small devices which aren't planning on displaying them anyway. The disadvantage is of course maintenance of all the extra code.

    Dave


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •