I am just trying to extend my skill set by becoming confident with responsive web design, I have basically drafted something up on CodePen and was wondering if I'm headed in the right direction.
Note: I haven't added any media queries yet as I am still trying to read up on some stuff.
To me, the very definition of responsive design is that the page layout changes/adapts to your screen size. Simple as that.
Using percentage widths for your main content and sidebar, that's basically what it does, so I'd say you're on the right track!
In general though, responsive design has (almost) become synonymous with using media queries. I think the best way to describe that, is saying that's an extra layer to it all, because you use SPECIFIC screen widths to define SPECIFIC layouts. Like "if screen is smaller than 320 pixels, then use these CSS rules. If screen width is between 321 and 480 pixels, then use these CSS rules", and so on.
So again I'd say you're definitely heading in the right direction, now it's time to experiment a little with media queries. Tip: use a viewport resizer to test your stuff, so you won't have to keep resizing your browser to see the results.
I only watched that video the other day and I totally forgot about the whole grid system, I'm such a dumbass. I thought something wasn't right when I was coding it up, lol. Thanks!
Yeah @Senff - it's one thing making it fluid, and then it seems to be a whole different thing using media queries. Thanks for the advice.
However when I take the HTML + CSS out of codepen and put it into Sublime Text 2 and preview it, it messes up and looks like the floats aren't working properly?
Glad it works but that META tag shouldn't be really necessary -- it's like fixing the result whereas it would be better to fight the actual cause (if that makes any sense). There must be something in your code that makes it jump to IE7 mode, I'd look into that.
Looking at the http response headers from codepen, codepen forces X-UA Comptable to edge so would overide any X-UA Comptable meta tags on code pen
forcing IE 9 to render as IE 9 the question is why is IE trying to render as 7 when its not been forced to IE9 ,
IE tends to remember settings when you've selected a document's standard manually, in my experience so try going to the site again in a fresh IE window and see if it still goes to IE 7 document standards, if it does it warrants further investigation cus the only thing making it do that should be X-UA Comptable headers or wether you've got some comptability settings in ie for that site.
if your code is visible to the web throw ienetrender at it set to ie9 if it still looks like the ie7 version ya know its not just your ie thats doing it.
Well I have been just working statically without any server input and it doesn't work.
However, I have just dropped them files into a folder in XAMPP and it seems to be rendering fine now, do you think the problem could've stemmed from not having the page go through a (virtual) server.
Hey guys and girls.
I am just trying to extend my skill set by becoming confident with responsive web design, I have basically drafted something up on CodePen and was wondering if I'm headed in the right direction.
Note: I haven't added any media queries yet as I am still trying to read up on some stuff.
http://codepen.io/Watson90/pen/fznrp
Let me know :)
It's a good start but you might want to consider a grid system to avoid setting widths on those sections / aside.
Need something that 66% (2/3), just add a class, etc., etc.
http://css-tricks.com/dont-overthink-it-grids/
To me, the very definition of responsive design is that the page layout changes/adapts to your screen size. Simple as that.
Using percentage widths for your main content and sidebar, that's basically what it does, so I'd say you're on the right track!
In general though, responsive design has (almost) become synonymous with using media queries. I think the best way to describe that, is saying that's an extra layer to it all, because you use SPECIFIC screen widths to define SPECIFIC layouts. Like "if screen is smaller than 320 pixels, then use these CSS rules. If screen width is between 321 and 480 pixels, then use these CSS rules", and so on.
So again I'd say you're definitely heading in the right direction, now it's time to experiment a little with media queries. Tip: use a viewport resizer to test your stuff, so you won't have to keep resizing your browser to see the results.
Good luck!
As Senff said.
However, you might want to consider starting with a mobile design (mobile first!) and expanding upward.
Thanks guys!
@Paulie_D
I only watched that video the other day and I totally forgot about the whole grid system, I'm such a dumbass. I thought something wasn't right when I was coding it up, lol. Thanks!
Yeah @Senff - it's one thing making it fluid, and then it seems to be a whole different thing using media queries. Thanks for the advice.
Regarding viewport resizers, I just came across this one the other day.
Anyone have any others to recommend?
This one is awesome. It's actually a bookmarket.
It's based on ipad/iphone etc, but it's super handy for quick resizing.
http://responsive.victorcoulon.fr/
A more in depth and functional one is http://quirktools.com/screenfly/
It has tons of different screen and device sizes to choose from under each clickable block.
All kinds of responsive testers: http://bradfrost.github.com/this-is-responsive/resources.html#viewport-testing
@andy_unleash -- very nice! Thanks for sharing.
Ditto @Senff.
I will be sure to check these out tomorrow guys :) thanks for all of the sound advice!
@Paulie_D, @Senff - Watched Chris' Video again, it's a lot more structured now etc.
http://codepen.io/Watson90/pen/fznrp
Very nice.
@Paulie_D
It's so weird...
My codepen works in ie9 all fine
However when I take the HTML + CSS out of codepen and put it into Sublime Text 2 and preview it, it messes up and looks like the floats aren't working properly?
Only in IE9 though. Any Ideas?
Sorry I'm on IE10 now and haven't figured out Compatibility View yet.
Once I do..
EDIT: Unless it's the box sizing...try
in that order,
Actually, it's okay man. I fixed it with;
Why is this needed?
@Paulie_D its same as ie9 just hit f12 and select the documents and browser settings from the dev tools
@Watson90 that forces it to render as if it was IE8 open your dev tools in IE and see what documents mode its set too without that in the code.
@ToxicFire - Ahh, it was set to IE7 standards without the code in the header...
Glad it works but that META tag shouldn't be really necessary -- it's like fixing the result whereas it would be better to fight the actual cause (if that makes any sense). There must be something in your code that makes it jump to IE7 mode, I'd look into that.
Looking at the http response headers from codepen, codepen forces X-UA Comptable to edge so would overide any X-UA Comptable meta tags on code pen forcing IE 9 to render as IE 9 the question is why is IE trying to render as 7 when its not been forced to IE9 ,
IE tends to remember settings when you've selected a document's standard manually, in my experience so try going to the site again in a fresh IE window and see if it still goes to IE 7 document standards, if it does it warrants further investigation cus the only thing making it do that should be X-UA Comptable headers or wether you've got some comptability settings in ie for that site.
if your code is visible to the web throw ienetrender at it set to ie9 if it still looks like the ie7 version ya know its not just your ie thats doing it.
Hey guys,
Well I have been just working statically without any server input and it doesn't work.
However, I have just dropped them files into a folder in XAMPP and it seems to be rendering fine now, do you think the problem could've stemmed from not having the page go through a (virtual) server.