Is the trend of list posts killing the design community? And if so who is to blame, the publishers or the people? Two bloggers weigh in with their perspectives. Check out Smashing Magazine Killed the Community (Or Maybe It Was Me) by Drawar and then read the response article over at Good Creative Dog. As a staunch hater of the "50 Awesome Sites" format, I land on Drawar's side. How about you? Leave us your thoughts.
Smashing Magazine recently wrote an article about blogs and design titled, "The Death Of The Blog Post." It's a really great article and well... really well designed. They explore the idea of a “blogazine” – a highly stylized blog that reads more like a print magazine (and the article itself is formatted in such a way). But I can’t help but wonder if you really need to design a blog at all.
What purpose does having a well designed blog serve? Do you expect people to check your blog every day?
Most of the blogs that I find valuable I read through Google Reader. Those who really appreciate what you have to say will rarely even see your design, because they’ll consuming your content through an RSS reader. All that beautiful design work only gets seen by passing visitors. The only time I ever see the design of a blog is when: (a) It’s the first time I’ve visited the site; or (b) I’m just passing through.
I can’t help but wonder if the future of the “blogazine” might be more in the realm application development instead of website development. The New York Times has an Adobe Air application called the Times Reader – which is a digital version of their newspaper – but it’s not just a translation of their website or the print version. They thought about what reading a newspaper on a screen should be like and then developed an application around it. Adobe AIR is still a relative new technology, but it allows designers a new canvas for presenting themselves and their work. I can absolutely see a future where blogs like Smashing Magazine or GOOD Magazine have an Adobe AIR application that offers readers a unique experience beyond the walls of the browser.
I’m not sure that blogs ever really need to be designed. I love Smashing Magazine, and everything they have to say about design, but the truth is that this was probably the first time in weeks I’d actually looked at an article on their website instead of just reading the feed in an RSS reader.
1. Clean, semantic markup
The best thing you can do to lay a solid foundation for a usable mobile website is to incorporate clean and semantic markup. What you may be able to get away with on a traditional website may cause significant problems on a mobile website. Clean markup will help ensure that the browser is capable of properly displaying the website, and it will help give visitors a pleasant experience, with no unnecessary difficulties.
2. Separation of content and presentation with CSS
Alongside clean, semantic markup is the need for the separation of content and presentation. Mobile visitors are much more likely than desktop visitors to see a website with images and CSS disabled. The most important thing for these visitors is to be able to access the content and links: presentation is secondary. A website that uses clean, valid markup, with CSS to separate the presentation from the content, is off to a great start as a mobile website.
3. Alt tags
Because it’s likely that some visitors will not be able to see images on the website (or will choose to disable them), alt tags are extremely important for usability purposes. Of course, alt tags should be used anyway, but it’s even more critical for mobile visitors.
4. Labeling form fields
Like alt tags, form field labels help make a website much more usable for mobile visitors. Imagine trying to use a form without knowing what is supposed to go where. Simple details like alt tags and form field labels can make a big difference this way.
5. Use of headings
With inconsistent and often limited styling of text on mobile browsers, headings become more significant. Mobile browsers are less likely to style text exactly how you would like it to be, but h1, h2, h3 and other such tags generally help make certain text stand out and build the structure of the page from a visitor’s perspective.
6. Avoid floats if possible
Even if a mobile browser correctly displays a website that uses floats for layout, it’s unlikely the website will look good on a small screen. Usually the website will be more usable and look less awkward without floats altogether and with content simply stacked up.
7. Reduce margins and padding
Most likely, your mobile website should have smaller margins and padding than your main website has for traditional visitors. Of course, this depends partly on how much of a margin and padding your website currently has, but very large amounts can make the layout awkward.
8. Pay attention to navigation
Most websites have a primary navigation menu very high on the page. This is helpful on mobile websites as well, but generally, mobile navigation options are scaled down. Provide only the most relevant links, and, if possible, give visitors an easy way to access the other navigation items.
9. Consider Color Contrast
Because mobile screens may not have the same appearance as desktop or laptop monitors, make sure the background and text colors provide adequate contrast so that the content can be read easily.
As with any other type of Web design, testing is a big part of the process. However, testing websites for mobile devices brings additional challenges, and fortunately, there are some tools available that were created especially for these purposes.
For most websites, we can ignore WML and make use of the markup language with which we’re probably much more familiar: XHTML.
We must cater not only to different screen sizes and resolutions, but to different shapes. From short and long rectangles to tall and skinny ones to perfect squares, the mobile world contains a rich tapestry of variation that almost makes you want to pull your hair out!
Traditional website customers are most likely sitting at a desk facing a large monitor that has a decent resolution. Visitors who are browsing your mobile website are unlikely to be in the same circumstances. They may be waiting in line, riding on the train or bus, running to the departure gate or lost in an unfamiliar town late at night and trying to get somewhere.
While the concept of having only one website, and simply styling it differently depending on the medium the visitor is using, is popular with many standardistas, a separate mobile website is required to deliver an optimized experience for mobile users.
When deciding on a domain name for a mobile website, the colleagues and companies I’ve worked with have always used a sub-domain. Creating a sub-domain is the easiest of the options to set up (you already own the domain), it’s the cheapest option (there’s no need to register the .mobi), and it means you avoid having to spend hours tweaking the server (and potentially messing up normal traffic).
Mobile browsers are much less forgiving than desktop browsers. A browser running on a mobile device generally doesn’t have the luxury of a 2 GHz processor and 100 MB of disk space. Therefore, you must check, validate and recheck your markup, time and time again.
Testing your website with a Web browser on a desktop computer can get you only so far in terms of simulating the mobile experience. There are many elements of mobile device usage that can’t be replicated accurately in this way.
Interesting article that talks about Font Anti Aliasing and things that we need to know about that subject when designing. It is a long read but well worth it. Check it out at http://www.smashingmagazine.com/2009/11/02/the-ails-of-typographic-anti-aliasing/
Cool article by Smashing Magazine about CSS3 and HTML 5 layouts and how they will change things for Web Design in the future.
