Archive for category: Web Design

A consultant point of view on blog Content Management Systems

A consultant point of view on blog Content Management Systems

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.

John Chow Homepage VS Post 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.

Shoemoney Homepage VS Post Page
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.

18 de September de 2009 1 comment Read More
CSS Opacity for hover effects

CSS Opacity for hover effects

The big issue with the opacity property is, of course, IE support. For this you have to use MS Filter and alpha property: filter:alpha(opacity=value), for all other browsers just use opacity: value.
Before I get started with this there are a few things you need to know:

  • The CSS opacity property values run from 0 to 1 meaning you can apply opacity of 0, 0.1, 0.2, 0.3… up to 1.
  • When you apply opacity to a block, all elements inside that block will have the same opacity. Let’s say you have a block with 4 images inside. If you apply 0.5 opacity to the block, all 4 images will have 0.5 opacity as well.

Simple Opacity

The following image is from my personal Flickr account, it’s actually the first photo I took in 2009 and also the view from my balcony. Great view isn’t it? :)

CSS Opacity

For this example I applied a 50% opacity to the image using the opacity and filter:alpha properties. If you look into this page source code you’ll find:

<img src="http://farm4.static.flickr.com/3083/3160497654_ee19062980.jpg" width="500" height="375" alt="CSS Opacity" style="opacity:.5; filter:alpha(opacity=50);" />

Opacity change when mouse is hover the image

This example can be a bit tricky. I’m going to use some javascript to manage the hover effect and share the CSS code.

CSS Opacity

Again if you look to this page source code you’ll find:

<img src="http://farm4.static.flickr.com/3083/3160497654_ee19062980.jpg" width="500" height="375" alt="CSS Opacity" style="opacity:.5; filter:alpha(opacity=50);"  onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" class="imgOpacity" />

What I’ve done was use some javascript to change the image styles when the mouse is on top of the image and when it’s out. But since we don’t want this, it’s preferable that you use CSS. Notice I applied a class to the image called imgOpacity, this is only for tutorial purpose. 

.imgOpacity {
opacity:.5;
filter:alpha(opacity=50);
}

.imgOpacity:hover {
opacity:1;
filter:alpha(opacity=100);
}

Just add this to your styles and apply the class to whatever you wish and you’ll have a rollover effect.

This block of text will change opacity when you run your mouse over it.

You may also use opacity on divs in order to create semi-transparent backgrounds which can be great when used correctly.

Multi-browser support of opacity

Like I mentioned the CSS Opacity Property is supported by all modern browsers. We’ve covered Internet Explorer’s exceptional case but previous versions of Opera and Firefox and other browsers may not render the opacity property correctly. For that you’ll need to apply some special properties:

-moz-opacity
-moz-opacity is needed for previous versions of Mozilla Firefox and Netscape browsers. Just apply -moz-opacity:value; and you are set.

Ex: -moz-opacity:0.5;

-kthml-opacity
-khtml-opacity will allow older versions of Safari (1.x) to recognize the opacity property. it’s used in similar way of -moz-opacity. It’s actually been deprecated since 2004 but if people still use IE6, some will probably use Safari 1.x. Personally I wouldn’t bother with this too much.

Ex: -khtml-opacity:0.5;

IE6 and 7 support
Unfortunately Internet Explorer can’t play along with the rest of the browsers. There are some known bugs in versions prior to IE8 that will not display opacity even though you use filter:alpha(opacity=value). I advise you to try and specify height and width of the element you want to apply the opacity to, it works many of the times. if that doesn’t do the trick I suggest you try applying the “ever so friendly” Microsoft filter hacks:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter:alpha(opacity=50);

Curiously when you use IE7 and IE8 works just fine but when you use IE8 as IE7 if you don’t use the hacks the Microsoft browser will not recognize opacity.

Interesting readings:

4 de September de 2009 1 comment Read More
Add and Remove items with jQuery

Add and Remove items with jQuery

Creating the markup

In this example I’m going to create text field and 2 buttons that will allow me to add and remove text fields. Similar to online apps that allow you to create web form.

<a href="#" id="add">Add</a>
<a href="#" id="remove">Remove</a>

<p><input type="text" value="1" /></p>

The <p> around the input is just to add a new line when I add now input’s.

Applying jQuery to the markup

First you need to get jQuery. You can download it from the official jQuery website or use the link from Google Code: http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

Now you need to call jQuery in the <head> section of you HTML Template using the script tag:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">&lt/script>

Now you need to add the jQuery under the script you just called:

<script type="text/javascript">

$(function() { // when document has loaded

	var i = $('input').size() + 1; // check how many input exists on the document and add 1 for the add command to work

	$('a#add').click(function() { // when you click the add link
		$('<p><input type="text" value="' + i + '" /></p>').appendTo('body'); // append (add) a new input to the document.
// if you have the input inside a form, change body to form in the appendTo
		i++; //after the click i will be i = 3 if you click again i will be i = 4
	});

	$('a#remove').click(function() { // similar to the previous, when you click remove link
	if(i > 1) { // if you have at least 1 input on the form
		$('input:last').remove(); //remove the last input
		i--; //deduct 1 from i so if i = 3, after i--, i will be i = 2
	}
	});

	$('a.reset').click(function() {
	while(i > 2) { // while you have more than 1 input on the page
		$('input:last').remove(); // remove inputs
		i--;
	}
	});

});
</script>

Here you have it a simple . You need to keep in mind that every time you refresh the page the items will be gone. You’ll need more codding in order to keep the variables on a database. This is just to cover the basic add / remove functions from jQuery.

Add / Remove input with jQuery Demo

* Update – December, 31st 2010 *
jQuery Add/Remove with Dynamic PHP content
A thread was started at Question Lounge regarding this issue.

In this particular case the thread is based on assigning dynamic content to a select element. The select element has the ID of service-N, where N is a number (1 2 3 4, etc).

Here is a sample of the jQuery code:

$('select[id^="service-"]').change(function(){
   var id = $(this).attr('id');
   id = id.replace('service-', '');

   var someValue = $(this).val();

   $.get('/fetch/content/from/this/url?param='+someValue, function(data){
       $('#store-' + id).html(data);    // that would be if your script returns HTML.
                                        //  You can easily alter the functionality to
                                        // rebuild the dropdown menu from JSON object
                                        // or something like that
   });
});

For more information please visit this thread.

Usefull links
Theme Forest – Jquery for Absolute Beginners – Day 5
jQuery Homepage

28 de August de 2009 13 comments Read More
Website Wireframes

Website Wireframes

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:

Website Wireframe

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:

5 de August de 2009 20 comments Read More
CSS Text Gradient Effect

CSS Text Gradient Effect

All you need is to add an empty <span> tag that will hold the PNG image with the gradient and overlay the text. This css trick is supported by al modern browsers like Firefox, Safari, Opera and IE7 or higher.

Putting it together

HTML

<h1><span></span>Some text you want</h1>

CSS

The key to secure this trick is applying the css property position:relative; to the <H1> tag and position:absolute; to the <span>. The span will need to have the same width and height as the <H1>:

h1 {
    color#222;
    position:relative;
}
h1 span {
    position:absolute;
    width:100%;
    height:40px;
    display:block;
    background: url(text-gradient.png) repeat-x;

}

And there you have it. Check out the demo of CSS Text Gradient Effect to see the code in action. This technique does not allow the user to select of click on the text since the PNG image will overlay it they will be clicking on the image.

1 de August de 2009 1 comment Read More