Latest News
Everything thats going on at Enfold is collected here
Hey there! We are Enfold and we make really beautiful and amazing stuff.
This can be used to describe what you do, how you do it, & who you do it for.
11 Common Web Design Mistakes
InsightsHere at PSD to Final, we work with designers every day to bring their concepts and visions to life. Making sure a site’s layout, UI and UX is initiative can be a bit of a battle at times (especially if the end-client has something “very specific” in mind, that’s not quite web-compatible). Here are some design tips from This post is written by Brujo Owoh (originally written for Hongkiat.com). Image courtesy Quick Meme.
There are tons of website on the Internet, and hundreds or probably thousands are created by day. Here’s a very interesting thing to ponder – What are the elements of a good website?
Image Credit: tveskov
Building a website can be daunting but the real challenge lies in making it usable. The problem is most web designers forget that the website wasn’t created for themselves but to solve the users’ needs. They give creativity priority over practicality and usability.
In this article, we would like to highlight 11 web design blunders that web developers and designers make and some suggestions how these mistakes can be easily avoided.
1. Where’s the Search box?
The web is like an archive of information. Whether it’s a corporate website or merely a blog, a search box is essential. The visitor might be looking for something that is hidden within the website, with the search box, chances are, visitors will get what they want.
Suggestions:
Google Custom Search is a neat, simple and effective way to get started. It enables visitors to search your site in an efficient manner. Just copy the HTML code from the control panel and paste it on your website and voilà, you’ve got a search function right on your website.
Here’s a simple form code to display Google’s search engine on your site too. All you have to do is change the site name to your website’s name. Plus, you can modify the submit value to anything you like.
<
form
action
=
"http://www.google.com/search"
method
=
"get"
><
br
> <
fieldset
><
br
> <
input
type
=
"hidden"
name
=
"sitesearch"
value
=
"http://www.hongkiat.com/blog/"
/><
br
> <
input
type
=
"text"
name
=
"q"
size
=
"25"
maxlength
=
"255"
value
=
""
/><
br
> <
input
type
=
"submit"
value
=
"Search Hongkiat"
/><
br
> </
fieldset
><
br
> </
form
>
More: Designing The Holy Search Box: Examples And Best Practice– This article details guidelines for designing the search box.
2. Poor Readability & Legibility.
This is a crucial element of web design. Of course, a good interface design will grab the users’ attention but users have to read text to be able grasp the information they desire. Some websites use the most bizarre font styles and sizes that make reading a pain.
Suggestions:
Fortunately, there are simple ways that you can do to improve the users’ reading experience on your website.
More: Here is a good article that will gives you more tips on improving readability – Readability – Making Web Pages Easy To Read.
3. Unorganized Content Layout.
A website’s content is what drives traffic to it. How the content is structured is what will make it a success or a failure. Users do not read unless absolutely necessary but scan through information and pick out points of interest on a web page. Some designers just put a block of text on the web page and totally neglect headings, sub-headings, bullets, keywords, paragraphs, etc.
Use an appropriate page title for each web page so users know exactly where they are. Some designers even forget to name the web page.
Overall, the worst in this category will be putting inaccurate, inaccessible, insignificant or out-of-date content on your website. The content must coincide with the overall theme of the website and be useful. If a page is under construction, why bother putting it up? If a designer really must, then it is only temporary and 3 weeks will no longer be deemed temporary.
Suggestions:
Organize content on your website using HTML and CSS should be used when creating the design of your pages.
Budget to hire a web gardener as part of your team. You need somebody to root out the weeds and replant the flowers as the website changes but most people would rather spend their time creating new content than on maintenance. In practice, maintenance is a cheap way of enhancing the content on your website since many old pages keep their relevance and should be linked into the new pages. Of course, some pages are better off being removed completely from the server after their expiration date – Jakob Nielsen
4. Bad Navigation.
Navigation within a website should be seamless. Users should be able to find their way around easily. While there is no standard for navigation within a website, especially now as more new web development technologies emerge, it is imperative to understand that navigation must be intuitive and consistent.
If text is used as navigation, it should be concise. Visual metaphors should not be re-invented. If hyperlinks are used, then they should stand out from the body of the text. Dead links should have no place on any web page whatsoever. This increases user confusion and wastes time. And one that is even just as worse is having a link on the homepage that links to the homepage.
Suggestions:
Remember, if users can’t find what they want in less than 3 clicks, most will leave immediately.
More: Implementing Effective Website Navigation – This article gives more insight on implementing an effective navigation for your website.
5. Inconsistent Interface Design.
Excessive creativity can be just that. Excessive! Some designers take it to another level when creating websites by creating different designs for every web page within a website. This is by no means confusing to the user. And utterly annoying. No matter how outstanding and attractive a website is, if the overall look and feel is not consistent, users cannot relate to it and feel less in control. Thus, leaving as soon as they arrived.
Suggestions:
6. Unfriendly Screen Resolution.
I’m sure we’ve visited websites where you have to scroll horizontally. This is an absolute no-no in modern web design. A good designer will develop websites that fit on most screen sizes. The current optimized layout for websites currently is 1024 x 768 pixels.
Suggestions:
It’s hard and almost impossible to cater the design to fit every resolution especially when visitors are now surfing from mobile phones and netbooks, but we can get a rough idea what are the generally used screen resolutions with these following ways:
7. Complicated Registration Forms.
Registration forms are tricky. How much information do you require from the user? Gone are the days where a user had to enter a zillion details to register to your website. Some websites make most registration fields mandatory and validate the fields to the extent where the user is frustrated after a few tries. Remember, users visit a website to acquire information. Not the other way round.
Someecard‘s simple form makes registration painless.
Suggestions:
Compare registration forms across communities on the web and understand what basic information is required of the user during the registration process.
More: 9 Common Usability Mistakes In Web Design – This post on Smashing Magazine takes an in-depth look at registration forms amongst other usability mistakes.
8. Unscrupulous Use of Images/Animations.
Too much images on a web page is a huge turn off. Images can be used to capture users’ attention but it can also be a distraction or just plain aggravating. Images should be used to illustrate and guide the user where appropriate.
Animations are awesome and a powerful medium. Especially when used appropriately. When it’s a cycle or just too much on a web page, it gets on the users’ nerves. Users don’t have the patience, time or resources so designers must offer alternatives or better yet, the skip button, if it’s a full page animation.
More: Flash: 99% Bad – Use Flash appropriately. It’s been almost 10 years since Jakob Nielsen published this article but it’s still relevant in terms of Flash usability especially the Breaks Web Fundamentals piece.
9. Cluttered Pages, More Whitespace.
Too many designers forget about whitespace and its importance. They are so engulfed in their own design creativity that they forget that it’s not about them. Thus, they try to cram as much as they can onto a single page. End result? A busy, cluttered and unreadable page.
kylestanding make good use of whitespace in their design.
Here are few articles to give you a good idea on the importance of whitespace in web design:
10. No Background Music, Please!
Users don’t want cool, they seek efficiency. And yes, 99 percent don’t care about the music on your website. Some designers make it worse by putting different background music on every web page.
Suggestions:
Don’t use background music, but if you must, create a frame for the code and user controls. That way, the music loops continuously, instead of changing each time a new page is loaded within the website. And the user can stop or pause whenever.
11. Test, Test and Test.
This cannot be overemphasized. How many times have we been to web pages that can only be viewed on a certain browser? Web developers have to have a checklist of sorts when testing websites.
Suggestions:
W3C offers tools to test for quality assurance. Check out W3C Quality Assurance Toolbox and Web Page Validation.
Conclusion:
Keep it simple, stupid (K.I.S.S).That’s bottom line. If it’s simple, it’s usable. All in all, great websites keep it simple and usable. Do your homework and it comes easy and naturally.
What are your experiences in web design projects?
What other tips and thoughts would you like to share on web design mistakes?
Editor’s note: This post is written by Brujo Owoh for Hongkiat.com. Brujo Owoh is a Multimedia Systems undergrad, specialized in Web Design and 2D Animation. He enjoys reading fiction, hanging out with his mates, and keeping up with design trends on Twitter. Visit Brujo’s blog.
Top 10 Worst Websites You’ll Wish You Hadn’t Seen
InsightsThere are some things that are DIY, and there are some things that are not. Websites, mostly, fall into the second category. Jo Throup of branded3.com showcases some of the worst the web has to offer. Original article available here. Image courtesy ultradownloads.
Remember back in the mid-nineties when websites were a bit of a novelty? They didn’t really serve much of a purpose and, all things considered, were pretty hideous to look at. Common design features were primary colours, flashing letters, poor quality pictures (sometimes hastily Photoshopped together to create a digital collage).
As the web has evolved considerably over the last couple of decades, site design and functionality have changed massively, too.
Unfortunately (and surprisingly) there are some websites that are still stuck in a bit of a time warp, sporting clunky designs, an overload of information and some pretty poor quality images. These are surely the worst websites on the internet.
Uglytub.com
Thinking of replacing your old bath tub? Go right ahead, because this website doesn’t really persuade you to do otherwise. A combination of flashing poor quality imagery, tiny fonts and garish colours in conjunction with the limiting frames that minimise the site to a small window in the centre of the screen, makes this one of the worst offenders on the web.
Mrbottles.com
Presumably, bottle collecting enthusiasts the world over already know about Mrbottles.com, the online hub for everything you need to know about your bottle collection. Aside from the pillar-box red typeface clashing with the colourful bottles in the background, there are also some poor quality pictures of happy bottle owners on rotation.
Jamilin.com
Jami Lin “Love Love LOVES helping you to evolve” but could use a little of her own advice to revamp her website. Collages of images, videos, links, adverts and copy are all crammed into the centre of the site. This surplus of images and text is a little overwhelming and offers little in the way of clear navigation.
Wholsesalemeatscoventry.com
Turn your sound on for the ultimate online experience…
Okay, so the title and imagery certainly go a fair way to suggest the purpose of this website, but if you’re really clueless about this company, the numerous floating images of raw meat should give a couple of hints. This isn’t the worst site on the web at the moment and there’s useful information at the bottom of the page, but it’s just a baffling shame that users need to scroll past numerous pieces of floating meat to get there…
Gatesnfences.com
This Florida-based company might have a site design that’s stuck in the past, but they’ve also decided that the best way to encourage user engagement is to completely bombard them with information on the homepage. A few small, low quality images are scattered throughout the page, but nothing to break up the large amount of text. It hurts.
Pennyjuice.com
Even though Penny Juice has a page that asks “Who is Penny Juice?”, the blindingly gaudy colours drown out any form of explanation. There doesn’t appear to be any navigation tabs to help you find out more. But there is a picture of a baby and a speech bubble and everybody’s favourite font: Comic Sans.
bolenreport.com
Another offender from the 1996 school of web design is the Bolen Report. This site also crams as much information as possible onto the site, boasting as many as four full feature articles on the homepage.
007museum.com
For decades, James Bond has been gracing the silver screen as a charismatic, charming and ultra-slick secret agent. Yet, the website for the James Bond museum, with its stark background and Times New Roman typeface is a little underwhelming. Barely echoing the character of Bond himself, the homepage is a sour shaken and stirred cocktail of menus, hyperlinks and random imagery.
Arngren.net
There’s little clue as to what this site actually is. Looking a bit like an early web version of the Argos catalogue, this site is genuinely baffling. Scroll down and you’ll continue to see more of the same cut-and-pasted low quality images with links. There’s a search box at the top that’s handy – providing you’ve got some idea of what you’re looking for…
Rudgwicksteamshow.co.uk
RUDGWICK STEAM SHOW! This in-your-face site makes full use of collage imagery, primary coloured fonts and random floating GIFs! It’s difficult to glean any useful information from the incredibly busy homepage. Even the navigation tabs at the top of the page don’t provide any helpful information. Users have the option to scroll through the images of Punch and Judy, tractors and chickens interspersed between random details about the event.
If your website has appeared on our list then, please don’t be offended, but it might be time to consider a redesign (if you can still access it, that is…).
5 Tools to Make IE Play Nice With CSS3 and HTML5 in WordPress
InsightsWhile older versions Internet Explorer continues to hold not-insignificant market share, front-end and full stack developers must ensure website look, feel and work correctly on older versions of IE (IE8, IE9 and IE10, mainly. To make like easier for us geeks, the kind folks at WPMU Dev have made this lovely guide. The original post can be found here.
Catering to IE’s stubborn disregard of standards can be a loathsome task when developing a website. This is especially problematic if you’re eager to use some of the exciting new features of CSS3. Using CSS3 cuts down on the number of images you would previously have to use in order to include effects such as box and text shadows and rounded corners.
IE also severely cuts down on your ability to take advantage of HTML5’s powerful support for web-based applications, including better support for graphics, videos, styling effects, and devices such as tablets, televisions, and mobile phones. If you’re waiting for IE to catch up first, then your website will remain in the dark ages indefinitely.
Don’t let IE’s lack of support for CSS3 and HTML5 limit your WordPress website. Here are a few helpful tools that force IE to behave better:
Make use of the IE-CSS3 Script
IE-CSS3 is a script developed by Nick Fetchak that will allow you to take advantage of everything your modern browser is capable of doing, while providing a little bit of remedial discipline to IE5 to IE8 to make it play nice.
When using the script, you add CSS styles as you normally would, but include one new line for IE, as show in this example from the script’s site:
.box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari and Chrome */ border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */ box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */ behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */ }
The handy thing about using this script is that it allows you to make use of it on a case-by-case basis as you deem necessary.
Selectivizr Plugin for WordPress
There are several options available to you in the form of a plugin that can force IE to behave like other browsers. The new Selectivizr plugin is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply upload and activate the plugin and the script will be running on your site.
HTML5shiv
Did you know that IE will simply ignore HTML5 elements that it doesn’t recognize? Even IE8 behaves this way. The HTML5shiv plugin offers a solution. It adds the HTML5shiv Javascript library with IE Print Protector to your site. This works by taking advantage of the Internet Explorer rendering engine’s ability to handle these elements only after they have been inserted into the DOM via document.createElement. The result allows you to continue to make use of HTML5 elements without having to worry about IE.
WordPress Modernizr Plugin
The WordPress Modernizr plugin adds the Modernizr Javascript library to your site, which enables you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers.
Modernizr is a small, simple JavaScript library. It works by adding classes to the element which allow you to target specific browser functionality in your stylesheet.
HTML5 TwentyTen Five Theme
The TwentyTen Five theme for WordPress looks just like the regular TwentyTen theme, except behind the scenes it makes use of HTML5 elements. It’s a free theme that you can use as a framework/parent theme for your own HTML5 theme creations. The best part is that you won’t need to worry about IE, because the theme makes use of Modernizr.js to make sure that all new elements render correctly in IE prior to version 9. It’s cross-browser compatible, all the way back to IE6!
Whether you want to use a script, a plugin, or a theme, there are many options for forcing IE to play nice with modern web technologies. These are just a few solutions and I know there are many more out there that will work with WordPress.
Although Microsoft is promising some CSS3 in IE9, you cannot depend on it to fully support all features. Grab some of these tools for WordPress and stop catering to the lowest denominator. There’s no reason to let Internet Explorer hold you back anymore.
Why Do So Many Geeks Hate Internet Explorer?
InsightsInternet Explorer has long been the bane of front-end developers’ existence. How to Geek attempts to explain why. This article was originally posted by HTG, here…
It’s common knowledge that almost every single geek hates Internet Explorer with a passion, but have you ever wondered why? Let’s take a fair look at the history and where it all began… for posterity, if nothing else.
Contrary to what you might think, this article is not meant to be a hate-fest on Internet Explorer—in fact, since IE 9, they have continued to improve the performance, add new features, and generally make it standards-compliant.
In the Beginning There Was IE, and It Was Good?
We’ve all been so used to thinking of Internet Explorer as that slow, buggy browser that is behind the times, but it wasn’t always that way—in fact, way back when, Internet Explorer pioneered many innovations that made the web what it is today.
Here’s a quick tour through the easily forgotten history of the infamous browser:
1996: Internet Explorer 3
This version of the browser, introduced in 1997, was the first browser to implement CSS (Cascading Style Sheets). Yes, you’re reading that correctly—in fact, it introduced many new features like Java applets and sadly, ActiveX controls.
1997: Internet Explorer 4
IE4 introduced a blazing fast (at the time) rendering engine as an embeddable component that could be used in other applications—this was a lot more important than people realize. This version also introduced Dynamic HTML, which allows web pages to dynamically change the page using JavaScript, and added Active Desktop integration.
Even more weird? Seems like nobody remembers this anymore, but IE4 was actually cross-platform—you could install it on Mac OS, Solaris, and HP-UX—and by the time IE5 was released, IE4 had reached a 60 percent market share.
1999: Internet Explorer 5.x
Microsoft invented Ajax. Wait… what? That’s right, it was this version of IE that introduced the XMLHttpRequest feature in JavaScript, which forms the underlying technology behind every web application you’re using today—you know, like Gmail. Of course, the term “Ajax” wasn’t actually coined until years later by somebody other than Microsoft, but this release supported everything required to make it work.
So Yes, Microsoft Innovated
From IE3 until IE6, Microsoft used all their resources to simply out-innovate the competition, releasing new features and better browsers faster than Netscape. In fact, Netscape 3 Gold was abuggy piece of junk that crashed all the time, and Netscape 4 was extremely slow and could barely render tables—much less CSS, which would often cause the browser to crash.
To put it in context: web developers used to complain about Netscape the same way they complain about IE6 now.
What Made It Go So Very Wrong?
The trouble all started when Microsoft integrated IE into Windows as a required component, and made it difficult to uninstall and use an alternate browser. Then there was the whole business with them exploiting their monopoly to try and push Netscape out of the market, and a lot of people started to view Microsoft as the evil empire.
Microsoft Stopped Trying
By the time Microsoft released Internet Explorer 6 in 2001, complete with lots of new features for web developers, since there was no competition and they had a 95 percent market share, Microsoft just stopped trying—seriously, they did nothing for five years even after Firefox was released, and geeks started migrating left and right.
Microsoft-Specific Features
The whole problem with Microsoft’s innovation is that much of it was done in ways that didn’t follow the web standards—this wasn’t as big of a problem when Internet Explorer was the only game in town, but once Firefox and Webkit came around and started following the standards correctly, suddenly it became a huge problem for web developers.
Security Holes and Crashing
Since Microsoft decided they didn’t need to try anymore, and they didn’t keep up with the competition from Firefox and other browsers, bugs and security holes just cropped up left and right—really terrible ones, too. For instance, this code is all that is required to crash IE6:
In fact, the screenshot at the beginning of this section was a live example of testing out this particular bug.
IE7 and IE8 Were Too Little, Too Late
It took five years after IE6 for Microsoft to finally get around to releasing IE7, which added tabs and made the browser slightly more tolerable, but for web designers it was still a nightmare to deal with, and only complicated the issue since now you had to make pages render correctly in two lousy browsers instead of just one.
It took another 2.5 years for Microsoft to finally release Internet Explorer 8, which greatly improved CSS support for web developers, and added new features like Private browsing, tab isolation to prevent one bad page from taking down the whole browser, and phishing protection. By this point, most geeks had already moved on to Firefox, and then some of us to Google Chrome.
Here’s the Real Reason Geeks Hate IE
Just because we’re geeks doesn’t mean we hate everything that’s inferior and outdated—in fact, we often love retro computing—that’s why we love Atari, NES, Commodore 64, etc. We take pride in our geek knowledge. So why’s Internet Explorer a different story?
Here are a couple of reasons that fueled our hatred of the buggy browser, and finally put us all over the edge:
Supporting IE is Like a Fork in the Eye for Web Devs
Here’s a sample of a day in the life of a web designer: You spend hours making sure that your page looks great, and you test it out in Google Chrome, Firefox, Safari, and even Opera. It looks great, awesome!
Now you open up IE and the page looks like somebody put it into a blender and hit the Whip button. Then you spend double the amount of time trying to fix it to look tolerable in IE6 and IE7, cursing loudly the entire time.
Luckily by 2014, Internet Explorer 6 and 7 are a statistical anomaly in actual Internet usage, and most of the bigger websites have completely stopped supporting them. Even Internet Explorer 8 usage has dropped to single-digit percentages for many websites.
Geeks Being Forced to Use Internet Explorer
And here’s where we come to the real issue—the whole reason that geeks can’t stand Internet Explorer:
Geeks everywhere were forced to use Internet Explorer at work even when there are better browsers, forced to support it for corporate applications, forced to make sure web sites still work in IE, and we couldn’t convince everybody to switch to a better browser.
Geeks don’t hate something that’s inferior—but they do hate it when it’s forced on them.
The Good News: The Future Is Brighter for IE
Thankfully, it seems like Microsoft has finally learned from their many, many mistakes in the browser world. Internet Explorer 10 and 11 are blazing fast, mostly standards-compliant, and other than the outdated UI that really needs some love, are a solid choice for anybody. There are even rumors that Microsoft might finally release a better user interface for IE in Windows 10. Here’s hoping!
In fact, based on our recent testing, a lot of the new malware isn’t even targeting Internet Explorer anymore, because writing plugins for IE is a complicated thing, whereas writing some quick HTML and JavaScript code to make spying adware extensions for Firefox or Chrome is really easy.
It’s a whole new world, and Chrome, rather than IE, is the target.
Entry with Audio
Blog LayoutsLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Read more
Search Engine Friendly Development: Defending Your Site’s Honor
InsightsThe last of our 8-part series on developing search engine friendly website structures. This was originally written by Rand Fishkin and Moz Staff, and posted on posted Moz. Image courtesy Wikimedia Commons.
How scrapers steal your rankings
Unfortunately, the web is littered with unscrupulous websites whose business and traffic models depend on plucking content from other sites and re-using it (sometimes in strangely modified ways) on their own domains. This practice of fetching your content and re-publishing is called “scraping,” and the scrapers perform remarkably well in search engine rankings, often outranking the original sites.
When you publish content in any type of feed format, such as RSS or XML, make sure to ping the major blogging and tracking services (Google, Technorati, Yahoo!, etc.). You can find instructions for pinging services like Google and Technorati directly from their sites, or use a service like Pingomatic to automate the process. If your publishing software is custom-built, it’s typically wise for the developer(s) to include auto-pinging upon publishing.
Next, you can use the scrapers’ laziness against them. Most of the scrapers on the web will re-publish content without editing. So, by including links back to your site, and to the specific post you’ve authored, you can ensure that the search engines see most of the copies linking back to you (indicating that your source is probably the originator). To do this, you’ll need to use absolute, rather that relative links in your internal linking structure. Thus, rather than linking to your home page using:
<a href="../">Home</a>
You would instead use:
<a href="https://moz.com">Home</a>
This way, when a scraper picks up and copies the content, the link remains pointing to your site.
There are more advanced ways to protect against scraping, but none of them are entirely foolproof. You should expect that the more popular and visible your site gets, the more often you’ll find your content scraped and re-published. Many times, you can ignore this problem: but if it gets very severe, and you find the scrapers taking away your rankings and traffic, you might consider using a legal process called a DMCA takedown. Moz CEO Sarah Bird offers some quality advice on this topic: Four Ways to Enforce Your Copyright: What to Do When Your Online Content is Being Stolen.
Previous: Rich Snippets