// Unleaded Software Web Blog

Blog

5 CSS Time Saving Tips

9.29.2008 - Nikki Selene Lamagna - No Comments »

Every working professional I know always complains about not having enough time.  “How am I supposed to meet a client, change my kid’s diaper, make dinner and get the project done on time without more hours in the day? Oh, and I can’t figure out this wicked CSS bug!” a friend quipped a few days ago.  She mentioned the Sprint commercial with the “mini me’s” running around their master:  “Now, that’s something I’d invest in,” she emphatically stated.

Yes, it would be quite nice to have 3 or 4 little Nikki’s running around, completing unfinished tasks or making me dinner but, unfortunately, I live in the real world (where rules of science exist).  But, we don’t need more hours in the day; we just need to work smarter.  And since the name of this article is “5 CSS Time Saving Tips,” here are my 5 biggest time savers when developing a site.

1. CSS Reset File
Any developer worth their salt creates a baseline for browsers using a CSS Reset file (see my previous post).  I keep the file in the top directory of “Web Development Files” and open it up, copy/paste into a new CSS document and I’m good to go.

2. Coda/Dreamweaver
Any website can be developed with a simple text editor and some knowledge of HTML and CSS.  However, I love running Coda.  The entire application is a time saver.  From auto-completing code to instant reference books built into the app, it’s the most streamlined application to build websites in.  Dreamweaver is another great application but the bang for the buck is unsurpassed with Coda coming in at $99.

3.  IE Net Renderer
If you run a Mac as I do, many of you may not have access to a Windows platform computer or Parallels (or Bootcamp for that matter).  And, we all know the woes that IE6 creates when coding in CSS – margin errors or text dropping alignment.  Instead of looking at the site on a Windows computer, point your browser to IE Net Renderer.  You’ll be able to view a live screenshot of your site.  Granted, you won’t be able to check interactivity but it’s a quick and easy solution to see where your inline top navigation list is breaking.

4. Code CSS styles “inline” rather than tabbed.
When I first began coding sites, I always kept my CSS selectors on a separate line and then wrote every rule on a separate line below it:

#container {
margin: 0 auto;
border: 1px solid #000;
}

After some consideration, it was a pain to figure out where a certain selector was in my CSS file.  Now, I use the “inline” style of CSS formatting:

#container { margin: 0 auto; border: 1px solid #000; }

Not only does it make it easier to find the selectors but it also cuts down on page weight (hey, not by much but enough).  My CSS Stylesheets used to be a whopping 1,500 lines and now they come in at a much cooler 400 or so.

5.    Firebug
The Firefox extension titled Firebug allows a developer to visually inspect the code and see each CSS rule applied to each and every element of the website.  Click the little “Inspect” tab and hover over any element of the page and, voila, a list of CSS selectors and their values pop up in the bottom right-hand corner of the browser.  And, line numbers accompany each style rule (virtually making #4 above inconsequential – although, you still need to think of page weight).  Firebug also allows for “live-editing” of the site by adding, modifying or deleting rules directly in the web browser.  The changes don’t stick but it’s another quick way to troubleshoot a CSS bug or try a different color for the links.

These CSS time saving tips are small and won’t save you a ton of time but, added up over the span of a web development career, you just may be able to carve out enough time so you can work on your own personal site or take an extra day on your very much needed vacation!

ExpressionEngine: Flexible, Functional & Fabulous

9.04.2008 - Nikki Selene Lamagna - No Comments »

Websites have come a long way since I first started designing them back in 1996.  HTML has paved the way into dynamic web languages, allowing interactivity, animation and user-generated content to be present in any website.  Many people nowadays request a Content Management System (CMS) so that they may administer the site after the web design company has finished it without the frustration of having to learn HTML.  A CMS, for those of you who don’t know, is an online software application used to create, edit, manage and publish content in an organized manner to a website.  There are as many CMS’s as there are web developers (well, perhaps not that many) and each one has it’s features and failures.  However, one that we here at Unleaded Software find extremely wonderful, useful and versatile is ExpressionEngine.

We design a lot of sites and we’re often asked to incorporate a CMS into those sites.  Hands down, it’s ExpressionEngine (EE from now on) that is first to escape our lips.  EE’s simple back-end administration and ease of “skinning” make it the ideal solution for businesses big and small.  Let’s go through a little rundown of EE’s features; don’t worry, I’ll try to make this as clear as possible.

Expression Engine is the signature product of EllisLab, a company that “make[s] stuff that enables people to be more successful on the web.” (In my humble opinion, they’ve achieved that goal).  EE is built on the PHP language, one of the strongest and most reliable computer scripting languages in existence.

At EE’s core is extreme flexibility.  Instead of locking the designer/developer into a predetermined template of content areas, EE allows us to custom build our own content fields, permitting us to develop our client’s website to the exact solution they’re looking for.  An example is probably the best way to show this:

We have a client who runs a horse ranch.  On his website, he wanted to be able to show a listing of horses with pictures of each individual horse, as well as genealogy and the ability to display prices, if the horse was for sale.  And, he wanted his ranch manager to be able to update all of this information or add new horses who doesn’t know HTML.  With EE, we were able to create custom fields (i.e. a horse image field, pricing, horse parents, etc.) and then code the website to look exactly like the template our designer had created.  And no PHP was required on our part.  Instead of writing some silly code to pull information from the database with if/then statements, we just insert a little EE code, such as {title} or {horse_pic} to display the dynamic information!

Another great feature of EE is the extensive add-ons either included with the software or available for download.  Each expansion, plugin, module or extension (all considered add-ons) are tested and accepted into the official repository so you know it will work with your EE installation.  Unlike other CMS or blog platforms that use unverified plugins and are not tested, EE insures that a plugin won’t destroy your data.  But should something happen to your software, EE has an excellent support system.

And talk about membership management.  As the administrator of an EE site, you are able to restrict or grant access to different membership groups and fully customize what you’d like them to be able to perform in the back-end.  You are not limited to how many membership groups you can create or how varied their permissions are.

One last thing that makes EE stand apart from other CMS’s is the ability to manage multiple sites from one back-end.  As long as the sites you want to manage are on the same server, you’ll have the ability to easily switch between different sites and update content without a hitch.  And, believe it or not, each site can look extremely different.

EE does cost money though and isn’t free.  A lot of thought, time, blood, sweat and tears has gone into the EE platform and, to be honest, at $250 it’s a steal.  With the amount of freedom EE gives you with your site, you’d thankfully fork over twice that amount.  From a top-notch web design firm who has designed and customized numerous CMS’s for hundreds of clients, we here at Unleaded Software wholeheartedly recommend EE for our clients.  We even use EE on our personal sites!

Multiple Language SEO Considerations

5.29.2008 - Nikki Selene Lamagna - No Comments »

The world is only getting bigger.  The U.S. Census Bureau’s Population Division estimates the world’s population to be as of May 27th, 2008, 6,670,328,109 (source) - that’s almost seven billion souls roaming this earth.  And how can seven billion people on one tiny little planet possibly communicate with one another?  Language in its written and spoken forms has been the pinnacle of human achievement and has made our ability to connect with one another possible (I know some of you believe that your wife’s stare after you refuse to do the dishes communicates volumes, but that’s an entirely different language all on its own).  In 1999, the Ethnologue cataloged 6,500 living languages and currently only 6,000 of them are still in practice (“Languages of the World”).  Of those 6,000 languages, the top-ten languages used on the Internet today are as follows:

  1. English
  2. Chinese
  3. Spanish
  4. Japanese
  5. French
  6. German
  7. Arabic
  8. Portuguese
  9. Korean
  10. Italian

(*source)

To master Search Engine Optimization (SEO) in the English language is difficult enough, but what to do with sites that cater to English and Spanish-speaking visitors?  And what happens when you have a site in both languages that targets multiple countries (i.e. America and Mexico)?

To begin, you want to find a hosting company that is native to the country the site was designed to primarily serve.  This is imperative.  Furthermore, you need to ensure the domain name is properly registered for that country.  If you have a primarily English site dealing with real estate in Denver, Colorado, it is best to have yourdomainname.com (or .net or .org).  In Canada use .ca and for the U.K. use .co.uk (same goes for Australia - .com.au)

If you want your Spanish-speaking friends to view condos in downtown Denver, then you would create a Spanish subfolder on the site, such as yourdomainname.com/spanish/ and put the identical content that is now translated into that folder.

Now, there is some debate between setting up subfolders and creating an entirely new site completely in Spanish due to better search engine results when using the two separate sites scheme.  However, if the site is hosted in America (or another host country with the content bearing the host country’s language), and is relevant to that country, it is not only quite appropriate to use the subfolder approach – it is recommended.

On the contrary, If we are building a site in which the content is not country/language specific, the recommended course of action is to build separate sites.  Host one site in America with the English language content and the other site in Mexico or Spain with the Spanish language content.  You would then build links to each site and almost treat them as separate entities.  Should someone wish to visit the Spanish site (or vice versa), provide a link between the two sites as a translation.

One word regarding translations:  when translating your site, do not - I repeat, DO NOT - rely on mechanical means of translation.  Spend the money to hire a person to translate your site, preferably one that lives and works in the language-speaking country so they may be familiar with the native cultural dialects and norms.  One mistranslated word and your site could easily go from selling real estate in Denver to insulting someone’s mamma.  It is just as important for a website to communicate correctly as it does effectively.

This article is just a brief beginning to a tumultuous topic.  The thoughts and reasoning of the SEO community-at-large continue to change on a pretty regular basis when dealing with multiple languages and optimization.  Ultimately, it comes down to what the visitor needs.

New Moves in CSS

5.16.2008 - Nikki Selene Lamagna - No Comments »

I am tucked in amongst a couple dozen boxes, packed full of books. The old wooden painting easel (passed from my uncle to me when I was 16) leans against the wall in the corner and art supplies are strewn everywhere. The violin I’m still learning to play is lying on the couch and our two cats are hiding underneath the half assembled bed trying not to freak out. Of course, Pompey the Pug is underfoot trying to help me assemble my new desk.

I , we, have just moved. It was a cathartic experience to sort through all of our old things and throw out the parts of our past that no longer suited us before boxing up what was left to take with us. We tossed out the old love letters from high school boyfriends, put the desk that never quite fit right into the alley to be carted away, purging everything so that we could start fresh. Start new. Begin again with a clean slate.

You can do the same thing when developing for the web! Perhaps it won’t be as cathartic or soul shifting as our move was this weekend. Nonetheless, there is nothing more freeing in this world than being allowed to start fresh, forgiven of our sins and move forward.

In web development, this is accomplished by something called CSS Reset. Lovely ring to it, wouldn’t you say? Eric Meyer, CSS guru and author of Eric Meyer on CSS: Mastering the Language of Web Design, coined the term in 2007 but the concept has been around longer. Based on the reasoning that “all browsers have presentation defaults, but no browsers have the same defaults,” the CSS Reset creates a common baseline between browsers, reducing inconsistencies so that the developer (yes, you) can explicitly place style rules that are wanted and needed for each specific site rather than relying on each browser’s defaults, which are sporadic at best. Without the CSS Reset, different browsers create a cacophonous mess of elements that just don’t display the way we’d like them to.

The way to utilize the CSS Reset is as varied as the inconsistencies of browsers. What I do is start each CSS file with the following:

/* Begin CSS Reset - Create baseline across browsers */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

/* End CSS Reset */

(View Eric Meyer’s CSS Tools site here)

Some developers prefer the @import at the beginning of style sheets that reference a reset.css file rather than placing it in each CSS file. However you choose to implement and change the CSS Reset is really up to each individual developer. As for my habits, I begin styling my site as I see fit after the CSS Reset declarations. My CSS Reset code has no personalization per se, because I like to stay consistent across the sites I build; every site is the same in the beginning. For example, I do not place a background color in the Reset but choose to redeclare a body tag with the specific color, along with any other styles that are site-wide.

The advantages of using a CSS Reset are numerous. Beginners learning CSS can actually see what is going on with each style rule rather than being perplexed over why Internet Explorer renders div elements differently than Firefox. As for those well-versed in CSS, it may take more thought to write a specific rule for a <strong> element rather than just using a browser’s default. That’s a decision you’ll have to make. We become more aware of typography and layout on the screen with each choice we make. And to be more aware, more in tune with the site we are building is to be a better designer and developer.

So maybe, just maybe, the CSS Reset can be as cathartic as starting over in a new home.

CSS Image Replacement: Enhance a site’s aesthetics while staying search engine friendly

4.30.2008 - Nikki Selene Lamagna - No Comments »

As someone who has been educated in the techniques of art and illustration, I am a natural adherent to the common little axiom that image is everything. When studying the Great Masters (Leonardo, Bernini, Durer, Michelangelo and this guy Jerry down the street - he’s quite good) we rehearsed their brush strokes, practicing endlessly until the image before us looked like the one in our head. The old adage “a picture is worth a thousand words” is one I live by daily.

However, this is not so true in the world of web design where text is king and images amuse the role of the court jester. An image-heavy site does not do as well as text-heavy sites for the simple fact that search engine robots do not “see” the images (as they have no culture but hey, they’re robots). Granted, no matter how compelling your content may be, a text-only site can lack the visual aesthetics that could turn a would-be return visitor into a madman running in the opposite direction. So what do you do when you want the search engines to find your site, rank it highly and still have a site design that would cause Bernini’s Saint Theresa to gasp at in ecstasy? Glad you asked.

CSS Image Replacement is one way to punch up the visual interest of your site while maintaining pure text for the search engines. Throughout my experience as a web designer, creating the look of a site has evolved from using tables with images in cells to using CSS-styled sites. By building sites with (X)HTML and CSS and separating the content (the (X)HTML) from the “window dressing” (the CSS), we are able to create high-quality, good-looking sites that consistently do well in search engine placement.

CSS Image Replacement does exactly what the name implies by placing images into the already present structural tags of your (X)HTML markup as background images and “hiding” the text. So an li tag, often used in navigation, with the text of “home” and a link back to your main page is replaced by the wonderfully designed image of a 3-story Victorian house. The text is offset by any number of tricks, all the while keeping the functionality of the link. You can even create image rollovers with CSS and background images without using Javascript (but that’s for another article). There are many ways to achieve the results of image replacement with varying degrees of success, and Chris Coyier explained them in great detail in his post entitled Nine Techniques for CSS Image Replacement. Needless to say, Chris does a wonderful job of handling the nitty-gritty details so I won’t indulge them here.

The benefits of using CSS Image Replacement are well-worth the extra time to style in the stylesheet (as opposed to just dropping in an img tag). To begin with, as I mentioned earlier, the search engine bots can view the full site without any interference from the images. Also, if CSS is turned off in your visitor’s browser, the site will still flow in logical order so long as you code it logically (i.e. h1 tags come first and are most important, h2 next, etc.). Furthermore, those using screen readers or have their images turned off are still able to obtain the information, thus making your site more user-friendly and accessible. As someone who’s worn glasses since the tender age of eight, it is gratifying to know that the sites I code today will still be usable to me if my eyesight starts to go. With more government & business websites needing to adhere to Section 508 of the Rehabilitation Act (the 1998 amendment that requires Federal agencies to make their electronic and information technology accessible to people with disabilities), your site will already be ahead of the game.

One word of caution though. Even though this method is fairly straight-forward, there is documentation that there are certain methods known to be less effective, even problematic. One example is that you may be tempted to add extra text that does not pertain to the image you are replacing it with. Search engines are smart enough to know you’re trying to pull a fast one and no one appreciates a swindler. With CSS Image Replacement, logically structured (X)HTML and relevant content, you can now have a search engine-friendly and visually appealing site - something even Bernini would be proud of.

Building Trust with Your Online Customers

12.11.2007 - Lauren Engel - No Comments »

Over 99% of consumers check to see who is behind a website before you purchase something from a website. When there is no contact information or anything about the owner or company, most consumers will move on.

Unfortunately everyone has heard a few too many stories about corruption on the internet and nobody wants to be the next victim.

As a website business or website owner, your first job is to protect your client and conduct your business in an honest way. To convey this to your customers, here is a short list of things you accomplish this:

  • Provide Contact Information – When you need help the worst thing is not being able to reach someone who can help you resolve the matter, right? At the very least place an email and regular address on the website. But since most people prefer to talk to a real person rather than use email, you should provide a telephone number. Answering a few questions might be enough to win a customers trust.
  • Include an “About Us” Page – Let your customer know all about yourself and/or your company. Another nice touch is to include some photos of staff and facilities. In short, the more you can establish a personal bond with your potential buyer, the greater your chances of success.
  • Include Testimonials – Over the years we have found that testimonials are a great way to showcase your business, its services or products, and establish credibility. It takes a lot of time to get fresh testimonials but it is always well worth it.
  • Use Secure Transactions – For e-commerce secure transactions, know as an SSL Certification (Secure Security Link) is a MUST. If a consumer is providing you with his or her credit card number, home address, or other personal information should be able to do so without worrying about have the sensitive data compromised.
  • Explain Your Policies – Be upfront about your policies, terms, and conditions. This way you clarify most of the issues prior to the transaction and both parties know what to expect. Put your customer’s fears at ease and you will have a happy customer.
  • Accept Refunds - Always accept reasonable return and refund requests. Deal with them promptly and professionally, no matter how the customer acts towards you during the process. It may be a hassle, but this instills a lot of trust. A customer’s biggest fear is that he/she may not receive what he wants or may not be able to return it.
  • Provide a Guarantee – If you provide a guarantee for your product or service it will place your customer’s mind at ease. The longer the guarantee the better.

If you follow all of these tips, you will make more sales based on the credibility and trust you have established from your website.

Dot the I and Cross the T: A Good Web Design Contract

11.30.2007 - Lauren Engel - No Comments »

Ask for a Signed Contract and a Project Schedule

Like any other business relationship, you should make sure you have a signed contract before the relationship begins. The contract should include the start and completion dates for the project, as well as a firm budget for the project; the complexity of your site will be the primary determinant of the overall cost. Obviously, if you require streaming video and flash presentations, the development time will cost more than a simple, informational site. It is also important to get a flat project rate rather than an hourly rate because then you know what the total cost will be provided that you adhere to the terms of your contract.

The contract should stipulate how many revisions are allowed; at what point phases are finalized; and specifically what is being delivered.

Additionally, it should be clear that you own the completed project and domain name (you should require that the contract states that all content and graphics, and the domain name, become your property). Accompanying the contract should be a timeline of the project, as having a schedule will help keep things on track.

Use a Website Design Firm that is a One-Stop Shop

Unless you have the knowledge to host your own web server, you ought to hire a web design firm that can provide more than site design and development. One of the best ways to know who the professionals are and who are not is whether they offer additional services like hosting, domain name registration, search engine optimization, and ongoing maintenance. That’s not to say you should wash your hand completely of these processes. Find out what the average price is for hosting a website of your size and bandwidth requirements so that you know you are getting a fair price. For example, our web design and development firm offers hosting packages starting from $10 a month – so there is a package made for all budgets. In addition, they should be able to guarantee reliable uptime for hosting, at least 95%. Receive, in writing, the cost for monthly maintenance and what this maintenance entails. Finally, as your company grows so will your website, and your designer should be able to keep up with those changes. If you are dealing with an individual or just two people, chances are they will not be able to meet your growing demands. If you plan on success and growth you will be wise to seek out a web design company that has a full team of designers, developers, programmers, seo specialists, and strategists.

Other Questions to Ask…

  • Can you develop a Content Management System so that I can edit my site?
  • How long will it take for my site to load?
  • Do you validate your code?
  • Can you develop back-end functions (such as a database)?
  • Will my site be compatible for multiple browsers (i.e., Internet Explorer, Firefox, etc.)
  • Can you develop secure e-commerce solutions?
  • Do you have the capabilities of using creating hybrid flash, streaming audio/video, etc.?

Having a presence online is becoming a requirement in nearly every industry. By having a strong partnership between you and your web designer, you will have an effective, attractive and user-friendly website that attracts customers, builds customer relationships and helps your company grow.

Hiring a Good Web Designer: The Dos & Dont’s

11.28.2007 - Lauren Engel - No Comments »

Unless you have been living under a rock or in Pakistan where the government can curtail or even cutoff your internet access, you know that the internet has changed the way we acquire goods, services, and information. If your corporation doesn’t have a website today, it is like you don’t exist.

However, even with this never ending explosion, many small and mid-size businesses are still hesitant about adding a website to their marketing plan. I am not telling you this just because I produce websites. I am telling you this because common sense dictates that I do. It is the common sense in me that says having a good website will not only give your customers access to your services 365 days a year, 24 hours a day, but it will also expose your company up to a wider customer-base.

Unless you feel confident about designing, developing, and programming your own website, you need to hire a professional website development company. But, before you interview web development companies, you should first determine what your goals are for you website, including:

  • Are you strictly interested in e-commerce?
  • Do you want to attract more customers?
  • Do you want to give your existing customers better service?
  • Do you want repeat customers?
  • Are you interested in showing video, commercials, interviews, etc.?
  • Are you looking for an informational site that would introduce your company to individuals or companies?

Once you determine your goals, you are ready to begin the process of hiring a web development company. But, simply doing a Google search won’t do; you must find a web team who will help promote your professional image to your customers while making the online process as easy as possible for you. Below are some basic steps to take in order to find the website development company who will build the perfect site for you:

Do Your Homework: Examine the Competition’s Websites

Before you hire a web designer, you should have an idea of what you want for your web site. Sometimes the best place to start is with your competition. Research your competitors’ sites and take note of who designed them (it is usually listed at the bottom of the home page). Take notes about what you do and don’t like about their sites. What do you think of the design of their website? Does the functionality in their website make sense? Do they offer shopping or are they purely informational? Is there enough of what you are looking for or too little?

Then take your research a step further. Start combing the internet for any type of site that you like. A good starting point is reviewing a web design company’s portfolio. Two of the best web design portfolios are: Digital Peabody Portfolio and Unleaded Software Portfolio.

Do Identify Your Individual Business Needs

Once you have done your homework and have selected a web design firm that meets your needs, you ought to present your business’s key objectives to the web design firm. In addition, make note of your customer-base, as they may look for certain functional or design aspects in your website. Think about the types of information that you need in your website. For example, if you have a new or growing business you may want a section about “Employment Opportunities” Or another example is a “Terms and Conditions” section that explains your company’s policies. Each business is unique and will have a different set of requirements for a website.

Once you have a solid definition of your requirements, and your likes and dislikes in terms of website design, you will be able to present them to a web design firm. Hashing out all of this before you chose a web design firm will help you get exactly what you need in your company’s website.

Do Research the Web Designer

It is very important to work with someone you trust, so before you begin interviewing designers you should review designers’ on-line portfolios to see if you like their particular style. Ask the designers to explain design decisions in the portfolio and request a brief description of the overall process. In addition, make sure you check references. Ask the references if the web design firm meet their expectations, satisfied their timeline, and were they easy to communicate with. One of the reasons why you should work with a professional web design firm vs. a freelancer is that the professionals tend to be significantly more responsive than somebody who works by and for themselves. Talent is one thing – but reliability is equally as important. So while professional web design firms may cost a little bit more than freelancers do, the peace of mind that you will have is priceless.

Are you ready to get started?

If you would like to get started, please call Unleaded Software’s VP of Busienss Development, Lauren Engel. You can reach her at 312-933-3430 or 303-468-5707. Be sure to ask about discounts for new websites!

Backup Generator Installation

10.04.2007 - Jarod Clark - No Comments »

Unleaded Software currently installed a 15 KW generator to provide backup power for our website hosting infrastructure. Allstar Electrical Service installed the generator and automatic transfer switch. This should provide backup power if service is ever interrupted, ensuring uninterrupted delivery of our hosted sites.

How to Make a Good Website - The Key Ingredients

7.30.2007 - Lauren Engel - No Comments »
  • Intuitive Navigation
  • Fast Loading Pages
  • Attractive Colors
  • Smart Page Layout
  • Browser Compatibility
  • SEO Friendly

Intuitive Navigation

When you run into the store to buy a gallon of milk, you want to find the dairy section immediately, right? The same thing applies when a visitor comes to your website. They want to find information or products quickly. By using intuitive navigation, site visitor will be able to find important information with ease. It is always a good practice to place your main links at the top of the page as well as the bottom. Sometimes it is more convenient for your users to click on a link at the bottom of your page than to scroll to the top of the page.

Another important part of the navigation is the menu design. Use drop down menus. With drop down menus your visitors can easily see where they may navigate in the web site.

Slow Loading Pages

Internet time is warped. Seconds seem like minutes. Nobody, not even the most patient person in the world, wants to wait for a page to load. You literally have a few seconds to for your page to load or your visitor will click on to the next site.

High resolution graphics and rich interactive media are the typical culprits for slow loading web pages. When you work with a good web designer, like Digital Peabody just as an example, graphics are handled in a special way so that you can achieve fast loading pages.

Appealing Color Scheme

This is an important and underrated element in web design. This is feel good time. This is time to add a little extra sugar to make it sweet. You want your visitors to enjoy and savor the website - not to strain their eyes. A professional web designer knows how to use contrasting and complimentary colors just right.

Steer clear from dark backgrounds or bright ones like red, yellow or green which can draw attention away from the key messages. In addition, do not use dark text on a dark background. That’s like burning the chocolate chip cookies. Above all, make sure your text is easy to read and is more prominent than the background.

Page Layout

Be consistent. Create a model in which carries throughout the site. If, for example, you use a two-column layout, then every page should have a two-column layout. The top and bottom navigation should always be in the same location. Have the important information located in the section that is most easy to find. Most of us are trained to view a web page starting with the top right corner and then going down toward the lower left on a diagonal. Layout your key points with this in mind.

Cross Browser Optimization

Just because your website looks perfect in Internet Explorer does not mean it will look the same in other browsers like Firefox or Safari. Each browser and version of that browser will handle HTML Tags differently. A web programmer or developer who is at the top of their game will know the tricks of the trade to make your website compatible across all commonly used browsers.

Take Advantage of SEO

You wouldn’t think of having jelly without peanut butter. So, why would you have a website and not optimize it? At the very least, you should add a title to your website, META tags, ALT tags, relevant content, title tags on links and other SEO practices. Internet marketing is its own beast to tackle.

Internet marketing takes a lot of time and dedication, but making sure your website is SEO friendly is the first step to attract targeted visitors to your website.

« Previous Entries

About

  • Implementing best practices on the web to fuel your brand.

Archives

Category

Manage