www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 23

Thread: Fixed layout compatible with all browsers and devices

  1. #1
    Join Date
    Apr 2014
    Posts
    2

    Fixed layout compatible with all browsers and devices

    Hello all!

    I've been trying to design a website for a couple of weeks now and it's been really stressful wanting to learn everything about html/5 and css/3 (I've just started learning), and I'm being pretty impatient.

    What I've done is built a basic HTML5 structure with a navigation inside a header, you lose sight of the header/nav as you scroll down.

    What I would like which I've failed at is an interface compatible with all browsers and devices, a design that adjusts to the users browser size not matter what browser/device. Which also allows zooming in on smaller devices like tablets/iPhones etc. Every aspect of the site needs to be fixed in place (at the moment my navigation moves up and down when I'm resizing the browser) where the user can move around and zoom in and out.

    I've also read into the benefits of em, so I set the default font to 100%, and all the headers/paragraphs etc I set to em accordingly. Would it be wise to set all fonts to em and the rest of my website like margins etc to percentages?

    Thanks for the help in advance!

  2. #2
    Join Date
    Mar 2012
    Posts
    1,741
    The only way to have a fixed layout that is compatible (i.e. does not require horizontal scrolling) with all devices is to design for the smallest circa 240 pixels display width. Which would severely restrict the content and appeal of your site! To encompass the range of devices used to access the web, you need to use a range of techniques:

    1. Media-specific style sheets (or media queries) to segment the target display widths.

    Note: These can be segmented by "width" (responds to window re-sizing) and/or "device-width" (the actual width of the screen). Using "device-width" produces more subtle results. I.e. A page can seem fixed-width to large screen tablets and PCs (avoiding unsightly shuffling of the content), whilst accommodating smaller mobiles and hand-held devices as well.

    2. Fluid design techniques where graphics dynamically re-size and text re-formats to accommodate the display width.

    Notes:
    a) With resizable images, it is best to set the width to a percentage of the container, but do not set the height. That way the image will automatically retain its aspect ratio.

    b) Beware of using large resizable images - they can take an age to download and resize on low-power mobiles!

    3. Lesser content for smaller screen devices. This may involve:
    a) Suppressing images, or providing smaller versions of them.
    b) Providing simplified navigation.
    c) Providing abbreviated text.

    Note: Beware that client-side techniques only affect the content displayed. They do not affect the content downloaded. So the devices may download all the images and text, including that which is not displayed!!! To avoid this, you need to use server-side techniques (PHP) to only send the appropriate content to a device, depending upon the "device-width".

    4. Test your layouts on a range of screens and devices.

    Note: For test purposes it may be more convenient to segment the displays by "width" even if the live environment is intended to use "device-width". That way you can see the effects by resizing the display window. In that respect, media-specific style sheets may be preferable to media queries, as they are declared in the <head>, rather than used in-line in the <body>.
    Last edited by jedaisoul; 04-18-2014 at 07:56 AM.

  3. #3
    Join Date
    Mar 2014
    Posts
    19
    jedaisoul pretty much covered it all.

    there is no one way to rule them all for building sites to fit all devices, especially thinking of some backward compatibility as well as whats around the corner - screen size is getting massive if you think of the ipad skinny and a galaxy s2 which have screen widths of 480 and 2048.

    Pick a range of dimensions to break at and switch the layout accordingly - wordpress is a good example and can point in the right directions. As for what stages to break at - imo they depend on what your content and designs are like, and whats current. 5 years ago screen sizes where tiny by comparison to what you have today.

    beyond that.. i am but an echo..

  4. #4
    Join Date
    Apr 2014
    Posts
    56
    Also remember that html 5 and css 3.0 wll not be compatible with some older versions web browsers. This especially concerns Internet Explorer versions below 9.0 as they are still widely used by people. For older Internet Explorer you can make conditional classes:

    <!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
    <!--[if IE 7 ]> <html class="ie7"> <![endif]-->
    <!--[if IE 8 ]> <html class="ie8"> <![endif]-->
    <!--[if IE 9 ]> <html class="ie9"> <![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->

  5. #5
    Join Date
    Mar 2012
    Posts
    1,741
    Using classes to distinguish IE versions is more flexible, but can be cumbersome. So, instead, I rely on the fact that IE8 and below:
    1. Are principally used on PCs with screens 1024x768 or larger.
    2. Simply ignore statements with media-specifics in them.

    Therefore I set the default style sheet to be that for PCs, and the media-specific style sheet(s) deal with the rest! E.g.
    Code:
    <!-- default style sheet - Used by PCs and IE8 and below -->
    <link rel="stylesheet" href="style.css" title="styles" type="text/css">
    
    <!-- media-specific style sheet(s) - ignored by IE8 and below. -->
    <link rel="stylesheet" media="screen and (min-width:480px) and (max-width:799px)" title="styles" href="mobile.css" type="text/css">
    <link rel="stylesheet" media="screen and (max-width:479px)" title="styles" href="handheld.css" type="text/css">
    <link rel="stylesheet" media="handheld" title="styles" href="handheld.css" type="text/css">

  6. #6
    You guys' tips are somewhat helpful, but may not helpful to me. I am developing WordPress theme, but do not know how to make the background videos works on mobile devices, do you get some ideas?

    Here is my theme: http://www.mageewp.com/onetone-theme.html, it is free to download and use.

  7. #7
    Now, no offense, but you're completely missing what responsive layout, or even modern layout concepts are even about. The whole IDEA is to re-arrange to best fit the available space, creating a "fixed" ANYTHING, be it width, positioning, or even height, is the antithesis of that and bad web design. A decade ago I was calling fixed width layouts "crappy little stripes" -- and to be frank, the concept of fixed layouts has only gotten worse and less useful as time passes.

    Even THINKING about a single appearance across all devices is broken thinking and garbage methodology -- and why a lot of common practices like crapping out a PSD and having the giant set of brass to call it a layout (and the people who do so having an even bigger pair calling themselves "designers") is effectively putting the cart before the horse, and is a completely back-assward approach to developing a website.

    If you are aghast at the idea of your content re-arranging itself to fit the screen, or things *oh noes* scrolling off the screen, you may want to consider doing something other than building a website. That's what they're supposed to do, and the handful of sites that don't are buggy unusable inaccessible train wreck laundry-lists of how not to build a website.

    How much have you learned on document structuring and semantics? Not a whole lot I imagine since you mentioned HTML 5. There's a process to building a website, and the most important question is: "What's your CONTENT?"

    The most important thing (despite your typical PSD jockeys claiming otherwise) is your CONTENT, as it should be dictating your markup, and the content combined with the capabilities of each different user-agent (browser) and device should dictate the layot.

    You start with your content in a flat text editor, and mark it up semantically in a RECOMMENDATION doctype. Do yourself a HUGE favor and forget all the pointlessly redundant code bloated nimrod bekaptah allegedly semantic new tags in HTML 5, and use PROPER orders of headings to provide structure and normal semantic markup...

    Proper orders being that the H1 is the heading under which everything on the page is a subsection, which is why the best candidate for the H1 is the site title in most cases. (no matter what the black hat SEO scam artists try to tell you) -- just like a newspaper or a book; while the presentation is different on the home page, what's at the top of EVERY page of the paper? The name of the paper. H2 are the start of subsections of the H1, H3 are the start of subsections of the H2 and so forth -- which is why skipping over heading levels (h5 after a h2 for example) is gibberish... and a LOT of developers miss that semantically a horizontal rule (HR) is a change in topic where a heading is unwanted/unwarranted -- just like in professional writing. This of course is why HTML 5's idiotic "SECTION, ARTICLE, NAV and FOOTER" are redundant code bloat that serve no legitimate purpose apart from the same data-scraping idiocy as "microformats" before it.

    Really though that's what semantic markup is, GRAMMAR. If you aren't using the tags like they were grammar... well... as I've said several thousand times the past decade:

    "If you choose your tags based on their default appearance, you are choosing the wrong tags for all the wrong reasons."

    Logical heading orders, paragraphs around grammatical paragraphs (not images, not fragments, GRAMMATICAL PARAGRAPHS), UL/OL around lists of short items (if it's big enough to warrant a header, it's not a list), tables around tabular data (and not just to make columns), etc, etc...

    That content and markup combined with the size and cababilites of supported devices then dictates your CSS layoutS -- PLURAL because you shouldn't be making any single fixed layout. The entire reason we have a MEDIA attribute on LINK to target specific media types, and media queries to build responsive layouts is the idea that one fixed design CANNOT meet the needs of all users or devices. That's the POINT!

    ... and yes, that can make it very hard to do; more so if you try to do things that to be frank, have no business on websites in the first place -- like 99% of the garbage people vomit onto websites with "frameworks" like jQuery, "grids", bloated garbage like bootstrap, etc, etc.

    Bottom line, anything you make "fixed", even if you scale it size-wise to the device, is going to piss off a user somewhere at some time. Anything you make for the smallest of smartphones at 192x240 is going to piss off a user on a desktop like mine at 2560x1440 and vice-versa. It's why "fixed" design should have gone the way of the dodo fifteen years ago.

    No matter how many PSD jockeys and people still sleazing out HTML 3.2 with 4 tranny or 5 lip-service around it might try to tell you otherwise.

  8. #8
    Oh, and sorry if that seemed 'harsh', but that's the truth of the matter. Truth often hurts. A lot... no, a LOT.

  9. #9
    Join Date
    Mar 2012
    Posts
    1,741
    @deathshadow

    I have a lot of sympathy for much of what you say, but some of your comments seem as myopic as the people you slag off. Why? Because building web sites is a means to an end. It is not an end in itself. The end is making money, and you achieve that by meeting (or exceeding) the client's expectations. So the content may drive the mark-up, but it should not drive the design. The user's brief does that.

    Hence, whilst I agree that PSD's do not belong in a live site, they are a tool for communicating what the site is supposed to look like. Now, I agree that one-design-fits-all is no longer appropriate. So you may need three or four PSD's to encapsulate and agree what the design should look like on a range of displays.

    Besides which, having the content shuffle about to fill the screen may make sense to a developer, but is naff. It looks terrible. You are extremely fortunate if your clients accept the answer "it is supposed to do that"!

  10. #10
    Quote Originally Posted by jedaisoul View Post
    Besides which, having the content shuffle about to fill the screen may make sense to a developer, but is naff. It looks terrible. You are extremely fortunate if your clients accept the answer "it is supposed to do that"!
    That's what responsive layout IS... So... you're saying don't build responsive layouts?

    To me there's WAY too much emphasis right now on worrying about appearance before there even is content... or markup... or a working layout for that content. Even worse, most of it seems to have NOTHING to do with actually making the sites useful, quite the contrary.

    We're seeing it across the board in software really -- the artsy fartsy "design" folks are destroying the functionality of pretty much everything, from OS interfaces (win8, Unity, OSX) to the point the functionality isn't as good as twenty years ago... to browser interfaces being artsy AND dumbed down to the point of being crippled. See the pathetic crippleware known as Chrome with the Opera logo slapped on it (there's a reason I'm still using 12.1x), Chrome itself being a trip in the wayback machine to IE4 Mac from a UI standpoint, and the OH SO POPULAR Firefox 29.

    It's a bit like when a publishing house let's it's writers be their own editors, then wonders why they have a sales slump and bad reviews... The artsy fartsy side of things is being given WAY too much control, to the point that everything is starting to reek of "Functionality? What's that?"

    Though being semi-retired, I do have the luxury of telling people who want to excrete out a useless website where to stick it -- something I realize those still having to BOHICA when dealing with clients can't do. Still, it's annoying that 'clients' who want websites don't actually want to do what it takes to be successful, are way too easily swayed by flash over substance, and even more annoying is that the majority of people working in the web development industry are little more than predators preying in the ignorance of such clients. See the majority of PSD jockeys who don't know enough about HTML, CSS or accessibility to be designing a blasted thing, how SEO has been turned into a cottage industry filled with scam artists, we have PHP developers who don't know enough about HTML to be having their PHP output anything, and HTML/CSS developers who have their heads so far up 1997's rump they caught up with Lemmiwinks.

    It all seems to boil down to a lot of 'developers' and 'designers' operating on the fly-by-night attitude of This here's a story 'bout Billy Joe and Bobby Sue...

    Then we wonder why the majority of sites fail in their first year or descend into web rot, ending up more of an expense than an investment. RIGHT.

    I'm ranting again aren't I...

  11. #11
    Join Date
    Mar 2012
    Posts
    1,741
    Quote Originally Posted by deathshadow View Post
    That's what responsive layout IS... So... you're saying don't build responsive layouts?
    I'm saying responsive is a tool. Used wisely it can achieve better results on a range of devices than a static design. But the key point is what is meant by "better results"...

    Clients pay for web sites to sell their products. Web sites sell products if users like them and use them. So user response defines "better results". And, yes, that undoubtedly involves usability, and getting the content you need on the screen, irrespective of the screen size. But that is not the be-all and end-all.

    Users like aesthetically pleasing designs, and seeing the content shuffling round is not aesthetically pleasing. It is naff. But media specifics give us an alternative: making the layout dependent on device-width instead of width. That is far more subtle. So, no, I'm not saying "don't use responsive design". I'm saying, use it intelligently, sympathetically, aesthetically.

  12. #12
    Quote Originally Posted by jedaisoul View Post
    Users like aesthetically pleasing designs, and seeing the content shuffling round is not aesthetically pleasing.
    So... users are now randomly resizing their windows, as that's the only way anything would "shuffle around"?!? I think not... or are you referring to something else? I don't think you're quite grasping it, either that or you spend WAY too much time resizing your browser window. Oh noes, the number of words on a line changed... I'm sorry, but as complaints about layouts go... that just doesn't make any sense.

    Semi-fluid layout exists for a reason, the W3C via guidelines like the WCAG says don't make fixed width layouts for a REASON. With the plethora of screen sizes ranging from 192px to 4096px that's out in the wild right now, with EVERY possible combination in-between, building a fixed width layout or even multiple fixed widths is going to screw someone, somewhere at some time.

    Responsive layout is just the next logical step if you've been practicing accessible design, and is EASIER TO IMPLEMENT if you have done so; since a dynamic layout can auto-fit whatever breakpoints you set in your media queries; it frees you from making your breakpoints in inaccessible pixel metrics and setting them by content, NOT BY DEVICE.

    But, if you've been doing nothing but crapping out inaccessible fixed width layouts with inaccessible fixed metric fonts ignoring EVERY usability advocate of the past fifteen years, I might as well be talking an alien language. FIXED WIDTH LAYOUTS SUCK, even with responsive design in the mix. ANYONE telling you otherwise has been blowing so much smoke up your backside you could enter your upper torso in BBQ ribs competition and have a pretty good chance at winning.

    Admittedly, not doing fixed width makes a LOT of goofy layout garbage that 'designers' love and users hate have no business on a website -- like multiple perfect width elements across a page, perfect height elements side-by-side, and so forth; but that makes sense anyways since if you are building elastic, those aren't going to work ANYWAYS.

  13. #13
    Join Date
    Mar 2012
    Posts
    1,741
    Quote Originally Posted by deathshadow View Post
    So... users are now randomly resizing their windows, as that's the only way anything would "shuffle around"?!? I think not... or are you referring to something else? I don't think you're quite grasping it, either that or you spend WAY too much time resizing your browser window. Oh noes, the number of words on a line changed... I'm sorry, but as complaints about layouts go... that just doesn't make any sense.
    That my comments make no sense to you is abundantly apparent. That they are indisputably nonsensical is not. I am expressing an aesthetic view. I find that words shuffling round on the screen is gauche. Am I alone in that opinion? Or do others who care about such things feel likewise? And if they do, is it appropriate to disregard such views?

    Quote Originally Posted by deathshadow View Post
    ...building a fixed width layout or even multiple fixed widths is going to screw someone, somewhere at some time.
    I think you have not considered my suggestions in detail. If you design each layouts to fit the minimum screen width in each range, then all you lose is the additional space that could be used on displays nearer the top of the range. Is that so bad? I think not. Particularly compared to the messy displays that can, and do, arise when you try to maximize the screen usage at every display width.

    Quote Originally Posted by deathshadow View Post
    Responsive layout is just the next logical step if you've been practicing accessible design, and is EASIER TO IMPLEMENT if you have done so; since a dynamic layout can auto-fit whatever breakpoints you set in your media queries; it frees you from making your breakpoints in inaccessible pixel metrics and setting them by content, NOT BY DEVICE.
    Since when has the developer's convenience been the primary consideration in building web sites?

    Quote Originally Posted by deathshadow View Post
    Admittedly, not doing fixed width makes a LOT of goofy layout garbage that 'designers' love and users hate have no business on a website -- like multiple perfect width elements across a page, perfect height elements side-by-side, and so forth;
    Are you sure that users hate perfect width and height elements that are designed to be aesthetically pleasing?

    Quote Originally Posted by deathshadow View Post
    ... but that makes sense anyways since if you are building elastic, those aren't going to work ANYWAYS.
    PRECISELY!!! Building elastic does not allow the designer to specify dimensions and proportions that are aethetically pleasing. So which is more important to the client: a design that reeks of class, or filling the page with as much content as possible? Hmm... That's a difficult one.

    Seriously, I agree with much of your views about the way that sites are built. My pet hate is developers who learn JavaScript before they have mastered CSS. They use JS to do things that are easier to do in CSS. However, I cannot agree with your apparent lack of regard for the aesthetics of web design.

  14. #14
    Quote Originally Posted by jedaisoul View Post
    That my comments make no sense to you is abundantly apparent. That they are indisputably nonsensical is not. I am expressing an aesthetic view. I find that words shuffling round on the screen is gauche. Am I alone in that opinion? Or do others who care about such things feel likewise? And if they do, is it appropriate to disregard such views?
    Which is only an issue if you're constantly non-stop resizing the window... that's what I don't get... other than developers testing it, how many users actually do that?!? I also don't get how having support for every resolution between two points so you're actually USING the display is bad... which is why:

    Quote Originally Posted by jedaisoul View Post
    I think you have not considered my suggestions in detail. If you design each layouts to fit the minimum screen width in each range, then all you lose is the additional space that could be used on displays nearer the top of the range. Is that so bad? I think not. Particularly compared to the messy displays that can, and do, arise when you try to maximize the screen usage at every display width.
    Given that the smaller the display the more annoying that is going to get... Yeah, I'd call that REALLY bad; it's why fixed width layouts have pissed me off from the first day I ever encountered one; It's why those pesky accessibility guidelines you're SUPPOSED to at LEAST be giving lip service to say don't do it... What I really don't get is how making a proper semi-fluid layout would result in "messy displays" unless you're putting crap in the page that to be frank, doesnae belong on a website in the first place. Messy is not using ALL the available screen space at anything narrower than 800px; I'm so sure that 480x800 phone or mini-tab user is going to be so pleased with your 256px wide layout.

    Quote Originally Posted by jedaisoul View Post
    Since when has the developer's convenience been the primary consideration in building web sites?
    Isn't that the excuse most people use for inaccessible bloated crap like bootstrap and jQuery? Though you missed the point of the sentence, again -- accessibility, so you aren't alienating potential users into being guaranteed bounces... as a USER right now, there are a lot of artsy fartsy designed sites that for me are automatically a bounce. 99.99% of them guaranteed to be fixed width layouts with idiotic halfwit DUMBASS px metric fonts on them.

    Quote Originally Posted by jedaisoul View Post
    Are you sure that users hate perfect width and height elements that are designed to be aesthetically pleasing?
    Anyone who doesn't use the magical VGA/16px/Large/96dpi/100%/Win7+ Small font size you're probably pissing off -- the moment they dive for the zoom thanks to the inaccessible garbage. The broken layouts and wasted space that result when you don't have one of those magical combinations of screen size and resolution the designer was sitting in front of? Guaranteed to piss them off.

    ... and who says you need that garbage to be "aesthetically pleasing"? There's WAY too much of a 'form over function' attitude in design right now -- it's like the monkeys have taken over the zoo ignoring that most of the best success stories of the Internet are aesthetically about as pleasing as a 1984 Yugo GV; even when they are ALSO an accessibility disaster. See FaceBook, E-Bay, Amazon, Google, even the train wreck of appearance and accessibility known as twitter don't exactly reek of the "design first" attitude of development. In fact, I have difficulty thinking of ANY major successful website that would fit that description. There's a reason you don't find that nonsense anywhere other than "designer" oriented websites and "also ran" pages that will either be dead inside a year, or are tied to a "brick and mortar" business where the owner got duped into something that is little more than a glorified yellow pages ad at best, a money pit at worst.

    Quote Originally Posted by jedaisoul View Post
    PRECISELY!!! Building elastic does not allow the designer to specify dimensions and proportions that are aethetically pleasing. So which is more important to the client: a design that reeks of class, or filling the page with as much content as possible? Hmm... That's a difficult one.
    Yeah, not a difficult one at all if the client has ANY CLUE WHAT THEY'RE DOING -- since the reason a website even EXISTS is to deliver CONTENT. Admittedly, most clients don't know enough about the Internet to be making rational choices on how a website should be built, and as such are DUMB ENOUGH to fall for the "ooh shiny" flash over substance PSD jockey bull; but that's just the point at which you either have to educate them using examples (like the ones above) on just how much BS "design" is for a website, and if they're not getting it say what I said to my last full time employer on the way out the door.

    "You hired me because you know nothing about building websites, if you're not going to let me do my job, WHAT THE **** DID YOU EVEN HIRE ME FOR?!?"

    I'm not getting where you come up with not having design elements that piss all over accessibility and functionality means you can't make it ""aesthetically pleasing"... I'm not saying you can't make it pretty, I'm just saying there's a boat-load of things that should be done BEFORE even THINKING about something that to be frank... most of the real success stories of the Internet don't even have! -- and if some bit of "make it pretty" nonsense would impede the user getting at what's important -- content and functionality -- find something else to make it pretty with.

    ... but what do I know? I consider Apple products to have all the art and style of a recently sanitized hospital ward (to go with their alleged "quality" and Saab/Ikea-like cultism) so my view on attractive websites is like my view on just about everything else in the world; heresy. I'm a heretic... From the train wrecks of idiotic code bloat known as HTML/CSS frameworks, to the "let's piss on the usefulness of a website" that 99% of jQuery users do to their sites, to the "let's draw some goofy picture in photoshop before we even know what the content, markup or layout code is going to be", to the pointlessly redundant alleged specification called "HTML 5" that seems carefully crafted to set development practices back in time a decade and a half... To wondering just how anyone with more than two brain cells to rub together could have "faith" in a higher power... Just not a fan, just don't get it. I know for sure 300 years ago (or today in some places still) I'd be burned at the stake.

  15. #15
    Join Date
    Mar 2012
    Posts
    1,741
    Quote Originally Posted by deathshadow View Post
    Yeah, not a difficult one at all if the client has ANY CLUE WHAT THEY'RE DOING -- since the reason a website even EXISTS is to deliver CONTENT.
    If the web were composed entirely of non-commercial information sites, then I'd tend to agree with you. Indeed, I have a non-commercial website relativity-myths that exists to express some heretical views on relativity. Mostly my own, but also with references to a few like-minded individuals. That is almost totally content-driven. I also made a deliberate choice not to support screen widths below 480px, precisely because the amount of content you can put on tiny screens is simply not worth the effort.

    However, commercial websites exist to sell product(s), not to inform. Sometimes the product is the client's own business. So the answer to your question...

    Quote Originally Posted by deathshadow View Post
    "You hired me because you know nothing about building websites, if you're not going to let me do my job, WHAT THE **** DID YOU EVEN HIRE ME FOR?!?"
    ...is probably something like: "They hired you to produce a web site that would sell the company and/or its products". To do that, style can be as important as content, if not more so. It seems that what they wanted was a designer who was capable of building a site. The mistake they made was to employ a developer, who (presumably) has copious ability to build a site, but, it seems, is unwilling to work within a design-led environment. Indeed does not even recognize the legitimacy of a design-led environment!

    The idea that you can post-fix design on a content-driven development is as myopic as the idea that all sites should be design-led. Different clients, and different sites, have different priorities. Some require a content-driven approach, others a design-led one. Many fall somewhere between the two extremes.
    Last edited by jedaisoul; 05-10-2014 at 06:16 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles