Resources:

	CSS-Tricks.com provides clear and easy to follow tutorials that help rapidly improve skill sets. Each tutorial is very well written and includes a demo along with step by step highlighted syntax code. I highly recommend you check out this website on a regular basis!
	Stackoverflow.com is a fantastic community based Q & A site for programmers. Most of the time a Google search for a specific problem will include Stackoverflow in the results. Since it’s community driven, the highest voted answer is always found at the top of the page. This way you don’t have to search around the page to find what you are looking for.
	W3Schools.com is by far the best place for beginners to learn web development. They offer tons of information that cater to wide range of knowledge and skill. The tutorials are easy to follow and don’t take much time to complete.

Fonts:

	TypeTester.org is useful font previewing tool. You can adjust the settings for three separate columns of text at a time. Everything from font type to word spacing can be adjusted on the fly.
	FontSquirrel.com is great place to download commercial use fonts for free. You can pick and choose from their huge selection or use the @ font-face generator tool to quickly convert your own font into a variety of formats to support all browsers. After your font has been processed, you download a package which contains all of the different font files and some preformatted CSS code for rapid implementation.
	Google web fonts offers hundreds of free fonts that have been optimized for the web. Similar to FontSquirrel.com, Google web fonts provide a code snippet for each and every font. Simply browse around until you find a font that works for you, then copy/paste the font link and css code into your website.

Inspiration:

	CSSRemix.com is a collection of hand picked websites with amazing cutting edge designs. Highly recommended for design inspiration!
	TheFWA.com is an elaborate gallery with award winning designs. Favourite Website Awards was established in 2000 and has had over 140 million site visits as of July 2011.
	WebbyAwards.com is considered by many to be the “Oscar awards” for websites. If you have built an amazing website, be sure to submit it for a Webby award. Even if you don’t win, the  buzz and industry recognition is a great way to drive traffic to your website.

We hope these tools will prove useful to you. Stay tuned for more coming soon!

We have previously talked about the Drupal Content Management System (CMS) - one of our favorites in web development. In this article, we would like to introduce you to another fantastic content management system – WordPress.

WordPress was created in the early 2000′s as a blogging tool, but has since grown into a full content management system.   If you are not familiar with what a content management system is, you can find that information in our Drupal post. WordPress is an open source project, meaning that developers from all over the World contribute to it. When it comes to building smaller scale websites, we at Tidal are big fans of this easy-to-use, yet powerful CMS and here are the reasons why:

1) User-friendliness

WordPress has a very intuitive interface, accessible through the (www.yourdomain.com)/wp-admin URL . We tend to recommend WordPress to clients who are looking to build a relatively simple website, for this very reason. The CMS makes maintaining the site about as easy as updating a social media profile. The process of installing WordPress is also user-oriented and takes around five minutes.

2) Easy work with content

WordPress content administrators and contributors are able to maintain their sites and add content on their own, even if they don’t have a technical background. Creating content can be done within a few clicks and WordPress provides you with a MS Word-like text editor – the WYSIWYG (what you see is what you get), which makes formatting very straight forward. All content can be immediately search engine optimized, during the process of its creation – each piece of content will have SEO options such as meta keywords, meta description and tags.  The content publishing process in WordPress provides the user with freedom to save content as drafts prior to publishing.

3) Quick theming with lots of choices

With over a thousand themes to choose from and the ability to customize the themes, you can create an impressive look for your site in little time. If you have some knowledge of HTML and CSS, you can also use theme templates that provide you with even more flexibility. Another convenient feature is the ability to keep your content, even if you have changed the look and feel of the website – saving you tons of time.

4) Simple and effective media management

All media in WordPress, including images and videos, is conveniently organized in a media library. You can access your library from the admin interface. Images, stored in the library, can be edited at any time, with the ability to conveniently add alt tags and captions for search engine optimization. Each piece of stored media has a URL associated with it, so it can be linked to easily.

5) Platform expansion with plug-ins

Similar to Drupal’s concept of modules, WordPress can be expanded with plug-ins. There is a multitude of WordPress plug-ins available for free online. These provide additional functionality, allowing you to add features like web forms, various social media integration, calendars and many others.

We hope you enjoyed this article.

If you are interested in creating a WordPress based website, or have questions about it, contact us!

Drupal. It’s a funny sounding name, and often, if you are not in the web industry, is an unfamiliar term. This week, we are answering one of the most common questions we are asked: what is Drupal? (And why should I use it?)

Drupal is an open source content management system (CMS).

Let us start with the definition of a CMS – a content Management system is a system used as a website’s framework, with the main goal of providing efficiency in working with the site’s content loading and editing. It is a tool intended to simplify the work involved in processes like blog posting, news updates or any other types of content work. There are several popular CMS’ available out there, most of them free to use, such as Drupal, WordPress and Joomla. Each of them has its own advantages and disadvantages, depending on the purpose of the website they are to be used for. To choose which CMS is right for your site, you have to keep in mind a number of selection criteria, such as documentation, security and scalability.

Drupal is a CMS that provides all the core required features, as well as a lot more potential for complex functionality features that can be integrated into a site. To give a better understanding of it, we would like to present a list of key benefits that this fantastic CMS provides.

Drupal Features:

1) Efficient content loading and editing.

If your site is one that requires periodical updates and changes, whether it be new posts on a blog or changes to a slideshow on your front page, Drupal gives you the freedom to do so without having to deal with complicated code.

2) SEO-friendly websites.

Search engine optimization is a crucial process for virtually any website. It is what allows your site to be searchable on search engines like Google. Drupal provides you with the ability to work on your SEO right within the content management system. Drupal SEO Tools is a collection of detailed SEO components, accessible right through Drupal’s interface.

3) Supportive Community. 

Drupal, being an open-source CMS, is highly customizable, allowing developers to make changes to its modules (functionality addons), as well as create new ones. In fact, there is a vast community of developers, who make their customized modules available for anyone to download and use. This customization is done with PHP, which is a fairly common programming language and most web developers are familiar with it. The community also provides tons of tutorials, documentation and answers to questions that may arise in the development process.

4) Effective User Management System.

Drupal provides great control over the site’s users. Various permissions can be assigned to different users, making the access freedom restriction rather flexible. This means that there can be a site administrator with the freedom to make any changes to the site’s architecture and there can be users, who only have the ability to load or edit content.  This can prevent the less technical, content-oriented site users from accidentally making changes to the site’s structure or functionality. At the same time, these content editors don’t need to communicate with the main administrator for content changes, which eliminates that common bottleneck.

5) Easy Theming.

Drupal comes with several choices of themes (layouts) for your site, but there is a multitude of them available in the community.  Themes in Drupal are fully customizable and you can apply your own designs to create the desired look and feel for your site.

There are plenty of different scale Drupal-enabled sites out there. Some of the big examples include: The United Nations, Warner Brothers Records, The Discovery Channel, Forbes and the White House!

Here is an example of a Drupal website developed by Tidal:

We present to you the White Paper from our sister agency, Advisor Websites:
 
Since the advent of Facebook, Twitter, and LinkedIn, social media has become a ubiquitous tool within the marketer’s arsenal of strategies to connect with potential clients. Providing an informal yet informative avenue to share knowledge, generate leads, and to connect with clients, social media integration, however, continues to remain low relative to other industries within the financial services sector. This provides current financial advisors with websites an excellent opportunity to take advantage of the power of social media’s reach.
Read More

Internship Opportunity at Tidal

Tidal Interactive is rapidly growing into one of the best digital agencies in North America and we are recruiting the best and brighest to join our team of web design and development professionals. We believe in the value of great people, great leaders, and great problem solvers. We want to hear from you!

Requirements:

• Must have, or be working towards a Business/Commerce degree
• Must have good English skill (If you have not completed any post-secondary level English course, you must have TOEFL score higher than 95 on IBT, or equivalent)
• Must have excellent computer skills (Microsoft Office)
• 1 year of work experience in Customer Service
• Great problem-solving skills
• Excellent organization, documentation and communication skills
• Great attention to detail
• Experience with accounting software is an asset
• Ability to speak French is an asset

View the full internship opportunity here: Accounting/Finance Team Member

About Tidal

Tidal Interactive is a team of hip, fun and flexible individuals working to deliver superior websites. We work (and play) from the heart of Yaletown and provide an exciting work environment for our team. We understand ROI, and if you’re the right fit, we provide great compensation, benefits, and bonuses for helping Tidal achieve long-term measureable results for our wide range of clients. Learn more >

In our previous post, we have discussed the first five usability heuristics, outlined by usability expert Jakob Nielsen.

We will now talk about the remaining five, with some great examples to illustrate how you can apply these principles to website design and development.

6. Recognition rather than recall

“Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.”

A typical site visitor has expectations of where to find commons elements of navigation. Of course there is always a desire to stand out and give your site a fresh look, however, you always have to look at it from the functional perspective.

This site displays a lack of any common types of navigation

This rule applies to other aspects of a website as well. Hiding important links under a labyrinth of  menus will not only take up the user’s time, but also reflect poorly on the overall website experience. Don’t make the user rely on their memory of how your site is structured – make it intuitive. We believe that if there was one element every website should have, it is an easy to find search bar.

7. Short cuts & Accelerators

“Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.”

Once users get accustomed to your site, they will need shortcuts for the features of the site that they view and use on a regular basis. Most popular listings or quick links is a great way to apply this principle.

Cragislist eliminates the need to pick your location altogether, by making it automatic

8. Aesthetic and minimalist design

“Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.”

Minimalism is one of the most prominent elements of modern web design. Having a simple, yet well thought-out design will appeal visually, creating a sense of style. It will also make navigating on the site incredibly easy and fast. The key rule of minimalism is keeping only the most functional aspects of the site and cutting down on unnecessary content. This will focus the user’s attention on key actions you want them to conduct on your site.

A lot of of web and graphic designers' portfolio sites showcase fantastic use of minimalism

9. Error Recovery

“Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.”

A common example of this rule is user sign in. The more complicated the information requested from the user, the more detailed the error message has to be. Ideally, the system should point out which piece of information is inconsistent.

Hotmail's login specifies the email format in the error message

10. Help and documentation

“Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.”

When users are dealing with complicated application forms, where the information that they provide has to be exact, it is a good idea to provide them with detailed instructions.

We hope these 10 heuristics will help you identify any problems and improve your site! If you would like us to review your website’s usability, contact us today!

Usability is a crucial factor in any interface design, particularly website design. For any business that uses their website as a means for attracting customers or making sales, making sure that the site is easily understandable, fulfilling the functional purposes and providing for an enjoyable online experience, must be a high priority.

Dr. Jakob Nielsen, a very well known interface usability expert, has come up with 10 main usability heuristics or rules of thumb to abide by. We would like to present these principles to you and provide examples of how they apply to a website design.

1.  Visibility of system status.  

“The system should always keep users informed about what is going on, through appropriate feedback within reasonable time”.

This means that at any given moment that a user is interacting with the website, they must be notified of the current status of the process. This principle has several practical applications.

A simple example is an image slider that shows how many images it contains and which one is currently displayed:

On our home page slider, the transparent bar at the bottom displays the content of the slider and the current image

Another case where this applies is progress bars/circles:

a loading circle that displays the progress percentage is more effective than one with a looped animation

2. User Language.

“The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.”

Apart from the possibility of your site being viewed by non-english speakers, in which case multilingual functionality is key, your site has to be easily understandable to an “average Joe”. That means you shouldn’t use too much complicated terminology, especially in the areas of the site that provide common functionality.

Marketing people love to come up with terms, in an attempt to sound original, but it is often recommended to use common terminology, in order to avoid confusion.

Here’s an example of confusing terms found on a homepage of an educational institution’s site:

If you must use an abbreviation, make sure to explain what it stands for, when you first introduce it to the user. This is especially important for first time visitors.

3. Emergency Exit & Undo

“Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo.”

This particularly applies to areas of a site where users are facing some form of a commitment being requested from them. Online shopping carts are a common example:

The Chapters, Indigo online shopping cart provides the option to remove the purchase

4. Consistency and standards

“Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.”

When a piece of functionality is referred to from different areas of the site, it is important that the referrals are using the same term. For instance, if your menu button, containing the information about your company as well as the contact information, is titled “About Us”, then that is the title you should use when directing users to find your contact information. In contrast, if you were to say “find our email in the contact section”, it would be unclear, since there is no such section.

Consistency applies to the visual look of your site as well. That includes color schemes, fonts and themes.

On our site (www.tidal.ca), the color choices are consistent throughout different pages:

This heuristic principle is the easiest to implement, as it can be done on the early stages of your site planning and does not require complicated coding.

5. Error prevention

“Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.”

It is very easy to accidentally close a window or click a button. The consequences can be dramatic if the user is dealing with important data. The simplest solution is the “Are you sure?” warning window:

There will be 5 more heuristics principles coming up, so stay tuned! If you would like us to review your website’s usability, contact us today!

Explore New Career Opportunities at Tidal

Tidal Interactive is rapidly growing into one of the best digital agencies in North America and we are recruiting the best and brighest to join our team of web design and development professionals. We believe in the value of great people, great leaders, and great problem solvers. We want to hear from you!

The ideal candidate for Account Director will have:

• 5+ years relevant business experience

• Minimum of three years spent in interactive and/or Marketing services. Ideally coming from a digital agency background.

• Experience working with technologically complex client engagements

• Demonstrable experience in account management with close involvement in delivery of work and growing of service offering within the account.

• Facilitation, team motivation and team leadership skills

• Solid attention to detail

View the full career opportunity here: Account Manager.

About Tidal

Tidal Interactive is a team of hip, fun and flexible individuals working to deliver superior websites. We work (and play) from the heart of Yaletown and provide an exciting work environment for our team. We understand ROI, and if you’re the right fit, we provide great compensation, benefits, and bonuses for helping Tidal achieve long-term measureable results for our wide range of clients. Learn more >

Tidal Interactive is pleased to showcase the work we did with Recon Instruments. This is a show stopper of an interactive website that highlights the great product lines, people, and company behind their great performance tracking goggles – a must-have for any sports enthusiast.

Released this fall, the new corporate website is integrated fully with HQ Online community, their e-commerce Shop, and customer service interface (Get Satisfaction). We worked closely with designers at Recon to strategically incorporate graphic sliders, video, and engaging imagery into the website. It’s also a prime platform for their social media managers to create conversations through the news section and integrated social media feeds.

Check out the Recon Instruments corporate website below:

About Recon Instruments

Recon Instruments has been passionately leading the innovation of customized solutions for direct-to-eye communications since 2006. Recon technologies integrate Head Mounted Display Systems with state-of-the-art sensors, optics and GPS technology. From snowboarding to kite-surfing, motocross to SCUBA, sky-diving to marathons, Recon Instruments leads innovations in sports training, performance, and straight-up fun.

Contact Tidal today for more information on corporate websites.

No one likes SPAM and especially robots that send you SPAM, but don’t fret, there are some great solutions available for Drupal websites to keep it out of your inbox. CAPTCHA, Mollum, or hidden CAPTCHA, we hope this article will help you decide.

CAPTCHA vs Mollom vs Hidden CAPTCHA

What is CAPTCHA?

CAPTCHA is a simple computer generated test for human users that is graded based on the assumption that other computers or bots are unable to solve the CAPTCHA. (see image on the right).

Pros: CAPTCHA is easy to setup and blocks nearly all spam. It comes with a few different styles and is surprisingly quite configurable.

Cons: It’s simply not user friendly and will cause even the most web experienced visitors to answer incorrectly. Some sophisticated spam bots can understand the captcha and get through. It takes up space on the page and adds visual clutter. But worst of all, it takes time and effort from the users.

What is Mollom?

Mollum is an intelligent content moderator web service that determines if a web post is SPAM by not only taking into account the content that is posted, but also the past activity of the user that posted it.

Pros: Mollum blocks 99.93%* of spam and offers two SPAM prevention techniques. The traditional CAPTCHA test, and an invisible word filter. (*Dries Buytaert - http://drupal.org/project/mollom)

Cons: The filter can sometimes flag legitimate entries as spam. Users still have to read and type in the captcha.

What is Hidden Captcha? 

Hidden CAPTCHA is based on the simple idea that a robot will fill out an input field box 99% of the time. So if you create a hidden input box that has to stay empty, then the CAPTCHA system will prevent posts by robots.

Pros: Doesn’t interfere with the user experience in anyway.

Cons: It doesn’t block as much spam and you need to change the question every so often once spammers start to catch on. About once or twice a month.

So what’s the best solution? How about a combination!

Try adding Mollom’s filter with a hidden captcha. This unique style of protection blocks and impressive amount of spam and won’t cause usability issues. Your users will not even notice it’s there.

We hope you found these spam prevention techniques useful. If you want to learn more about spam prevention in Drupal, contact us today!