Don’t you hate it when you’re working on a site, and you finish fighting with CSS, resolving disputes between Firefox and IE7 so everything is perfect, and then you jump over to IE6 only to discover that everything is totally screwed up? I’ve just finished some coding on a site, and I’m so sick of having to deal with IE6. Why are so many people still using it? Nick at Web Designer Wall has made the case recently that we should stop supporting IE6 all together:
Stop using IE hacks on your sites and let them see the ugly side of IE6. Eventually, they will find a better browser (ie. Firefox) or at least upgrade to newer version of IE.
Do you agree?
With all due respect to Nick, and as frustrated as I am, I think this is a rather short-sighted and selfish approach. Sure it’s a royal pain to put in conditional CSS statements and PNG hacks because IE6 doesn’t understand PNG transparency, but do we really think that just leaving out the hacks so that users see the “ugly side of IE6″ will convince them to upgrade their browsers? No, it won’t. I’ll tell you what it will do: it will make them head for the back button quicker than you can say “Bill Gates”, and on to a competitor’s site who IS customer/reader focused and who understands that many of these people who are still on IE6 don’t even realize they need to upgrade. They may not even have a choice, as they surf the internet during their lunch at a company stuck in the dark ages, or they might even know there is a newer version out there, but haven’t the slightest clue as to how to install it.
Obviously, there are some conditions under which you could easily drop the hacks:
- the site’s target audience/customer is tech savvy.
- your stats tell you that only a small percentage of your audience is still on IE6. Who cares if close to 40% of people are still in the browser dark ages. The only stat that matters is what browser your visitors are using.
- leaving out the hack isn’t going to disrupt the user experience that much anyway.
If you don’t want to have to deal with all those hacks, then don’t design a site that uses transparent PNGs or requires conditional CSS. I’m as frustrated as the next person with the snail-like pace at which people are upgrading their browsers, but it’s just part of the job. We’re not designing web sites for US, we’re designing sites for THEM. What are some other ways we can push people to upgrade?
This article was written by Randa Clay. Read more about design, marketing, blogging, branding and all things creative at RandaClay.com.
When Skysports launched their redesign 2 weeks ago, they’ve forgotten one thing. The new CSS-based design is visually appealing, and contains everything one expects from a modern news portal. Enough of whitespace, integrated social bookmarking links and comments. But it lacks in one area: usability.
While the page height has been drastically reduced all over the platform, it has become much harder for the reader to easily navigate the platform. The old homepage was only 400 px higher, had less whitespace, but offered more.
Before, your typical nuke left sidebar offered many different configurations, depending on where you were on the side. The left sidebar has been replaced with a modern header navigation, but a header navigation with some elements in a JS drop-down navigation and other elements in dropdown boxes. More clicks for the user.
On the main and section pages less stories are listed, thus making navigation for people interested in headlines harder.
Bad become both problems on the subpages. Obviously the most popular sport for Skysports, football - soccer for Americans and Beckhams - is the best example of this. Many leagues and headlines were listed on the former football page and the old fashioned left navigation bar offered a quick navigation to the different league pages. Today only some headlines and stories are linked anymore and the leagues have disappeared in a dropdown box.
The design team of Skysports has done a visually appealing job but forgotten that there is no fold! Internet surfers are used to scroll pages nowadays and the great article Blasting The Myth Of The Fold, by Milissa Tarquini, Director of User Interface Design and Information Architecture at AOL, proves that not everything has to be stuck in the little area above the fold, with a practical example: on the 2500px high, now retired, AOL News Daily Pulse one poll at the bottom of the page had more than 325k votes!
Footer design has become a very important part of actual webdesign. Many navigational items are nowadays found in footers. Give the reader something when they arrive at the end of the page. They have thought about a footer area, but the footer can heavily be improved with useful content.
Clearly the Skysports designing team has missed the last 12-18 of web design evolution. Maybe someone can pitch them Roger Johansson’s 456Bereastreet. They might as well learn that the propagation of horizontal design implementation of horizontal scrollbars doesn’t improve the accessibility of any site.
The Skysports redesign, a perfect example of how modern design could make your site less usable.
I’m a big fan of Darren’s ProBlogger. I wouldn’t read it as often as I do if I wasn’t. So it struck me as interesting when he recently launched a complete redesign of his website. When someone in the top 5,000 does that, it’s time to stand up and take notice.
That’s what I’ve done. Let’s take a look at the old ProBlogger and the new, side by side.
The color change is a strong one, but only in the way that this new logo really jumps out at you in a way the old one didn’t. I tend to see that as a good thing, some see it as bad. Overall I would say the logo is a good one, and it’s interesting that it puts a bit more emphasis on the “Blogger” in the name than the “Pro”.
Weekly Video Post
I can tell right now that it’s going to get a little frustrating seeing some form of mangled frame-face each time I visit ProBlogger’s home page now. I suppose I’ll get used to it.
Overall Layout/Design
I can’t help but wonder whether or not this new layout is all that unique. Granted, it’s three column and breaks the 800px wide barrier, so it’s clear that the target audience has shifted a bit. But how much of a shift does the redesign show happening?
Take, for instance, the photo of Darren displayed prominently on the old ProBlogger. Now, it’s tucked away way below the fold, really beyond the point of even mattering. In essence, he has removed himself, visually, from the site. Does this turn suggest that ProBlogger will be written by more than himself in the future? Maybe not right away, but that time certainly could be approaching.
Search Bar Prominence
It’s interesting to me how the search bar gets (arguably) #1 priority by being up top. I’m used to seeing search bars on blogs much lower down on the page (TechCrunch, for instance) but hardly ever up top anymore. It makes me wonder if it was a conscious design choice or just put there because it fit and the space was available.
Content’s Position on the Page
I do like how the new ProBlogger places content much higher on the page than the previous version did. I don’t like when I have to scroll down (on the single post view, even) just to see the content. So I’m glad that was taken care of.
Height of the Home Page
The method of choice for cruising ProBlogger has slightly shifted as well. The old home page used to have ten full posts (or previews) available on the home page to be scrolled. The new design limits the height and the number of posts to seven, and of them only summaries are displayed. I can’t help but be reminded of when Daily Blog Tips shortened the posts on its front page from their full length to excerpts. That received a good amount of criticism as well, and I would say that’s because people like browsing full entries on the home page of a blog. Personally, the first time I check out a blog, I do one of two things.
- First, I can decided (usually) right away whether I want to subscribe to a site just by reading the first post I see. In that case, I add it Feedreader and skim through the most recent posts that way.
- On the other hand, if I don’t know whether I like it or not I’ll page down on the home page to see what else is there.
The reason for this long digression is to say that the new ProBlogger doesn’t allow for the lazy-scroll browsing the way the old one did. Granted, the cool little “popular” box in the middle of the page is nice, but I don’t know that it carries the same effect.
Honestly, I don’t believe that many blogs could survive the switch that ProBlogger has made. Most blogsites need a format that encourages browsing and pushes it to the forefront. ProBlogger must not.
(Note: You can have the lazy-scroll browsing if you want. Just click through to the “blog” from the ProBlogger home page.)
This is what makes me wonder if ProBlogger isn’t headed away from the traditional blog setup. It’s already taken one step, so it may just be a matter of time. I mean, it already looks like a network site, doesn’t it?
Obviously, any modern designer utilizes CSS to style their work; to truly design their layout. But what is the best way to layout the CSS itself? There are no differences when it comes to how your resulting web page will look, but there are crucial reasons to layout your CSS in a particular way.
For most people, the CSS style that seems to be the most appealing is the one that utilizes plenty of line breaks and tabs. It looks something like this:
The spacing allows everything to be easily read as do the indentations. Selectors and attributes are also simple to identify. It appears to be easy to scan as well. But there is a problem with this type of layout.
Size Does Matter
But what happens when your style sheet is both complex and lengthy? You will end up with an unbearably long, extremely difficult to scan style sheet. Imagine trying to find particular selectors on this massive thing. Sure, you could search in the text (ctrl-f), but all of a sudden, the original benefits of the spaced out tabbed style have evaporated. Steve Smith pointed this problem out and I agree with his solution.
If you had a massive style sheet, wouldn’t the above code be easier to scan and work with if it looked more like this:
This is the beauty of Single Line CSS. You basically read it like a graph, with an X and Y axis. You scan down the Y-axis to find your selector and then move right on the X-axis to modify your attributes. You also don’t have these 1000 line style sheets. Steve again puts it best:
To put this into a practical example, one of my single-line stylesheets comes in around 307 lines. Converting the same stylesheet to the normal CSS formatting grows that to a whopping 1167 lines! 6-8 screens of CSS vs 22-25. That’s quite a difference.
Quite a difference indeed!
Scrub Your CSS Clean
The other thing to do with your CSS is make sure that it is optimized. This means using some sort of online optimizer to make sure your code is as concise and least redundant as possible. The optimizers can also help you with shorthand code, in case you don’t have it all memorized. Here are a few of my personal favorite online optimizers:
You are now ready to go forth and create the best code possible!
This post was written by J David Macor.
How many times have you come across a new weblog discussing a specific niche sporting a fairly too common WordPress theme? Probably more often than we’d all want to see. A large number of new weblogs these days are launched with default themes and styling that it’s now becoming hard to identify sites based solely on design and visual identity.
The WordPress Phenomenon
In 2005, default blog templates were fairly “simple,” to put it nicely, until Blogger went through a design refresh with spankin’ new designs to boot. The free theme craze took on a larger scale when WordPress introduced a flexible theme system less than a year after, allowing web designers to apply XHTML/CSS–based designs in a more manageable way. This opened an opportunity for designers to showcase their skills to attract more work, but inadvertently opened a can of worms as the theme distribution system was compromised and used for unethical link building by spam sites masquerading as “sponsors.”
Yet still, the availability of free self–publishing solutions and the growth of the problogging industry resulted in an increasing rate at which new weblogs are launched, a good number of which can be considered “commercial problogs” and a good percentage also run by prominent individuals discussing specific expertise and topics. However, a good majority make do with a free WordPress theme, sometimes even a sponsored one, not knowing how it affects their branding and identity. This goes for company weblogs and well–known individuals, as well as all sorts of self–published “problogs.”
Content is King
It has been a web design adage — content is king — and it continues to hold true up to now. Your weblog and the rest of your site will only be as good as your content. But with today’s crowded blogosphere discussing the same topics, no matter how good a writer you are, there will always be blogs that are just as good (or even better) in your field.
Readers are struggling hard coping with various sources, and some will simply discard feed subscriptions based on design and presentation. Assuming that you write just as well as your peers, or competitors if you look at them that way, what will differentiate you will be your presentation of content and overall design style.
Your Identity, Your Design
Don’t expect your new blog to be taken seriously if you don’t have good content, but don’t expect it to stand out with only good content without a decent design. Everyone these days have the basic SEO, online marketing, and social networking skills to push our sites to various channels. Basically, it doesn’t take as much as it used to for a newcomer to get some web 2.0 mileage. But when you get that attention, make sure you make a good impression, not only with your content but also with your kickass design. Make users remember your site describing both content and design.
It doesn’t cost much to get a good designer to work on a personalized design and online identity, the benefits will be worth every dollar spent anyway. Just make sure you hire someone who groks web design 2.0 and doesn’t fall into these common pitfalls.
Written by Markku Seguerra, rebelpixel.com.
As Movable Type is preparing the Gold release of the new MT4 version, one can only wonder if the once dominating blog platform the power has to make a comeback en force, based on the power of an open-source GPL license and thanks to the community. The Movable Type community is working hard at another package, based upon MT4 and licensed under the GPL. Movable Type Open Source (MTOS) will be released later this year in Q3.
Right now not much can be said about the features of MTOS, but the upcoming release of MT4 might give us an idea of what we can expect.
Are the new features in MT4 exciting enough to catch attention?
Redesigned Dashboard
The new dashboard is very modernly styled and almost completely customizable, thanks to the MT template tags. It seems as if this feature will rather be used by the real coding, designing geek than Joe Average, but expect many dashboard mods to be released by the MT community.
The nicest features for the user who doesn’t like to customize the dashboard structure, are IMO the standard activity log and graphics for entries and comments, but I can’t really say those are groundbreaking reasons to switch to MT.
Simplified Installation
The installation process of Movable Type has become a lot easier, but still isn’t easy enough, compared to other platforms such as WordPress or even Expression Engine.
And honestly, a 40 minutes long upload process (almost 2000 files) might put off users. To have a chance long term, the MT community definitely has to create a Fantastico installation process, because I can’t imagine updating several blogs if I didn’t have shell access to uncompress archives directly on the server.
Better Publishing
Except for the world’s smartest template language I really can’t figure out what is innovative among the new features in MT4. Unless it were for the in house support for both Markdown and Textile, which are standard plugins MT4 is shipped with.
A notable mention deserves the easy multiblog setup, but the biggest annoyance about MT has not been solved yet: the slow republishing system when the user opts for statically published template pages. Rebuilding archives still takes ages depending on their size. The standard implementation of the CatCalendar plugin would have improved MT4 majorly.
Update: Byrne Reese, Product Manager of MT, points out in the comments that the CatCalendar functionality has been intgerated in the core of MT4.
Community Building Services
Community building improvements, such as built-in registration, the integration of OpenID (and other services), rating services and customizable feeds or even reply to comments from the dashboard, don’t really do it to me. I fail to see any innovative factor in those new features — innovative to the blogosphere that is — as most of those features are nothing more than the core implementation of some of the most popular plugins for other systems.
Conclusion
This might be a groundbreaking release for the MT community, but from the view of a WordPress user there is nothing to get really excited about MT4. The success of MT4 will majorly depend on the speed and accuracy of the MT community to release new plugins, already existing popular plugins for other platforms.
MT might have a more stable, better scaling platform for the industrial blogger but right at the moment MT4 (and MTOS) isn’t ready to start eating of WordPress’s cake. MT4 needs to be simplified, simplified for the user, not every blogger is a code freak, wanting to fiddle with templates.
An active and thriving community certainly can make MT more popular and a widespread alternative to WordPress.
The Six Apart Team deserves all merits for having released MT under an open source GPL license!
Disclosure: I recently switched several of my own sites from WP to MT4 RC and the geek in me loves that almost every plugin I was looking for (sitemap, contact form, feed redirect to Feedburner), can be realized with MT templates, but all this could have been solved much easier. Right now I can’t advise anyone without coder’s, designer’s soul to switch from WP to MT.
These 4 mistakes in basic blog layout are all too common and all too easy to fix:
Fluid Layout
Blogs with a fluid layout almost always result in the post column growing wider to fill the screen. In a time when we are all trying to consume more information than ever before, this is a mistake. There is a reason why newspapers don’t spread their columns way across the page. This study at Wichita State University found that a medium line length of between 65-75 characters per line, or about 15 words, was the optimal length for online reading. Readers need to be able to scan articles easily, and they will take in much more of what you write if the line length makes it easy for them to read quickly.
Too Wide
What’s the right resolution for your site? That question is always answered by looking at your stats. Any decent stats program will show the resolution visitors are using. A good rule of thumb is to try and not tick off more than about 5-7% of your readers with a resolution that is too large for their screen. It can be difficult to squeeze everything so it will fit those old 800×600 resolutions, but depending on the niche one is in, there may be no choice. Particularly if there are ads in the right sidebar, it only makes sense to make sure that the maximum number of users can see them.
Important Stuff in the Footer
I really like blog themes that have an extended footer, such as Brian Gardner’s Vertigo theme, but don’t put things down there that are too important or keyword rich. Rather, include things such as badge farms, Flickr sets, monthly archives in that space. Don’t count on many readers scrolling down far enough to see it either. The more keywords something contains, the higher up in the page it needs to be, for obvious SEO reasons.
Not Enough White Space
Read any good design book and one of the key elements of good design is use of white space.
White space is often referred to as negative space. It is that portion of a page left unmarked: the space between graphics, margins, gutters, space between columns, space between lines of type or figures and objects drawn or depicted. (Source: Wikipedia)
While it is very tempting to cram as much information into as small a space as possible, the result is a cramped site that is difficult to read and navigate. An overwhelming or cluttered site makes readers uncomfortable, and reading from the web is rather hard on the eyes as it is. Check out Mark Boulton’s article on A List Apart for a very good summary of how to use white space and the aesthetic difference created just by allowing a design some room to breathe.
This post is written by Randa Clay
Sketch Design is what I call it when a web designer uses techniques that go beyond standard web graphical elements. Your standard elements are buttons and banners that generally try to mimic a real world texture, whether it be plastic or glass or something along those lines. This is a tried and true technique that is certainly the one that I employ the most. However, a newer breed of designer is using a more classic technique.
More Artist than Web Designer
To be a sketch designer, you need to have artistic skill: be able to draw and sketch and have a masterful understanding of color. Contrast that with a standard web designer who finds color palettes, instead of creating them, and who can’t sketch a stick figure, much less anything more complex. If you really think about it, a basic web design is nothing more than a glorified set of rectangles. A sketch design breaks the boundaries of grids, while keeping all of the content elements in focus. To achieve this effect, the designer must be highly skilled and knowledgeable in how to layout a design, such that if the artistic flare wasn’t there, the content would still make sense (obviously, standards play a key role here).
Enough rambling. Let’s take a look at some examples of this style. The first two I have showcased are by a fantastic designer named Nick La. The first is N.Design Studio, his personal portfolio, and the second is Web Designer Wall, which discusses trends in design.
Nick uses many stylish elements in these two designs. Florals are a key aspect of the look and feel. As I mentioned earlier, these elements break the boundaries of the grids that hold the contents, giving them an almost natural feel. Something else that is very popular is the use of paper, which is of course the original medium of sketching!
The next couple of designs I want to showcase implement the artistic sketch technique, but in a rougher way. The two sites that I picked are the Biola Undergrad site and JESUS RODRIGUES VELASCO.
The look that is accomplished with the technique here is quite natural. It actually looks like pencil sketching on a canvas as opposed to a website on a screen. The use of textures and crooked elements really set these two designs apart.
To pull off this kind of look, you really have to be quite skilled artistically. I taught myself web design using books and online tutorials. However, to be a Sketch Designer, you almost have to have proper artistic training. Sure, there are scattered tutorials to teach you certain techniques, but to really stand out, you have to do something original; something that you have perfected after a long time of practice. Most designs are a variation of a simple grid (think of all of those bare bones css templates you see on Del.icio.us), but Sketch Design can break the boundaries and truly make a design great.
This post was written by J David Macor.
I predict that personal home storage is going to all but fade away in the next few years. There just won’t be any need for it. Those who still insist on buying portable hard drives and encased gigs to throw next to their machines will be looked at by the young’ns the same way we look at our grandparents who stuff their money into mattresses for fear of trusting the bank.
I understand and respect the risk that many see that comes with trusting all of their data online. But the risk of losing data is going to be faced anyway, whether it’s in your home office or in a server camp in California. In both cases there’s risk, but that doesn’t mean the same pros/cons come with each. For example, with a hosted storage solution you don’t have to worry about
- managing your own space, including environment control and troubleshooting,
- paying the bills to keep it running all the time, or
- worrying that your house will burn down and take your data with it.
Although before storing online you should be concerned with
- securing your information (much like Grandma’s cash in her mattress),
- copyright regulations and user agreement forms, and
- playing nice with Customer Service Reps. Who enjoys that?
So there are some ups and downs to each side. But imagine what the geek world will look like let alone the rest of the world. For one thing you may (sooner than later) be considered a dinosaur for purchasing extra hard drives. I’ve already given a few photographers a weird look when they don’t know about Flickr (before evangelizing them, of course).
Flickr’s a good case study, actually. This is a service that will host your photos, make them manageable and shareable, and do it a hell of a lot better than your computer can. But if RAW is your thing, well, you aren’t storing them on Flickr. So the purist would say “There, you need personal storage for that.” Well, besides the fact that I think the purist would miss the point of the case study, I do agree that internet based storage services have a way to go. But Flickr is nipping at the possibilities; this combined with Google Apps, numerous writing applications, and now presentation services available online, one can’t help but wonder what the use will be for desktop storage (let alone desktop applications) in the time to come.
Imagine all of your data being accessible from anywhere. And it’s easier than navigating your computer’s hard drive. And it can be shared and collaborated on by anyone you choose. And backups are limitless. And it’s free.
The direction the internet is headed, as far as I can tell, is to make the desktop a portal. One of the first things to go has been applications (I can’t remember the last time I used Word if I didn’t need to) and storage is not too far down the list. In some ways, this is an exciting shift that’s happening. In other ways, it may only be the changing of hands (from the big shots now to the little shots who are going to be big shots later). Only time will tell.
When F8 launched and the whole world plus 3 users joined Facebook, many bloggers started crossposting their entries to their Facebook profile, in many cases if without knowing that they handed the credits of their submissions to Facebook.
You acknowledge and agree that any questions, comments, suggestions, ideas, feedback or other information about the Site or the Service (”Submissions”), provided by you to Company are non-confidential and shall become the sole property of Company.
As if this scare (and especially the noise in the feed reader) wasn’t enough yet, Plaxo is set to launch another social media platform life stream aggregator for members tomorrow.
An early version of the not working new Pulse platform was rolled out on Friday and gave every early bird a taste of how frustrating a non working platform is. All in all, the minimal, already visible features (import your flickr and blog feeds) show no reason for anyone to sign up to Plaxo.
Nice would it have been if the early email address book service had given us a phletora of new features, but (non-working) feed imports are too little to launch as a social network. Especially since a service like MyBlogLog offers much more profile options and actually generates generates (minimal) traffic for bloggers.
Plaxo? Who cares?
No one.
I just imported 300+ email addresses to Plaxo, majorly bloggers, and less than 30% are present at the service. Unless something changes, and the Plaxo team reveals real and exciting features… the hype (what hype?) around Plaxo will never see the daylight.
Plaxo is an all time loser online. No matter what they try, the team doesn’t have the innovation spirit to set a new mark online. I’ld gladly stand corrected, but I don’t hold my breath.
