Mário Andrade

I’ve always believed that work should be fluid. For example, when I’m looking at a visual specification I want to be able to press the title of a news and go to that news article page specification instead of having to scroll to it.
The following video shows you how to create a click-able prototype with Adobe inDesign. Basically what happens is you create buttons and behaviors on inDesign and export it as a Swift (.swf) file. You can than open the SWF file on your browser and navigate through the different pages by clicking on the buttons you created.

Today I’ve had, in overall, a total of 8 weblogs and I’m a devoted blogger to my portuguese blog about blogging and WordPress, muiomuio.net, since 2006.

Hover the years I’ve seen hundreds of new themes, trends and page layouts, some really appealing but not really that functional, others really simple and functional but still 99% of blogs fail in the same aspect that other kind of websites are really good at. I’ve talked several times about it in muiomuio.net and alerted the readers giving several tips on how to change / improve their blogs.

Duplicated content

A “standard” blog theme is built in a way that will favor duplicated content. For example, you write a post, that text will show up in at least 2 places the homepage and the post page. Even though you can change that by adding excerpts, the excerpt will still show up in the homepage and archive page.

Mr. John Chow

The simple solution is to write a post, write an excerpt that is an introduction and complementary to the post and use that text in the homepage and archives page.
Further more you need to define that you do not want search engine crawlers / robots to index or follow your archive pages.

As you see you need to have some programing skills or ask someone in order to have a fully optimized website.

How to show excerpts instead of full post on the homepage

This is a sample of the code I have on the homepage of this blog:

<?php if (!empty($post->post_excerpt)) : ?>
	<?php the_excerpt(); ?>
		<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>" rel="nofollow">Continue reading: <b><?php the_title(); ?></b></a>
	<?php else : ?>
		<?php the_content(); ?>
	<?php endif; ?>

I check if the excerpt field has content, if so than shows the post_excerpt, otherwise shows the normal post content. Ultimately I use the excerpt as an introduction to my posts and also use it in the post itself.

Homepage structure

Inicially a blog was built upon a newspaper website structure where the homepage shows the most recent “news”. Altought the idea is good the implementation of it is, nowadays, less than great.
Like I said many times on my Portuguese blog muiomuio.net, the homepage must work as a channel to the post pages and it would be great if every post would have a thumbnail image on the homepage.

Mr. Jeremy “Shoemoney”

But again the homepage, in practically all blog CMS, shows the content of the most recent posts which will lead you to the duplicated content issue.

Take notice that duplicated content is not only a search engine issue. If a user has all the content in the homepage why would he / she go to the post page? Maybe to comment but not all readers comment. By showing all your blog post on the homepage you are removing many call to actions like sharing in social media, bookmarking and possibly profit from that specific post page.

Additional but important functionality

Blogging Content Management Systems are still very raw. Almost all of them offer only the default functionality in the installation pack.

Related Posts
Related posts should be a default functionality of all Content Management Systems. The user would than define if this functionality is active or not.

Share on Social Web
Social Web is important to every blog. The CMS should support the chance to submit content to the popular Social Networks and the module should also make it simple for the user to add new websites.

I understand that a CMS has to keep in mind that not all users want the same functionality and most of them offer extra functionality with components, modules and plugins. The porpuse of this article is to expose what I believe are “near-standard” functionalities and should be implemented by default on Content Management Systems.

If you have something to add, disagree with my point of view or want to share your experience, I would love the hear from you. Please leave a comment.

What is a website wireframe

A website wireframe is the basic structure of the website. It does not have any functionality or design it’s the basic concept of the layout and works as a guideline for the designer.

The wireframe must incorporate all important information keeping the page structure clean and accessible. As a web consultant you decide the layout of the website not the client. In my experience I find that most clients accept structural changes very well when done right.

Why work with wireframes
Think of a website as a person where the wireframe is the skeleton. The skeleton alone does not do anything, can’t even hold himself up, it needs muscles for that. That’s where the design comes into action.
But a skeleton and muscles alone don’t do anything you need a heart and a brain that’s the development part.

The following example is a very basic wireframe built exclusively for this article as visual aid:

Notice that I did not specify any color, this is important because the designer might be influenced by any color or scheme you introduce in the wireframe.

A website wireframe must include all the non design elements that will show on the page. For example if the content is a text article you should define the title, article information like author, date, category, and body text to work as guideline for the designer.
Wireframing will allow the project run smother and easier from the design and development point of view by reducing their process to simple and quick question-answer issues.

Tips for producing high quality wireframes

Search Engine Optimization (SEO)

When building a website it’s crucial to think of SEO. Basic SEO will help you understand key pages for the website as well as their layout. Do some keyword research this will help you build the navegation and key pages for the website. It helps if you create a flow chart or mind map.
Many people this of SEO as a final step when building a website when in fact SEO should be on everybody’s mind from beginning to end.

SEOmoz has covered this very well on their article SEO Wireframing.

Grids
I’ll be honest. I never really liked grid because they kind of make your mind get stuck to that grid structure but on the other hand you will need some sort of grid structure to guide yourself: Page width, sidebar, content area, menu area, logo area, advertisement area, etc are all part of a basic grid structure that will help you along the way.

Although times are changing 1024×768 is still considered the default screen resolution and therefore all websites should adequate to this resolution. Wireframing for 1024×768 resolutions means you have somewhere between 940 and 970 pixels width to work with and around 580 or 600 pixels of of the website visible on the browser so take these measures into consideration.
Don’t overdue your header if it hides the content and doesn’t add anything to the user experience when visiting the website.

One tool I find very useful is the Grids System Generator that facilitates the creation of a grid to help you, based on the most popular and effective grid systems.

Trip Wire Magazine wrote a kick ass article with allot of information and helpful tutorials about css grid systems called 45 CSS Grid system layout generators and Tutorials that every designer should know. It’s a very interesting and helpful reading. I recommend it.

Be negative, think of the worst case scenario
This is a very common rookie mistake and very usual for individuals to forget about when wireframing on a tight deadline.
You start by creating a wireframe based on the best case scenario. This means the user will always do every action correctly, but what happens if he doesn’t? What happens if the user is filling a form and puts letters on the phone number input? Or numbers on the name input? Or if the user doesn’t fill an obligatory field?

By thinking of the worst case scenario you will be able to anticipate common error actions and improve your work quality, help the designer and the developer.

• Before starting a wireframe be sure to look for good examples of layouts you will be making. Making a company blog is allot different from making an e-commerce website.
• Make a 15min session with 4 or 5 other people to simply point out features they would think that might be a good practice to include on the website.
• Experience tells me designers and clients will be influenced by any colors or text you include in the wireframes. White and gray colors and never fill blocks with color unless necessary and, if possible use real text / actual text from a website instead of Lorem Ipsum. This way is easier to identify what will or will not work.
• Ask for feedback from your co-workers. You might think you have the perfect layout concept but if more people disagree on some aspect, maybe you should reconsider.

Tools for Wireframing

Unfortunately I don’t know any good free wireframing tools. I’ve always been an Open-Source / Freeware apologist but in this case I had to give in it’s worth to pay for the software:

• Pencil, Pen and Papper
  Sometimes it’s just easier to sketch something on paper and later adapt that to a cleaner digital version. I’m not a big fan of using paper and pen to wireframe professional projects but it’s always my start point. This is the only good free tool I know at this point.
• FlairBuilder is a very interesting tool built with Flex and with great potential. It’s very intuitive and has a very good gallery of components and functional component. The only downside I see to this tool is the lack of guidelines althought it supports grid based backgrounds. It’s just not the same.
• Axure (PC) – This is one of the most powerful tools I’ve experienced it would be my first choice for windows based computers but the price is over my available badget.
• OmniGraffle (mac) – This is probably the best tool I know for Wireframing. It’s simplicity and effectiveness makes it extremely useful and easy to learn. Unfortunately it’s only available for mac.
• Balsamiq mockups – I’m not a big fan of balsamiq mockups for me they look to to hand drawn to be taken serious when presenting this to other people but I have to admin this is a great peace of software if you are not looking to spend alot of money.
• SmartDraw - is a good peace of software, very feature complete but that doesn’t support pixel units making it harder to build web projects. The have good user / client support over Twitter.
• Microsoft Visio – A very complete software from Microsoft that will allow you to do a whole lot more than wireframing. Not the most user friendly price though.

You can actually do wireframes with any software that can draw a line but many features will be missed. Photoshop, Illustrator, PowerPoint, inDesign, HTML and Adobe Flash are all valid options but do not allow you to do much more than the basic wireframe and will take longer.

For further reading visit:

• Excelent tutorial on Web Designer Depot: Using Wireframes to streamline your development process
• Website Wireframing @ Wikipedia
• About.com topic on Wireframes
• Wire frame your site, SitePoint Article
• Quickstar on prototyping with wireframes
• 20 Steps to better Wireframing