I thought it would spice up the site a bit if I used sIFR titles instead of plain old Arial titles. Simple to implement, accessible and valid. This method has been around for a while and it’s a great idea, but I never took the time to put it to use until now.
Interested in sIFR? Go here.
Holy cow. I feel like I just hopped into the Delorean and went back in time with Marty McFly. Welcome to the year 2000, kids! Today we’re going to discuss the ginormous amount of shortcomings that using tables for layout poses.
I came across this article via @paulrobertlloyd.
K.I.S.S. means keep it simple stupid and that means tables because tables are simple. And they also work!
Have fun trying to update a tables-based website! Also, have fun with your 10 million lines of HTML, as opposed to my 300 or so. Why is this discussion even going on? Everyone has come to the conclusion that designing with divs is far easier. Aside from the fact that TABLES ARE FOR TABULAR DATA, not layout. They were NEVER designed for page layout. In fact, the web wasn’t even expected to be where it’s at today. I hate how this article tries to teach readers a bunch of shit they discarded ages ago. Hey, that’s cool. If you want to use tables for layout, that’s your prerogative. I’m gonna stick with my realistically simple div-based layout. Thanks anyway.
Tables, at the time, were the only known solution for layout. They were a band-aid. A boat in uncharted waters. And like most things, the div method was discovered, fine-tuned and put into the game because it’s easier. The same applies to CSS. CSS offers global control to a website and gives the designer a better platform to make future website updates on.
It’s one thing to use the regular CSS style to replace the same fonts that will be used all over the place. But it’s another when you take little bits and pieces of code out of the page and bury it some huge .css file and then try to figure out and try to remember where they all came from and what each piece of code did 2 months from no.
What a cop out. “I can’t remember the names I used on my div containers!” Are you actually serious? This entire article screams a bunch of words in my head. The biggest one is “LAZY”. I can go back to a layout I did 3 years ago and only spend about a minute remembering the structure I used. You know why? Because it usually involves about 5 to 6 containers, all named accordingly to what they are. They also require far less markup than your shitty tabular layout. Get out of Dreamweaver Preview mode for once in your life. Go ahead, give it a try. I know the Matrix is a scary world but some day you have to jump in and take the reigns. Just like the thousands of people that did the same and are making beautiful websites because of it.
Let’s take the website that posted this article into consideration. They use inline styles. INLINE STYLES. What happens when it comes time to update the website? Are you going to do a find and replace and pray that it doesn’t bork your entire website? Better make a backup first. Actually, it looks like it was designed back in 1995 so I doubt they ever update their website, other than fill it with articles that are completely irrelevant to today. To top it off, the website is driven on .NET.
I remember setting up a dedicated .NET IIS server. Yeah, I remember how much I fucking HATED every moment of it. Setting up every folder as an application, shoveling through weird errors, pulling all of my hair out. But that’s beside the point. We all know that Microsoft makes EVERYTHING needlessly inefficient and difficult because they feel like they have to hold their ground and use something proprietary. We also know that they never follow any sort of standard, except for their own. This article even covers that. ie, Publisher (absolute crap), Frontpage (complete garbage), Internet Explorer (do I even have to say it?), Silverlight (Flash clone).
The ratio of people who use CSS/div layouts, vs. Table layouts is far unbalanced, unless you’re stuck in 1995, and/or uneducated, and/or just plain lazy, and/or just plain stubborn. I know a few designers that still use tabular layouts. They’re also the same people that use inline styles, NO meta tags, Photoshop’s automatically generated HTML and no alt tags for images.
Let’s be realistic here. The table layout method will never again gain any sort of momentum. It’s done and gone. If people want to continue using it, that’s fine. The only people that will complain are the professionals like myself, who have successfully put the div/CSS method into play for years with flying colors.
Out of inspiration and for the fun of it, I spent a few hours recreating the imageless Google button that I blogged about prior. I’ve successfully done it and now I’m sharing the results. I used the tabular method that Google discarded in favor of a div-based method because I liked the fact that it gave me more control. The button element can also be a pain to tame.
Through the Twitter grapevine, I heard a buzz about something that angered me to no end. Now, before I write this blog, please know that I just completed a rigorous 11.5 hour day of writing code. So if this comes off pretty aggressive, that’s why (aside from the fact that I fucking hate Internet Explorer with a passion).
The dev team for IE8 decided that they were going to once again make things needlessly more difficult for web developers and web standards evangelists. Quoted below from isolani.co.uk:
A year ago Microsoft announced (through A List Apart) that standards compliant websites would be forced to opt into a standards rendering mode in IE8. The uproar from the web standards community was loud and clear: the default should always be render in standards compliancy mode. Microsoft backed down.
So it is with considerably surprise and anger to read that Microsoft have quietly gone back to their original position. The gist of it is if you want to be sure your site renders in standards compliant mode in IE, you have to explicitly opt into it. Otherwise you risk being blacklisted and thrown into IE7 Compatibility mode.
So basically if you want your website to render in IE8 and not get blacklisted, you have to use a new meta tag that the IE8 dev team will inform us of. Otherwise your website will be blacklisted and stuck in IE7 compatibility mode. So when the time comes, not only will we have to test our websites in IE8, but we will most likely have to test in IE7 AND IE7 Compatibility Mode as well.
The thing that kills me about this whole thing wasn’t even in the aforementioned article. In another article on isolani.co.uk, they point out a couple quotes from IE Platform Architect Chris Wilson:
The answer is that developers of many sites had worked around many of the shortcomings or outright errors in IE6, and now expected IE7 to work just like IE6. Web developers expected us, for example, to maintain our model for how content overflows its box, even in “standards mode,” even though it didn’t follow the specification – because they’d already made their content work with our model.
Unbelievable. For years, Microsoft put out a sub-par web browser and now Web Developers like myself are the ones to blame? No. Just…no. We’ve compensated for their shortcomings and deprecated software for years on end and now it’s our fault.
We realized that “Don’t Break the Web” should really be translated to “Don’t change what developers expect IE to do for current pages that are already deployed.”
Now we’re all expected to add a meta tag to our web pages so that IE8 will oh so generously not throw our websites into IE7 Compatibility mode, and will so graciously render them for IE8 instead. Web standards evangelists like Eric Meyer and Jeffrey Zeldman have been spearheading the evolution of the web for years and now we’re all expected to take a step backwards to compensate for horrible, cruft-infested programming and they have the audacity to blame web developers as a collective for the shortcomings.
Give me a fucking break. Make a web browser that isn’t a steaming pile of shit for once. Even now, IE7 has issues.
Let’s take the Mozilla team for example. When there was empty promise of the expected IE killer, Netscape 5, the Mozilla team started from scratch and built what has evolved into the Firefox we know and love today. They started from the ground up and built a web browser that has promoted web standards right out of the gate. Instead of following a similar model, the IE dev team has decided to pile more shit onto the steaming heap that is Internet Explorer and continue to apply bandaids to the holes in the dam.
Earth to Microsoft, Internet Explorer is a worthless piece of garbage. Make something new and stop wasting our time.
This was something I noticed recently and it set me off a bit. It’s a minor thing and I’m sure there is a fix for it but it’s annoying. If you add a link to a page within the TinyMCE editor on the back-end (let’s say you’re using CMS Made Simple because that’s what I use), even if you don’t set a target it automatically adds target="_blank" to the link. The problem with this is that my website validates as XHTML Strict 1.0. the target attribute for urls is deprecated and renders my page invalid. Argh!
If anyone out there knows how to correct this in the TinyMCE configuration or if there’s a hack (or even an alternative WYSIWYG editor other than FCK), please let me know in the comments below.
Thanks!
All I can say is wow. I’ve seen plenty of stolen website concepts before but this one is really brazen. They even stole page content! The saddest part is that they’re a “web design company”. Stuff like this just angers me.
Clearleft’s original design and Thief’s website
On another note, the new Clearleft design is absolutely brilliant. It’s quickly made my list of favorite website concepts. Nice work, Paul and Clearleft!
Update: I guess the thief got the hint and took down their website.
Silk PHP Framework
Earlier this morning Ted Kulp announced the launch of the new Silk PHP framework website. The Silk framework simplifies the development of PHP-driven applications and makes deployment much faster. It was started as an abstraction of key features from the codebase of CMS Made Simple. Silk is released as open source under the MIT language.
You can view the new self-hosted Silk website at http://silkframework.com
While surfing the latest tweets from the ones I follow on Twitter, I came across a tweet from Veerle Pieters about a 3-day fundraising event that SitePoint is holding. Ending February 13th, you can purchase 5 books in PDF format for the price of 1 (29.95 USD). Now, if you’re a web developer/designer that hasn’t used or at least heard of SitePoint, they are a leader in providing resources and books in the form of PDF.
Upon seeing Veerle’s tweet and reading about the situation in Australia, I was moved to volunteering and chose 5 books for purchase. Below, I’ve included an excerpt from SitePoint illustrating the grim situation in Victoria, Australia right now:
SitePoint has its headquarters in Melbourne, the capital city of Victoria [1], a state in the south-east corner of Australia. A little over five million Australians call Victoria their home—that’s about 25% of Australians living in 3% of its land area. Approximately 15% of Victoria’s population live in rural farmlands and forests.
On Saturday the 7th of February Victoria had its hottest day ever on record, peaking at 47.3 degrees Celsius (117 degrees Fahrenheit), with hot gusts of wind travelling at over 100kmh (60mph). The fire danger rating climbed to 400, where a rating of 100 indicates an uncontrollable fire.
From now until February (Friday) the 13th, you can purchase 5 ebooks at a fantastic price and 100% of the proceeds are donated to Victoria to aid in the brushfires. This is a call to all web developers, designers, programmers, anyone interested in web design. These people and this country need our help. Please pass this on.
As everyone knows, innovation is pretty much Google’s middle name. The Google dev team has done it again. If you are a web designer/developer, you’ll be sure to appreciate this more than the general mass that Google’s plethora of tools cater to. Stopdesign recently published an article that gave the timeline and history of their new button system that can be seen now on GMail. The kicker is that these buttons are completely imageless and scalable. All that was required was a little ingenuity, some CSS and some Javascript.
Image courtesy of stopdesign
The buttons we’re using are imageless, and they’re created entirely using HTML and CSS, plus some JavaScript to manage the behavior. They’re also easily skinnable with a few lines of CSS, which was a key factor now that Gmail has themes.
To read the full article, head on over to Recreating the button.
As you’ve already noticed, I’ve totally revamped Bloqhead.com with a brand spankin’ new design. Below the surface there is also a small list of new revisions, including a newer, better blog module, cleaner/leaner/meaner code (XHTML Strict 1.0 to be exact!) and a simplified structure.
Lately my philosophy for nearly everything has been to keep it as simple as possible. Simplicity goes hand in hand with ease of use and accessibility when it comes to web design and development. I’ve taken this philosophy of simplicity from my everyday life and sought to integrate it more with my designs. Sure, bells and whistles are nice but they’re useless to some. Accessibility is key and as a web developer, I have to cater to a large audience.
For you developers and designers out there (especially the web standards nuts), my new website template uses a fully elastic structure. I’ve tested the website down to 800×600 resolution in various browsers with great results. I recently found an old article written by Roger Johansson titled Fixed or fluid width? Elastic! and used it as my guide. It made me take a step back and look at the previous designs I’ve done, the majority of which were fixed width. I questioned what made me use a fixed width and re-thought a lot of my methodology. This was definitely for the better. I have a great understanding of elastic and fluid layouts but the idea of percentages for margin topped it off. In the article about 456 Berea Street’s redesign, Richard Rutter posts a comment that refers to this method as “concertina padding”.
Below is an example of “concertina padding” applied to two floated elements:
#main {float:left;width:59%;margin:0 0 0 4%;}#sidebar {float:right;width:29%;margin:0 2% 0 0;}The percentages for the margin allow for a greater amount of elasticity when the site is resized to a smaller screen resolution. This was a concept I never really touched on. My method has always been to use a pixel or em based amount for padding or margin. Brilliant.
I hope you enjoy the new layout and feel free to leave comments below!