SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 58
  1. #1
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)

    Responsive Web Design Techniques

    We can all probably agree that responsive web design is the future of the Internet, kind of amazing how it works across so many platforms. What amazes me about this is that it's really taking off as more and more people are using things like 'i' products to browse the web.

    I recently found this, http://jasonsantamaria.com/articles/golden-grid-system, which does the responsive web design for you. I've not really taken a deeper look at this nor would I know how to begin with something like this. I really wanted to here from people here you have had experience with responsive web design.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Nice link Sega. I've never used that myself, though I have been reading some articles on some subjects lately. One of which is this topic. Sitepoint had an article on this.

    Some of the key concepts in responsive design have been in play for a while now. Media queries are done a lot nowadays. Not specifically for tablet or mobile (though it does happen) but with the overwhelming nubmer of these sure to start happening, we'll have to incorporate it more.

    Relative sizing, also been around for a while. It's pretty rare to see a design which incorporates all the elements of a responsive design, though I do agree it probably will be the future of the internet
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  3. #3
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    I'm still finding my way around responsive design, but here are the ones that appealed to me when I first started to look into responsive design, going from those that sparked an interest


    Less Framework: http://lessframework.com/

    inuitcss: http://csswizardry.com/inuitcss/

    1140 css grid (a reverse of 320 and up): http://cssgrid.net/

    Skeleton: http://getskeleton.com/



    to those that really impressed me:



    The Goldilocks Approach: http://goldilocksapproach.com/

    Fluid Baseline Grid: http://fluidbaselinegrid.com/


    320 and up: http://stuffandnonsense.co.uk/projects/320andup/

    which uses

    Mobile ★ Boilerplate: http://html5boilerplate.com/mobile



    I ended up not using one or the other, but learning from them, from the last four ones in particular, and applying what I've learned from them on my own system.

  4. #4
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Sega, I can wholeheartedly recommend Responsive Web Design by Ethan Marcotte. There are some things I dislike in the book, e.g. assuming people have 16px font size by default which results in the hated (at least around these parts) 62.5% on body rule. Regardless of that, however, it's a fantastic book.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The problem with any grid system is that they have to cover all bases and you end up with far too much code and a structure that doesn't suit the task in hand in a lot of cases. They also entice beginners into using them when in fact beginners should be learning basic layout constructs first.

    While most grid are very clever and have some good concepts the time taken to learn, strip out, debug, maintain and deploy is actually longer than it would take to start from scratch and do it yourself. Unless you just whack out the whole grid and use it without modification which most of the good grid systems suggest you don't do anyway - i.e. just take the bits you need. Unfortunately, a lot of inexperienced coders use grids as a crutch and don't understand how or why they work so often get lost in design and end up with spaghetti instead of clean code.

    However, having said all that is is still useful to look under the hood of the grid systems and to see the techniques and methods they use as some are documented well and you can learn a lot from just reading through the code. There are often common fixes to common bugs documented so you can learn a lot. You will also see at what screen sizes you should be catering or applying your media queries to and also what specific meta tags you need. After, you've done that then you don't really need the grid system any more because you should be able to code it for yourself and set up your own base grid system.

    With responsive web design there is so much more than just changing the screen size and indeed some iphone users are now complaining that they get 3 or four lines of large text rather than a whole site that they can zoom around and scale as they wish. They don't like to be fed a 320px wide site just because they are viewing on a phone and want the actual site displayed and then just zoom around with their own controls. You can never please everyone even with best endeavours.

    Actually (although I am in the minority) I'm still not keen the page jump that media queries give you as you change the screen size. Usually when I'm reading a passage I will resize the screen to see the paragraph/section that I am interested in but then the media query clicks in and I have to search around the page for the same passage. I would prefer a scrollbar to appear and the screen not to change. Responsive design seems to assume that people only have one size of monitor whereas its the browser window that matters as I am constantly moving resizing and juggling my browser window thousands of times a day -because that's just the way I work. (I just did it now so that the text I'm typing is at eye lever and not at the bottom of the monitor.)

    A common approach these days is to start with a simple basic page that expands and contracts to any device width and then progressively enhance it with media queries for more capable devices rather then reverse engineer it for smaller devices. The problem is that as soon as we come up with a sure-fire way to cater for all devices the devices change and the goal posts are moved. A developers lot is not an easy one

  6. #6
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    @Paul O'B ;
    I can completely agree that people might re-size their browser window, most people tend to view a page on full width to fit their monitor size. We can't please everybody user experience in responsive web design. I would think this would just be a case of getting used to it. There are times when people attack new trends and changes, but when a change is going to happen with or without our approval, it's always best to be on board (IMHO) so that we can get the reward to the latest trends and ideas. I feel responsive web design works! Maybe this topic is still a little early but it is the future.

    I think you're spot on with knowing what's going on under the hood. Trouble is I don't know! I've never really used frameworks before, I tend to previously think of frameworks like 960 grid systems as something similar to a microwave for people who don't know, or can't be fussed cooking. So maybe there is some truth to that. If I knew how to do responsive web layouts effectively on my own, I would not use a grid system.


    @kohoutek ;
    Cool, thanks for the link to the book, I will give that a read. It's times like these I wished I had an iPod for my eBooks :P

    @itmitică;
    Super, thanks for all those links. Now you've just confused me on what I should use!

    @RyanReese ;
    Much appreciated. I think responsive web design is the future.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Grid systems, universally, being CSS frameworks, are idiotic rubbish that much like HTML 5 I can't fathom how anyone is DUMB ENOUGH to see advantages in using. Herpafreakingderp.

    As to "responsive design" this is nothing new to people who've been designing fluid all along... It's an evolutionary not revolutionary concept, finally giving us the tools that prior to this we'd rely on scripting to accomplish (see 'mcSwitchy'). Now like any old concept it has a new name.

    If you are used to designing fluid, used semantic markup with separation of presentation from content, and understand specificity; it's just the next logical progression... and if you have a fluid layout built using simple containers, it's also piss simple to do.

    Take a fairly simple markup:
    Code:
    <div id="pageWrapper">
    	
    	<h1>Site Title/Logo</h1>
    	
    	<ul id="mainMenu">
    		<li>blah</li><li>Blah</li><li>blah</li>
    	</ul>
    	
    	<hr />
    	
    	<div id="columnWrapper">
    		
    		<div id="contentWrapper"><div id="content">
    			<h2>Sample</h2>
    			<p>Sample Content here</p>
    		<!-- #content, #contentWrapper --></div>
    		
    		<div id="sideBarWrapper">
    		
    			<div id="firstSideBar">
    				<p>Blah Blah Blah</p>
    			<!-- #firstSideBar --></div>
    			
    			<div id="secondSideBar">
    				<p>Blah Blah Blah</p>
    			<!-- #secondSideBar --></div>
    			
    		<!-- #sideBarWrapper --></div>
    		
    	</div>
    	
    	<hr />
    	
    	<div id="footer">
    		Footer Content
    	</div>
    	
    <!-- #pageWrapper --></div>

    feed it this for media="screen,projection,tv"

    Code:
    #pageWrapper {
    	min-width:752px;
    	max-width:68em;
    	width:95%;
    	font:normal 85%/150% arial,helvetica,sans-serif;
    }
    
    * html #pageWrapper {
    	width:752px; /* give legacy IE the crappy fixed width, OH WELL! */
    }
    
    h2 {
    	padding:0 0.8em 0.8em;
    	font:normal 125%/120% arial,helvetica,sans-serif;
    }
    
    p {
    	padding:0 1em 1em;
    }
    
    #fauxColumns {
    	overflow:hidden; /* wrap floats */
    	width:100%; /* trip haslayout, wrap floats IE */
    }
    
    #contentWrapper {
    	float:left;
    	width:100%;
    }
    
    #content {
    	padding-top:1em;
    	margin-right:17em;
    }
    
    #sideBarWrapper {
    	float:left;
    	width:16em;
    	margin-left:-17em;
    }
    and you already have "responsive" -- aka semi-fluid -- two column layout... it already adjusts to a range of screen sizes and auto-scales up to font size. Media queries just provide simple extra steps... for example adding or removing columns:

    media="screen and (min-width:1238px)"
    Code:
    #pageWrapper {
    	max-width:74em;
    }
    
    #content {
    	margin:0 17em;
    }
    
    #sideBarWrapper {
    	float:none;
    	width:auto;
    	margin:0;
    }
    
    #firstSideBar,
    #secondSideBar {
    	position:relative;
    	float:left;
    	width:16em;
    	margin-left:-17em;
    }
    
    #secondSideBar {
    	margin:0 -17em 0 0;
    	left:-100%;
    }
    hey look, three column layout. Split the one outer #sideBarWrapper into it's two sub-child columns.

    media="screen and (max-width:751px)"
    Code:
    #pageWrapper {
    	min-width:192px;
    	width:100%;
    }
    
    #content {
    	margin:0;
    }
    
    #sideBarWrapper {
    	float:none;
    	width:auto;
    	margin:0;
    }
    Single column layout for narrow displays... Toss in the various trips to make the iphone actually obey what you're telling it to do, and DONE.

    Not exactly rocket science -- unless of course you are only thinking in fixed widths or that grid asshattery, in which case the very notion of 'responsive' is alien... those of us who've been doing fluid and semi fluid this isn't anything 'new' -- we've been doing it all along!

    It just took a fancy new name to get the fixed-widthtards (and their close cousins the elastiderps) with their crappy little stripes to pay attention.
    Last edited by deathshadow60; Apr 6, 2012 at 15:39. Reason: forgot min/max changes on media queries.

  8. #8
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    I wouldn't be so quick to dismiss all the work done in those "CSS Frameworks". I'm sure there's at least a little something to use and learn from any "CSS framework".

    <hr>

    There are "CSS frameworks" that work by grids. And there are those that don't use grids.

    Take The Goldilocks Approach, for example. Reading just a bit from this demo page it has: http://www.designbyfront.com/demo/go...ign=goldilocks

    What if we could create a truly universal design that was device independent – one that, no matter what device you viewed it on, looked like it was designed just for that device?
    [...]
    It’s tempting to first set the body font size. But the manufacturer or the user has already set the browser’s default size for readability, and we don’t think you should mess with it without good reason. (itmitică's note: There is truth to both sides. )

    However, if you base your entire design on this base font size (using ems), then as it increases or decreases, so will your design. Using ems allows your designs to be resolution independent.
    [...]
    ...taking the device resolution out of the equation, you get layouts that should work across all devices and contexts, even ones that haven’t been invented yet. If, for whatever reason, a user has their base font size set to 80px, then this approach should still produce an appropriate layout for the space available. Talk about device independence.
    [...]
    Compelling enough?

    <hr>

    Take the The Fluid Baseline Grid System for another example.

    The FBG system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework.
    [...]
    FBG is defaulted to a minimal 3-column folding grid, which is easy to work with and divided into equal portions, 31.333% wide with 2% wide gutters between columns.
    It looks very appropriate to me and it's not something I'd so quickly dismiss.

    <hr>

    Finally, these "CSS frameworks", grids or no grids, are the results of work done by trail and error. This means that they actually took the time to test, debug and fix for a multitude of devices and scenarios.

    Take 320 and up and/or Mobile ★ Boilerplate. In their documentation there is insight hard to accomplish for a single developer by it self. And for that there is proof on SPF.

    <hr>

    Good or bad, you can learn from a rock, let alone from others hard work. That if you're not the rock it self. You can even learn how not to be a rock your self.

    "CSS Frameworks", "good" or "bad", are hard work. A developer dismissing that, makes for an isolated developer that didn't had the need yet for something like that. Eventually, all good developers turn to "CSS Frameworks", to learn something new like iPhone fixes or bugs, if not for anything else.

  9. #9
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by itmitică View Post
    Take The Goldilocks Approach, for example
    Given that their page is uselessly broken here, with content blowing out of it's containers on width -- all because it's JUST ANOTHER crappy fixed width that doesn't scale to anything? Someone needs to explain to them what 'responsive' means. Let's go down the list on the example... I'm probably going to use the word idiotic far, far too much.

    That their example starts out with Paul Irish's idiotic IE version sniffing garbage, jumps on the HTML 5 idiot bandwagon with the stupid malfing shiv (that typically does more to break pages than help), has H2 preceeding the h1 (on something that should only be one h1 without an IMG tag), puts an image in an aside (that's REALLY gibberish), has nothing even remotely resembling a proper heading order to the point they look just thrown in there any old way -- and that's by EITHER 4 or 5 structural rules, the stunning examples of "if you have to use title on an anchor, there's something wrong with it's content", use of commenting in a manner that could trip IE or FF rendering bugs.... and then there's the unforgivably bad media="all"

    1) at which point why have a media attribute
    2) I'm so sure that for screen layout will be SO desirable when printed.

    It's disastrously bad and I've not even opened up the CSS yet.

    Hey look, an idiotically massive reset... setting overflow-y on html just to annoy people with large displays, background-color on HTML instead of body? Lack of condensed properties, fractional line-height guaranteed to introduce rounding errors cross browser... and that's just their 'global.css' crap.

    Wow, the examples layout.css ... nothing like declaring two CUSTOM fonts on the same stack -- that's more idiotic than the people who declare font-family:arial,"segou ui",sans-serif; (if you don't know what's wrong there, back away from the keyboard).

    Oh yeah, I'm SO impressed, and that's SO what people should be using to design sites -- NOT. I truly pity the nubes who don't know enough not to be led down the garden path by bloated half-assed crap like that!

    Compelling? I think not. They talk a good talk, but their results are just bloated uselessly complex garbage... to the point I don't think it's creators actually have a clue what they are talking about.

    You don't even want me to go into the others you mentioned. Sad part is I agree with many of the methodologies they advocate in their text -- I just wish they'd practice them!

  10. #10
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Given that their page is uselessly broken here, with content blowing out of it's containers on width -- all because it's JUST ANOTHER crappy fixed width that doesn't scale to anything?
    Where did you spot this fixed width?

    I've looked again, and the only problem I see is the contact form at the bottom. Removing
    Code:
    footer #subscribe-form {
        text-align: right;
    }
    solves it.

    I wouldn't be so harsh on The Goldilocks Approach. From my tests, it scaled well. If there are a few bugs to be found, I'm sure it'll all be solvable.

    Their trying to build something. And their approach, design and otherwise, is certainly a brilliant one:

    Responsive design requires a new way of thinking, and there’s still plenty of discussion and exploration to be had before we can settle on what is ‘best practice’. We’ve found this approach to work well for us, but how do you think it would work for you?
    PS I'm not worried at all, you going into the others I mention. It seems you have your mind set to a certain pattern, and you find reasons to put anything else down. I don't mind. If it works for you... But not so far as a couple of days back you were one of those not practicing what you've been advocating.

  11. #11
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    As a prophylactic measure; Let's please leave out any personal attacks. This thread—like many others—is a good one, so let's keep it that way.

    Dankeschön!
    Maleika E. A. | Rockatee | Twitter | Dribbble



  12. #12
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by itmitică View Post
    Where did you spot this fixed width?
    I assumed (incorrectly) it was fixed width since it was giving me horizontal scrollbars on both the desktop and laptop regardless of how wide I made it - should have looked deeper, it's that they used EM without understanding them. My bad.

    <mordin>I MADE A MISTAKE</mordin>

    That quote from them:
    Responsive design requires a new way of thinking
    Says a lot of what's WRONG with 'responsive design' IMHO, in that it's NOT something new or a new way of thinking -- unless all you've done the past decade is crap out fixed width websites that have been useless from an accessibility standpoint all along -- no matter what the PSD jockeys think or how "pretty" it is. It's just the natural next step from fluid and semi-fluid, and the exact same thing as McSwitchy!

    But because we can slap a fancy new name on it and have CSS to do what we used to do with JS, it's some miraculous innovation. NOT.

    Quote Originally Posted by itmitică View Post
    It seems you have your mind set to a certain pattern, and you find reasons to put anything else down
    You tear things apart so you can build up again stronger, or kill it before it kills you. Anything else is status quo namby-pamby feel good nonsense... type of thing I'd expect out of an "encounter group". Show me something GOOD and I'll actually praise it.

    ... and when a LOT of said methodologies almost by definition load horribly and disastrously broken for me; what am I supposed to say about it? When you peek under the hood and it looks like something tossed together by someone who just took a 1 week wonder-course out of the back of a moving van, what am I supposed to say about it?

    Slap the rose coloured glasses on everyone's heads, pat them on the back and say well done? I think not.

    <yakko>If you can't say anything nice, you must be at the Ice Capades.</yakko>

    Quote Originally Posted by itmitică View Post
    But not so far as a couple of days back you were one of those not practicing what you've been advocating.
    If by that you mean something written before we even HAD media queries as anything approaching deployable much less well documented, then sure... That could be said about 99% of the web.

    That it still worked BECAUSE it used EM's, well... Might not have been perfect, but better than most. Better than most that USE media queries to be brutally frank.

  13. #13
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:


    Quote Originally Posted by deathshadow60 View Post
    <mordin>I MADE A MISTAKE</mordin>
    Did you notice that the keyboard in the video at 3:38 is wacky reverse? All the keyboards, actually.


  14. #14
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,830
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Grid systems, universally, being CSS frameworks, are idiotic rubbish that much like HTML 5 I can't fathom how anyone is DUMB ENOUGH to see advantages in using. Herpafreakingderp.

    As to "responsive design" this is nothing new to people who've been designing fluid all along... It's an evolutionary not revolutionary concept, finally giving us the tools that prior to this we'd rely on scripting to accomplish (see 'mcSwitchy'). Now like any old concept it has a new name.

    If you are used to designing fluid, used semantic markup with separation of presentation from content, and understand specificity; it's just the next logical progression... and if you have a fluid layout built using simple containers, it's also piss simple to do.

    Take a fairly simple markup:
    Code:
    <div id="pageWrapper">
    	
    	<h1>Site Title/Logo</h1>
    	
    	<ul id="mainMenu">
    		<li>blah</li><li>Blah</li><li>blah</li>
    	</ul>
    	
    	<hr />
    	
    	<div id="columnWrapper">
    		
    		<div id="contentWrapper"><div id="content">
    			<h2>Sample</h2>
    			<p>Sample Content here</p>
    		<!-- #content, #contentWrapper --></div>
    		
    		<div id="sideBarWrapper">
    		
    			<div id="firstSideBar">
    				<p>Blah Blah Blah</p>
    			<!-- #firstSideBar --></div>
    			
    			<div id="secondSideBar">
    				<p>Blah Blah Blah</p>
    			<!-- #secondSideBar --></div>
    			
    		<!-- #sideBarWrapper --></div>
    		
    	</div>
    	
    	<hr />
    	
    	<div id="footer">
    		Footer Content
    	</div>
    	
    <!-- #pageWrapper --></div>

    feed it this for media="screen,projection,tv"

    Code:
    #pageWrapper {
    	min-width:752px;
    	max-width:68em;
    	width:95%;
    	font:normal 85%/150% arial,helvetica,sans-serif;
    }
    
    * html #pageWrapper {
    	width:752px; /* give legacy IE the crappy fixed width, OH WELL! */
    }
    
    h2 {
    	padding:0 0.8em 0.8em;
    	font:normal 125%/120% arial,helvetica,sans-serif;
    }
    
    p {
    	padding:0 1em 1em;
    }
    
    #fauxColumns {
    	overflow:hidden; /* wrap floats */
    	width:100%; /* trip haslayout, wrap floats IE */
    }
    
    #contentWrapper {
    	float:left;
    	width:100%;
    }
    
    #content {
    	padding-top:1em;
    	margin-right:17em;
    }
    
    #sideBarWrapper {
    	float:left;
    	width:16em;
    	margin-left:-17em;
    }
    and you already have "responsive" -- aka semi-fluid -- two column layout... it already adjusts to a range of screen sizes and auto-scales up to font size. Media queries just provide simple extra steps... for example adding or removing columns:

    media="screen and (min-width:1238px)"
    Code:
    #pageWrapper {
    	max-width:74em;
    }
    
    #content {
    	margin:0 17em;
    }
    
    #sideBarWrapper {
    	float:none;
    	width:auto;
    	margin:0;
    }
    
    #firstSideBar,
    #secondSideBar {
    	position:relative;
    	float:left;
    	width:16em;
    	margin-left:-17em;
    }
    
    #secondSideBar {
    	margin:0 -17em 0 0;
    	left:-100%;
    }
    hey look, three column layout. Split the one outer #sideBarWrapper into it's two sub-child columns.

    media="screen and (max-width:751px)"
    Code:
    #pageWrapper {
    	min-width:192px;
    	width:100%;
    }
    
    #content {
    	margin:0;
    }
    
    #sideBarWrapper {
    	float:none;
    	width:auto;
    	margin:0;
    }
    Single column layout for narrow displays... Toss in the various trips to make the iphone actually obey what you're telling it to do, and DONE.

    Not exactly rocket science -- unless of course you are only thinking in fixed widths or that grid asshattery, in which case the very notion of 'responsive' is alien... those of us who've been doing fluid and semi fluid this isn't anything 'new' -- we've been doing it all along!

    It just took a fancy new name to get the fixed-widthtards (and their close cousins the elastiderps) with their crappy little stripes to pay attention.
    I tried copying and pasting your example and could not decide exactly the position of the missing closing </div>.

    Please supply a working validated copy because I would like a simple template for practicing "responsive design".
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014

  15. #15
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    So let me assume this right, because I am not enterily sure. I was creating responsive web design years ago when I widths things in percentages?


    e.g.
    #containers 80%
    #containers .panel 20%

    I think the examples I've seen on frameworks are more responsive that just sizing. I've noticed that @kohoutek ; website is responsive, but works a little different to the frameworks. If it's just a case of using percentages and min-width max-width etc. Then I can start creating responsive web designs now. However, the examples on responsive frameworks and templates sold are more polished and work a little better. Not sure why this is.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by John_Betong View Post
    Please supply a working validated copy
    I assume something like this is what's meant:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    <title></title>
    
    <style type="text/css">
    #pageWrapper {
    	min-width:752px;
    	max-width:68em;
    	width:95%;
    	font:normal 85%/150% arial,helvetica,sans-serif;
    }
    
    * html #pageWrapper {
    	width:752px; /* give legacy IE the crappy fixed width, OH WELL! */
    }
    
    h2 {
    	padding:0 0.8em 0.8em;
    	font:normal 125%/120% arial,helvetica,sans-serif;
    }
    
    p {
    	padding:0 1em 1em;
    }
    
    #fauxColumns {
    	overflow:hidden; /* wrap floats */
    	width:100%; /* trip haslayout, wrap floats IE */
    }
    
    #contentWrapper {
    	float:left;
    	width:100%;
    }
    
    #content {
    	padding-top:1em;
    	margin-right:17em;
    }
    
    #sideBarWrapper {
    	float:left;
    	width:16em;
    	margin-left:-17em;
    }
    
    
    @media screen and (min-width:1238px) {
    	#pageWrapper {
    	max-width:74em;
    }
    
    #content {
    	margin:0 17em;
    }
    
    #sideBarWrapper {
    	float:none;
    	width:auto;
    	margin:0;
    }
    
    #firstSideBar,
    #secondSideBar {
    	position:relative;
    	float:left;
    	width:16em;
    	margin-left:-17em;
    }
    
    #secondSideBar {
    	margin:0 -17em 0 0;
    	left:-100%;
    }
    }
    
    
    
    @media screen and (max-width:751px) {
    	#pageWrapper {
    	min-width:192px;
    	width:100%;
    }
    
    #content {
    	margin:0;
    }
    
    #sideBarWrapper {
    	float:none;
    	width:auto;
    	margin:0;
    }
    }
    
    </style>
    
    </head>
    <body>
    <div id="pageWrapper">
    	
    	<h1>Site Title/Logo</h1>
    	
    	<ul id="mainMenu">
    		<li>blah</li><li>Blah</li><li>blah</li>
    	</ul>
    	
    	<hr />
    	
    	<div id="columnWrapper">
    		
    		<div id="contentWrapper">
    <div id="content">
    			<h2>Sample</h2>
    			<p>Sample Content here</p>
    		<!-- #content, #contentWrapper --></div></div>
    		
    		<div id="sideBarWrapper">
    		
    			<div id="firstSideBar">
    				<p>Blah Blah Blah</p>
    			<!-- #firstSideBar --></div>
    			
    			<div id="secondSideBar">
    				<p>Blah Blah Blah</p>
    			<!-- #secondSideBar --></div>
    			
    		<!-- #sideBarWrapper --></div>
    		
    	</div>
    	
    	<hr />
    	
    	<div id="footer">
    		Footer Content
    	</div>
    	
    <!-- #pageWrapper --></div>
    
    </body>
    </html>

  17. #17
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by John_Betong View Post
    I tried copying and pasting your example and could not decide exactly the position of the missing closing </div>.

    Please supply a working validated copy because I would like a simple template for practicing "responsive design".
    Oops.
    <!-- #content, #contentWrapper --></div></div>

    What I get for just belting it out raw on the laptop. Wasn't actually meant to be used as working code so much as an example of the theory....

    gimme a couple moments and I'll toss together a working example of that which is a bit more fleshed out.

  18. #18
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Here you go.

    http://www.cutcodedown.com/codeExamp.../template.html

    Gave it a bit of content and some simple style. Shows pretty clearly what I'm talking about -- it's simple. VERY simple to make what we used to call a mcswitchy layout using media queries. One, Two and three column switching of fluid layouts, with a practical max-width.

    As with all my examples the directory:
    http://www.cutcodedown.com/codeExamples/fluidDemo/

    is wide open.

    Gives IE6- a crappy fixed width ... as the comment says "OH WELL" -- IE 8 and lower doesn't know media queries, so it gets the two column layout with a max width... all browser that know media queries get the full rigmarole.

    NOT rocket science if you've been designing fluid all along. People who've only ever dealt with fixed widths and fill their pages with elements that aren't viable for web deployment in the first place might be left scratching their heads -- but they've been ignoring accessibility all along with their fixed widths too big for netbooks and mobile, too small for large format displays, fixed metric text more likely to make users like myself bounce than it is to make me dive for the zoom, fixed height elements with content that could change or be rendered a different size inside them, multiple equal size elements across a page, and host of other broken methodologies that to be frank have no business on a website in the first blasted place!

    "But I can do it in Photoshop!" -- RIGHT...

  19. #19
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    BTW - played with the width triggers a bit to better fit the demo content -- all good layouts should be adjusted to what's in them, not the other way around.

    Set the single column trigger to 640px, since the two column version seemed alright down to that low (probably good for tablet)... and swapped the three column trigger to EM's -- the values I chose were good for large fonts, didn't really do anything at small...

    Testing -- gotta love it. Methodology is sound, numbers just needed some tweaking -- which is the problem with 'grids' -- they shove numbers down your throat that might not even work for your content or with the methods they're trying to promote. Just working with elastic sidebars and a fluid main column makes it easy.

  20. #20
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    That it still worked BECAUSE it used EM's, well...
    Yeah, it worked. It doesn't mean it was much better than a fixed size. It was scalable, but that didn't help much. Using em didn't help much either. The way it was displayed on certain devices wasn't good enough.

    The moment you've added media queries, it started to also become responsive. It started to have potential, to display well on a larger scale. It's the moment it stopped to just work and it started to really respond to devices and device parameters the user is using.

    <hr>

    Quote Originally Posted by deathshadow60 View Post
    Do I see a little of The Goldilocks Approach in your
    Code:
    #pageWrapper {
        max-width: 78em;
    }
    ?

  21. #21
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by itmitică View Post
    Do I see a little of The Goldilocks Approach in your
    Don't see what that even has to do with their garbage -- ooh look, he's using a elastic max-width; so innovative, different and belongs specifically to one framework.

    RIGHT.

    Because of course I've not been declaring:
    Code:
    min-width:752px;
    max-width:68em;
    width:95%;
    on websites since long before we could even USE media queries... much less long before you ever posted a link to a framework I'd never even heard of before this thread.

    RIGHT.

    Oh yes, I got 'for a bigger screen declare a bigger width" from them... Of course I did.

    For those of you from outside New England, this is called sarcasm. I can't actually respond properly without getting banned.

  22. #22
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sega View Post
    So let me assume this right, because I am not enterily sure. I was creating responsive web design years ago when I widths things in percentages?


    e.g.
    #containers 80%
    #containers .panel 20%
    @Sega That's scalable, that's not responsive.

    You're starting in the right place: fluid, elastic layouts. Relative dimensions, min-width, max-width. But there's more.

    <hr>

    I believe this is an example explaining the turning point with responsive design: statically making an element float it's not responsive design. Dynamically unfloating the element is. Static equals CSS without media queries. Dynamic equals CSS with media queries.

    So responsive design equals dynamic CSS code, not relative values for CSS properties.

    <hr>

    Because a scaled down website, made with bigger screens in mind, however elastic it may be it's still unreadable on a much smaller screen, you add media queries, where you change things in your layout, based on your interrogation (query) of the user's device (media): drop from two columns to one, change the font size for headings or other elements, and also remove or add certain design elements.

    Most responsive design adopters will tell you this: go mobile first. You start by creating a basic mobile version of your site and then you enhance it as you go up the screen size: tablets, netbooks, notebooks, laptops, desktops. Techniques may vary, and there are also those that go from up way down. But they all use media queries to first find out the user's media parameters and respond accordingly: responsive design.

  23. #23
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    [...] a elastic max-width [...]
    I've declare [...] long before you ever posted a link to a framework I'd never even heard of before this thread.
    I don't know if they got that from you, using em for container size, I very much doubt that, but my point was that they use at least one thing the same as you do, so it's not all bad, even when seen through your eyes.

  24. #24
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by itmitică View Post
    Most responsive design adopters will tell you this: go mobile first. You start by creating a basic mobile version of your site and then you enhance it as you go up the screen size: tablets, netbooks, notebooks, laptops, desktops. Techniques may vary, and there are also those that go from up way down. But they all use media queries to first find out the user's media parameters and respond accordingly: responsive design.
    I'm in the middle on that... kind of...

    What I start with first is semantic layout and plain design for CSS off... hence by use of proper heading orders, horizontal rules for content breaks where a section would lack a header or it would be inappropriate, etc, etc...

    The mobile first folks are basically bending over backwards to support handhelds that never worked right online in the first place -- waste of time and effort. Media queries let us target modern handhelds, most older handhelds have had to deal with desktop code all along, and tend to mangle anything you try to send them for layout so badly it's usually not even worth the effort of trying to target them (blazer comes to mind); what with the dozens of different phone browsers NONE of which handle the same code the same way.

    If you start in the middle -- basically what you send IE8/lower who don't know media queries; then add code to expand it up for larger displays on modern browsers, and code to shrink it down for modern handhelds -- it will gracefully degrade in a useful/non-annoying manner for IE8-, who are still large enough a crowd you shouldn't be pissing them off sending them the mobile version of your site.

    At least, that's how I'm looking at it. It comes down to which layout do you want to send when media queries fail -- the majority of people for whom that's going to fail, can probably handle a 800 friendly layout, and will probably NOT be impressed if you send them a single column mobile page.

    It also seems easier when dealing with media queries to remove properties, layout and content than it is to add them.

    Though I suppose that comes down to if you are a 'responsive adopter', or someone who sees this as nothing new. and just a natural progression

    Probably why I'm not a big fan of it even having this new name... but then I HATE new names for old ideas.

  25. #25
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,830
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I assume something like this is what's meant:
    @ralph.m
    Many thanks for the script.
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014


Bookmarks

Posting Permissions

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