I’ve been thinking a lot lately since the surfacing of terms like Responsive Web Design, Adaptive Web Design, and even more so upon hearing Mark Boulton discuss the shape of the web we are currently experiencing. If we stop to think about the way we use the web today, multiple devices like the iPad or the iPod come to mind. How are users accessing this information? Lets face it, we are always after information, but various devices render and interpret code slightly different due to the rendering engines and web standards supported. Responsive Web Design and @media queries are great -don’t get me wrong- but what we are essentially doing still is designing fixed canvas’ all over again. Instead of widths like 960px, 800px or even 1024px we now have widths like 768px, 320px, 480px, 600px, 540px and on and on. What is a Web Designer to do in this mish–mash of options? I call upon EnhanceJS by The Filament Group.
What EnhanceJS accomplishes is something of great wizardry in my opinion. I had the pleasure to read Designing With Progressive Enhancement that includes contributions from intelligent minded folks like Scott Jehl, Todd Parker, Patty Toland and Maggie Costello. EnhanceJS helps to deliver the proper experience to the right audience while maintaining bandwidth, decreasing bulky data/file transfers to create a strong separation between required functionality and enhancements (yeah just like the name…go figure). All of this wizardry is done with the basic foundational markup to give us our run of the mill vanilla experience (basically the foundational HTML markup with minimal CSS styling). By controlling the experience we control the speed, bulky data requests and much more for the user. For example, a mobile phone may only need the styles appropriate to it’s device and not the bulk of the desktop site files(both CSS and JS). It’s so crazy it just might work Dr. Jones. OK, enough talk already here is the live action…
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="root_directory/basic.css" title="basic vanilla styles" />
<!--reference the main brains of the operation -->
<script src="root_directory/js/enhance.min.js" ></script>
<script>
//call to the enhance function
enhance({});
</script>
</head>
<body>
[.....content.....]
</body>
</html>
We can also pass a boat load of options in the enhance({}) function with Object Literal notations like so…
This gives us the option for users to toggle the enhanced as well as the basic experience.” My gosh” you say, ” That is incredible, but what about that screen.js file they have on their site?” Glad you asked! Here is the secret in the sauce
Comment Preview