In the left corner: Tyler Tate’s 1KB CSS Grid, a lean framework sporting 14 classes and the familiar conventions for enforcing a visual grid via CSS.
In the right corner: Vladimir Carrer’s 1-line CSS Grid, an experimental framework sporting a single class to cut nested column widths in half. The solution is mindblowingly brilliant, but does it work? Design tends to work in thirds, not halves. You decide.
Whether or not it’s a coincidence I chanced upon these two extremely simple CSS grid frameworks just days apart, news of these two solutions makes the CSS framework “scene” a lot more interesting. And accessible. I can imagine many front-end developers shying away from heavyweight frameworks because there are too many features, most of which won’t be utilized, and there are too many conventions, most of which aren’t easy to remember.
I’m not even going to get into how using these frameworks leads to unsemantic, presentational class names and lots of <div> soup reminiscent of <table>-based layouts. Let’s just be glad people are streamlining the application of design principles for the Web, namely grid layouts. When a better way comes out—maybe it’ll be display:table, maybe it won’t—we’ll adjust then.
In the meantime, we need to let our arsenal evolve. Balance out the spectrum with lightweight frameworks like these. Then add diversity as well. Look at the Javascript libraries—the tiny moo.fx, the venerable Prototype and Scriptaculous, and the designer darling jQuery—each one caters to a specific need. What other kind of grid frameworks do we need? Fluid? Do-it-yourself? Highly reputable? Unobtrusive? Oh, what will they think of next?
I know rattling off websites in blog posts are a dime a dozen these days and may not be your cup of tea. But you might want to read and bookmark these sites—you’ll definitely keep coming back to them.
It’s a very short list, so you won’t tire easily reading this, and the sites are more like Position is Everything than Smashing Magazine. (No offense intended; I know that SM does a wide variety of blog posts, not just lists and freebies. I just mean they’re more references than resources, okay?)
Web Design+
Web Design+ contains the solutions to common web standards problems. From choosing a DOCTYPE to implementing CSS hacks, this is a great one-stop-shop for the best practices in web design out there. There are a ton of HTML and CSS cheatsheets out there, but reading them shouldn’t stop there. Refine your markup and stylesheets with the help of this site, free!
When Can I Use…
When can I use… compares support for several web design features according to browser version, from HTML to CSS to SVG to other technologies.
For example: thinking of using CSS3′s rounded corners (border-radius)? It’s not even available on IE8 and Opera 10 yet. Of course, you don’t have to avoid using them just because the conclusion says “not ready”. It’s still a very useful page for recalling which browser version can support what.
On Having Layout
On having layout demystifies the concept of Internet Explorer’s hasLayout property. A lot of the IE-related CSS problems that web designers run into are related to hasLayout, so understanding how it works is essential.
The Ultimate Website Launch Checklist
The Ultimate Website Launch Checklist helps one go over key aspects of a website once it goes live. It’s more for the designer-webmaster hybrid, but regardless of your role in the process it’s a good view of what needs to be done.
Here are three little tweaks that go a long way in improving one’s browsing experience and should become default features on every website.
Kottke’s unread posts notification in the title bar
It’s not just web applications like Gmail or Twitter that can enforce the “push” instead of “pull” format that is associated with the real-time web. If you spend a significant amount of time browsing Jason Kottke’s site you’ll probably notice the title bar changing when a new post gets published.
I added a new feature to kottke.org over the weekend: live updating on the home page. If you leave kottke.org open in your browser (with JavaScript on) and I post a new link, the page will display a message urging you to refresh to view some new posts. The page title changes too, so if you have it up in a tab, you can tell at a glance if something’s new. Right now the page checks for new posts every ten minutes, but that could change depending on server load, etc. Thanks to Twitter Search and Tumblr for the inspiration.
Developer hack: Kottke didn’t give details on how he did it, but this script is doing the work.
Infinite scrolling
Paginated websites make digesting content more manageable, but sometimes you just want to consume as much as possible too. Imagine devouring as many Google search results and Flickr images as you can.
Infinite scrolling—at least the hacks mentioned below—load the next page when you’re done browsing the current one. The next and previous page links are still there, so you have both options to choose from.
User hack: install Greasemonkey and the AutoPagerize user script.
Developer hack: use the jQuery plugin or the WordPress plugin.
FFFFOUND!’s keyboard navigation
Don’t underestimate the efficiency of the keyboard. At image-bookmarking site FFFFOUND!, using the keyboard is the best way to get around.
Developer hack: install paging_keys_js.
Google brought back the 80s arcade game Pac Man to celebrate its 30th anniversary last May 22nd in the form of a fully-working Google Doodle on its homepage (it’s been since moved to a dedicated page where people can still play it). The “I’m feeling lucky” button gets replaced by “Insert coin” and clicking on it lets you play. Click on it a second time and Ms. Pac Man joins in the fun.
Apart from hearing collective 8-bit cheers of delight upon discovering what could be Google’s most viral web toy yet, the Pac Man doodle was another display of its massive influence, both the good and the bad. more
Google is throwing its own hat into the web fonts ring with the Google Font Directory and the Google Font API. While it appears it doesn’t have any partnerships with the big names in typography like TypeKit does, just a handful of open fonts, it does have a partnership with TypeKit itself (as you’ll see below).
How the Google Font API works
Once you pick a font, you can embed it on a webpage by grabbing code that looks like this:
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css'>
And use it in your stylesheet like this:
h1 { font-family: 'Josefin Sans Std Light', arial, serif; }
You can also use other fonts using the WebFont Loader, which is a JavaScript library developed by Google and TypeKit.
Bane or Boon?
Although I won’t be ditching Font Squirrel anytime soon, one great thing about this new development is that the fonts are hosted on the most reliable servers in the world, just like the different JavaScript libraries are. The even greater thing is that this is Google, one of the strongest forces on the Web, is placing a stake another aspect of web standards.
Of course those things are scary at the same time. Google can just pick any endeavor under the sun, spend resources on it, and possibly dominate, if not dictate the market in no time. It may not get the purist designer types on board, since Google doesn’t exactly have the best reputation for great design, and its presentation has a bit of a developer slant, but it knows its web design technologies well. And in the case of web standards, where new practices are being adopted and old browsers are being discarded at a snail’s pace, Google’s massive resources and influence can only do well to speed things up.
Blackbird Pie is Twitter’s very own tool for embedding tweets on webpages without the cumbersome, semantics-killing screenshot method. It still lacks the dead-simple interface Twitter is notorious for, since you have to enter the URL of the tweet to grab the embed code and it’s not even built into the system yet, but that’s because it’s a rough prototype at this point.
Since Twitter is an ecosystem of early adopters, it didn’t take long before a bookmarklet surfaced, which sports only a minor difference with the original code in the date format, and seems to display better on this site.
Note that this method inherits your websites styles, which means you may or may not have to tweak your CSS to accommodate it. Unfortunately it still looks bad in feed readers.
Has progress been achieved here?
I’m not sure this is any better than a screenshot. Putting aside the long-winded user flow of grabbing the code since that can be remedied once it’s built into the Twitter system, there’s an overflowing amount of inline CSS to copy and paste. The advantage to this static code, however, instead of a JavaScript embed is that the text is preserved even when the tweet is deleted.
The question remains: should people go through all this trouble to use tweets as quotes? Is there really that much more to be gained by preserving the tweet “format” over a simple blockquote? I still don’t think so.
In celebration of the iPad retail launch, Apple has created a gallery of iPad-ready websites that are said to embrace “the latest web standards—including HTML5, CSS3, and JavaScript”. That is, no Flash. You can even add your site to the gallery (scroll to the bottom).
Is Apple really opening up?
Let’s get the snark out of the way: a gallery, really? How novel. Right now there’s a vertical list (no Cover Flow?) of 20 top-tier websites. Will Apple really painstakingly update this list and add every possible HTML5/CSS3/JS-ready site submitted?
It’s a rare thing for Apple to lead a user-generated campaign like this but its best intentions are a thin veil over their real agenda—eliminating the competition and expanding further in the multimedia business. Does it really care about anything other than the big fish? What are the odds that the most humble of websites will even get into the gallery? Apple markets its products by partnering with the largest corporations that fit into its plans; I can’t imagine caring for the little guy in all of this.
This isn’t even in the same league as the iTunes app store—whose contents number in the hundreds of thousands—but could easily apply the profit-based and biased policies anyway. Not what I would call open or little guy friendly.
Is Apple a true web standards crusader?
Speaking of the app store: you can also develop specifically for the iPhone/iPod/iPad family using the SDK, but those apps don’t work in other devices. The mobile web is booming because of both the “web standards way” and the “mobile app” way, but how are device-specific apps any better than Flash apps (which happen to be cross-platform outside of Apple’s products)? Flipping off Flash when HTML5 and CSS3 aren’t ready isn’t a very responsible thing to do.
If Apple really wants to promote web standards, it should be doing a lot more with its resources to convert and educate people. The gallery is one thing, this documentation is another good step, but where are the resources for developing in HTML5, CSS3, and JavaScript? Partnerships with web standards groups like WaSP? Zeldman or one of the Super Friends speaking at the keynote?
If Apple really wants to promote web standards, see how it practically equates HTML5 with Flash-free media and nothing more. No oohs and ahs over CSS3′s text shadows and rounded corners or HTML5′s geolocation and <canvas>. This is the perfect opportunity to introduce the mainstream crowd to the wonders of these new technologies, yet all it’s pushing is anti-Flash propaganda.
One more thing…
Dear Apple, you’ve done a lot of groundbreaking things, but if you’re going to use web standards as a selling point for your most adjective-ridden product ever, you can do a hell of a lot better than an an anti-Flash gallery.
And by jQuery-esque I mean easy! The premise of Jetpack, Mozilla Labs’s latest creation, is that anybody who knows HTML, CSS and JavaScript can create Firefox add-ons.
It takes 80 lines of code to block ads on websites as shown in the demo above, and 14 lines to edit images from within Firefox. Granted, it just sends the data to Pixlr which does all the hard work, but lowering the obstacles to develop some fairly nifty scripts is a commendable effort, just as what jQuery did with JavaScript, Sass with CSS, and HAML with HTML. It’s made even more compelling with Bespin, Mozilla’s HTML5-powered web-based code editor.
Perhaps I’m still in a “standardize everything” mood, or envy this new doodad since I’m now using Chrome as my default browser, but don’t you sometimes wish all browsers could do this? Do the same set of things? We’re getting to a point where the level of HTML and CSS support is the same across every browser, so it makes me wonder what’s the next step for the idea of cross-browser compatibility.
It will probably depend on what the web browser means to its various makers. Google has unveiled the Chrome OS, which will run on a specialized version of Chrome. Opera is focused on its “web servers for everyone” feature in Opera Unite. (And Internet Explorer is playing catch-up, mostly.) Browsers are basically the gateways to the whole Internet, but they’ve become more ambitious than that and their vendors will attend to those ventures first before convening to create new cross-platform goodness.
Google sfida Microsoft con Chrome by Federico Fieni
Guess whose turn it is to bring Internet Exploder into the 21st century. Google has been dipping its fingers and toes everywhere, including the browser market. But it wasn’t content with creating its own; it just had to meddle with everyone’s favorite browser, IE. And based on the name, Google Chrome Frame quite literally puts Google Chrome into Internet Explorer (versions 6, 7, 8). That is, Chrome’s support for HTML5 and its JavaScript engine.
For ordinary users, it means having to download a plugin for IE so it works just as well as any other modern, standards-compliant browser does. For developers, it means adding a meta tag so their websites actually work work better.
Mozilla has done something similar.
A few months back, Mozilla released a <canvas> element plugin. It’s really not a new concept; clearly folks at Mozilla and Google are taking drastic measures so they can slap sense into IE.
Isn’t this Microsoft’s job?
And look how well they’re doing with that.
Let’s turn the tables on this one: would Microsoft even think of creating extensions for competing browsers? Would we even find this acceptable? Of course things are different; Firefox and Chrome work worlds better than Internet Explorer ever has. You don’t see Kill Firefox or Kill Chrome campaigns, do you?
This is not a cure-all
If you don’t have enough privileges to install plugins on your workstation, the plugin and meta tag combo is useless. It doesn’t solve the biggest roadblock to dropping IE6. And if you can install programs on your computer, why not just get Chrome anyway?
Though it’s a valiant effort to bring the IE6 user stats down by a few notches, web designers and developers would still have to test for browsers without Chrome Frame.
Can you say passive-aggressive?
But is it really a charitable deal with a hint of “desperate times call for desperate measures”? If anything, this move by Google (and Mozilla) is an elegant finger to Microsoft.
Google could just sit on its pretty throne, throw more resources into advertising its own browser, and wait ’til it eventually dominates the market. Search, email, advertising, online office suite, VoIP, real-time protocol: everything it touches turns gold. History is on Chrome’s side.
But there’s more to Google Chrome Frame as it seems to scream: “when will you ever get your act together, Microsoft!”—masked by a 24-karat, “we’re here to make the Web a better place” grin.
The Web Standards Project (WaSP) has just announced that members of the Internet Information Security Consortium (I2SecC) have discovered the real purpose of the infamous Conficker Worm, set to wreak havoc on millions of compromised systems on April 1st.
WaSP has also discovered that the best way to fight this malware is to ensure your websites are standards-compliant:
In order to ensure you do not fall victim to the worm’s botnet, I2SecC recommends immediate validation of the markup and supporting stylesheets for any Web site that you maintain and correcting any errors that are uncovered. As yet, it is unclear whether the worm will target sites that make use of non-standard DOM scripting; however, a message found by I2SecC researchers in an online forum believed to be from the worm’s creator or a close associate hints that it will: “your document.all are belong to us.”
April Fool’s! If only we could save the world from malware with web standards!
Conficker is very real, however, so please exercise caution today.
*/
