So many designers try to show off their skills when they build a website. This can lead to heavy / over loaded sites. Depending on the industry and client base, this can be OK. But it can also turn potential clients away.

Clean and simple sites can be quite boring. Unless, you make the experience worthwhile. The balance of simplicity and information is a lot more difficult than it sounds. It can actually be harder to build a good simple site than a gaudy overdone site. The ratio of content to design is very important. Although content is king, it can also be a killer.

Too much text!

If a person visits a site looking for a product, and finds paragraph after paragraph of text… most will get turned off. Unless you are a newspaper or an online library, even then… who wants to read through a bunch of unwanted text to get where they are going? Nobody, that’s who. People don’t want to have to learn how to use your site; they just want to use it. So why not make it easy for them? A good example of clean and operational is http://www.hulu.com. They have a real good balance of information and imagery. It also works quite well on mobile devices.

Straight forward and to the point…

The easier you can make your site to navigate, the more enjoyable the experience will be for them. You will notice repeat visitors and an increase in sales if it’s done right. People like to be entertained as well when they visit a site. That being said… you don’t need to have a big flashy slideshow, or maybe you do. The design pieces of your site should be relevant to your business. Use graphics to tease and excite your visitors, not to hit them over the head with your design skills. Remember to try throttling back on how flashy you think you need your site. This will also make for easier browsing on mobile devices. The cleaner and lighter your site is, the less chance of mobile failure there will be.

Build your site in a simple manner and get it working the way you want before you make it look pretty. Have some people you know look at the site at different stages. Gather their input and combine that with Web Design Standards and see where you end up. Even though it may not match the Grand Idea you have in your head, it may work a lot better. After all, it’s about results!

So many of us have been in the metaphorical side-pocket of Web Design since the Internet began. The thought of the Internet on a cell phone was just a pipe dream then. When you were actually able to get your email on your phone (well, most of the time), everyone thought that was a huge deal! Well folks, things have changed!! Most of us have a smart/web capable phone now, and access more than we ever thought we would on our phones. Thus, we need to start thinking about how we design our sites and pages.
Think mobile!!

The designers/developers that want to stay ahead of the game design for mobile 1st! What does that mean exactly? Well, there are different standards when it comes to designing for mobile. Here is a great reference from the folks at W3C.
What else is different between traditional webs and mobile?
This can be a little trickier to figure out. Let’s take two different examples. A website that already exists and one that has yet to be built.

Pre-Existing site: Test on all available mobile technology. Android phones, iPad/iPhone, Blackberry and whatever else you can get your hands on. Of course, not all of us have access to each of these. Thankfully there are some online tools and guides to help you with your testing.


“There are add-ons for Firefox that can manipulate the data sent to servers to make it seem as if the user agent is browsing on a mobile device, even when they’re not. To do this, you need an add-on called Modify Headers (for Firefox).
Once you have downloaded and installed this add-on, the new options, Tools > Default User Agent and Tools > Modify Headers should appear in your browser.
To emulate browsing on a mobile device, you need to find the User Agent Profile (UAProf) value of your mobile device, which can be found with a quick search on Google for "user agent" followed by the model of your phone (e.g. see Google results for "user agent ipad"). read more…”


The above method is what has worked best for me. A lot of the “online emulators” only show you how your site will look, not function. For example, ”ipadpeek” looks great but, still allows Javascript (Flash) to run. In case you didn’t know, Apple+Javascript=nothing! You must use jQuery to ensure across the board compatibility. Very important for any type of ad / image rotators.

By using the above mentioned technique, you should be able to debug your current site without much trouble. It still pays to test on actual devices when they are available.

New-Site: When starting from scratch, you can take extra precautions in your design/layout to ensure compatibility. You can design using CSS3, so the site will rescale depending upon the device viewing it. But, just as in traditional web design there are devices that don’t support CSS3. Big surprise huh?!

You could also use Mobile User Agent Detection. Which is pretty much a modified style sheet for each different browser/device. This is probably the best way to ensure that users get the same experience no matter which device they use.

Think of your site as a giant APP. Stay away from Javascript and fly-out menus. That will shut down 80% of the headaches you would normally encounter when designing for both traditional and mobile web.

More to come in future posts!

Menu Systems can be a big decision in the website building process. Whether or not to have a drop-down menu or a left hand menu can seem like it’s not that big of a deal. Well, it can make or break you in some cases. Just like anything else, there are pros and cons. There are many more factors these days that should help you make your decision.

First, are you planning on having a lot of mobile visitors?

Mobile devices and smart phones can be a little picky when it comes to flash based menus. Mobile devices simply don’t register a “hover” command on a menu (it’s a touch screen thing!). If you feel you must use a drop-down or fly-out menu, make it activate on “CLICK”, not on “HOVER”. Or, a much better alternative would be a SPRY based menu. SPRY is a framework that incorporates Ajax / Javascript. This has proven to work much better on a lot of devices.

Second, do you have enough links to justify a dropdown menu system?

Don’t have a drop-down menu just because you like them or have seen it on a bunch of other sites. You really need to think of what is necessary. Just like in my previous post about animated gif’s, don’t do it just because other people are!

When you have enough real estate on your site, think of how best you can utilize it. Think about people on iPads and phones. Make your links easy to spot, and easy to click. After all, if a site is tough to navigate, the visitor will get frustrated and most likely leave.

Third, do you have a separate mobile site?

Sometimes it makes sense to have a separate mobile site for users of smart phones, iPads etc. But, that also means twice the work! Why would you want to do that? Why not just use a slightly different strategy? What strategy is that you ask? Well, here it is….

Design Your Site for Mobile devices 1st and desktops 2nd! That’s it!

If you design your site to look nice, and function flawlessly on mobile devices… then it will work without question on desktop computers. This will alleviate any stresses/issues that you would encounter if you designed your site the other way around. Think of the future, everything around us is geared towards mobile devices. Why not stay a step ahead of the game?

Too much?

Not enough?

Somewhere in the middle?

These are questions that Web Designers / Developers ask themselves, or at least should! Several years ago during the Internet boom, everything was cool. Especially anything that moved. In steps the Animated Gif ! Some people used to over load their site with these little buggers. They figured “Hey it’s cool! Everybody else will think so too!” Even if there was 100 animated gifs dancing around the screen! Well, that soon wore off after they saw traffic to their site dwindle dramatically. This was so common back in the day that it almost became a bad thing to use them at all! It slowed down the load time of the site so much that people simply got tired of waiting. Remember, back then there was no Broadband or DSL. If you were really cruising then you probably had a 56K dial up modem. The standard that most people had was a 28.8k dial up modem.

Where Technology doesn’t meet the demand

Computers, software, internet speeds simply couldn’t keep up with ideas. People wanted more and more movement and inter-activity. In walks Flash! Flash offered much better animation and quality of graphics. But, most people could not see them because their browser didn’t support it. If you did want to watch whatever the Flash movie was, you had to upgrade your browser, download the appropriate player, and reboot your computer. An hour later, you might be able to see it, after it downloaded through your whopping 28.8k connection!

The web takes off and leaves designers scrambling to keep up!

It didn’t take long…. Soon the internet was offered at blazing speeds! And as movie/flash players became more standardized and built into browsers, people were finally getting the right idea. LESS IS MORE! Just because you can, doesn’t mean you should.
Well, most people got this…. Not everyone! I personally have had clients over the years that wanted their entire site built in Flash. This is fine if you are using ActionScript, etc. Nope, they wanted 1 big flash file that WAS their site. Huge file size as far as web pages go. Can you imagine waiting for a website to load 1.8mb before you get to see anything? Even with today’s speeds?

The choice is now yours…

Now that speed is not an issue, you can make the decision for yourself of how far to go with a website. Balance is a very important piece of good web design. In fact, IMHO it is the most important piece. If a site looks too empty or too busy, it can drive people away. Use impactful and dynamic pieces if it makes sense. Don’t do something just because you saw it on someone else’s site.

After all, we should use our website as a tool to attract and hold a potential customers’ attention. Make it intriguing, not obtrusive! Make it useful, not useless! Deliver what your visitor expects! Following the K.I.S.S. principle will make your life easier and more profitable.

I hope this little reminder will help guide you away from overkill, and make your job a little easier!

HTML5 has begun showing itself recently from place to place. Although, like any new web technology, HTML5 will take a while to become commonplace. Mostly it is already being put to use in Mobile Apps and Mobile sites. Like I said in my earlier post, the web is going to become more “App” based, rather than page/server based. Thus, allowing for smooth transition and synchronicity between sites and smart-devices. The goal in short, makes things lighter, easier to code and more user friendly.

HTML5 has taken some of the clutter of days past and tried to make short work of it. Example, no more random div’s floating around a page. You will now be able to use new tags such as , , , , and to layout your pages. It’s not that everything is new; it’s just put together a lot better. And things that would normally require Javascript, you can now accomplish with HTML5.

Another big thing will be Multimedia. No longer will a flash based video player/codec be required to view your videos online or on your phone. Once again, trimming a little fat from your site/application. Every major browser will soon be releasing their HTML5 compatible browsers. So, if you have troubles viewing an HTML5 page on your browser that is the most likely the reason. Currently, FireFox is your best bet for viewing HTML5 example. Here are few examples of what HTML5 can do!

• FLASH going Bye-Bye? – This example shows how dynamic HTML5 is natively. Usually, Flash would be the star of this one! The browser load is approximately 90% lighter using HTML5.
• Special Effects? – Oh yeah!!
• Live Edit without a CMS? – You betcha! (Yes, I am from Minnesota!)
• Geo-Location – Give it a try, lots of things you could use this for!

Impactful is the word that comes to mind when I think of what HTML5 is to me. The ability to include some pizzazz without having to create things in flash and hope that the end-user has the appropriate player to view it! Adding a little WOW factor!

I hope this post has given you some insight on what to look forward to! Don’t know about you but, I can’t wait for implementation across the board. We will bring you more on this topic as it becomes more widely used and implemented. Do a little digging of your own and see what’s to come in the future!