So what’s the different between Responsive Web Design, Adaptive Web Design and RESS?

The web is constantly awash with buzz terms and acronyms, and keeping pace with them can be challenging. Three fairly similar-sounding terms now exist for three fairly similar approaches: Responsive Web Design (RWD), Adaptive Web Design (AWD), and Responsive Web Design + Server Side Components (RESS). Part of the confusion is that there is actually some overlap in all three of these. I am going to try to clear a little confusion here, and hopefully not add more…

But first, lets talk about me…

Having just written an article about AWD, I was surprised by some of the responses, with regards to AWD being old-hat, and terrible because it meant maintaining multiple layouts at once, and many other issues that just didn’t jive with my understanding of AWD. So I thought I should clarify my perspective…

My understanding of AWD matches this Wiki page, which quotes , who I believe to be the one that coined the phrase. In that Wiki page, AWD is described as making decisions on the server as to which components, CSS, JS, etc., that the user should get, based on the device they are using to view the page at this moment. This approach reduces the delivered assets to only those that are needed for this user on this device.

Some other interpretations of AWD that I have found around the web involve maintaining different layout templates for different devices, which would be horrible, as I know, because I have done that before. It’s painstaking, frustrating, and extremely expensive, because you are basically maintaining multiple websites, all at once. This approach, to me, sounds like the exact antithesis of “Adaptive”. I’m not sure what it should be called, maybe “Redundant” or “Reiterative”.

Okay, now that that‘s cleared up…

So what is the difference between these three?

I’m glad you asked.

Responsive Web Design

RWD was coined by in one of the seminal articles of web development. In it, he builds upon what is perhaps the seminal article of web development, A Dao of Web Design, by , by stating loosely that websites could work across all devices if they follow a pattern of a fluid grid, responsive images & videos, and the use of CSS media queries to make adjustments to the layout, depending on screen size.

RWD is basically one set of templates that is designed and coded to work on all devices, flowing from screen-size to screen-size, perhaps changing the appearance of things on the page, but always working with the same set of HTML, CSS and JS on all devices. This doesn’t mean you can’t fetch different content or display things differently from device-to-device, but you deliver the same set of templates to all devices.

Adaptive Web Design

As mentioned above, AWD was coined by in his book Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement.

As also mentioned above, Aaron basically describes a server-side process that decides what components and assets to send to the device, based on what the device is. This means that desktop browsers might not get a “Call Us” component, and that mobile phone browsers might not get some crazy, large-screen, interactive map, but instead get a link to a store’s address, so their device’s navigation system can find that location itself.

Responsive Web Design + Server Side Components

Finally, RESS was coined by in his article RESS: Responsive Design + Server Side Components. In it, Luke describes essentially the same thing that Aaron Gustafson describes with AWD: letting the server make choices, do the heavy-lifting, and customize the user experience based on their current device.

This is where AWD and RESS differ drastically from RWD: RWD users get all components and assets, regardless of their device, and then there is usually something on the front-end to make choices and perhaps alter the experience based on the device; AWD and RESS users get only what they need for their device. It’s really all about reducing deliverables, thus saving bandwidth, thus improving download speeds and time to render, thus making for a better user experience.

So, RWD sucks and I should use AWD or RESS, right?

Well here’s where I throw it all back in your face: you should use whichever approach works best for your project. :-)

As with most things web-development-related, there is no right or wrong answer, only lots and lots of shades of gray. If your project can work nicely via RWD (as this site does), then there’s really no need to build a bunch of elaborate server-side stuff. But if your project needs fancy components and modules on the desktop that won’t work very well on feature phones, maybe you should try to find an alternative. Even more, maybe you can mostly get away with RWD, but that “one component” is a real hassle; if it’s small enough maybe you can put it in the page and hide it for devices that shouldn’t get it, or maybe you leave it out and fetch it via Ajax for devices that can handle it. You’re the developer, you make the decision.

Happy devving,
Atg

Today’s Readings

I’m a hard-core Chrome DevTools fan, and as great as it is, there are extensions and apps that can make us even better at what we do. Here are 12 of them. The only one I don’t really get is the Window Resizer: you shouldn’t be developing for specific window sizes, you should be setting breakpoints and transitions based on how your content’s look and usability; and to that end, just grabbing and dragging the width of your browser works pretty darned well… :-)

And to my point, here is a great extension that, rather than forcing your page into pre-determined breakpoints, displays your page at the breakpoints you chose: Emmet Re:View. I love the “Sync Scrolling” option! Though, my site actually has breakpoints for super-sized screens (on the home page, the five posts will display side-by-side), and that is not displaying here for some reason…

Okay, just one more for Chrome: “Object.observe() is now in Chrome stable!” Yowzah!

Jenkins is a continuous integration and deployment service. We use at work. It’s really powerful, saves us a ton of time, protects us from a ton of possible human error, and I am woefully lacking in knowledge about it. But Tuts+ is gong to help me set-up my very own installation!

8 ways to improve perceived performance. Not all are new, but it’s worth remembering what we can do to help our users.

A clever approach to making credit card forms suck less. The comments talk about several issues, but seems like a big step in a nice, new direction.

And a series of best practices and recommendations for forms in general, especially when dealing with mobile.

Pretty slick approach to replace if/else and switch statements with Object literals! Really nice.

Full width responsive menu, converts from collapsed on small screens, to two-column tiles, then four-column tiles, then a full-screen single-row. Looks great!

I love TheCodePlayer “walkthrough”s, they’re such a great way to demo and learn code! And this example of the ripple-click effect.

Getting to know Streams in Node.js with . This is exactly the kind of thing I frequently tell myself I really want to learn. And then never do…

The problem I see with using libraries is that we don’t often know what is really happening behind the scenes, and jQuery is no exception. Some time ago told us about first 10, then 11 more, things he learned from the inner-workings of jQuery, and here are 18 more.

As yet another knife in the hearts of those that think their old-school website is good enough for the modern web, Google will now warn users when they deem a site “might not work” on a user’s device… Aaahhhhh, day-am!

How’s your WordPress security? Good?? You sure???

This picture shizzle just got serious as both Chrome and Firefox announced their “Intent to Ship« picture!

So get up-to-snuff with picture now!

And finally, Benedict Cumberbatch stars as Alan Turing in first trailer for ‘The Imitation Game’… I’m getting in line now!

Happy reading,
Atg

Today’s Readings

To anyone still shying away from flexbox, or confused by the various unintuitive names and values, has a fantastic intro primer for a basic flexbox layout.

And if you’re worried about browsers that don’t support flexbox (and you should), you can obviously choose when to switch to flexbox using something like Modernizr, or simply use a JS fallback, like did!

Walk-through of the simple and subtle click-ripple effect from the Google Design site.

And once you have a basic grasp on SVG animation, you can apply that to clipPath to make some cool UI effects.

Or to make a sweet little animated burger icon!

Or add some rad image filters via SVG (please do not create text filters like these…).

Of course, you can also do cool image transitions using CSS blend modes

Some time ago people started talking about, and then Google’s PageSpeed started recommending that, dividing your CSS into above- and below-the-fold, and adding you above-the-fold CSS right in the page. I get the idea, and it’s a great idea, but I’ve never bitten the bullet to try it. Thank goodness someone else did, and wrote about it! I love the web!! :-)

Or you could just use auto-magically extract and inline your above-the-fold CSS with Critical and Gulp. I was curious how they would handle varying screen sizes, then was a little dismayed that you have to manually specify width and height in the init, but I’m really not sure how else you would do it… I guess for a single-site-for-all-devices site you might want to go with the max screen sizes… Still better than naught, I would say!

And for CSS help from another angle, StyleStats will parse your CSS, analyze against a URL, and give you a run-down of what is used how often, and more. I do wish the URL box would accept simply “aarontgrogg.com” and add the “http://” if I didn’t (or at least not clear the box after the error!), and some kind of tooltip explaining what each section title means (like “Unqualified Attribute Selectors”) would be nice enhancements. (Would also be nice if the input and “Parse” button worked by just hitting Enter…)

A couple neat hacks for first ideally avoiding specificity issues, and then inevitably dealing with them.

More CSS tricks! (Some silly ones, of course, but also some really cool ones, including how to do XSS using nothing but CSS… Wha???)

And even more CSS tricks, these specifically for mobile!

Cross-browser, CSS-only, native-looking select elements! A lot of work went into this, so really impressive!

Must-watch videos about javascript. Indeed! Going all the way back to 2009!

Tappy is a minimal, normalized “tap” event that works with touch, mouse, keyboard, and more.

Works with (actually, requires) jQuery, eliminates the 300ms delay, and will even fire for mouse, enter key or space bar interactions.

16 really useful responsive design tutorials. From the classic Smashing Magazine article Responsive Web Design: What It Is and How To Use It, to grids, typography, images, video, and JavaScript.

Nice, quick run-through on the similarities, differences and semantics of the a, input and button tags.

And finally, I’ve been through some tricky launches before, but nothing like the one that happened Top ^

My article got published by SitePoint: Moving Beyond the Responsive Web to the Adaptive Web

It’s a real honor to have an article that I wrote get published on SitePoint.com:
Moving Beyond the Responsive Web to the Adaptive Web

Obviously the web is a subject that I’m passionate about, and having the chance to write about it, and practice it everyday, is (mostly) a real joy…

Thanks to the at SitePoint and at Netbiscuits for helping get this done!

Happy developing,
Atg

Today’s Readings

A nice run-through on Structuring, Grouping, and Referencing in SVG.

Then dive a little deeper into SVG with SVG Design Patterns!

Chrome has add a few new cool features to its Offline mode.

Bike riders: Ever get a flat tire? (It’s like asking “Humans: Ever breathe air?”) A new gizmo called Patchnride acknowledges that “flat tires suck,” but aims to make them “suck less,” by helping you patch the tire, without removing it, in less than 60-seconds. Though, you do have to find the hole and be able to insert their device into that hole, then you do still have to manually inflate the tire again, but it definitely does look cooler than the old, standard patch method…

A new Google Maps-based game, called SmartyPins, let’s you learn while you travel around!

table-layout: fixed;. Awesome!

Finally, an actual use for Yo: Find out if your server is down!

Everything you need to know about CSS for images.

Indeed phones and tablets are less than ideal for doing dev work, but these iOS apps might make some tasks more doable.

Another great presentation by titled Pixels are expensive, but the first major header is a bit more apt as a title, I think: What Developer Need to Know About Webpage Rendering. Either way: watch, learn and put into practice!

Some fancy-ass, CSS-only, 3D animated text.

What do you get when you combine donkeys, Turkish sheepherders, and solar panels? Apparently the Internet.

Larry Page and Sergey Brin on stage together for an intimate interview. I remember the Excite search engine… I used it for about 3 days… Then I found out about Google… :-/

Free download of Mobile Design Patterns book.

Crazy table of all HTML elements that have ever been, what versions included them, and links to their W3C spec.

And here are several options for customizing that ugly select element.

And if you’re bored with all the existing HTML elements, why not start making your own!

Deb.js is impressive even before you see that it is only 1.5kb, or that you can add it to any page by using their Chrome Extension! Been looking for something like this for some time!

And now for a responsive web blow-out sale!

Maybe you want a new responsive theme to get started with on some new project? How about Bootstrap 386? It’s a classic look…

And finally, Mr. Potato Head R2-D2 Action Figure… `nuff said??

Happy reading,
Atg