Web Design errors that kill online – revisited

Four Huge Web Design Errors That Are Costing You Business Online is an article that I ran across this morning. And I believe it to be excellent in determining four of the most common pitfalls that web designers make in designing. Now, I wanted to extend the list to 8 common website mistakes: So the first four covered by the article are: Read the rest of this entry »

Posted in Uncategorized | Comments Off

City of Raleigh: Top 10 mistakes of new Website

It has been a while since I wrote my last post and so with the latest news I thought I would take a second to write a bit.

The new website of the city of Raleigh is, in my humble opinion, a waste of tax payer dollars. As a professional website developer and strategist and having developed hundreds of websites myself, I can tell you that this website is overpriced and under-designed. Read the rest of this entry »

Posted in Bad Design Examples | Comments Off

How to install WordPress from scratch?

Hi everybody. I hope you guys are having a blast. One thing that I’ve been aware lately is the desire to quickly deploy a WordPress installation. Now, I understand that for advanced developers you can have WordPress multisites and deploy them extremely fast and with less restrictions than what I am going to explain here. This post is for beginners. Read the rest of this entry »

Posted in Design Tutorials | Comments Off

114 Free Ways to Promote your Small Business

Hi everybody! I hope you guys are getting ready for Christmas. This is certainly my favorite season and today we had some snow that made me realize that good things have time tables. Opportunities come and go, and for a small business owner, making the best out of those opportunities is crucial. Many fail to inactivity, many fail to over activity without results. I myself feel like I work a lot and get very little in exchange. Read the rest of this entry »

Posted in Opinion | Comments Off

Learning Website Design: Session 3 – How Browsers work

In our previous article we took a look at what is html and how hyper transfer protocol allowed us to see pages. In this article I am going to explain in a simple way how the browser finds and displays your pages.

The browser is a piece of software that sits in your computer and interprets html, css, javascript and some other technologies like images, videos and java applets.

THE URL

The first step in using a browser is that you type in a URL in the URL bar. The URL (Uniform Resource Locator) is the address that identifies a particular resource on the web. The address is a naming convention and it is composed of different parts:

• The first part is the protocol. Some protocols include https, ftp, etc.
• The host or hostname is merkados.com, where the .com is also known as the top level domain tld.
• The subdomain is whatever is before the host name, examples could be: intermarketing.merkados.com. Where intermarketing is the subdomain.
• The next part is the port. And the default port number for http transmission in web servers is 80. Other ports are possible; a web server can listen on port 8000, for example. You can avoid listing the port number when the default is expected, however if you are accessing another port you need to include it: intermarketing.merkados.com:8888
• The request path is /path. Path typically refers to a file or location on the web server, e.g. /directory/file.html. So for example: merkados.com/pathgoeshere/ would be a directory. and merkados.com/pathgoeshere.html would be a file.
• This URL can also have parameters. These parameters help determine the request for dynamic pages served with a database. Parameters start with a question mark (?) and are separated with an ampersand (&). So for example you would see: www.merkados.com/path?uid=23033. The uid would be the user id parameter and in this case is 23033.
• Finally the last part that you may encounter in a URL is an anchor. The anchors are set by the pound sign (#). For example: merkados.com/services#best_services. That means jump to a subsection inside of a page named services that is called best_services.

Read the rest of this entry »

Posted in Design Tutorials | Comments Off

The future of Competitive Website Design

Ok let’s talk about the future of competitive website design for a second: it is just that: competitive. By looking at the Google Insights graph at the top you can clearly see that the trend of search for web design in the North Carolina area has dropped almost by half! You could probably attribute some of that to the specificity of search, however in my opinion it also highlights that web design is being searched less. Read the rest of this entry »

Posted in Opinion | Comments Off

3 Tips to Improve your Website Design

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.

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.

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

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™

Posted in Design Tutorials | Comments Off

7 Free Essential SEO Tips for Web Designers

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.

Posted in Design Tutorials | Comments Off