Search youtube, there are a lot of videos that explain the basics. Search for media queries also and learn how those work. I use a media query reporter in the css which adds a bar to the bottom of the page so you can resize the page and see what your actual screen size is and how your responsive elements are changing. http://alittlecode.com/a-little-css3-media-query-reporter/ I also have a lot of responsive wordpress themes and I look in the css of those to see how other developers do things.
There are lot of tutorials accessible throw out google searches but you can use w3cschool.org to learn in details.
You should read this thread: https://forums.digitalpoint.com/thr...-simple-design-and-responsive-design.2657812/ I got a bit technical, but there's a link to a working demo with a complete breakdown and explanation in that thread.
If you're already familiar with HTML and CSS, try to explore some framework like Bootstrap http://getbootstrap.com/2.3.2/ and most importantly, the CSS codes below are the keys /* Large desktop */ @media (min-width: 1200px) { ... } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { ... } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { ... } /* Landscape phones and down */ @media (max-width: 480px) { ... }
If you want some fat bloated idiotic framework that defeats the entire point of using CSS and relies on the presentational use of classes -- seriously, how the **** is anyone DUMB ENOUGH or SLEAZY ENOUGH to use Bootstrap by choice? Oh that's right, the same people who until a few years ago were sleazing out HTML 3.2 with 4 tranny on it, and now vomit up the same halfwit outdated methodologies with 5's lip-service wrapped around it.
So I was about to look up more info bootstrap but I guess I won't now LOL. What about the media query widths like posted above? What sizes should you target? I notice when I look at my responsive themes that I buy that they don't all have the same media query so I guess there are no standard sizes? Is there just too many possible device sizes these days? I see alot of sample media queries where the widths are similar but usually vary a little.
That is about as asinine a comment as can be made. It brings nothing to the table. Further, it is insulting to a forum member who is trying to communicate in, to him, a foreign language. I wonder how well you'd do if you had to communicate in চাটগাঁইয়া (Chittagonian)
Point is, ApocalypseXL probably wouldn't try. I'm getting really sick of the broken "Engrish moist goodry" one sentence pointless posters as well... Though at least in this case the OP had a verb, noun, and was close to comprehensible... unlike say around a third of the people posting these days here with the "I can haz intarnets" topics. See a certain user who replied in this thread that I've hit report on a billion times by now, with the endless pointless one sentence 'answers' that rarely if anything have much to do with the topic at hand.
I respect anyone who makes an effort in another language, even if it's not that great (my stepdaughter, who's Russian, goes to school in England and knows -- knew, perhaps -- very little English but is trying hard every day to improve). I can't criticise the OP for making an effort to write English, but they need to learn to use their initiative as well. @OP, I recommend you search Google (or whatever SE you prefer) as you will find lots of tutorials. One site I've used a few times is http://demosthenes.info/blog. I would also recommend following deathshadow's posts as their is a lot to learn about HTML and CSS from him.
Please follow This link http://www.lingulo.com/tutorials/css/how-to-build-a-html5-website-from-scratch
I found these article very useful: http://mobile.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/ http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ My first foray into responsive was trying to create a horizontal nav bar that would adapt to screen-size/device. Might be a good project to try.
Thanks deathshadow for your #5 reply! Bookmarked the link. Been trying to find a proper tutorial for responsive designs. And now I found it
With the pissing contest over engrish moist goodry, I almost missed this VERY good question. Very good string of questions, but you answer it yourself: there have ALWAYS been too many possible device sizes. That's why fixed width layouts have ALWAYS been inaccessible steaming piles of manure that have no real business being used as websites in the first place -- no matter what the lazy sleazeball photoshop jockeys and inept dipshits of the past two decades building sites that way will tell you. It's why 'responsive' design is just the next logical step in site design after fluid and semi-fluid design. They all exist and work together to target as many possible sizes as once. In terms of picking where to make your 'break points' it's why I advocate building from 'lowest common denominator' of no media queries design first as semi-fluid AND elastic. You can then change the width in testing to see where it breaks, and when it breaks give yourself 10% or so wiggle room (for things like different font rendering) and set your media query at that point. Make the layout changes when/where you need it, instead of targeting specific widths from the start because, as you asked, there are just too many possible targets to waste time on ANY specific width. Set it where it works, instead of thinking specific physical dimensions. Since just like the inaccessible idiotic train wrecks known as fixed width layouts, and the equally idiotic "what fixed width should I design for" -- fixed breakpoints for "all design's" is just asking for it to break somewhere or end up shoe-horning content into a layout not necessarily designed to handle it. That's also why I say set your breakpoints in EM and not PX, same as you should be setting your fonts. The whole POINT is accessibility, so that means use ALL accessibility methods -- don't just throw responsive at it and say "close enough".
I have an e-book the explains responsive web design in full detail, if you want, I can link you to it.
LOL I am new here and thought Deathshadow was a bit on the rude site but he definitely seems to be of above average intelligence so its ok Good post & makes sense, go for the fluid elastic layout as much as possible. Sometimes I need to use a boxed layout and depending on the content I need the specific breakpoints but there is always something new coming out with a screen size larger than an iphone but smaller than a tablet to screw things up. Maybe not screw things up but maybe just put an extra gap or cut just a few pixels off the edge where it is just enough to be noticeable. So whats a good method for testing your responsive designs? You can just grab the edge of your browser and narrow/widen your screen manually or use some of the online simulators. I have seen some online simulators though that are way off and not very accurate. I use electric studio for iphone & ipad simulation and they have a lot of preset widths for other designs: http://www.electricplum.com/studio.aspx I know you are not going to be able to test for EVERY device but if simulating other devices & sizes while working on your designs on the pc, which preview tools would provide the most accurate results? Thx!