Pick up your pencil and take some notes, this is important stuff! Screwing up the mechanics of your site is on par with parading your nolly in a selfie, leaning in for a kiss with spinach in your teeth or letting one go in your yoga class. Few things are quite as difficult to emotionally recover from as creating a shoddy website, without the help of a trained professional.
Responsive Design
Do: Use adaptive images.
The concept of responsive design was first discussed by Ethan Marcotte in 2010. By creating a simple layout with the same HTML code you might usually use (regardless of screen size), together with flexible images and elements, you use the CSS to the reconfigure the elements based on screen width. This way you will allow the user the optimal viewing experience irrespective of the device being used.
Don’t: Make an individual CSS for each platform.
It may be tempting, but don’t just make separate versions of your site for pc, tablet and mobile. There are far too many screen size variations within those three contexts, and your site will just look amateur when the images and elements don’t look right. The point is making the site fill all screens, not just a few.
Navigation – Making Core Content Easily accessible
Do: Keep your navigation panel simple.
The user needs to be able to access at least the core content from any page in one click. One way to make this seemingly impossible task simple is through the use of top navigation drop-down menus. For instance, on a shopping site, you click the ‘women’ icon on the top navigation panel, allowing a drop-down menu to appear with options for clothes, shoes, handbags. Under these headings are sub-headings for tops, dresses and jackets.
It takes planning and foresight to provide as much content as possible, as efficiently as possible, but it’s worth the effort to keep the user on your site. Great navigation means search engines can access your site easily and give it all the attention it needs in order to rank well.
Don’t: Forget the breadcrumbs.
It’s an essential tool which will aid the users navigation on your site. The breadcrumbs will also make it easier for the search engines to crawl your site, especially when your site comprises of a lot of pages.
Mobile Friendly Site
Do: Use HTML5
HTML5 is generally more geared towards mobile web browsing; it’s commonly accepted as flexible, responsive and cross browser compatible.
Also keep in mind that a complex drop-down menu just won’t work very well on a mobile device. The screen is just too small for them to work effectively. The addition of a search bar instead will help smooth out your content discovery. Users can also backtrack to jump to a different section more easily.
Don’t: Simply try to mimic your desktop site.
By keeping your HTML and layout simple and narrowing down your mobile site to just a handful of the most popular content, the site will still be able to load quickly on devices with smaller processing power and weak broadband. Responsive design is also instrumental in making your site appealing across all platforms.
User experience
Do: Keep it simple.
Minimise unnecessary content and elements. Leave out the fancy-shmancy java script, flash elements and complex divs. Keep your pages to a minimum; rather have more content on fewer pages. The user wants to find the content they are looking for within 20 seconds but they won’t if your site is taking too long to load.
Don’t: Be a hero.
Making an overly complex site will help no one. Updating it will be a nightmare, it won’t rank, it will take too long to load and users will abandon ship way before you manage to achieve whatever it is that you set out to do with your website. It’s not 1997 anymore, there’s just no excuse for flagrant solo’s and monologues by rookies. Think austere!
Social sharing buttons
Do: Make them easy to find and clearly visible.
The best place to position your social sharing buttons is usually in the header, large and visible on every page.
Don’t: Discount the importance of the social media buttons!
Great content is wasted if it’s not shared. Pitiful tiny badges right at the bottom of the page will go unnoticed and spoil the share-ability of your content.
Phew! We still have a bunch of tech do’s and don’ts. Check out part two of this post.
