Responsive Web design is a new fad sweeping the most skilled and probably under-worked, web designs and developers, that centers around providing the same website to all viewers, rearranging and resizing content to fit the screen size of your computer, and resizing as the browser resizes.
A like the technology (Usually CSS media queries among others), and it’s fun to write and test. I’m currently working on two designs, one fully responsive, and one that only uses a few responsive elements, to modify the layout for all screen sizes, and for mobile use.
The first is for dsgnsby.me, a site a few friends and I want to build for sharing artwork. The idea behind this was to build a site, that everything views almost exactly the same, and is touch friendly. With the exception of phones 480px or less, it will look the same to everyone, while being fluid enough, though not through normal fluidness, but rather responsiveness, to go unnoticed to anyone not looking for a responsive design.
The tabs for menus, were used because they’re easy to use on a touch device, like my EEE pad Transformer fromAsus.While the demo uses CSS gradients, SVG images, webfonts and other features that don’t work on generation old browsers, everything being used can be made to work with the older browsers, via plugins for fallbacks.
This page still needs a bit of work, its viewable, but may not play nice at small sizes and older browsers. I will be using Respond.Js when I get around to re-coding the stylesheets.
The other site, Skylands design, is almost done, as far as layout and design. It was built from the ground up to be fully responsive, from mobile 320, all the way up to full HD, adjusting and reconfiguring to best display itself.
Currently it is a standalone website, using respond.js to help for older browsers, but many of the technologies used cannot be degraded. CSS Calc is uses extensively for figuring widths but isn’t support by most browsers and have some, less useful fallbacks to keep it organized. Svg images, which make the constantly scaling very easy and keeps the file size down, webfonts, and CSS animations are all used as well, and work in some older browsers, or have plugins that help make them work.
It works surprising well in IE9, and Firefox, but even in some recent browsers it still has some issues, which can be worked out by using min and max widths, among others. You’re thinking, why haven’t I fixed them yet, if i know about them? Well trying a website in a hundred different browsers and versions, and then fixing the code takes time. I only bought the domain and started work on it two weeks ago or so, so cut me some slack. Its also my first real experience with RWD (Responsive Web Design), which has taken time to figure out. (I started with almost 10 CSS media queries and have cut that in half using smarter code.)
Still think I should have done better, take a look at the screenshot as of today, and then click it to take a look at the live page.
To get the full effect, open it on a full HD monitor, and scale down the width to somewhere between 320 and 480pixels. You’ll see stuff resize smartly, or even disappear, as the page shrinks. And for more awesome sites using RWD, check out MediaQueries.
