I need to create a responsive layout, but I'm confused on how to start. I've looked up and found many resources, but it's all very overwhelming. Can someone point me in the right direction on how to get started? I can build a html/css website, but have never done anything in regards to mobile. A few questions: 1) I've read you should build for mobile then move up, is this correct? 2) Should I start off with a template (or a grid, is that the correct term?) If so, any recommendations? This is the basic setup of the layout: 3) Can you recommend any tutorials or tools that are a must? I'm reading through http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design I came across this course (I don't mind spending the money) https://www.udemy.com/build-flat-responsive-website-from-scratch-complete-course/ It seems like it will be beneficial. 4) What's the best way to test the layout? I've come across http://mattkersley.com/responsive/ and http://respondr.webhoard.net/ 5) I've read about people using bootstrap, but I've used it in past projects and it seemed a little bloated. Although, it could be a good starting point? Thank you.
It really depends how you want to go about doing it. If you want to use a framework I would recommend Foundation or Boilerplate, this will be the easiest way to get started learning how to create responsive web design. I found it easy to study the frameworks that are out there already, create a few sites utilizing these frameworks, then if you like, you can create one from scratch with what you learned.
It's probably not helping that a LOT of those resources are written by people who never pulled their heads out of 1997's backside in the first place. There's a LOT of bad advice by people who don't understand the entire reason HTML or CSS even exist; this is evident from the halfwit bloated nonsense that makes it HARDER known as frameworks (do yourself a favor, forget that asshattery even exists!), jumping the gun on a specification not even out of draft (HTML 5) that offers no legitimate improvements over the most recent recommendation (4 STRICT) and in many ways is crafted to set development practices BACK fifteen years to the worst of HTML 3.2; that's why I say the only people who can see a legitimate reason (other than Apple and flosstards being dipshits about what media formats you can use) to use HTML 5 are the people who until recently were still vomiting up HTML 3.2 and slapping 4 tranny around it. Now they slap 5's Lip-service doctype on the same buggy broken dumbass code, and then slap each-other on the back for being so "modern" (yes, those are air quotes) and trendy. Really I'd need to know where you're at on that HTML/CSS knowledge. If you're practicing separation of presentation from content, with semantic markup, mated to already properly using MEDIA targets -- you're "screen,projection,tv" target already using semi-fluid elastic layout (yes, BOTH!), leveraging inheritance and avoiding inlining any 'style' as much as possible (which is to say never use STYLE as a tag and rarely if ever as an attribute), starting out with the semantic markup and bending it to your will with CSS to create the layouts -- basically following ALL the things we've been told time and time and time and time again the PAST FIFTEEN YEARS -- then responsive layout is simply the next logical step and shouldn't be too difficult to grasp. However, if you've been sleazing out presentational markup with no separation of presentation from content, using the STYLE tag and attributes at every opportunity, starting out dicking around drawing goofy pictures in photoshop and loading up on DIV soup, failing to properly use any of the tags for what they actually mean, sleazing out px metric fonts in fixed width containers, thinking the giant pile of webrot known as W3Schools is the best thing since sliced bread, fat bloated overpriced garbage like dreamweaver serves a legitimate purpose, loading yourself down with hundreds of K of "gee ain't it neat" javascript for nothing based on idiotic halfwit trash like jQuery or Prototype... with the whole document "in transition from 1997 to 1998 coding practices" -- well at that point the concepts of responsive layout might as well be an alien language. I agree with the concept, not the application. The core concept is to start from the lowest common denominator -- the problem is query aware mobile is NOT the lowest common denominator; non-media query desktop browsers (IE8/lower) are. There's a LOT of people still using IE on XP, that's your minimum target and guess what, there is no IE9/newer for XP. To me, that's the starting point; just as it's the starting point when making a semi-fluid layout. In fact, that's why adding 20-30 lines to my normal semi-fluid layouts is all I usually need to do to make a page responsive. So I'd start there. It's easy enough if you are using things like gilder-levin image replacement and semantic markup to strip off or split into multiple columns depending on size. Sometimes starting in the middle and working out makes more sense, as you have less distance to travel each direction. Grids are also idiotic halfwit bullshit, and the ANTITHESIS of accessible design, much less responsive layout. The whole concept of responsive layout is the exact OPPOSITE of fixed design, much less elastic and semi-fluid design... and a GOOD site should be ALL THREE!. By their very nature grids encourage I'm also not a fan of off the shelf templates because they are by their very nature shoe-horning your content into a layout it wasn't meant for. Content is king; as such content (or a reasonable facsimile of what your content will be) should dictate the markup and logical document structure - then that structure should help dictate the layoutS (yes, plural) you build using your media targets and media queries. That's why starting out dicking around drawing goofy pictures in photoshop is putting the cart before the horse, and I've NEVER seen a website built using that appraoch that wasn't a fat bloated train wreck of ineptitude. There's one of my posts on this forum that might help you; it does ALL the things I just ran my mouth about. How to make responsive design and what is difference between simple design and responsive design? Install the major browsers, resize the Windows. If you've set up the viewport META properly and have the various -text-resize behind a media query in the stylesheet, it's within 99% of what mobile will see. Big thing on that, do NOT target specific devices; that's as flawed a thinking as browser sniffing. IF you build semi-fluid with your media query break-points where the layout needs them, it should adjust to each devices capabilities as needed. Planning to specific sizes and test targets at the start is ALSO the antithesis of what responsive design is for! Trust your instincts -- it's not "a little bloated" -- it's a giant fatass halfwit steaming pile of bull that does nothing but crap all over every broken website built with it. It's something more to learn, and the only thing you can learn from them is how NOT to build a website, and that developers are dumber for this trash even EXISTING. It's just another of those things I cannot fathom how anyone is DUMB ENOUGH to see a legitimate reason to use them; admittedly I say the same thing about Dreamweaver, jQuery, YUI, Prototype, turdpress, LESS, SASS, OOCSS... In any case, IF you grasp semantic markup, know how to leverage inheritance, grasp why we're supposed to build with progressive enhancement, practice separation of presentation from content, and follow recommendations like the WCAG on things like elastic and fluid layouts, you shouldn't be struggling with making a site responsive... If you don't know those things, you really need to sit down and learn all that FIRST!
ds, you buried your link, so I'll disinter and repost it. How to make responsive design and what is difference between simple design and responsive design? cheers, gary
This isn't a tutorial, but the website shows several techniques that you can put together to come up with a responsive design. http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts If you start there and go on to the "related articles" you should get some good ideas.
Anyone who couldn't find it in that short a post, probably has no business building a website. The TLDR crowd can foxtrot right off to the land of ignorance they came from.
Thanks for the comments and links from those who were straightforward with their answers. I am looking for information surrounding the topic also. Be sure to ignore the opinions of one track minded individuals here on Digital Point in your quest for knowledge. What I am doing is studying the already existing Frameworks that allow for responsive design with the aid of their provided tutorials.