Website Performance - We can Help - Merkados
Website Design Promo

Learning Website Design Session #1 – Mac OS X: The tools

November 24th, 2009 admin

[private]Many people are becoming new web designers and therefore I feel like I could use a couple of posts to explain to our readers how to start designing for the web as professionals do. This is one of several sessions that hopefully I’ll share with you guys. Let’s get to it:

The tools – Revised – June 2011

You are going to need to download the tools to start designing like a professional. I’ll share with you guys my favorite tools and obviously you can decide to use other tools. It is important to understand the even though the tools are not the most important thing, they are indeed important. Many web designers out there use tools that are not optimal, and therefore their websites end up showing it. There are plenty of professional-level tools out there. I am going to be showing with you the ones I use and the ones that my website designer friends and mentors use. Read the rest of this entry »

The “why” of design decisions: White Space

October 17th, 2009 admin

You might be wondering what is the purpose of this post. And let me explain where I am coming from before I start. Lately I have seen that a lot of design tutorials focus on teaching technique, not decision of technique. In other words, they teach you how to do something, but they don’t teach you why they decided to use that technique in the first place.That’s what this post is for.

Obviously, the reasoning behind design is a very large topic and can’t be covered completely here. But this should be taken as an introduction to meaningful design.

White Space

Design usually is associated with several elements like shape/type, size, placement, etc. One of the most important decisions for a designer is white space. Many designers have a lot of trouble not filling up the canvas. Why? Well, I guess some feel that if the canvas is not full that the client is going to think that they are lazy. And this is true sometimes. However, is harder for a designer to abstain from adding more and more.

The main question that I try to answer in regards to white space is: Is this the most minimal way of powerfully presenting the idea?

Lets take a look at an example:

I am trying to illustrate the word Design in a white square.

First Example

First Example

So far so good. It looks good and it seems like indeed is minimal enough however I feel like the white space itself is not adding to the design. So lets go ahead and iterate in order to modify the white-space:

Example 2

Example 2

Can you tell what changed from example 1? First, the right margin length is equal to the height of the font. That gives the sense of order and purpose for that margin. Second, the bottom margin is equal to double the distance of the right margin. This creates a point of interest while keeping it organized. Finally, the spacing between characters of the word Design (the kerning) has been adjusted to make the word appear more as a cluster – an object. Now, we have a background and a subject that are clearly defined and separated and they have a relationship.

To finalize this example I decided to replicate the overall white-space shape, invert it and add it to the corner of the word Design to add balance to the message.

Example 3

Example 3

Now, in this example we have very little background to make design decisions. But in real life examples, as a graphic designer, you would have a client that has a market to satisfy and a product to sale. That should strongly drive your design decisions.

Final thoughts: How can this translate into an active recommendation that makes your design better? Ok, next time that you sit down to layout ask the final question about your white space and how it is adding to your design and if it could do a better job.

I hope this helps and thanks for reading.

Alex Centeno +

Change a background image in CSS with PHP

September 3rd, 2009 admin

[private]Hey there… I have been testing this new technique that I wanted to share with our readers. Sometimes you have a website that requires some dynamic loading of its background. An example of usage could be a surfing website. Depending on the forecast or tide, you could parse the xml information and display a different background in your surfing site. So when a user arrives to the site automatically knows if it is a surfing day or a sleep-in day… You get the idea!

Anyways, the code is fairly simple in php and I am sure you can translate this fairly easily to other languages out there.

First you are going to setup the php page that handles the dynamic nature of the background image. For example, create a file named: back.php and then add the following to it:

/*Comment of Code*/
$now = date(a);
if($now == 'am') {
	$img = "morning.jpg";
} else {
	$img = "night.jpg";
}
$contentType = 'Content-Type: image/jpeg';
header($contentType);
readfile($img);
/*End of Code*/

The above code says: “Check the time of the day, if is am – then change the image variable to morning.jpg, if it is pm, then change the image variable to night.jpg. Then change the content-type of the document to image/jpg.

That is it. Then, you go into your site’s css stylesheet and add the following:

/*CSS Code*/
body {
    background: url('back.php')no-repeat;
}
/*End of Code*/

And that should do the trick. If somebody visits the page in the morning, then background morning.jpg is used, if somebody visits the page at night, then background night.jpg is used.
Obviously this is a over simplistic example of what can be accomplished with this technique. You can set up backgrounds with animations in GIFs. You can dynamically control the opacity of your background depending on time of day for a better experience for your visitors. You can detect the location of the users and change the elements of the page to show a more customized page to them.

For example: In landing pages for your Google Adwords ads, you could detect the location of the users and if they are in let’s say New York, they would land in a page with a background of the Statue of Liberty, however if they visit from Vegas, they could have the background of the Bellagio Fountains.

The possibilities are endless, and as always, you don’t have to use it in every project! Take this technique and put in your bag of tools. When the time is right, you’ll know it.

If you have any questions or you need custom website design, please visit Merkados. Perhaps we can help.
[/private]

Testing the Syntax Highlighter

August 31st, 2009 admin

All right everybody. I just wanted to use this post as a quick way to demo the installation of syntax highlighter or in other words, styling your code in posts. You might be asking: “How do I style code inside my posts?” or “How do I share code bits in my posts?” and if you are, this is the right post for you.

First, you need to know that there are several ways to style the code bits in your posts. I am going to demonstrate only one. The Syntax Highlighter way:

Steps:

1. Go to Syntax Highligher Project and download the necessary files.

2. Upload the necessary files to your server.

3. Go ahead and change the head and/or footer files in your blog/site to reflect the locations of the three files that are needed like this:



	

That is it.

Now you can just pretty much create a Pre tag with name:”code” and with class “html” for example, and it would style it for you.

Later,

3 Tips to Improve your Website Design

December 13th, 2008 admin

These days I have seen lots of people writing about tips on how-tos. Now there are great tutorials out there for web designers trying to improve their design techniques. Unfortunately what I have found is that most of them start from scratch and explain the techniques from a building perspective. Not that there is anything wrong with that approach. Simply put, I am writing this post but instead of building the techniques I will be analyzing three excellent examples.

TIP 1. Use Color, Position, Distance and Alignment to portrait importance. In figure number one, you can see how the designer decided to use 3 different colors in one paragraph of text! The white color automatically gets less importance, the yellow text gets a nice accent and then finally the call to action is found in red (which is an excellent color for action).

Use of Color to denote difference.

Use of Color to denote difference.

TIP 2. Mantain your number of hues to a minimum. The more color that you use the more time a common user would take to decipher what is important. In order to improve usability you want to color code your actions in a way that becomes automatically intuitive to do something. For the most I would say use 3 hues, then you can add another 3 shades or 3 lights to those shades. My favorite is to keep websites to almost a monochromatic scheme and then create accents with a split complementary or even a complementary hue. Unfortunately as I progress towards finishing the design, I end up adding other hues; I have to force myself to change extra hues for shades of the same hue.

Example of a website using a limited amount of hues.

Example of a website using a limited amount of hues.

TIP 3. If you decide to go with sharp angles then go with sharp angles. If you go with rounded corners then be consistent as well. As part of the WEB 2.0 trends we have seen lots and lots of design that use rounded corners. If used properly, rounded corners look really good and make design look softer and more inviting. Unfortunately the entire experience can be thrown to the trash can with just one thing: inconsistency. The secret really is not so much having rounded corners, the secret is to maintain those treatments across the different sections of the design. As a counter-example check out image number 3. This designer decided to only use sharp angles (including the pictures). That makes the design so powerful that it immediately makes a positive impression.

Example of designer using sharp angles with consistency

Example of designer using sharp angles with consistency

That is it! I hope you guys enjoy this tutorial and really hope that it helps improve your design and gives you at least another point of view.

Until next time,

Alex A. Centeno MBA.

Digital Media Director

Merkados™

First SEO Video. SEO Basics Series. Canonicalization

January 9th, 2008 admin

seo-first.swf
Canonicalization (Man it is hard to say that), is the practice of choosing one version of several duplicate pages and redirecting the other pages to the chosen one. In this video, Alex Centeno explains the process. This video is the first video of my SEO Basics collection, therefore it is horrible in terms of language and theme (I hope they get better with time). Anyhow for anybody looking for the .htaccess code for the www versus non-www canonicalization it is here:

RewriteEngine on
RewriteCond %{HTTP_HOST} ^yoursite.com [NC]
RewriteRule ^(.*)$ http://www.yoursite.com/$1 [L,R=301]

7 Free Essential SEO Tips for Web Designers

January 6th, 2007 admin

[private]

To design and to build great websites is getting easier and easier every day. However, the best web designers that I know come from a graphics design background. Having that in mind, I have prepared this seven essential search engine optimization tips to help those web designers maximize their value to their clients. Here they are:

  1. Make a fast keyword research before starting. I am sure that most professional designers have a planning stage where they gather all the copy, pictures and information from their clients. This step has to include a gathering of at least the top 10 keywords that people would use to search for that particular website. There are free tools out there such as Overture and Google Suggest that can help. This is important because this can help you prioritize the content in coherent sections.
  2. Include your keywords in your filenames. Instead of using the company’s or client’s name in the naming convention, use your keywords. Most designers would love to have extra time to go picture by picture after the design is over to rename them with appropriate keywords, but the truth is that this is time consuming and most designers don’t do it. By including your keywords in your file naming conventions you provide SEO value while you are not using extra time.
  3. Use custom Meta-tags. Templates are a great way to get your websites up and running in no time, nevertheless in SEO world, repetitive tags don’t work. Try to use relevant and unique meta-tags for each of your pages. Use the four important meta-tags in each page: Title tag, Description Tag, Keywords Tag and Robots Tag. In this keywords keep readability and marketing in mind and remember to use your keywords wisely.
  4. Top-bottom rule. Keep in mind that the spiders crawl websites from top to bottom. I have seen numerous websites where the web designer has placed 1000 lines or more of JavaScript, Css or JS code right in the home page before any of the “real content”. This means that the spider will spend a lot of effort discarding this information and getting to the real juice of the page. The work around is incredibly easy: html includes. Make a call to those scripts in the page and create separate files for each script.
  5. Consistent code writing. Even though most SEOs agree that this is not mandatory to validate your code for XHTML, HTML or XML standards, I suggest taking the extra time to revise your code to make sure is consistent. For example, if you decide to use XHTML strict then make sure that you are closing every single tag. This recommendation will save you time and effort in the future.
  6. Use text wisely. The one most important element in search engine optimization is text. If you have original and compelling copy for your client’s website you have already won 80% of the SEO battle. Don’t repeat your content in different pages to make it look full. Use at least 250 words per page and place your content up in the page as possible. I would suggest using as much CSS as you can, but I understand that transitioning from table design to CSS takes time. Use headings to increase readability and bullets for key aspects; keep in mind that most people read around 300 words per minute, even less when they read in the internet (they are reading in a screen), so be brief and clear.
  7. Design a congruent structure.What I mean by this is: Start by understanding your client’s business and its client’s needs, then and only then, define what is important for the home page, what is important for second level and what is left. Once you know what is most relevant then keep that content no further than a click away from the home page. If the website you are designing is smaller than 1000 pages then it is ok to keep your files directly in the main level directory. If your website has more, then create subdivisions according to clients’ expected behavior in the site. For example if it is an e-commerce site you might want to create a directory for support and another one for sales. The main recommendation is don’t create directories that would end up looking like this: services/fast-services/printing/color/photographs/index.html, instead do something like: services/color-photograph-printing.htm

Consider these recommendations in your projects and I assure you that your clients will love the extra value that basic Search Engine Optimization can bring to their business. Also remember that there is way more to SEO than just this, but your search engine marketer will appreciate the effort you have made in making things a lot easier for him.

[/private]