1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Responsive and desktop style switching

Discussion in 'HTML & Website Design' started by JeffreyWD, Jan 28, 2016.

  1. #1
    I am incorporating responsive design into a website. I have defined all the styles for desktop and responsive.
    On desktop I don't want the responsive styles to apply because we don't want our customers (potentially with smaller screens) to be forced on responsive and not be able to switch to desktop when on a desktop.
    On responsive I want the responsive styles to apply but also have the ability to view the site as I would on the desktop.
    I have incorporated this code for the viewport:
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
    I have set my breakpoints like this:
    @media screen and (max-width: 960px){...}
    @media screen and (max-width: 800px){...}
    @media screen and (max-width: 640px){...}
    @media screen and (max-width: 480px){...}


    Is there a way to only make my breakpoints apply on a device?
    Thank you in advance.
     
    JeffreyWD, Jan 28, 2016 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    Okay... you're doing things in a completely fucked up way.
    First off, why are you taking away the opportunity for users to zoom on mobile devices? That is stupid, and not something you should do.
    Apart from that, find a minimum screen size (or another type of measure) that you can allow to show the desktop design, make sure it works regardless of whether or not it's right next to that breakpoint, or on a full-scale 4k screen - the way you do that is using dynamic sizing (em, %) and setting max-widths if needed.
    Then you go ahead and put in different breakpoints when you need to - there should be no need to make separate breakpoints for every conceivable size - just make sure that you resize stuff that might take up too much screen real-estate on smaller screens and so on.
    Last, but not least: there is no difference between "desktop" and "responsive" - that's the whole point of a responsive layout - you use ONE CSS-file with rules set to alter the layout and/or looks based on what kind of device/screen it's viewed at, giving the user all the control of how s/he wants to view your site.

    Start over.
     
    PoPSiCLe, Jan 28, 2016 IP
    deathshadow and ketting00 like this.
  3. tastysites

    tastysites Well-Known Member

    Messages:
    961
    Likes Received:
    53
    Best Answers:
    0
    Trophy Points:
    153
    #3
    This, basically.
     
    tastysites, Jan 28, 2016 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    @PoPSiCLe has it right, and most of the problem is that you are even thinking in pixels, and for certain devices. It's the same flawed thinking as people have when dicking around drawing goofy pictures in paint programs like Photoshop and calling it "design"

    Content dictates markup, content and markup dictate layout. As such your responsive layout "breakpoints" in the media queries should be based on the needs of the CONTENT, and not on some arbitrary resolution you choose before you even HAVE content.

    It's why my approach outlined here:
    http://www.cutcodedown.com/article/progressive_enhancement

    Tells you to start with your content (or a reasonable facsimile of future content) in a flat text editor as if HTML doesn't even exist. You then mark it up semantically (using HTML tags to say what things are, NOT what they look like), then and only then do you go for your screen layout.

    A LOT of people will tell you to start with a "mobile" layout, and I consider that shortsighted. We can target small screen with media queries since any phone/tablet we care about with responsive layout is going to have CSS3. The first style you make should be for devices WITHOUT media queries -- and that means desktop resolution IE8 and earlier. Doing so using EM's so the entire layout is elastic auto-adjusting to the system or browser font size so users (like myself) aren't sent diving for the zoom like they are when people us px out of ignorance.

    Then make it wider and see if there's room to break up single columns into multiple, targeting that with min-width media queries... and make it smaller. Test making the window smaller until the layout breaks, and use that as your breakpoint for a max-width media queries to strip off style you don't need like the columns.

    That's making "designs that fit the content" as opposed to forcing your content to have to be written to the design.

    If you are even THINKING specific sizes in pixels, you've completely missed the point of device independence and responsive layout -- it also likely means you are missing a LOT of the stepping stones to accessibility we've been told for some decade and a half to use like semantic markup, progressive enhancement, dynamic fonts, semi-fluid elastic layout, content first development; things that make turning a desktop layout into a responsive one a no-brainer.

    Admittedly, such things are ignored by the majority of fools pissing out HTML any old way, which is how ignorant mouth-breathers somehow manage to delude themselves into thinking steaming piles of manure like "frameworks" are somehow "easier" or even serve a legitimate purpose.

    As I say a good deal, responsive layout is just the next logical step in accessible design after all the other stuff that most tutorials, writers, and "designers" spent the better part of the last 20 years ignoring. The whole point of responsive layout is to adjust to the available space REGARDLESS of what the device is... if you are thinking specific devices or screen sizes, you've completely missed the point!
     
    deathshadow, Jan 28, 2016 IP