I know people talk a lot about using grid tools like bootstrap but I come from a from scratch HTML background and I know from that background that knowing the fundamentals of web design (HTML) continued to be using even when WYSIWG applications like Dreamweaver emerged.
I would want to learn how to design responsively from scratch without using any Grid tool like bootstrap, and later learn how to use those tools. Is there a tutorial or book out there that cater to my need?
You can find a lot of resources here.
Responsive design is basically designing for an unknown width. That means you must make sure your layout fits into any width as appropriate. Whether this means designing a simple one column site that automatically fits everywhere or a multi-column site that re-arranges with media queries when it needs to is up to you.
Don’t design for devices (there are too many). Just concentrate on the design in hand and when something doesn’t fit at a specific width then throw in a media query and make it better. You can do all of this on the desktop by just opening and closing the browser window smaller or larger.
Avoid fixed width designs and fixed width elements where possible as that will make things awkward. Use percentages combined width max-width to allow the layout to scale easily.
Don’t forget the viewport meta tag as the media queries won’t work properly on mobile devices unless you have that in place
Thank you. Is there a particular book you recommend that covers the fundamentals? A bit difficult using resources when you really don’t understand their use. Thank you for the Viewport link.
Responsive CSS is just CSS. Learn the basics of CSS first and then those resources I pointed you to will all make sense.
There are many beginners books around on CSS and a few in the SitePoint catalogue so I would start with those first (or take a course on learnable).
Responsive web design is about the approach you take with CSS so you do need to learn the basics of CSS first. The trouble with books is that by the time they are printed they are mostly out of date.
Smashing magazine has a new book coming out soon so should be more up to date than most.
Other resources:
http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/#b2
http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.