Isometric banners is the best way I have found so far to describe this new trend I’ve observed in web design for the past months. More and more websites seem to wear these modern bass relief decorations, usually to make important points stand out from the rest of the design by climbing  “above”. Here is a collection of 8 examples of such isometric banners in action.

Canonical example: yoast.com
On this example we can clearly see how two levels of isometric banners stand out from the rest of the design.

1. Design Mag
The effect can be seen in the header of Design Mag.

2. ZinePress (Wordpress theme)
On ZinePress, isometric banners are embedded along the sidebar.

3. Imprezz (Wordpress theme)
Imprezz also embeds isometric banners in the sidebar (actually the middle bar given the design).

4. Vintage (Wordpress theme)
Vintage uses a shadowed version of the stand-out banner.

5. Blues (Wordpress theme)
Blues proposes a rounded variant of the classic square isometric banner.

6. Webdesign News
Webdesign News displays two such banners: one in the header and one in the footer.

7. Kupferwerk
Kupferwerk illustrates a slick version of the shadowed isometric banner.

8. Cats Who Code
Last but not least, Cats Who Code designed an unicoler isometric banner on the sidebar.

Please do let me know other examples you know by referring to them in the comments.

Updates:

9. From The Couch
From The Couch has original irregular isometric banners.

10. Sarah Longnecker
Sarah Longnecker has two isometric banners.

11. Build Conference
Header and footer are isometric on Build Conference (very clean design too).

Related posts:

1. Redesign of nemetral.net Today is the launching day for a redesign of nemetral.net!...
2. 15 must-have features for modern design blogs (part 2) In part 1 we saw how modern design blogs usually...
3. Will brown be the next fancy color? It is always a pleasure to detect new trends in...

The basics

Twitter is a realtime platform on which you can share what you’re doing in less than 140 caracters. Using it is as simple as pronouncing its name: you create an account on http://twitter.com and start feeding it with your status, like “I’m eating noodles” or “Can’t remember my PIN code”. Each time you feel like sharing what you’re doing, you log on Twitter and update your status. You can follow people’s statuses and people can follow yours. This way you stay updated in real time of what everybody’s doing around you.

The power of APIs

Twitter alone works well, but the smartest move was to build a powerful API for the web service. As I explained, illustrated and demonstrated in previous posts, a good web service must escape from its very own URL and start spreading all over the web (and beyond) through a powerful, reliable and secure API. Twitter has one and it works. Dozens of apps have been developped based so far: some of them enhance Twitter’s default features (like adding pictures or creating groups of Twitterers), some bring Twitter to the desktop (mainly AIR apps), some mash up Twitter’s data with anything else, etc. Twitter can now be fed from other websites, from your browser, from your mobile phone. Twitter’s API made Twitter more reachable, more flexible and dramatically increased its presence. As confirmed by Twitter cofounder Biz Stone, Twitter API traffic is 10 times Twitter’s site.

Early criticisms

Twitter encountered early criticisms - some of them justified. The service has often been down in the past - see TechCrunch’s archive - which caused legitimate anger in the blogosphere. Some pointed the very language Twitter is built in (Ruby) and accused it of being too slow. Some attempted to describe how the very thing Twitter does makes it so hard to scale. Twitter’s former architect was heavily criticized for not being able to properly manage Twitter’s scaling. The very fact that Twitter has been early criticized is the best indicator of the tremendous interest early adopters had in the product. You’ll never see such hate directed towards a web service no one cares about.

Shown by big names

I have to admit I’ve been quite amazed to see CNN’s Richard Quest naturally looking at his laptop in the middle of Quest Means Business and readout recent Twitter updates about its very show. TV is an old and established media: not only does it show off Twitter to millions but it also participate in establishing Twitter to the rank of indispensable media. I doubt whether Facebook will ever make it to a TV show for what it really offers - of course Facebook will make it for Zuckerberg’s karma or the challenges of preserving online intimacy.

A Twitter ecosystem

Twitter is part of the palette of services covered by social media consultants: people are making money out of Twitter through consulting fees. Freelancers are also showing a growing interest in offering Twitter freelance services: some webdesigners seem to be specialized in customizing Twitter accounts, another fancy name for building static pictures shown as the profile’s background. Modern design weblogs are integrating Twitter backgrounds in their traditional lists posts and there’s even a gallery dedicated to Twitter backgrounds.

Vision and monetisation

There is no official monetisation strategy announced yet, but it is said that Twitter wouldn’t be sold for everything in the world. So there’s a huge potential. The trendy analysis is to compare Twitter to Google and explain that Twitter is a realtime search engine whereas Google only searches in published websites and documents. It is true that it takes more time to write a blog post than to update a Twitter status. In a way, Twitter is like Reuters by and for individuals and it has shown its power during 2008’s earthquake in China. We could imagine scientists checking out earthquake-related statuses on Twitter.

Spam

As shown in a recent article on RWW, Twitter users can be victim of spam. Spam stinks but it only goes where traffic goes. Spam forces the application to evolve and fight back to protect its users and, along with scaling, is one of the major challenge every big web service has to tackle. Again, had there been no buzz and no growing fame for Twitter, there would certainly have been no spam.

The shorter the better

The main reason of Twitter’s success is surely its 140 caracters limit. Users are forced to cup the crap and only write what matters. This is perfectly in line with the behaviour of online people who don’t read but scan - I would be very glad to know you have takent the time read my post so far but I wouldn’t be surprised to learn you have only scanned the titles. Time matters and keeping it short ensures it can be updated in real time.

As far as I’m concerned though, I still can’t remind to feed my Twitter account with fresh data. I would definitely need one of these Firefox plugins to update my status directly from the browser since browsing Twitter’s very website is still far from natural for me.

Related posts:

1. The pursuit of APIness (part 6) The first five posts of series "The Pursuit of APIness"...
2. The pursuit of APIness (part 4) Last week we reviewed the principles behind a RESTful architecture....
3. Contest results: get to know the 4 winners The contest ended last Friday, January 30th at midnight. A...

The four winners have been randomly selected among people who left comments using the following query where, of course, XXX stands for the actual post_ID of the contest post:

SELECT comment_ID, comment_author, comment_author_email
FROM comments
WHERE comment_post_ID = XXX
ORDER BY RAND()
LIMIT 4

And the four lucky guys winning 250 free business cards each (courtesy of Uprinting.com) are:

• Steve Robillard
• Aetoric Design
• Michael Saganowski
• chris

Congratulations! They will all receive an email soon with further details about their prize.

Again, thanks to everyone for having participated.

Related posts:

1. Contest: win 1000 free business cards Happy new year 2009 to all my fellow readers! To...
2. 15 must-have features for modern design blogs (part 3) Last week we saw how modern design blogs usually manage...
3. Who has 100 million competitors? I recently stumbled upon an entry from respectable blog 3by9...

Happy new year 2009 to all my fellow readers! To celebrate this coming year, nemetral.net has tweaked its CSS file and offers you this fresh redesign focused on asthetics and readability.

Win free business cards

With the help of UPrinting.com, I offer a giveaway of 1000 free business cards! To participate, simply leave a comment to the present post stating what you would do with free business cards. Then we will select four answers and give them 250 free business cards each*.

The deadline for the comments is set to Friday 30th January at midnight.

A thumbs up in Digg or Delicious or any social goodness would be greatly appreciated.

Above all, don’t forget to leave a valid email in your comment!

I leave my comment now!

UPrinting is a trusted online printing company committed to providing a high quality printing experience at affordable prices. They make nice Business Cards. Be sure to spread the word about Uprinting’s Business Cards printing services!

* Business cards will be shipped for free towards United States and Canada only.

History of redesigns

This redesign of nemetral.net being the 4th one since the creation of the blog, here is a little retrospective of the different CSS dresses you could see over the last year.

Good luck for the contest.. and be sure to spread the word!

Related posts:

1. Contest results: get to know the 4 winners The contest ended last Friday, January 30th at midnight. A...
2. Who has 100 million competitors? I recently stumbled upon an entry from respectable blog 3by9...
3. My five resolutions for 2009 Nemetral.net has been around in the web sphere for almost...

1. Explore the niche

Nemetral.net is a blog dedicated to out-of-the-ordinary posts on and about webdevelopment, with a strong focus on clarity and education. Contrary to most other blogs, the posts written here are supposed to mature but not to get outdated: by tackling issues generally beyond day-to-day webdevelopment (like deep explanations about coding techniques or introductions to architectural patterns), the posts are aimed at satisfying demanding readers even months after they were originally published. This blog is complementary to mainstream “flow” devblogs and targetting readers desiring to step back and take the time to examine specific issues related to webdevelopment.

2. Write bimonthly posts on design and code

To my view, design can’t be separated from code and this blog will keep on publishing articles about both sides of webdevelopment. This resolution therefore consists in clarifying the frequency of posts on nemetral.net: there will be new posts twice a month.

3. Redesign

A new design is on its way, totally original and, as usual, created from scratch. It will be launched to celebrate the New Year and will come along with an update to Wordpress 2.7. Here is a sneak peek:

4. Expand

More and more topics are to be covered: step-by-step tutorials on how to handle CodeIgniter, discussions about PHP frameworks and architecture of webapps, analysis of design trends, howtos and introductions to non-mainstream tips and techniques. Nemetral.net may also start publishing guests’ posts as well as posts answering readers’ needs: don’t be afraid to ask an explanation on something you don’t understand, and I would be extremely please to write a full post on that specific topic, as I’ve already done.

5. Secret project

2009 is gonna a busy year, but I really wish I will find the time to kick off that secret sideproject I have in mind for months and which I have somewhat started to design. Yes, it’s gonna be a webapp, and yes it’s gonna rock!

Related posts:

1. Contest: win 1000 free business cards Happy new year 2009 to all my fellow readers! To...
2. MVC dilemma The most interesting questions often arise after theory has been...
3. 15 must-have features for modern design blogs (part 3) Last week we saw how modern design blogs usually manage...

Frog CMS: http://madebyfrog.com

Markup Factory: http://www.markupfactory.com/

Xero: http://www.xero.com/

Wordpress Shuttle: http://www.brokenkode.com/shuttle/

Squarespace: http://www.squarespace.com/

Firerift: http://www.firerift.com/

Accord5 Trellis Desk: http://accord5.com/trellis/

eManager: http://themeforest.net/item/emanager-10/19140

ActiveCollab: http://www.activecollab.com/

DabbleDB: http://www.dabbledb.com

I hope you enjoyed this series of admin designs.. please feel free to comment and suggest the ones I missed!

Related posts:

1. 10 inspiring admin interfaces Clients pay big bucks for sexy frontend designs but don't...
2. 15 must-have features for modern design blogs (part 2) In part 1 we saw how modern design blogs usually...
3. 15 must-have features for modern design blogs (part 3) Last week we saw how modern design blogs usually manage...

I had a couple of questions with respect to your articles on gentle introduction to MVC. I *really* want to understand MVC. I have little experience with web development, so the things that I develop look “okay” on the surface, but they are messy underneath. I read so much about MVC that confused the heck out of me but then I finally came across your simple intro, and I think it’s a really nice start for me. If you wrote a book about more on the concept, I’d be the first to buy it. I think that I understand the general idea, but I think I’m having a tricky time with implementation. I would *really* appreciate if you could answer a couple of questions..

1. Mapping between controllers and models:

As part of a lab booking system that I’m working on, one screen handles the showing of existing bookings, addition of new bookings, and deletion of bookings. I call it “SAD” (show, add, delete). I’m having trouble with the SAD controller and SAD model. In my test “router”, I call the SAD controller if I see (through POST) the need to show/add/delete bookings. The SAD controller instantiates the SAD model .. it’s not quite clear if there’s always a one-to-one mapping between a view, controller, and model or whether my concept of a SAD controller and SAD model right from the get-go isn’t correct?

MVC is to be understood as a general guidance regarding code decoupling and organization. As such, there is no strict MVC rule requiring to map certain controllers to certain models. MVC can be implemented in various ways: the diversity of existing frameworks is certainly the best evidence of it. Back to your question: your concept of one SAD controller and one SAD model is right. I wouldn’t call it “SAD” though but rather “Bookings”, because the “SAD” operations can be executed on many different types of data (blog posts, users, images etc.): I personally always call controllers and associated models by the type of data they represent (as many other CodeIgniter hackers do) knowing that similar operations will be executed on them all (what you call “SAD”, which is by the way usually dubbed as CRUD for Create, Read, Update and Delete). Concerning the router: I usually prefer to rely on GET variables rather than POST variables (see my post about REST), i.e. configure the router so that it loads the controller when specific URLs are called. Both my controller and model are objects: for my controller, the object’s name would here be Bookings and each action I can undertake would be a method in my object. Here is some sample code for the object’s structure:

<?php

class Bookings
{

   public function add()
   {
      // code goes here
   }

   public function edit()
   {
      // code goes here
   }

   public function delete()
   {
      // code goes here
   }
}

?>

Each one of these methods would be bound to a specific URL:

• the add method would be bound to http://example.com/bookings/add
• the edit method would be bound to http://example.com/bookings/edit
• the delete method would be bound to http://example.com/bookings/delete

The router’s job is to effectively bind the URLs to the correct controller and methods (see some code snippets in Part 3 of my MVC series of post). Some methods may require a model, some other may not: this is why it is a good practice to instantiate the model from the called method of the controller. Say the add method requires the Bookings model, then I would instantiate it inside the method. Concerning the view, there will certainly not be a one-to-one mapping between the Bookings controller and the Bookings view: I need a specific view with a HTML form to add bookings, another one with another form to edit existing bookings but I don’t need a view for bookings deletion. These views can be seen as “sub views” (only the HTML forms) which can in turn be embedded into a more general view called a layout. To summarize, I would have a Bookings controller instantiated by the router, a Bookings model instantiated within the controller’s methods (if needed), a Bookings HTML layout (containing the <head> and most of the <body> tags) and several sub views inserted inside the layout depending on the controller’s method called.

2. User authentication

Now, let’s say that I want to add a booking - that is, a user types a booking name onto the SAD (view) , and clicks the “NEW” button. Is it the SAD controllers job to determine whether the user has access to write the booking or not and then to pass the request on to the SAD model for the actual write? Right now, $_SESSION['access'] has that detail, and the controller checks it, but I don’t know if that’s right. When it comes to actually writing the booking — the SAD model just uses a PHP class called “booking” that abstracts the booking idea (XML files for bookings). However, do I need to have a stub function for the “write()” call from class Booking in the SAD model class so that the controller can call it without having any understanding about the details of how a booking is stored?

Checking whether a user is allowed to interact with data is indeed part of the controller’s job, so what you’re doing there is perfectly in line with MVC principles. First the router maps a URL to a controller and a specific method; then the called method will find who the user is, what he can or can’t do and will therefore allow him to perform a specific action or not. If the action requires interaction with data, then the controller will delegate the task to its model (which in turn will typically be an object with methods like add(), edit(), delete() etc.). Either the model’s methods directly call the database and perform the action, or you can insert another layer of abstraction and further delegate the job to a specific class so that you can easily switch storage support (database, XML files etc.) later on for example. So the answer is: it mainly depends on the complexity of your project. Either you know you’ll stick to XML files and you can directly write the code in the model’s methods, or you’re not sure about it and call a third-party library to handle it.

3. Designing methods in the controller’s object:

I then have another class called “BookingDatabase” which knows how to see a list of all bookings, check if one exists, etc. If I want to check if a booking exists in the SAD controller before I call the “add booking” function in the SAD model, do I need to have a stub for the “exists” function from the BookingDatabase class in the SAD model as well so that the controller can check if a booking exists before writing it?
Now, let’s say I have another screen — the “EDIT” screen. I would then have an EDIT model and an EDIT controller — but this would need to write bookings as well — would the “edit” model then need to have it’s own stub of the booking classes write function?
Assuming that it makes sense to have an add_booking function in the SAD model — does it make sense to have one in the controller as well? The one checks that the user has access to write the booking, that the booking doesn’t already exist, that the booking name is valid (using functions from the model) and then calls the add_booking function from the SAD model to write the booking?

According to the structure I previously suggested, the edit action should be handled by the Bookings controller together with the Bookings model. So the edit feature would be implemented as a method in the Bookings controller, bound to a specific method in the Bookings model in charge of effectively editing the selecting records (through a third-party library or not). This method would call the main layout of the application but would insert a specific view in it: the edit view containing the HTML form. The other point you raise here is correct: you can check if a booking already exists in the Bookings controller by calling a specific method in the Bookings model. And the whole process you describe concerning the add_booking function is perfectly in line with MVC principles too.

4. Enhancing the views

A couple of my views have a couple of small associated javascript functions. Where do they go? Do they remain in the view? I’ve stuck them in the “controllers” directory in a separate .js files, added them to the view files.

Views are basically HTML files, and as such they can be enhanced with CSS and JavaScript. So these external sheets should be located in the same directory than the views. That said, this kind of organization depends on the framework you’re working with: with CodeIgniter, views are located far away in the arborescence and it’s a pain to insert CSS and JavaScript sheets, so I usually relocate them just one folder away from the root. As they can be located anywhere, it’s better to choose a folder close to the root as it’s easier to call them from the HTML views.

Conclusion

Almost everything I know in computer science was learnt the hard way (trial-and-error) or by reading tutorials or forums where hackers kindly explained stuff down to implementation details. Now that I have some experience and background in the industry, I am particularly glad to share what I know with you all. Don’t hesitate to send me questions and I shall publish an answer that will surely be useful to everybody.

Related posts:

1. A gentle introduction to MVC (part 3) In part 1, we decoupled a vanilla PHP script and...
2. A gentle introduction to MVC (part 2) In part 1, we saw how to decouple a traditional...
3. A gentle introduction to MVC (part 1) MVC is certainly the widest spread architectural pattern in today's...

Content

10. Inspiration CSS gallery

Most design blogs already have a “community links” section in place, but some go beyond and add an inspiration gallery to their blog. This list can be made of a Flickr group (see Bittbox and FuelYourCreativity), a 3rd-party inspiration gallery (see Help-Developer with InspireCSS) or a proper in-site gallery (see KreativeUse). Adding an inspiration gallery is great for it adds some content designers usually fancy and can parse faster than text. See the following examples from Bittbox, FuelYourCreativity, Help-Developer and KreativUse.

11. List posts/Round-ups

The best examples of list post based design blogs certainly include SmashingMagazine and Noupe; other design blogs fancying list posts include OutlawDesignBlog and SixRevisions. Just have a look at their most popular posts and you will see titles such as “100 Wordpress themes“, “53 CSS techniques“, “50 Amazing jQuery examples“, “101 CSS techniques of all time“, “26 free icons sets we love“, “63 must-have grunge fonts“, “25 excellent ajax techniques and examples” or “30 websites to follow if you’re into web development“. List posts usually come with a catchy title and work very well on social sites such as Digg, hence their huge popularity.

12. Contests

Contests are a great way to bring new users with a higher stickiness (because of the prize). Some blogs like to boost their comment statistics with winners designated out of a lucky draw from the post’s commenters; other blogs require some actual work to be done (designing a logo for example). The very fact of giving away a prize is usually reserved to already popular design blogs for obvious financial reasons; some emerging blogs, though, manage to set up contests based on prizes offered by partners. See the following links from a few modern design blogs:

• The <hr/> contest on SmashingMagazine
• Guest post for a MacBook Air on SmashingMagazine
• 1000 free business cards on aComment
• WooThemes giveaway on FuelYourCreativity
• DevSnippets contest on Noupe

13. Tutorials

Modern design blogs are also about explaining stuff, whether it relates to CSS, JavaScript, clever usage of colors or Photoshop wizardry. Here are a few links of tutorial sections from famous design blogs:

• Abduzeedo
• SpoonGraphics
• Noupe
• YouTheDesigner
• SmashingMagazine

14. Interviews

We designers love to know how other designers work and where does their inspiration come from: interviews recently emerged as a popular way for new design blogs to publish interesting content and for already known designers and bloggers to promote their name, blog and/or services. See the following selection of links from popular design blogs:

• FuelYourCreativity
• Abduzeedo

15. Freebies

The web is all about freedom, and we designers enjoy freebies! Giving away quality software or data (could be vector pictures, icons, wordpress themes, wallpapers etc.) is a great way for new designers to show their skills and for design blogs to reach a wider audience. We just can’t resist downloading freebies! Here are a few selection of freebies-oriented blogs:

• Bittbox
• aComment
• DesignReviver
• SpoonGraphics
• The Daily Inspiration (Woork)
• YouTheDesigner
• Abduzeedo
• SmashingMagazine

16. Bonus feature: series posts

Organizing your posts into series is a great idea since it makes users coming back to the blog and perhaps even subscribing to the feed. What’s more, some blogs fancy writing series of series, all on the same topic but at different points in time, which makes it possible for the content to be renewed and explained from a slightly different point of view.

I hope you enjoyed this series of post on 15 must-have features for modern design blogs. Next post will wrap up these 15 good ideas and offer links towards tutorials and tools for you to implement them on your own blog. Stay tuned!

Related posts:

1. 15 must-have features for modern design blogs Design blogs are popping up all around the web these...
2. 15 must-have features for modern design blogs (part 2) In part 1 we saw how modern design blogs usually...
3. Copycat design, Inc. How to define the boundary between inspiration and mere copy?...

Features (cont’d)

6. Most popular posts / Best posts

The difference between the two may be that “most popular” posts are the posts actually read by most visitors whereas “best posts” may be chosen by the blogger himself. Both cases lead to the same result: highlighting high quality posts from the archives and giving visitors an incentive to spend a few more seconds on the blog. On the contrary, having a “latest posts” widget may not be necessary when your blog’s front page already lists the 5 or 10 most recent posts. See the following examples from YouTheDesigner, JustCreativeDesign, AComment and SpoonGraphics.

7. Latest comments

This feature immediately shows the new visitor where the discussion currently is on the blog. And it may not be on the latest posts! On top of that, it gives a first view on how many comments a post may gather (you can have all the 10 latest comments on the same posts if the latter is successful, or the 10 latest comments spread over several posts in case these usually gather less comments). The following examples come from BlogPerfume, DesignReviver and YouTheDesigner.

8. Related posts

Simply in-dis-pen-sa-ble. The “related posts” feature is among the very basics of how to trigger internal navigation and to make your design blog more sticky. It is usually located at the bottom of the posts, just before the comments, along with the social buttons. See the following examples from Bittbox, Vandelay Design and JustCreativeDesign.

9. Post promotion links

Don’t be shy asking for post promotion! These banners usually make it very clear that digging the post is nice and appreciated (with a big heart for example). This promotion div may be located before or after the post (sometimes both). The trend seems to go towards a pre-selection of social news sites rather than an exhaustive list through widgets such as AddThis for example. Most popular social sites in the design blogs niche include Digg, Delicious, DesignFloat, Dzone etc. See the following examples from OutlawDesignBlog, Noupe and WeFunction.

The last 6 ultimate features for modern design blogs will cover the types of content design bloggers must include in their blogs. Stay tuned, for there is more coming!

Related posts:

1. 15 must-have features for modern design blogs (part 3) Last week we saw how modern design blogs usually manage...
2. 15 must-have features for modern design blogs Design blogs are popping up all around the web these...
3. New design for nemetral.net Three different designs in a couple of months, that's a...

Presentation:

1. Nice design

As usual, design is key here. A nicely dressed design blog gathers a wider audience: the examples of DesignReviver and WebDesignerWall speak for themselves.

2. The “magazine” style: pictures in posts

Design is all about graphic appearance, and a smart way of enhancing the visual appeal of a design blog is to add custom pictures to each post. Here are some screenshots from OutlawDesignBlog, FuelYourCreativity and HelpDeveloper.

3. These BSA ads on the right sidebar

Modern design blogs seem to be making their money out of traditional Adsense CPC goodness embedded within the posts, usually right under the title, and fixed monthly returns from sexy BuySellAds or PerformancingAds units. Some examples include Woork, OutlawDesignBlog, DesignShard and NaldzGraphics.

Features:

4. Several RSS feeds

RSS is key and must come in different flavors: full feed, comments feed, category feed etc. Although most visitors will subscribe to the full feed, offering the choice is a nice feature demanding readers will surely appreciate. Examples include CSSGlobe and DesignMag.

5. Community links

Cheaper than guest posting, and quite attracting for new visitors willing to promote their own posts, community links are a great way of socializing a design blog. Based on a plain WP commenting system, these links will add content to the blog for free! Famous examples include SmashingMagazine and Abduzeedo.

That’s it for now: parts 2 and 3 of this exclusive roundup will be published in the coming week. Stay tuned to discover these other 10 features that make modern design blogs rock!

Related posts:

1. 15 must-have features for modern design blogs (part 3) Last week we saw how modern design blogs usually manage...
2. 15 must-have features for modern design blogs (part 2) In part 1 we saw how modern design blogs usually...
3. New design for nemetral.net Three different designs in a couple of months, that's a...