Nov 10 2017
Nov 10

I always look forward to unconferences. It’s their unpredictability and element of surprise that I enjoy, you never quite know what the day will bring. I love the edgy feel, the lower barrier to entry, and that it’s OK to fluff your words or try something new. Sensing the nerves of the ones who unexpectedly present for the first time, witnessing how energising their experience is, discovering a topic or theme for the first time, or taking the mic because you feel inspired by others are all reasons I’m drawn to attend and why CTI Digital was proud to be one of the sponsors.

The North West Drupal User Group Unconference last weekend was no exception in terms of inclusivity and our Drupal team were there in force.

 

Our Developers Thoughts

IMG_20171104_112942 (1).jpg

Phil Wolstenholme, a frontend developer in our Drupal team, spoke about using Cloudinary (a third-party image optimisation service) to deliver substantial site speed improvements for our client, Aman Resorts.

"Unconferences work without any knowledge before the event of who (or how many people) will be speaking, so there’s a rush at the start to get your idea up on the wall to secure a slot to speak in. I was lucky (or fast…) enough to bag a slot early in the day before the competition heated up for the afternoon slots.

It was interesting to talk to a primarily Drupal audience about a commercial service that exists outside of Drupal and the free and open source world. I was a bit wary of this - I wanted my talk to come across as sharing a useful tool, not a sales pitch. To show the optimisations made possible by Cloudinary I took an example component from the Aman website and applied a series of optimisations to the image within it, explaining how the file size decreased with each step. In the process, I also covered topics like the WebP image format, Client Hint HTTP headers, and the custom CDN integration we developed to reduce bandwidth costs for Aman.

With headless CMSs and microservices being a hot topic at the moment, I think we will start to see similiar talks that cover how Drupal’s out-of-the-box functionality can be supplanted by specialist third party services that do one thing, but do it very well."

 

Daniel Davison, a Junior Drupal Developer at CTI, attended the unconference for the first time this year.

"This was the first NWDUG Unconference that I attended and I was very pleased with how it turned out. The talks were all captivating and informative, and it was good to get together with the local Drupal community. I had already met quite a few of the people who attended the NWDUG monthly meet up but it was good to see so many new faces there. As soon as I entered MadLab, where the unconference was held, I was greeted by some familiar faces and handed a goody bag (always a bonus). I then found myself a seat and once everyone had arrived we planned who was doing what talks and in which room, this was so that people could go to the talks that they were interested in and decide when in the day they would do their talk if they were doing one.

Personally, my favourite talk if I exclude my colleagues, Phil and Graham, was the talk by Richard Sheppard on the use of Docker with Drupal and he talked about something I had thought about myself. I had been to Docker talks before but it had never been talked about in terms of use with Drupal so it was nice to learn about how he had been using it personally and his experiences with it. Docker is useful as it allows a developer to have more applications running on the same hardware than other technologies such as virtual machines. It makes it easy for developers to quickly create ready-to-run container applications, and it makes managing and deploying applications much easier.

Food and drink were provided and there were regular breaks. Afterwards, everyone went to Common which gave everyone an opportunity to get to know each other even further and have a drink together. Overall the event itself was well worth going to and I look forward to next year."

37455821004_3da884e553_z.jpg

Graham Brown, one of our Drupal Developers, came along to the unconference not intending to speak. But the welcoming community in NWDUG inspired his impromptu talk on PuPHPet.

"Like some of my colleagues at CTI, this was my first time attending an unconference. The registration procedure was smooth and efficient and the goody bag contained a proper mug which came in handy for the first coffee of the day! The introduction by Phil Norton was informative and included a briefing as to what an unconference actually is and how it works.

I had arrived completely unprepared talk-wise but due to the introduction making the whole process seem so relaxed and informal I decided on the spot to give a talk on PuPHPet which is an online / browser-based setup utility for those out there who use Vagrant
and their favourite virtualisation package to manage their virtual machines for development purposes.

I was impressed by the diversity of talks ranging from non-Drupal specific subjects such as website project management processes to talks which could be platform agnostic such as Docker and image compression CDNs given from a Drupal perspective. Phil’s talk on Cloudinary, for example, was a Drupal-specific show and tell about a service which is available for a vast array of CMS and e-commerce platforms, but the same principles apply to whichever framework you choose to use.

I’ll definitely be checking out the new programs I learned about and also re-visiting Docker from a Drupal perspective in an attempt to use it as an alternative to my current Vagrant-based workflows. There was also a talk given about Deployer which again I’ll also be looking at using for personal projects to make my deployments run smoother.

I’m looking forward to the next unconference. Based on the value the event gave me in terms of all the industry knowledge I gained I’m also going to be making more of an effort to go to the monthly NWDUG events held at MadLab."

 

Final Thoughts

With over 50 attendees what was striking to me, for someone in the community for over a decade, was the proportion of abundance of new faces and rising stars, graduates, apprentices, and those moving to Manchester for the digital scene. I came away feeling the local Drupal community was growing, vibrant and full of promise.
Nov 08 2017
Nov 08

We are a web development team of our word. And since we promised we would come back with some more best practices for a sustainable web development process... here we are!

In this post, as already revealed to you in “Part 1”, we will be highlighting:
 

  • all the “tweaking” you can do at a server level so that it should use less unnecessary energy (and reduce its overall CO2 output)
  • how to approach content on your site with sustainability in mind
     

Here we go:
 

Tips on Improving Your Server Performance: Consider Switching to a Green Host

If you're confident enough (or your team is) to get your hands dirty in server configuration and maintenance there are plenty of high-impact measures you could apply:
 

1. Use the BigPipe Module for Drupal 8

BigPipe has been and still is one of Drupal 8's biggest “innovations”.

It's nothing new, Facebook's been using this technique for a long time for improving page load times. Yet, now you have it in the form of a stand-alone module that you can leverage right on your Drupal 8 site!

And it would be a pity not to!

Just think about it: the BigPipe module practically segments each one of your web pages into multiple pagelets and streamlines the content loading process. It sends the cachable content segments first and the non-cachable, dynamic content last.
 

2. Make a Habit of Optimizing Your Database

Drupal “saves the day” (and the planet, too, when used properly) once again! It gives you the DB Maintenance module to enable, to leverage and to integrate with your sustainable web development workflow.

And this will prove to be a powerful tool to support your database optimizing endeavors: it runs MySQL's OPTIMIZE TABLE regularly using cron.
 

3. Get the Most of All The Caching Improvements in Drupal 8

If in Drupal 7 you still need to enable caching yourself (configuring your site's performance on the Admin page), in Drupal 8 page caching happens... naturally, by default (as well as assets aggregation).

And there's more! The caching enhancements made to Drupal 8 impact even pages “carrying” dynamic content.

And this is a big step forward towards top site performance and using energy responsibly if it's an interactive (and therefore with dynamically generated content) Drupal site that you own.
 

4. Move to HTTP/2

… and expect your web pages to load X times faster!

Be (still) one of the early adopters of HTTP/2! Why should you wait till it turns into a major trend? What you know for sure now is more than enough if you're truly determined to go further with your sustainable web development initiative:
 

  1. the vast majority of modern browsers do offer great support for HTTP/2
  2. it's proven that the HTTP/2 server push method makes a great “latency killer” by sending the requested data to the web browser BEFORE the later even “has the chance” to request it!
     

5. Move to a Green(er) Host

A website about to turn green calls for a... green hosting company, don't you agree?

So, it's time you get picky when it comes to choosing your host and to put the company you're already collaborating with to the... green test:
 

  • which is its policy towards sustainability and its contribution to creating a more sustainable web?
  • how committed is it to using energy responsibly?
     

If it does not live up to your standards of sustainability... consider migrating to a more “welcoming”, greener host!
 

6. Compress Your Cached Pages

And here you can choose the Drupal way or the Apache way of compressing your Drupal cached pages

Also, you could even step up when it comes to your commitment to a sustainable web development workflow. Supercharge your server by installing Varnish and enabling Drupal's own Varnish module, as well. 

This way, your server will be ideally equipped for caching, not to mention that Varnish is conveniently easy to configure!
 

7. Switch from a Data Center to a CDN Network

… and reduce, significantly, the energy used during content delivery to your users' devices.

Practically a CDN will locate the server (since we're talking about an entire network of servers put at your disposal) that's geographically closest to a given visitor on your website. Next, it will serve the requested content from THERE, much faster and using less energy. 

In short: 
 

  1. better content delivery times for your users
  2. a reduced energy consumption for moving data/content from your server to their devices.
     

Sustainable Web Development at a Content Level: Keep It Light, Make It “Findable” 

Once you've made your commitment to sustainable web development, optimizing your content:
 

  1. for SEO
  2. for a lighter on-page load
  3. for an improved user experience


... is a must.

And here are the 3 “fronts” you should be concentrating your efforts on:
 

1. Keep It Light, Keep It Short

We've already tackled the “irresponsibly heavy images'” issue. So we're not going to point out, once again, the tools and the techniques at your disposal for reducing your visual content's size.

What we do want to outline now is that you should keep your user interface efficiently simple

Don't make your visitors get tangled up in visuals, don't turn your UI into a maze for your visitors to solve. Keep it lean and shamelessly intuitive!
 

2. “Find-able” Should Be the Keyword to Describe Your Content 

The less time a visitor invests in tracking down the information he is looking for, the smaller his/her web use carbon footprint will be!

And how do you make your content easy to find? There are a few simple tricks:
 

  1. a well-thought-out navigation; apply all the best UX practices for a great search experience
  2. get the most of Drupal's core search
  3. enable the Apache Solr module (especially if it's a high trafficked site that you own) and integrate your green Drupal site with the popular search platform
     

3. Time to Archive Your “Last Season” Content 

All those out-of-date images, unused files, “dusty” written content that no one reads anymore still lingering on your website, all those videos dating centuries ago should... go. Should get archived!

Not only will you lighten the load your site needs to carry (and reduce energy waste) and take a burden off your server's shoulders, but this decluttering session will benefit your users too. Pages will load significantly fast! And overall maintenance costs will get lower.

Not to mention that pages will load fresh, quality content ONLY for search engines to index and your users to enjoy.
 

The END! This is our list of tips and tricks on how to implement the sustainable web development principles into your own website. 

As you can see, you're not being nickel and dimed in options when it comes to making your Drupal site (more) Earth-friendly! And they do range from basic, handy solutions that require no out-of-the-ordinary technical expertise, to a bit more complex ones.

So you have no excuses for not contributing, at a basic level at least, to building a more sustainable web!

Nov 08 2017
Nov 08

Have you turned on the green light on your Drupal site? Have you moved to a sustainable web development workflow? A “movement” (rather than just a trend) that will benefit both:
 

  • You, the website owner: since optimized page load times and “find-able”, easy to “digest” content translate into happy visitors coming back to your site
     
  • The planet: since a lighter load of content, along with users that can access it much quicker, translate into “no need” for an additional infrastructure and into fewer carbon emissions (users consume less energy searching for their target content, while your data's “journey” from your server to their devices gets shortened).
     

See? Everybody wins: you, your visitors... the planet itself.

And where do you add that these sustainable web development best practices range from common sense, easy to implement measures (for the non-tech-savvy ones), to more in-depth practices if you want to go further with your “greening” initiative.

In this respect, Drupal (and especially Drupal 8) is ideally equipped for helping you achieve high performance on your website. You just need to press the right “buttons” for harnessing all that locked-in power!

Here is the list of best practices for a greener, responsible Drupal site, sorted into 3 main categories:
 

  1. Drupal specific, ready to use tools for optimizing your website with
  2. Tips and tricks for fine tuning your server for high speed
  3. Best practices to keep your content light (images), to make it conveniently snappy (written content) and easy to find
     

Drupal Specific Tools and Techniques For a Sustainable Web Development Process

With a whole plethora of tools that Drupal “shovels” into your toolbox, tools aimed at reducing on-page overload and boosting your site's performance, all you need to do is: use them!

Now allow us to list just a few of the handiest ones with a high impact on your site's carbon output:
 

1. Disable and Remove Unused/Outdated Modules

Confess it: do you have the Devel module still lingering on your production site? How about the Views UI module which you only use now and then for editing one of your Views?

And how about all those modules that you just took for a spin, “seduced” by their much-appraised functionality and cool features, and that you've never actually used (or stopped using shortly after you've enabled them)? Modules which are now claiming their own share of resources on your website since with every page view some of their code, too, gets loaded.

Time to declutter your “modules closet"! Wiping the dust off this load will actually speed up your site and... contribute to a healthier planet. A win-win!
 

2. Leverage the Lazy Loader Module's Power

Another sustainable web development technique specific to Drupal, "too" handy not to make use of, is enabling the Image Lazyloader module. 

It will load the images on your website only when/if the user scrolls down to them. A resources “saver” and page load speed booster valuable especially if it's an image-packed Drupal site that you own.
 

3. Jump on The “Design First” Trend

“Mobile first” is so much more than just a fancy expression associated with Drupal 8 or a passing trend.

It's an entire philosophy shaping the sustainable web: use your own site's resources responsibly!

Since you're constrained to design for mobile devices first, you're constrained to achieve more with less. You just can't afford “stuffing” your site with heavy, optimized images or with bulky JavaScript libraries. Your web pages would then take ages to load on smartphones or tablets.

This way, you're “forced” to start small and keep it simple, efficiently simple! And you'll end up restraining yourself from getting “greedy on energy” later on, in the context of adapting your site for larger screens and when you're “spoiled” with higher bandwidth.
 

4. Aggregate Your JSS and CSS Files

You can lay back and get “responsibly lazy” letting the Advanced CSS/JS Aggregation Module do the assets aggregation job for you!

A much more convenient, sustainable web development solution for compressing your JavaScript load than the standard one where you would enable the aggregation code in Drupal Core (Administer > Configuration > Performance).

And where do you add that this life and energy-saving module use Google's CDN to load jQuery! Has one of the requested JavaScript or CSS files on your site been loaded already by a browser? Then just a cached version of that file will get loaded instead of downloading it fresh. 

Also, consider moving your JavaScript and CSS in the footer (a performance enhancement that happens by default in Drupal 8) for gaining a boost in page load speed!
 

5. Keep Your Images Small

Stuffing your site with large and larger images, with heavy visual content aimed to wow your visitors is nothing but sabotaging your site and disregard the planet.

And you should at least strive not to “steal” your site's chances to win over more users!

Keeping your images irresponsibly oversized will only prolong your users' waiting for them to load and, implicitly, increase their CO2 emissions.

Drupal comes to your “rescue” once again providing you with the ImageCache module. Use it to minimize overall page weight.

Then, go even further by teaming it up with handy tools such as TinyPNG, which will help you reduce your images' sizes even before you get them uploaded on your site.
 

6. Switch from PNGs and GIFs to SVG

Wherever possible, of course.

SVG (Scalar Vector Graphics) files come with the convenience of being:

  • much smaller
  • easy to scale, without having to trade clarity for that
  • enabling inline writing for CSS & HMTL 5 files

3 strong reasons which turn the use of SVG files into a sustainable web development method.
 

7. Take Your Visitors Straight-Up to The Content They're Looking For

The longer you leave your site visitors disoriented, scanning through in search of the information they're truly interested in, the more energy they'll consume.

And the more frustrated and unlikely to come back they'll grow, obviously!

This is why a Drupal module like SEO Checklist comes in handy!

It provides you with a highly intuitive UI where you can simply “check” all those SEO steps to take for optimizing your content. This way you'll be enabling search engines to direct users precisely to those pages on your website that they're interested in.
 

And we shall stop here with our tips and tricks on how you can embrace sustainable web development practices and turn the green light on your Drupal site, too. More website “greening” advice (at a server-level & content-level this time) in “Part 2” of our post. Stay tuned!

Aug 29 2017
Aug 29

A web life without plugins, without extensions for web designers and developers or add-ons! Still: as competitive and as demanding as the present one! Just try and picture yourself as a web designer in this given web environment!

Would you manage to stay relevant? With no design toolkit to boost your productivity, to lighten your work and to turn repetitive and otherwise time-consuming tasks into a matter of just a few simple clicks?  

We didn't think so either! Luckily, in today's web life (imagination test over now!) you're definitely not short on choice when it comes to life-saving extensions that you get to drastically speed up your workflow with.

And since no designer worth his/her salt would ever stop adding new and new useful extensions to his/her toolbox, here are our 7 recommendations for you:
 

How could you even dare hoping to provide the best user experience on the websites that you're designing without embedding accessibility into your efforts?

Well, Spectrum is your “ally extension” in all your accessibility implementing and constantly improving endeavours! Basically what it does is enabling you to visualize your work-in-progress exactly as a visually impaired visitor would!

It'll point out to you low contrast problems and issues of badly chosen colors (from the standpoint of those users with color vision deficiency). Once the issues highlighted, you can go ahead and... handle them!

Now speaking of creating an optimal user experience: broken links will easily “sabotage” all your efforts in this respect!

And opting for a ridiculously time-consuming method of closely examining your entire website, link by link, is no option in modern web.

CheckMylinks is! This extension will do all the “dirty work” for you: it will crawl into your website and run an in-depth check-up on your entire “infrastructure” of links.

Once you have the “link diagnosis” delivered to you, applying the right “treatment” will be less time and energy-consuming, wouldn't you agree?
 

3. Eye Dropper, One of The Life-Saving Extensions for Web Designers

How many times haven't you experience a “love at first sight” for certain... colors found on other websites? How could you turn such a “got to have it” color into an accurate source of inspiration? You take either the long or the short path:
 

  1. you take a print screen, enter your screenshot into the photo editor of your choice and, using your eyedropper tool you engage in a looong, irksome (and nonetheless frustrating) color-identification “marathon”
     
  2. you install this Chrome extension, give that “irresistible” color a click right there, on the website, and, as if by magic, you'll discover precisely what color it is
     

Accuracy, time-efficiency and, of course, productivity-boosting! With Eye Dropper you'll kill not 2, but 3 birds with one stone/click!
 

Compare these 2 possible scenarios here where you need to check how that website that you're currently working on would look like on various devices, having multiple screen resolutions:
 

  1. you literally put together a “pile” of mobile devices having some of the most common screen sizes and... test your Drupal site on each and every one of them
     
  2. you install Window Resizer and carry out an UI testing process right in your browser's window, which will adjust, automatically, to all the given screen sizes; this way you'll get to see how your site is going to look on all of those screen resolutions
     

Now could you deny that Window Resizer could easily get included in the exclusive group of “can't live without" extensions for web designers”?
 

Here's one extension that will streamline your code copying-and-pasting workflows! And make you ten times more efficient, needless to add!

Practically the MultiClipboard plugin does precisely what it promises: it allows you to simultaneously “joggle” with multiple clipboards! It makes it easier for you to copy and grab code from one place and store it in a different Notepad file.

Since it keeps track of your recently copied texts, you get to retrieve them and paste them back to their original files!
 

What font is that? The one that instantly caught your eye on that website you were surfing on and that you still (secretly) fancy about?

How can you tell for sure? You harness the WhatFont's power, that's how!

Once enabled, you only need to hover on that text written in the attention-grabbing web font and voila: you'll identify this particular font in a... click!

Mission accomplished! Now you get to replicate it in that design that you're currently focusing on!

Easy peasy! And where do you add that it can also identify the services generating the web fonts and that its supports Google Font API and Typekit, too!

In other words: when in doubt, sift through the bunch of useful extensions for web designers available out there and find the answer to pretty much all your “web design questions”.
 

Put your valuable work under a heavy shield: this Notepad plugin will “watch your back” by automatically saving your work every few seconds.

So you can focus exclusively on crafting amazing designs instead of focusing on... clicking “Save” over and over again lest you should lose crucial coding.

And our list of 7 extensions for web designers that will speed up your workflow and make you X times for productive ends here! We're curious now: which are your own top favorite ones? Is/are any of them listed here?

Jun 01 2017
Jun 01

It's time you embraced the DATA! That's if you still want a leads-generating website and not just a “pretty painting on a wall”, in an art gallery, that, well, everyone's briefly looking at, but no one's buying! The days of aesthetics' “dictatorship” and of the instincts and personal preferences-based decisions are over. It's time you leveled up and took ONLY smart, data-driven web design decision within your organization!

It's data, cold facts and numbers that will hep you get your website from “just pretty” to “both effective and pretty”. It's data, again, that will speed up the design decisions making within your organization and help you launch your Drupal site on time and on budget. 

It will filter all your options down to those that are numbers-backed-up. Those that you can then leverage for ensuring a hassle-free, enjoyable user experience on your website.

And now, let us point out to you the main questions that you should be asking yourself and the key mindsets that you should adopt once you engage in a data-based website designing process.


1. Which Are The Specific Results That Your Website Should Target?

Do you want to attract more subscribers via your website? Or maybe you want to convert your website visitors into customers? Or you aim, instead, for social media sharing or for the downloading of the materials that you're offering on your website?

In other words: which is your specific conversion goal? The one that you're trying to achieve via your website? It's the answer to this basic question that will make the keystone of your whole web design strategy!


2. Move the Spotlight From Your Business Goals to The User's Tasks

First of all, let's get one aspect straight: you are not your website's target user! Therefore, all the data-driven web design decisions that you will make should target the “real” user's needs, pain points and expectations and not yours, as a company!

Now, speaking of expectations, in web design we prefer to call them “user tasks”. The tasks that your website visitors need to complete (to make a booking, to buy a product, to subscribe to a newsletter, to read blog posts etc.)

Your “job”, as the “entity” behind the “front store”, which is your Drupal site, is to make carrying out these user tasks as effortlessly as possible:
 

  • design with user experience in mind
     
  • stick to the generally-accepted design conventions, thus creating a sense of familiarity
     

And it's precisely on those pages on your site where their tasks and your business goals, as an organization, intersect, that your main sources of conversions will be (let's say subscriptions: they can be both something the users need to do, some filling-in forms tasks, and your objective as the website owner, as well)


3. Set Up Your Data-Collecting Tasks, a Key Step in a Data-Driven Web Design

“OK, OK, I get it; I need to make data-based web decisions only, but how do I collect that usable, key data?” you might ask yourself.

Glad you asked, actually! Here are some examples of tests you could run and to-do tasks you could set up and assign to different members of your Drupal team:
 

  • identify your users' current pain points, determine the causes why you're losing conversions on your website, it's own weak points (run some surveys, rely on your customer service team's gathered feedback from your clients etc.)
     
  • analyze your competitors' own sites, see what works and what doesn't in your own industry
     
  • turn Facebook Audience Insights into a powerful tool for getting to know your users better
     
  • try identifying the reasons why your users won't convert: find what the key differences are between your visitors and your customers


4. Make Empathy-Driven Design Decisions

Welcome everyone on your website! Users with disabilities here included!

Especially since Drupal makes it so simple for you to meet the web accessibility standards

Therefore, you have no excuse left for refusing to empathize with your users and, this way, for knowingly refusing to achieve your conversion goal.
 

5. Guarantee Your User a “Painless” Visit 

And by “painless” we actually refer to common-sense design “rules” that are constantly being broken by organizations, on their websites, for the sake of innovation.

Remember: when aesthetics interferes with website usability, it quickly turns into a “trap”! Don't fall into it!

Now here are those “common sense rules” that we were referring to:
 

  • always choose context-sensitive icons with meaning (no need to demand your users to “solve mini-puzzles” for figuring out what action each icon triggers)
     
  • resist the temptation of breaking the tried & true conventions ensuring usability on your website (place your shopping cart, your sing in button, your navigation bar and all the other key elements on your web pages precisely where your visitor's used to finding them)
     
  • always “bid on” high contrast for your written content
     
  • guide them through the steps of their tasks with the help of gestural interactions

 
We're more than sure that these web design conventions are nothing new to you. Nevertheless, what we're trying to point out by enlisting them here is that: you should never compromise usability for the sake of innovation, of breaking the norms!

Serve your users' needs of usability first and impress them later!  


6. Keep Key Information Above the Fold

Although some might argue and feel like going against this convention, keeping the top benefits, the key information above the fold still is a more than relevant “rule”.

You might be thinking that not revealing your products'/services' “luring” benefits from the very beginning builds up suspense, yet you'd better handle your visitors' time with great caution. The more time you ask them to invest in the visit on your website, the fewer your chances to convince them to convert will get.

To sum up: display all your main benefits, your CTA elements and all the other crucial information above the fold. The deeper you'll bury them, the better you'll hide them from your users, “bidding” on suspense, the more frustrated they'll get.


7. Go for an Ideal Number of Choices, A Key Rule in Data-Driven Web Design

And by “ideal” we mean that too many options could get their decisions making process way too cumbersome and challenging. While too few will only confuse your users and make them feel not properly cared for and attended to.

How do you achieve this ideal number of choices? Well, here are some simple tips you can easily put into practice:
 

  • create filters that will help them “swim through” the whole set of options, but make sure you make them as specific as possible and that you add them to the most popular (and therefore the choices-packed ones, too) categories on your site
     
  • opt for simple, straightforward categories
     
  • structure them in a hierarchy by assigning priorities
     

8. Tailor A Personalized Experience for Each One of Your Users

Is there any point in stressing out that we're living in a personalization-dominated digital world?

Users already expect you to “orchestrate” some perfectly tailored experiences for them on your website, so... there's no hiding from this trend anymore.

How do you comply with it while ensuring that all this effort will translate into conversions? Well, by studying your visitors and collecting a whole load of key data regarding their browsing histories on your website, regarding their geolocation, their purchasing histories etc.

Next, you get to leverage all that data for crafting your personalized content (in the format of personalized recommendations) for each one of them.

It's not going to be a quick and easy process, we won't hide this from you, yet a personalized content marketing strategy still remains THE most effective one. If Amazon keeps using personalized content for boosting their sales, then it must be (still) working, right?
 

9.Leverage The Power of Video Content on Your Website

We won't be focusing on this aspect, since we've already dedicated it a two-parts blog post on this site. Using video content on your Drupal site is not even a matter of a “web design trend”, but a data-driven web design decision. It's plain, "cold" data that supports the usage of video content.


10.Use Social Proof For Building Credibility

Testimonials, previous partnering companies' logos, an “impressive” number of sign ups, customer reviews, these all make the type of data that the user, too, collects before he makes his own decision while on your website.

So, make sure you have them all there, displayed and visible enough for your users to easily spot them. This type of social proof is the type of credibility evidences that your users expect to see on your website!


11. Constantly Monitor Your Data and Make The Due Adjustments

So you've launched your website, created based on data-driven web design decisions only. What now? 

Well, now you get back to work and you collect even more data! Site monitoring never ends and designing your website's a continuous process. 

Therefore, always be ready to make some small adjustments here and there if the data you'll collect via GoogleAnalytics, Hotjar or via any other business intelligence tool that you prefer indicates that you should:
 

  • monitor your users' clicks and scroll behavior
     
  • leverage all the information that the heat mapping process delivers you and make the right changes on your Drupal site
     

How about you? Have you already incorporated and turned data into a key component of the web designing processes within your organization?

May 26 2017
May 26

Little things done right matter”. And there's no point denying that you, too, consider the 404 error page on your website a “little thing”. Something not worth investing too much thought and creativity into, right?

But what if you did focused on its UX? What if instead you managed to reduce the “shock” your users might experience when finding themselves stranded on your 404 Page not Found page?

What if you turned this “accident” or “incident” (that you can't 100% avoid, it happens to all of us) into an opportunity to show them that you care about little things being done right? Especially when these neglected “details” involve their own time and can affect their experience on your Drupal site?

A cleverly designed 404 error page will turn into a:
 

  • surprise for your visitors
     
  • opportunity for you to “show off” the (other) high quality content on your website
     
  • an opportunity to build trust (showing them that you pay attention to such usually underestimated details involving them will no doubt pave your way to their loyalty for your brand)
     

And now, without further ado, here's “the anatomy” of a cleverly crafted 404 page that won't drive users off your website from the very first second:
 

1. But First: How Do Users Land on Your 404 Error Page?

As online users we've “wandered” on 404 pages a few times (at least) ourselves. As Drupal site owners/developers/designers we had to face this frustrating reality: our site users landed on this “no man's land” page on our websites. 

Links do break, pages get removed from our website, so “cracks” like these, where users risk to fall, do appear. 

The most common causes are:
 

  • the user mistyped an URL
     
  • the user clicked on a broken link
     
  • the page he/she wanted to navigate to has been moved (yet the visitor has not been redirected to the right page) or even removed
     

Example of a Cleverly Designed 404 Error Page         

2. Instead of Leaving Your User Stranded, Give Him/Her Some Directions 

No need to “punish” your website visitors for having landing on your 404 error page! They must be feeling confused or frustrated already!

So, instead of making them feel as if they've just landed landed on a “stranded island” and simply leave them find they way out of there, how about throwing them some “ life rings”? How about giving them some suggestions on where to go next and thus keeping them on your website?

Here are the most common solutions you could rely on for turning this opportunity (that they've accessed your site) from a potentially lost one (since they're on your 404 No Found Page after all and they risk to leave your website) into a regained one:
 

  • make it super easy for them to reach your homepage (they might have landed on your site from another website, for instance); a visible link to your front page can do wonders.

Example of a Cleverly Designed 404 Error Page

  • “tempt” them with links to the content on your site that you're most proud of (they could be links to the most frequented category pages on your site or to your most popular blog posts etc.)
     
  • suggest them a couple of related products (if it's an e-commerce website that you own) or bestsellers in your attempt to determine them to continue to enjoy their shopping spree on your website
     
  • consider including a menu on your 404 error page, one that would include several possible paths they could follow for reaching other parts of your website 
     
  • consider including an “issue reporting form” on this page
     

In other words: there are plenty of quite basic and obvious “remedies” for helping your visitors find their way out of your 404 page, but not out of your website.

Just put a little effort in finding the “rescue” paths that are most suitable for your audience and your site's particularities, too. 
 

3. Throw Them a Life Ring: Add a Search Box To Your 404 Error Page Not Found

And speaking of “life rings” to throw to your users, as you imagine them as being on a stranded island once on your 404 page, adding a search box (or even a sitemap) is such an efficient little “trick”!

Again: don't “punish” them for having had the bad luck to land there! It happens to the very best of us!

If it's your Drupal website's an old one, for instance, chance are that you removed some of its pages of redirected them. So, why not making it super easy for your visitors to just search for the pages they wanted to access in the first place?

Although opinions can vary, we here at OPTASY still prefer this solution to that of automatically redirecting your user on a different page. Let him/her be the one to decide where to go next!

Example of a Cleverly Designed 404 Error Page


4. Make It Context-Sensitive 

And since we've used the “stranded island” expression twice already, the following “tip” for cleverly crafting your 404 error page is: don't make it look like a “stranded island”!

That's right! Aim for consistency and make sure that this particular page, too, sticks to your website's overall design guidelines! Keep the same colors, fonts and style, making it look like a component of your website and not like “the black sheep” of your site.

And, speaking of making your 404 error page not found “context-sensitive”, you should consider adapting its content the given context, too.

For instance, let's say you have a visitor landing on this 404 page from one of the category pages on your Drupal website, while trying to access a particular category page that no longer exists. In this case you could consider placing a (or several) link to another one of your popular category pages.

Adjusting your 404 error page to your site's particularities in terms of design and branding and to your users' search experience (what page your user was searching for, what page did he/she visited last before landing on your error page etc.) is crucial if you want to keep your visitors on your website!
 

5. Use Humor Cautiously: It Can Get Annoying and Outshine Functionality

We do know that throwing in a bit of humor and adding some proofs of creativity is a huge trend in 404 error page design these days. Yet we advise you to handle humor with great caution!

Especially when it risks to affect your page's overall functionality!

First of all that no user will find it funny to have his/her time wasted as he/she has to wander on an error page. 

Secondly, turning their frustration/confusion into a joke will only amplify it!

And here's a more than suggestive example of a highly “risky” usage of humor on a 404 error page:

Example of Badly Used Humor on a 404 Error Page

In other words: think twice next time you decide to just throw in a video starring a cute pet or to just put a “funny” drawing on your 404 error page with no explanation of why your visitor has landed there and where he/she can go next.

Instead of aiming to make them smile, you'd better adopt a more practical approach: help them leave your error page while still continuing their journey on your website!

And these are our suggestions for you on how to cleverly design a 404 error page that should keep your users on your website. How does the “anatomy” of an effectively design error page look in your opinion?                   

May 16 2017
May 16

Of course that we all know “the middle way” is the safest path to follow and yet... it's not that easy to find it or to stick to it, right? How do you know how many choices to tempt your website users with? How can you tell when content becomes “too much content” or when the delivered information is discouragingly scarce? Striking a balance, when it comes to information density is, undoubtedly, the work of a “chemist”: pouring precisely the ideal dose so that the final “potion” is, indeed, useful to your users!

There's no such thing as one-size-fits all principles to follow here. Yet, there still are some more-then-useful guidelines to consider when it comes to achieving the proper dosage of content to greet your visitors with on your Drupal site.

Ready? Here they are:
 

1. Information Density DOES Have a Huge Impact on the Overall UX

So, before we go any deeper into the whys and hows of keeping information density under control on your Drupal site, you should first acknowledge its high influence on:

  • usability
  • navigability
  • user experience 


How come? Well, it's pretty obvious: the amount of content that you deliver via your website, to your users (taking the form of written content, images, color, controls, textures) will determine whether he/she will keep navigating or leave your site in frustration.

Moderation is key, lest you want your heavy load of information to bog him/her down or the lack of information to drive him off your site!

Always have the USER in mind wen you create your wireframes! Web design trends and movements should come second.
 

2. Information Clutter and the Paradox of Choice

A whole collection of visually-striking images... attention-grabbing videos... multiple calls to action... testimonials... rates... recommended products... super long copy... and, in this overcrowded web page (for yes, this content, in all its forms, is displayed on a one single web page) “sprinkle” some, let's say, celebrity endorsements, too!

Can you visualize this heavy-content page? Can you easily “digest” all that “virtual” content and effortlessly make your way through it?

So, you get our point: always put yourself into your Drupal site visitors' shoes and always anticipate whether you risk to deliver excessive information, to offer them way too many choices. Which will automatically “paralyze” them, instead of engaging them.

You'll end up confusing them!

“Bombarding” your users with way too many options and too much visually-distracting information for them to “digest” will only result in a bad user experience.

One of the possibly winning formulas:

Headline + An Image + A Description + The Price +A Call to Action + Some Reviews Per Product. 
 

3. Balancing Information Density: Tips and Tricks 

Now, before we go on with our list of tips and tricks, let us share with you a couple of key questions that will indicate you the right path to take for achieving... perfectly balanced information density:

  1. "What Is The Goal I Want to Achieve With this Web Page (Landing Page)?"
     
  2. "What Tasks Should My Drupal Site Visitor Carry Out?"
     
  3. "What Information Does He/She Need in Order to Complete These Tasks?"
     

There! Once you have the answers to these 3 key question, you'll step on the good path to properly adjusting the amount of the information that you'll present on your website.

And now, the promised tips and tricks for pulling off a reasonable information density:

  • attention-grabbing call to action button
  • persuasive, clear and concise call to action text 
  • clean and neat design with a strategic use of white space 
  • fluid, intuitive user flow and path to reaching your web page's goal 
  • visual hierarchy (masterfully use texture, color, white space to direct the user's eye where you want to guide his/her attention to)
     

And since text without exemplifying images is like cake without frosting, take a look at this example of clean design and information structuring leading to zero ambiguity or paradox of choice:

Information Density- example of reasonable information density on a web page

A few elements, that clearly communicate to the user which are the company's available services = good UX!
 

4. When Minimalism in Web Design Becomes a Pitfall

Just because it's “trendy”, it doesn't mean that it's going to serve your site's goals of usability and navigability!

Do keep this in mind when you decide to “declutter” and to overly simplify your Drupal site's design! Less sure is more, no doubt about that! Just make sure you don't turn “less” into “scarcely enough”!

When in doubt, go for a “moderate minimalism” formula:

An eye-catching headline + The value proposition + The description + The tagline + A concise and attention-grabbing call to action!
 

And, as a golden rule: always consider the nature of your Drupal site, its audience and their expectations before you “blindly” adhere to one web design ideology or another.

Needless to add that if it's a magazine's website that you're working on, adding just a few “teasing” lines of text on each page will greatly affect the UX.
 

5. And Yet: High Information Density's Not Always a No-No

Surprised that we're actually suggesting you to go “against the tide”?

In fact, we're just asking you to take some time to consider these possible good aspects of an information-heavy web page:

  1. users don't need to keep scrolling down for reaching the information they're looking for. It's all there, on the very same page!
     
  2. since it's in the users' habit now to almost unconsciously use the “Control+F” combo of keys to find the information they're searching for really fast, you'll be actually streamlining their quick
    on-page searches
     
  3. you'll create the impression of abundance and especially if it's a e-commerce Drupal site that you own/design, greeting your users with an entire collection of striking images, articles and items on promotion will undoubtedly give the impression of abundance (again: always adjust the information density to the very nature of your own site)
     

In conclusion: what you should avoid, at all cost, is not really high information density, but poorly organized, crammed on-page content! "Clutter” will always discourage users.

High information density is necessary for certain websites (news sites, for instance), so you can't afford risking to fall into the “pitfall” of minimalist design. And not delivering the content that your visitors land on your site for in the first place.

Now speaking of efficiently structuring information on a web page, take a look at the example here below: although it's a content-heavy page, you can still fluidly “navigate” trough the displayed content!
 
Information Density- example of good alignment on a web page
 

6. How to Design for High Information Density

Now that we've see that high information density is something you shouldn't avoid at all cost, given the nature of your own Drupal site (if it's precisely information that your users visit it for) and that poor alignment and information “clutter” is what you should stay away from, let's discover together how you can pull if off right by using some web design “tips and tricks”:

  • cluster similar content: this way you'll manage to efficiently structure large amounts of information, “asking” your users to invest a lower amount of effort for reading and assimilating it
     
  • go for a basic, “familiar” layout: when your web pages is “heavy on content”, the last thing you want is to “exploit” your users' attention with an overly complex, innovative layout. Keep it simple and go for a common one instead, one that all users will instantly understand: the standard horizontal area on top standing for the main navigation, a column on the left playing the role of a secondary navigation...
     
  • rely on graphics for breaking up text-packed copy: font variations, pictures, graphic elements strategically “sprinkled” in your text will make it easier for users to “digest” it
     
  • effectively use the white space on the page: and since white space is “gold” on a content-heavy web page, use it wisely for breaking your long passages of text into smaller, “airy” chunks
     
  • use color for enhancing navigability and readability: using the same color for the same type of content will instantly make the entire information load on your web pages look more structured, more organized and... easier to follow. The mental effort that you'll challenge your users to invest will be significantly lower.
     

So we've tackled issues of good alignment, effectively grouping content and all kinds of web design tricks for making a content-packed web page as little mentally exhausting for the user as possible. Now let us continue with a “bad example” for supporting our “pledge” for perfectly structured, organized content. Here it goes:

Information Density- example of unorganized, poorly aligned content on a web page
 

Wrapping Up

  1. Moderate minimalism is the right path to follow!
     
  2. High information density is not always a bad thing, yet crammed, cluttered and poorly organized content is!
     
  3. When the nature of your website requires for a considerably heavy “load” of information to be delivered, rely on web design tips and tricks for breaking your content into smaller chunks and for efficiently organizing it!
     
  4. There are cases when high information density is definitely a no-no:
  • when accessibility is a critical issue to consider
  • when your site addresses a senior audience
  • when your site is marketing/branding-focused and thus aiming to visually delight the users rather than delivering them their daily “dose” of information
May 12 2017
May 12

Speed, high performance still play their leading roles on the “online stage”. And yet, their “dictatorship” wouldn't be possible without other factors, in supporting roles, such as looks/web design. So, taking an informed decision when it comes to “putting a face on” your website, selecting from the overwhelming wide collection of Drupal 8 Bootstrap Themes available out there, is crucial.

And here is where we, the OPTASY team, come in to trim your discouragingly heavy load of Drupal 8 Bootstrap Themes to the “five-star” ones. To those 7 ones that are both on Drupal themers and Drupal 8 website owners' top favourite lists. 

Still, before we go on with our list, let us answer the legitimate question that might be “bugging” you right no: “But why a Bootstrap theme?”

Here is why:         

  • it's THE truly powerful front-end HTML framework for building interactive web pages
  • it aligns with Drupal 8's mobile-first approach
  • it's actively maintained:
  • its popularity is backed-up by numbers: from all the Drupal 7 and Drupal 8 themes installed on March 2017 over 140,000 have been Bootstrap-powered

And now, let's proceed with our list of 7 best Drupal 8 bootstrap themes, ranging from the best rated ones to the best selling ones so far in 2017:
 

1. TICO, Head of the Drupal 8 Bootstrap Themes List

Drupal 8 Bootstrap Themes: TICO
And no wonder why it's head of the list: it has something for everyone:

  • a modern look and feel for the website visitor
  • a fully responsive design
  • a whole set of cool tools for Drupal site administrators to use and streamline their work with a slider, block builder...
  • an easy to use drag and drop site builder for Drupal themers to quickly put together and turn into reality the web designs they have in mind
  • it's powered by some of the latest web technologies (CSS3, Bootstrap 3, HTML5 etc.) for Drupal developers to easily implement all the desired functionalities with
     

2. AKLAS

Drupal 8 Boostrap Themes: AKLAS
This clean and modern template manages to kill two birds with one stone: both those looking to give their company websites' a professional, rather corporate look and those working in a creative industry, looking for a clean and neat design that would best showcase, without outshining, their portfolios. 

Other features you can't ignore:

  • it's 100% responsive
  • it runs on modern technology: SASS (“spoiling” the Drupal web development team behind your website with power and easiness of use) and... the Bootstrap front-end framework (of course!)
     

3. JOURNAL 8 

Drupal 8 Boostrap Themes: JOURNAL 8
This is the only theme from our list which is designed especially for Drupal 8! Not just adapted to, but created for Drupal 8 from the ground up and, this way (as you can just guess) incorporating all of Drupal 8's “goodies”:

  • the in-line WYSIWYG editor
  • Views as part of Drupal's core

So, if you want to power your website with a theme that reflects all the best Drupal 8 practices, Journal 8 is THAT one.
 

4. VANESSA

Drupal 8 Boostrap Themes: VANESSA-
Now, this is a cool “booster” for any start-up company's site, app or other web product!

It's a light landing page theme, mobile-first and with a modern design. The perfect boost you need for propelling your business in the fiercely competitive online world!

And there's more! Since, as a start-up, you shouldn't implicitly settle for basic functionality and rudimentary design. No sir:

  • it's HTML 5 and CSS3-powered
  • it grants you unlimited power of customization: you get to “play with” Drupal 8's custom blocks, such as Taxonomy, Views, Content Types and the rest of “crew” for personalizing your site's look to perfectly fit your company's unique needs
  • it comes “loaded” with a collection of 630 icons for you to scan through and pick from
  • it comes backed up by extensive documentation
  • it grants you Video & Image Backgrounds
     

5. UNIVERSH

Drupal 8 Bootstrap Themes: UNIVERSH
If it's a template that should meet the specific needs (of functionality and design) of an education website, that you're searching for, then Universh is the ONE!

Not only that it's been designed with your education Drupal site's particularities in mind, but also as a whole tool-set of customization options for you to choose from and to mix and match to your liking:

  • a collection of more than 10 one-page layouts to dig through for choosing the most suitable one for your site's homepage
  • a whole “load” of predefined headers, footers and menu styles to scan through and select from
  • 30+ ready-to-use widgets

And to all these customization-oriented tools put at your disposal, add the CSS3, HTML5 and Bootstrap 3.3.5 technologies: the 3 cherries on top!
 

6. PORTO, One of the Best Selling Drupal 8 Bootstrap Themes

Drupal 8 Bootstrap Themes: PORTO
Beauty and convenience that's how this theme could be easily described!

Its increasing popularity's due, to a great extent, to its easiness of use. Practically it empowers you to get your Drupal 8 site up and running in... just a few hours. With powerful functionality and spectacular design already out-of-the-box, your job will resume to taking just a few minor decisions. To simply choosing from all the options put at your disposal.

Some of this theme's tempting features would be:

  • you're free to change your background colour from light to dark or the other way round, by simply adding an HTML class
  • the same surprisingly easy and fast method applies when it's your site's layout that you'd like to change: from wide to boxed or vice versa
  • it's fully responsive 
  • it comes with pre-built view support and template for Drupal Commerce 
  • it's written in a clean code 
  • it's masterfully configured
  • it offers you first-class support  
     

7. RHYTHM

Drupal 8 Bootstrap Themes: RHYTHM
Out-of-the-box commerce theme... built with unlimited extensibility in mind (your site's “bugs-proofed” when you need to add new Drupal 8 modules, new features to it)... it targets both site admins/content editors with its “easy to find and edit” content tools and site builders thanks to its clean code, highly customizable background, content, color schemes and “power” coming right out-of-the-box.

There you have it: a short list of the main reasons why you should consider Rhythm, too, when you're drafting your own list of best Drupal 8 Bootstrap Themes to consider for your own site.

And... cut! This is where we turn off the spotlights that we've put on THE most popular Drupal 8 Bootstrap Themes.

Now don't feel compelled to go for precisely one of these 7 themes The “perfect match” for your own website might not even be listed here. Nevertheless, it cannot be for no reason that particularity these ones have already won the appreciation and the good rates from most of the Drupal site owners and developers, right?

Mar 27 2017
Mar 27


“The details are not details.They make the design.” (Charles Eames)

And we couldn't agree more! Especially in the context of the web today, where users need to sort the often discouraging “offer” of websites competing for their attention.

In a digital landscape where highly influencing trends like “ultra minimalism” and “drastic” simplicity rule, no web designer or website owner, would risk to “overload” their websites with stunning visuals and content. 

So, it's not without surprise that forced to reduce the load of “resources” of eye-catching visuals and engaging copy they have switched their attention to... details! To those little elements apparently insignificant in the context of the “big pictures”, but which have now got the “leading parts”. 

And yet, using the right “dosage” of attention-grabbing visuals that these details could “encapsulate” and of engaging copy (now turned into “microcopy”) is a true art! 

In this respect, let us point out to you a few tips that will help you “master” the art of “joggling with” design details for delighting and for keeping your visitors engaged to your site/app:
 

1. Challenge Them to Interact with Your Site

“Bid” on interaction tools and don't let your website visitors get “lazy” during their visit on your website!

Get creative (here's a website that might inspire you: Bellroy) and choose your tool (not your “toolbox”, for you don't want to turn your website into way too demanding and distracting “amusement park” either), the on that will stir your users' curiosity and urge them to click, to interact in order to actively discover how your product's made or which is the feature that sets it apart and so on.

Challenge your visitors with little “puzzles” they need to “solve” (meaning: “interact with”) for discovering your products'/services' story.

Challenge them to turn from visitors to participants! Create the right context for them to interact with a key element on your website.
 

2. Intrigue and Delight Them with Beautiful Typography

Impressing and keeping your users engaged to your website could also mean switching the spotlight to such an “common” detail as typography. “Common” and  “obvious” and yet, loaded with such power that too many web designers tend to overlook!

But you're not one of those designers or Drupal website owners, right?

In this respect, here are two ways in which you could trigger amazing typography's power on your website:
 

  • you could go for artsy looking, visually-arresting character shapes
     
  • you could play with proportions and surprise your users with some oversized letters
     

Whatever suits you! Or better said: whatever suits your own website's audience! 

Beautiful lettering is probably the best example of an apparently “insignificant” detail that you can “empower” to impress and to engage all by itself!
 

3. Consistency: One of the Key Web Design Details

Keep it consistent! It's a rule that you just can't risk breaking!

Keep your design consistent throughout your website, and here we're referring to: 
 

  • colors that represent your brand's identity and your site's specificity
     
  • the particular use of imagery on your website
     
  • specific typography that you've chosen to go with on your site and that you should stick to on all its pages
     

Familiarity is what your users expect to find on your website, therefore, remaining consistent to your website patterns is a common sense principle you should not undermine! You definitely don't want to make your visitors feel like they're challenged to think about your site's design and you definitely don't want to risk breaking the “familiarity” rule by surprising them with new design elements on each page. 

It's more time-consuming for them and, therefore, way too risky for you! 
 

4. Trigger Users' Reaction Using Microinteractions

Or, better put “microinteractions serving specific purposes”!

It's you who'll decide what roles they should play on your website, how precisely they should enhance your visitors' journey (just think of Facebook's globally popular “like” button):
 

  • to give feedback once your users have completed certain actions on your site
     
  • to change a setting 
     
  • to signal them when they're not handling a task correctly
     
  • to enable them to tap on/off an alarm 
     

These one-touch bits of interaction make another great example of web design details which can get invested with key functions adding value to users' overall experience on your website!
 

5. Surprise Them With a Tiny, Yet Sufficiently Intriguing Animation

Surprise them: make your animation so tiny and almost perfectly blending into the rest of the design! Another one of those web design details that you could turn into a "superpower".

This way, the little “unexpected discovery” that your users will make will not just delight them, but keep them engaged with your website, as well!

Keep it simple (no need to create something too time-consuming and pointlessly complex) and strive to turn it into a perfect “surprise factor”!
 

6. Add Cues and Transitions To Discreetly Guide Them Through 

Don't get greedy when it comes to your website's visitors own time! To the time they're  willing to invest in exploring your site.

Instead, insert highly intuitive transitions on your website that will help them efficiently invest their time in exploring it! Instead of wandering about and trying to figure out by themselves how to get from point A to point B, why not insert these directional clues for them?

Your website's navigation shouldn't be a puzzle to solve! Therefore, cues make one of those web design details that you can't afford underestimating!
 

7. Add Purposeful Microcopy

What do you do when you're constrained to both visually impress and to engage users using just the limited resources offered by a minimal web design? Well, you get creative and you efficiently “exploit” those resources.

Such as the tiny text inside buttons, in the footer or in your fill in forms.You go ahead and get those bits of copy written, edited and reedited till they “encapsulate” precisely the call to action messages “capable” to impact your users.

You'll have just a few characters at your disposal: use them efficiently!
    

8. Intrigue Them and Trigger Interaction with Cinemagraphs

These intriguing “living images” make a great tool for surprising your visitors and for making them engage with the content on your website. Movement will always catch the eye!

And you don't even need to go for something too visually absorbing:
 

  • an unexpected touch of color on an otherwise black-and-white image
     
  • a little “collage” of photography and illustration elements
     
  • a tiny element the visitors wouldn't expect to see given the web design context of a specific page etc.
     

The list of effective, not to be underestimated web design details could go on, but it looks like our today's post is getting a bit too lengthy: we'll try grouping the rest in one of our next posts. 

How about your own list? What other seemingly insignificant, in fact highly powerful little details (“powerful” in the hands of skillful web designers) does it include?

Mar 22 2017
Mar 22

It's no doubt that these web design myths “controlling”, just like some “tyrants” the online world, have initially emerged as web design innovative notions, turned into widely used techniques and, finally, into highly influencing web design trends. 

It's also true that since their “adopters” have started to take them way too literally or to refuse to adapt them to the ever-evolving digital landscape, to the ever-changing users' digital behaviors, these web design practices have gradually turned into... myths. Into rigid, “dusty” web design mindsets risking to affect both the design's quality itself and the website visitors' experiences.

Be better than that! Be smarter than that! Take smarter design decisions than those still “stuck” with these preconceived assumptions which are no longer relevant in 2017's web design context. 

And here are the 10 web design myths “exposed”:


1. "The 3 Second Rule"

This is probably the best exemplification of a notion turned into a rigid “rule”. Of a concept taken ridiculously literally!

No need to develop a paranoia imagining your generic website visitor holding a timer in one hand and his mouse (if we're talking about a desktop user) in the other and counting precisely those 3 seconds! It's absurd!

The 3 second rule is just a figure of speech (it could easily be a 2 second a 4 or 5 second rule) “invented” only to stress the importance of an optimized page loading time. To “warn” you that you should constantly strive to boost your website's performance. 

If your web pages load in, let's say, 4 seconds, it's really not the end of the world!

Instead, if they load in 3 seconds just to show a bad design and low quality content... then you might be, indeed, facing a major traffic problem!


2. "White Space Is a Wasted Chance of Capitalizing Space on My Site"

This is already a “prehistoric” type of web design preconception!

And we couldn't give you better examples than Google's front page and Apple's clean and airy design where big chunks of white space act as spotlights directing our eyes towards their “star” products!

“Clutter” is your biggest enemy when it comes to web design! While white space and moreover, strategically using it for guiding your users' attention towards key points on your website, well, this is almost an “art”!

Less sure is more, in this case! White space acts as a spotlight focused on the key content(s) on your web pages, but only if you just know just how to focus it!


3. "Mobile Device Users Are Always On the Fly and Easily Distracted" 

It's a false assumption now “cemented” in the collective thinking: mobile device users are always on the go, always in a rush and easily distracted!

It's noting but an exaggerated generalization!

In fact, studies (Google's studies, the one that we're referring to here taken in 2012) have shown that:
 

  1. 68% of mobile device users are, in fact, accessing websites from their smartphones in the comfort of their homes (surprise, surprise!)
     
  2. 67% of desktop users are simultaneously using another device, as well, as compared to 57% of mobile device users. 
     

We're all living in the age of distractions. We get constantly distracted whether we're just watching TV, doing online shopping on our smartphones or reading articles on our PCs! 

You should still design for highly mobile users, but being fully aware that “on the run”, “striving to resist various distractions”, is not the main context that your mobile device users will be visiting your website in!


4. "Good Usability's a Must, While Good Aesthetics an Option"

This thinking's maybe one of the riskiest user experience pitfalls!

With all the web designers and web owners out there playing all their cards on good usability, they tend to undermine good aesthetics' key role or (even worse) to ignore it completely.

You can't effectively reach out to your users and turn them into customers, if you don't emotionally connect with them, first. If you don't strive to make the very best impression (and since we're all highly visual creatures, a “good first impression” is nothing but another word for “great looks”).

Usability's a very technical concept, made of certain (equally) technical, precise tactics to implement for achieving good usability on your website. While aesthetics is far more “human” and it's to humans that you need to reach out to first and only then to... “prospects”. Do keep that in mind!

When combined, these two “powers”, good usability and good aesthetics, or, better said, good usability and credibility (that good aesthetics invests your Drupal website with) you can't get but a superpower to turbocharge your website with!


5. "User Feedback Is Not to Be Questioned or Debated"

Of course that you should constantly ask for your users' feedback, it's vital for every business, be it online or not!

What you should avoid doing is: taking that feedback, all the comments that your visitors will leave on your site, too literally!

People don't always know what they want and they're quite bad at explaining their preferences, why is it that they like/dislike certain features on your website or anticipating their future choices/behaviors.

A “healthy” way of doing web design is to dig in, starting from your users' comments, to the core problems! Base your design decisions on those core problems to be solved, first and foremost! Complying with your users' suggestions/complains, should come second on your list of “motivations”.
 

6. "Simplicity Can Only Mean Minimalism"- One of the Popular Web Design Myths

And this web design myth is still influencing, to a great extent, web designers' work and website owners' design decision-making!

There's this popular belief turned into a whole trend, that you can't possibly achieve a simple design than by cutting out UI elements, by drastically reducing steps and user interactions on your website.

False! Even a complex web design can be made simple if you're a gifted web designer!

Focusing on simplifying users' experiences and reducing the visual surface (minimalism) is not the same thing as reducing all the “friction” that a way to laborious, overly demanding design would imply from the user's point of view (simplicity).

Its not the same thing as striving to reduce some of the energy that he/she would invest in visually “digesting” the content on your website.

Notice the difference?


7. "Good Design is Self-Sufficient"

“Design in the absence of content is not design, it’s decoration.” 

Therefore, looks aren't everything and good design isn't self-sufficient! Visually-arresting graphics, cool fonts and visually-appealing colors won't compensate for the absence of high quality content.

In other words: if there's no happy “marriage” between web designers and content marketers, you'll be left with a great looking website that only you and your team will get to admire. For no user will ever find it!

If you don't enhance your great looking design with meaningful, engaging content that not only that completes it, but adds extra value to it, with content that addresses your visitors' needs, then your design won't go beyond its decorative function.


8. "The Homepage Is The Most Important Page on My Site"

Homepage's “supremacy” has started to fade away! If it used to be the page that users always landed on first, since it served as the main directory and, therefore, since there was no other way for accessing a website, today this is no longer the case.

And it's time that you, too, started to see the homepage's supremacy as a web design myth!

Now users can land directly on a product page, coming from certain links posted on social media or on other sites. Your website's visitors might not even get to visit the front page at all.

Moreover, and this is especially the case with websites selling products or services, you should accept the fact that your users aren't there for delighting themselves with the “wow” content on your homepage! For them your front page is nothing but a “gateway” to the product pages that they're really interested in. Or, depending on the site's specificity, to the information they can find on other pages of your Drupal site..

Think of Facebook! How often do you visit its homepage as a logged in user?

Put together, all the web pages on your site are much more frequented than your homepage. Just think about that!


9. "The Three Click/Two Tap Rule"


This is another baseless assumption! That all the elements on your website should be at a three-click's distance or a a two-tap's distance (on mobile devices).

Irrelevant! Whether your users decide to prolong their visits on your site or to leave it  after just a few seconds, has nothing to do with this rule. User's main interest is to carry out his task (purchasing something, getting a key info etc.)

You could abide by the three click rule and still witness visitors leaving your website in a rush if the content that they'll you'll deliver them, after precisely these three clicks/two taps, doesn't engage them or meet their needs.

As a general rule: it's precisely when web design rules are taken too literally that they risk to turn into web design myths!


10. "Cutting Out The Navigational Choices"- One of the Influential Web Design Myths

Somehow this theory initially related strictly to short term memory and to multiple product choices, has started to impact web design, particularly navigation, as well!

It's one thing to cut out items from an excessive product/services collection (leading to the paradox of choice) and a completely different thing to start removing pages from your navigational bar/menus. 

It's those pages that grant your user easy access to the content on your site that he's interested in. It's them that will enhance his/her exploration of your website!

So, instead of blocking his/her access to different web pages on your Drupal site and of negatively impacting his overall experience with your website, you'd better figure out how to efficiently group these pages.
 

And it seems that we've reached the end of our list of 10 web design myths you should be aware of and... stay away from! Have you “busted” others, as well?

Mar 10 2017
Mar 10

Choosing a company that provides web development services is not as simple as shopping for other services. If it’s your business you’re getting the website for, its success and reputation inevitably hinge on how good the website looks and functions.

Professional web development services are too often offered by people who are not necessarily a good choice to work with. It is, therefore, a critical hire. Here are a few things to keep in mind in order to make sure you make the right decision.

  1. Take time to notice personal qualities. Professional competence is important, but if the person is reliable, they will be truthful about their abilities as well. They will also stick to your spec, and deliver quality results on time. Look for drive, determination, and passion in the people you’re hiring. If all those qualities are there, you are on the right track.
     
  2. Try them out on a mini project. Before you up and spend your entire web development budget on what may turn out to be a bad choice, try them out. Website designers for small business are usually understanding and will take on a smaller job first. This will allow you to gauge the quality of their work and general performance before making a big commitment.
     
  3. Focus on the essentials. Experience and knowledge are not the same thing. Whether the Canadian web design company you’re interviewing can answer particular questions about JavaScript’s history or when PHP was created. What is important are things like:
    • How many developers do you have working on each project? How do they communicate, especially when editing the same website?
    • Do you have a designated web designer or is the development team responsible for web design as well?
    • What are the current design trends for businesses in our industry?
    • What are the steps you would suggest to take in our particular situation?
       
  4. Take the time in hiring, but once you did, keep an eye out on things. Even when you’re sure you made the correct choice, don’t be in a hurry to leave it all to the company. Web development services demand constant communication. Stay on top of things, make sure you get frequent updates and be ready to make a hard choice if things go off the rocker.

Keep those 4 things in mind when hiring a company for web development services, and you should be perfectly fine. Good luck!

Feb 02 2017
Feb 02

Do you master the art of building anticipation? 

Or maybe you still overlook its “power” and you usually go straight to launching your website, confident enough that it will “blow their minds”. That all that “fuss” about generating buzz and enticing potential customers, while your site is still under construction, is nothing but a waste of resources.

Or maybe you're one of those website owners or developers in Toronto who sees it as a “step” to be checked off a list: you simply stick to the “standard procedure”. You go for the conventional textline (“Coming Soon” or “Under Construction”), followed by “...” , opting for the “same old same old” font, same background color as the one appearing on thousands of other websites?

Instead, if you're one of those “detail-oriented” developers/business owners who'd love to learn to “master” the art of anticipation, you're on the right blog!

If you'd like to find out how you could build your loyal audience, one that would be “present” at the “big launch” event before you've added the very last touches to your product/services, if you'd like to build that aura of “high expectations” around your website before it's even ready to be launched, this is the right “tips and tricks” blog post for you. Keep reading:
 

1. Keep Them “In the Loop” With a Countdown Timer 

It might look like such a “worn-out” tactic to you.

And yet: mind you don't underestimate the power of a countdown timer! It's a more- than-useful tool for building anticipation: let them know, don't keep them in the dark, how much days there are left till “the big moment”. 

From a user experience perspective it's definitely a “go for” strategy to subtly “guide” your visitors. To gradually deliver them “clues” they need for reaching their journey's destination: in this case, when's the launch date and how much days they still have to count till they “get there”.
 

2. Go For an Email Sign-Up Form 

Now don't think that people will keep counting days till launch time and that precisely on that day they'll rush in to visit your website!

Instead of “slacking off” and to genuinely expect users to “flood onto” your site the day you'll release it “into the wild”, send them remainder emails!
 

For this, you'll need their email addresses and what more convenient way of collecting them than by placing an email sign-up form on your “under construction” website page?

Your “crop” of contact email addresses will turn out to be a “gold mine” at your disposal, one that will jump start the whole success of your website/business. 

A simple, email-reminder, before launch day, will set the difference between a “newly” resealed website, with barely any visitors, and one witnessing a significant wave of traffic, from the very first day.
 

3. Consider a “Limited Pre-Sell” Tactic

This strategy works best once you've set up a particular context beforehand:
 

  1. first of all, it works best if you're actually selling something on your website (online courses, various products)
  1. secondly, you should build an “community” loyal to your brand during the “launch tease” period and to convey trust.

In order to strengthen this particular audience's trust in your product, preselling your it (or offering early adoption discounts, especially if we're talking about online courses), even if you haven't yet finished it, it's an effective two-purpose strategy:
 

  • you increase anticipation for your product's final version, build trust and entice them to come back to your website, once it's launched
     
  • you get to collect valuable reviews, which could instantly be turned into “last minute warnings” that you should improve certain features of your products/services before launch day

Not to mention that you could use the gains resulting from pre-sell for actually investing them in the “last touches” that you'll apply to your products! 
 

4. Generate Buzz on Social Media, Too!

Your company's social media accounts make the perfect “environment” for generating buzz on and for spreading it to lots of potential website visitors/customers.

Therefore, don't rely strictly on that “database of priceless email addresses” that you'll collect, but on all the followers that you'll manage to attract on your social media acounts, as well. 

This way, you'll have visitors “flooding onto” your website, on launch day, coming from two sources instead of just one.

“How do I increase social engagement on my social media accounts”, you say? By getting creative!

Gather your team of Toronto developers and come up with a “hard to resist to” giveaway/major discounts scenario. Make your incentive truly effective! 

Next, come up with a condition: use social promotion as a means for them to gain access to the items that you'll giving away or selling at an incredibly low price! Make them Like your page, to post something related to your website's upcoming launch, on their accounts and link to your company's social media page, you name it.

“Give before you ask!” Remember?
 

5. Keep Your Text Effectively Concise

You want to give away “clues” about your products/services, you want to “seduce” potential customers with words, to reveal to them why they should sign up for the email remainder, but you definitely don't want to give away too much through a too long, “hard to digest” block of text!
 

It's a “launch tease”, you know! So, you should give away enough information for them to get a short insight, not to “reveal” everything and “bore” them with an entire “history” of your product! Keep it conveniently short, keep them “in suspense”!

6. Engage Them With a Video 

 Is there any need to stress the “power” of video content once more? It's the type of     content that captivates instead of merely “deliver infos” about a soon to be launched product/service/course.

Therefore, consider “turbocharging” your coming soon page with “the power” of video! 

It's up to you how you decide to showcase your products in this video. A possible option is that of a “collage” of short interviews with members of your team. It will build trust and it will help your visitors to “put a face” on your brand even before your company website “steps into the spotlight”! It will “humanize” it and it will ease interaction!
 

7. Come Up With an Irresistible Incentive for Launch Day

The “Give before you ask” tactic shouldn't be limited to “presells”. 

Exploit this strategy till the very end: which, for a coming soon page is the website's launch itself. Give away something on launch day, too!

A possible scenario would be this one: you already have a “collection” of emails coming from your sign-up form, so you use them to send out an alluringly designed email letting your potential customers know what they'll get if the revisit your recently launched site.

Not only that you'll let them know that “the waiting is over”, but you'll also give them a reason why they should visit it precisely on launch day: since your giveaway is limited to launch day!

This is, in our opinion, the “anatomy” of an effective coming soon page. What other elements do you think it should include? Feel free to share if you have any other suggestions or to disagree with our suggestions, in the comments below!

Jan 30 2017
Jan 30

It's a trap: don't fall for it! Don't trade website usability for innovative UI design! Don't strive to impress and thus undermine your site's main goal: making it super easy for your visitors to navigate through!

Instead of dazzling them away you might just... drive them away! Instead of impressing your visitors with your Drupal site's stunning design and beautiful graphics you'll be getting too demanding.

You'll demand too much effort and time, since users will need to invest way too many resources for “untangling” your innovative and therefore unfamiliar interface, instead of focusing on its high quality content.

So, what should it be? Do you want a “avant-garde”, visually-spectacular website that only you and your team would “feast” your eyes on whenever you want, for boosting your self-confidences?

Or rather an inviting website that welcomes in lots of users, making them come back for more?

If you've chosen the second answer, then here are some pieces of advice, “collected” from our team of web developers in Toronto, on how you can boost your website's usability! They're just common sense tactics that everyone knows but many ignore, you know:
 

1. "Bid on" Standard, Familiar Navigation 

Remember: you're reaching out to users with an attention span shorter than that of a goldfish, according to the latest studies.

Therefore, you'd better use those 5 (or less) seconds wisely! 

An optimized navigation menu, in terms of usability, should be:

  • familiar: do not let yourself seduced by the urge to “reinvent the wheel”. Your users are already used to find the main navigation menu on top of the page, displaying links to key pages on your website, featuring concise titles. “Familiar” means “less time invested in recovering from the “surprise” of a new type of layout and less effort (leading to frustration and confusion) for figuring out how the new layout works. So, less time and effort from your users and more pleased users for you: it's a win-win situation after all!
  • effective: don't fall for the trap of pulling off a multi-level navigation bar and a side bar “combo”! You risk to tire your visitor! Our advice to you is to trimline your navigation bar (stick to maximum 7 fields) instead of turning its layout into a true “maze” for your users to solve. 
  • accessible: making your menu quick to find you'll be enhancing accessibility throughout your entire website. Your visitors will then know where they are and where they can go next. No need to get them “stuck in wondering”: light their path with simple, straightforward navigation!

Tip: a great tool for improving your website's organizational schema is Crazy Egg. It will provide you with a heat map “enlightening” you on what sections on your page users engage with more frequently. Empowered with such a map, you'll get to effectively display and organize elements on each one of your site's pages!
 

2. Lead Them Through With Visual Hierarchy

Pulling off a truly effective informational hierarchy is an “art”, but one that you can master following these key principles:

  • wisely “exploit” that section on your homepage that users' eyes fall on first once they land on it (the center of the page, underneath your navigation menu, or the top left corner): place your most important piece of content there, one that should provide a lower level of detail! 
     
  • use larger font size for drawing attention to high priority pieces of content
     
  • go for visually-arresting images for signaling a higher level of importance given to a particular piece of content
     

It's no rocket science, it's just helping your users to easily digest your content. By pointing out to them what content is more important and which blocks of content fall on a lower level of the visual hierarchy, you'll be subtly guiding them along your homepage's content.

You'll be taking them on an enjoyable tour instead of confusing them and “bombarding” them with equally “flashy”, equally important information that they can't possibly “digest” all at once. 

Tip: strive to keep each content section concise and you'll be “encouraging” your visitors to keep navigating, in a quest for some more “small dosages” of details.
 

3. Make Your Call to Action Stand Out

We couldn't be talking about a “usable” website lacking a straightforward “call to action”, right? It's what makes your site “usable”.

Therefore, make sure your call/s to action is well visible on your front page and on every other page: “Buy Now”, “Start Your Free Trial”, “Learn More” etc.

They will turn users' visit from just an “aimless wander about” into a journey with a clear destination!
 

4. Loading Time: Optimize, Optimize, then Optimize Some More

No “frustratingly” slow loading website could pass the 5 second test, right? It will just put users' patience to a test!

So, what can you do for improving your web pages' load time? Here are some optimization tips for you:
 

  • optimize your CSS files 
     
  • optimize your images and scale down their sizes
     
  • remove duplicate scripts
     
  • optimize browser catching

Tip: heavy scripts, such as JavaScript, are one of the main “culprits” for slow loading pages. Instead, consider opting for minimal scrips if you want to deliver your users a far more agreeable, faster experience on your website! No need to take our advice, take Google's instead: its whole AMP initiative revolves around boosting web pages' load time on smaller screens, too!
 

5. The Power of Imagery: Handle It With Great Care

Stunning images are a great power which, once triggered, can help you get your users “hooked” to your site, to break up huge blocks of content, to enhance readability and even to add an extra layer of meaning to it, too. A text upgraded with images will always have a much more powerful effect on the reader.

Where do you add that beautiful and highly suggestive images will always be far more easily to digest than big chunks of text alone.

Still, make sure you handle this power with care! 

For it you're overcrowding your web pages with outstanding images and even, worse, if you overload it with poorly optimized ones, the result will be: confusing, tiring the user's eye and making him lose his patience, too!

In a nutshell: use imagery to impress, capture attention and “tell a visual story”, but mind you don't overdo it! 
 

6. When in Doubt: Use White Space

It will always “come to your website's rescue”, keeping it from looking discouragingly crowded. Any web designer in Toronto “worth his salt” would confirm you this!

Use white space for keeping your content airy and easy to navigate through and to be digested.

It's pretty much like you'd be inviting your visitors in a light and airy living room instead of a dark, boxes-stuffed basement.

Don't underestimate the impact of white space on your website's usability!
 

7. Break It Up With Headings and Subheadings

Instead of “serving” users “hard to digest”, big chunks of text, how about breaking it up with headings and subheadings?

Now only that it will increase readability tremendously, making your written content easier to scan, but it will also boost your SEO: H1 still remains a major ranking factor! 

In order words: use heading and subheadings for improving user experience and you'll implicitly improve your “relationship” with the search engines, as well!
 

8. “Consistency Is Key” Is More Than Just Another Motto

Consistency goes hand in hand with “familiarity”!

Keeping the same layout, same fonts and color on every page, will reassure your visitors that they're “on the right path, that they haven't deviated from it.

Keep a consistent theme throughout your website and you'll make your website easy to use: just think about it, now only that you'll instill a sense of familiarity, but you'll be saving your users' time and effort otherwise “wasted” for “deciphering” the new theme, for understanding the new layout's organizational schema etc.

Now to boil down usability to the essentials, we've seen that it relies on 5 main principles:
 

  • Consistency
     
  • Simplicity
     
  • Familiarity
     
  • Relevancy
     
  • Accessibility of a site 

How about your Drupal website? Would it pass the 5 second test? What other usability-enhancing tactics have you used so far? What's your opinion: what role does usability play in the “making of a website?” 

Jan 26 2017
Jan 26

Your company's story already has loads of potential to captivate and keep your users engaged: it's unique, it's your brand's identity. There aren't two of a kind!

Now that we've got this straight, let us pop up THE question: how are you going to benefit from your story's uniqueness for drawing people in? How are you going to tell it so that you captivate them first, build trust around your brand secondly and then: boost your conversion rates, too?

How about using your About Us page to “tell this unique story of yours”, to tell it your own way and not in a stiff, impersonal manner that would only make it blend with the masses?

How about breaking the mold and turning this section on your Drupal website into a “storyteller” instead of a “boring” facts and stats-showcasing “board”?

How do you tell your story on your About page in a way that engages, builds trust and sparks emotions (not to mention “leads”)? 

Here's how:
 

1. Tell Them Your Story 

Remember that we've already talked, in one of our older posts, about the importance of incorporating your brand's story into your website's design?

Well, you should stick to this good  practice if you truly want to be part of the exception, to make your site “stand out from the masses of websites”.

Therefore, engage in brand storytelling on your About page and make your readers... engage with your brand. It's they very first step that our web design team in Toronto takes when starting to create About pages: listening to our clients' stories!

What makes your brand different? Which was the “vision” you had when you “drafted” the first prototypes of your products/services? How did you imagine they would impact people's lives, make a difference and “change the world”?

Maybe you have a funny story about the “birth” of your company instead, or a daring projection of its future “mission” in the real/digital world. Tell it to them!

Run an analysis of your brand's identity, track that “something” that easily sets it apart from the crowd, then go ahead and “exploit” it: put together both descriptive and emotive copy, along with visually-absorbing graphics and “tell” them your story instead of just “delivering” it to them. 

A good story will instantly “inject” meaning into your products/services, it will put them in a context and where do you add that good stories are “sticky”, too: they go viral!
 

2. Humanize Your Brand

It's human beings that you're reaching out to! Not “bots”, not just generic “users”, not just a faceless “audience”.

So, a little empathy, from the human beings in your company to the human beings “paying you a visit” on your website, will just come to strengthen your communication.

In other words: put a human face on your brand, showcase its personality on your About page. 

Tip: how about adding some smiling faces there? Natural, genuine smiles (not the corporate-like, “fake” ones), are “scientifically proven” to help people connect and to boost conversions.

Step out from the mass of “stiff” jargon-using companies! It will just make your brand speak “the monotonous robots' language” to your users!

Instead, tell them about your brand, tell them your story with simple words, using short sentences infused with your brand's authentic voice. Whether this means adding the fun factor here and there, some “punchy sentences” or even “on the spot” made up words (easy to “decipher”).

Go for “friendly and empathetic” language and stay away from “rigid” and patronizing language.
 

3. Trigger The Power of Video Content

… and you'll keep your visitors “hooked” to your About page way longer!

Not to mention that you'll portrait your brand as an innovative one, ahead of the curve, interested in delivering interactive, engaging user experiences. 

So, why shouldn't you “unleash” the power of video on this special section on your Drupal website? Tell your story in a video! 

Or, even better: put together the power of video with the power of audio and trigger the “force” of multimedia on your About Page! It will be a multi-leveled experience for your website's visitors. Your story's certain to remain carved in their minds for a longer period of time than conventional “harder to digest” chunks of text!
 

4. Make It Visually Attractive

No matter how extraordinary your brand's story might be, it will impress and fascinate no one if you present it like a list of paragraphs conventionally entitled: Our Team, Or Mission, Our Values, Our Achievements etc.

Your story needs to stand out, visually, on your About page, if you really want to draw visitors in, if you expect it to captivate them and to make it “stick” to their memory!

Your visitors are “highly visual human beings”, so, once you've accepted this, see how you can adapt your whole content strategy around this principle!

No matter what web design team in Toronto you might collaborate with, suggest them to focus on your About page's visual attractiveness (a page which is way too often overlooked)!

Challenge your creativity, get bold, have fun and come up with a clean and fun design, create graphics to liven up your text and to infuse it with visual personality! Think of all the means of making your Abut page look “visually atypical”!

Once you've caught their eye, you'll instantly increase your chance to “lure them in” and to get them into the right mood for “listening” to your story!
 

5. Use Testimonials as Trust Builders

Your About page is all about building trust, about creating that aura of “authenticity” and “trustworthiness” around your brand. Not just about luring users in and “wowing” them with your unique story.

Trust leads to better conversion!

So, could you think of more efficient trust signals than testimonials? No matter how well you tell your story, visitors will always trust other humans rather than “the voice of your brand”, no matter how authentic and friendly it might sound to them.

Therefore, display testimonials on your About page! Those certifying your products/services could be either regular people or authorities in your niche!

Consider letting others tell your company's story! They'll always be far more convincing than you!

Tip: consider, also, associating your testimonials with “real faces”! Add the pictures of these “witnesses” willing to tell “chapters” of your story! Your testimonials will instantly look far more authentic: visitors will then be able to put a face on each one of the names testifying for your brand!
 

6. Rely on Words Alone To Make Your Story “Sticky”

You don't even need to ruin your budget for crafting an outstanding About page that draws visitors in and engages. 

You could rely on copy alone, for instance! But on creative copy that's compelling, has humor in it and it's “injected” with personality (not corporate-talk).

It takes practice and it takes writing skills for turning your copy into an efficient “one man show” on your About page. For making it it rival other About pages featuring parallax scrolling, visually-absorbing graphics, video content and other types of “juicy” content. 

But it is “doable”! Give it a try: carefully chose the words that will tell your story and let them cast their spell and compel!
 

7. Seize the Chance to Throw in A Web Form

Your About page is, after all, one of the pages with the highest-traffic on your Drupal website. So, why not taking advantage of such a “massive” audience by putting a lead-capture form into the spotlight?

You're not “just” building trust on your About Us Page, you're actually trying to build trust for better conversion, right? 

Well, once you've reached your first goal, with the help of your good story told in a highly engaged manner, how about turning it into an opportunity for boosting conversion on your site?

Put a web form for your visitors to complete right  after they've “listened” to you story, when they're still under its “spell”?

The better your story will be and the better you say it, the more contact info and signups will your strategically-placed web form bring you!

Ponder on this “shrewd” strategy for a while!

Your turn now! What other tactics do you use for designing “About Us” pages that stand out? Let's discuss them in the comments section below!

Jan 21 2017
Jan 21

How much time and effort do the web forms on your Drupal site demand from your users?

No matter what your estimations might be: there's always room for optimization, don't you think?

There is an optimal length that you should consider when building your web forms, a certain format that converts better, as well. Any web design and development team will confirm you this.

Moreover, there's a better way of crafting the messages that you deliver to your users and a certain level of anticipation involved, too. Meaning, of course, that you need to be able to predict the common errors that your users will be making during the “ fields filling in process”.

Oh, and you'd better not leave out this key aspect, either: the whole “information typing in” process should run equally fluidly on all devices. No “discrimination” whatsoever!

Put your user first!

On how you can ease your his/her navigation and ask for as little of his time and effort as possible during this part of his journey (on your Drupal site).

Then you'll implicitly be “working your magic” on your conversion rates, as well!

And here is our list of best practices for creating web forms that convert:
 

Let The Data Determine Your Web Form's Structure 

Let's assume that you're optimizing an existing checkout: your analytics is relevant enough for determining your next structure-related moves.

Which are the elements you should prioritize?

Which are the most popular payment options on your site? The answer is in your analytics: do some research and then push forward those key payment methods in your web forms. 

Do you visitors order seasonally or infrequently on your Drupal website? It's all there, in the data! The analytics will let you know whether you should go for a guest checkout or not!

Make a habit of turning analytics into the most valuable resource for optimizing your web forms!
 

Use The “One Question Per Page” Method

OK, not “literally” one question/field for each page, but one “topic” for each page (or at least for each “section”).

For instance, you could have once separate page for shipping options, one for address details, another one for payment details.

This segmentation will streamline the user's navigation (especially on mobile), will ease understanding and improve error recovery, too.

No need to just bundle up all the fields one on top of the other and make your web form look just like a “questions-packed survey”. It will only confuse the user and imagine how discouraging it would look be on a mobile device's screen!

In a nutshell: the multi-page web form design converts better!
 

Focus On The Most Common Situations First

No need to stick in the mud, to complicate your whole web form optimization process from an early stage.

Instead, focus on the common scenarios first:

  • in most cases the user filling in the web form is the same one that the item/s will get delivered to
  • in most cases he/she is using his/her card and, surprise, surprise: same shipping and billing address

Handle the exceptions, the less common scenarios, later!
 

Indicate Progression 

This is a significant UX booster!

An progress indicator will help you discreetly guide your user through the whole process (whether he's singing up or completing a purchase). Our team of Toronto developers couldn't imagine building in a web form lacking this feature anymore!

Here are ways of incorporating progress indicators into your web forms:

  1. you integrate a progress bar, in case of a multi-page web form; it will let users know how many more pages they'll need to fill in (keep in mind to add brief descriptive headings indicating the topic of each page/section)
     
  2. you integrate a scroll-length, in case of a single-page web form 
     

Implement Field Type Indicators

Here's another great way for reducing the time and effort required from your users: suggesting browsers the type of information that the user is required to type in. 

Here's a great example: use field type indicators for “programming” browsers to display a numeric keyboard when the user has to fill in his card numbers.
 

Provide Field Hints To Help Users

Any user will appreciate a little guidance, instead of being left to handle the whole process, to figure out the “less intuitive” steps, all alone.

So, why not streamlining his operations with various hints, such as hints suggesting him the information he needs to type in various fields of your web form?

Your “hints” could be annotations, graphics or text placeholders. 
 

Anticipate Uncommon Scenarios, too

Since not all the “user filling in the web form” scenarios will be common and easily predictable, you should prepare yourself for the unexpected, too!

“Uncommon” cases could be those where your users need to go back in the form and change certain information. 

Monitor your analytics and consider whether you should apply some changes to your web form, yourself, in case certain “uncommon” scenarios turn into “way too frequent scenarios to be ignored”.
 

Implement Auto-Formatting 

At some point, during the web form filling in process, your users might get “unsure” of the correctness of the information the will have typed in. 

So, why not streamlining their whole auto-formatting operation: use dash or space after one set of digits from their the card numbers, so that they can effortlessly correct the wrong ones?

And this is just one example!
 

Check for Errors And Get Them Fixed in Due Time

Keep a close eye on your web form's performance! 

You never know what errors you might track down and, you know what they say: the sooner the better. Get them fixed and then look out for new ones!

Use them as “pretexts” for some more optimization!

What's your own “recipe” for web forms that convert? Are there any other “best practices” that you could add to the list?

Jan 16 2017
Jan 16

It's not a matter of “better or worse”, but one of “appropriate or inappropriate given context”. This is what our experience as Toronto developers has taught us.

And that given context is given by your website's specificity itself! 

So, you should start weighting up the two UI styles, the two ways of displaying content on your website, from this perspective: each one provides the best UX for a particular type of website that you're owing/developing.

It's your Drupal website's particularities that shape your own purposes and your users' main goal, too, once they land on your website, and which determine the best type of web design to use, as well. 

In this respect: what kind of website do you have in mind?

Now, how about pushing these 2 “leading actors” into the spotlight?

How about shading some light on each one's advantages and limitations and pointing out the best contexts when they can help you provide the best UX to your visitors?
 

What's a List (or Grid) Design?

A more or less basic definition of a list would go something like this: a list is a page featuring several entries or candidate items meant to match the user's search criteria.

Lists are ideal for newspaper websites!

They ease users' “job” of quickly scanning over the headlines in order to gain an overview of the latest news before they decide which article's worthy for being further explored.

Till they decide which is the piece of news worthy, interesting enough for them to “click on for more information”, they need to quickly “overfly” all the headlines. 

And a list design, being more compact, is by far the best means for organizing content, for steamlining this scanning process after all.

Did anyone said that: facilitation is a synonym for “better user experience”?
 

What's a Card in Web Design?

An “entry point”, a “container of related information” or a “brief summary of information”. These are but three possible vague definitions of a card in web design.

Now, let's detail a bit, shall we?

Imagine a card as some sort of an “informational teaser”: it's a container that gives users just an entry point to some more detailed information.

“More detailed information” that the user can access, for further exploration, once they've clicked the card-shaped entry point.

It's no news for anyone that Pinterest's been THE card-based UI's trend setter.

Its popularity, among users, convinced Google, Jelly, Tinder, Weotta, and other giant “players” on the online arena to adopt this UI design.

Although a product of flat design, a card is rather a Flat Design 2.0, since it features light 3D effects (such as drop shadow) pointing out to users that they should click for “unlocking” the rest of the information prepared for them.

What else could we briefly (for now) say about cards?

They work best on archive pages, where you, as a web developer in Toronto/Drupal website owner want to just “tease” your users with brief summaries of the additional content available for them for further exploration.
 

When Should You Go For a Card-Based UI?

1. For Grouping Various Types of Content

If lists make the best choice when it comes to organizing and displaying similar content, cards, on the other hand, work wonders for helping users easily navigate through several types of content.

Just rely on borders for marking the differences among various elements on your website, among the various pieces of content. Thus, you'll provide a visual boundary for your users to rely on for easily navigating through your “puzzle” made of several distinct items.

2. For Enhancing Information Browsing

Think of Pinterest (again)!

You don't visit Pinterest to search for a particular piece of information. 

Instead, you have a content category in mind and some spare time to invest in exploring whatever collections of stunning images you'll might get surprised with.

So, basically you go on Pinterest for scanning through pins, through all those stunning images. 

And there you have it!

You've just named precisely the type of user goal that the card-based web design best responds to: “scrolling through”/”scanning through”/”browsing through” or however you wish to call it.

It's not for searching for specific information that you should use this type of UI, but for encouraging and enhancing the act of browsing through a whole collection of bits of information. 

You impose your users no content hierarchy whatsoever (like you do when using a list-style design).

Instead, you grab their attention with visually-arresting images encapsulated in those cards and, moreover, you layer bits of information on their surfaces, making teasing textline + eye-catching images work together hand-in-hand.

And since it's browsing that you're encouraging and not the act of quickly accessing a particular type of information, the card-based UI turns all the “scanning through” into a delightful, effortless and fun scroll down card-shaped results. 

Whenever your users spot something that surprised/intrigued/stirred their curiosity, they get to click the specific card(s) and indulge in further exploring the additional content. 

And there you have it: instant gratification!
 

When Should You Go For a List-Style Design?

1. For Ensuring Quick Access To The Needed Information

As already mentioned: the list-style web design is perfect for newspaper and newspaper-like websites. 

How come? 

Just think about it: on this type of site users usually land for eye scanning the given content and for quickly spotting precisely the information/article that they're interested in.

It's not for passing time browsing through a visually-appealing collection of card-based results that they'll access your website.

No sir! In fact they'd hate spending too much of their priceless time looking at amazing pictures, for they're on the look for specific information and they want to gain access to it as quickly and as effortlessly as possible.

So, quickly scanning through a vertical list (far more easily to eye scan than a dashboard of cards featuring no helpful hierarchy) increases their chances to find what they're looking for quick and easy, with no unnecessary distractions whatsoever. 
 

2. For Smaller Screens 

It's obvious why lists make a better choice for smaller screens than cards: they take up less space on the screen.

Therefore, users aren't constrained to keep scrolling down, when using their mobile devices, if they want to access more content and they're not forced to rely on their short-memory either. 

And this can only lead to better UX!

It's no rocket science why: list-style design enables you to display more choices, in short rows down the length of your web page.

Thus, you take out the (otherwise imminent) possibility of the discouraging “never-ending” scrolling of the equation!
 

In Conclusion

Cards are informational “teasers” linked to the content to be explored deeper into the website navigation. 

They make the ideal choice when it's information browsing (instead of searching) that you'd like your users to do on your website and when you're displaying several types of content that they need to easily navigate through.

Lists are pages displaying search results matching the search items that your users will have typed in.

Being far more compressed and allowing you to establish a visual-guiding hierarchy, too, they enable users to quickly access particular information as they scan through similar types of enlisted content. 
 

With these contexts, specific to each one of the 2 dominating UI styles, in mind, you should now be able to choose one over the other and thus to organize your content for ensuring the best user experience on your website.

Jan 10 2017
Jan 10

User experience and usability!

Such “trendy” principles in today's web-design communities. Such powerful trends influencing major decisions-making processes in the digital world.

And yet, recent studies have proven that, although every web designer appears to be striving to craft the most engaging user experiences, to create web design “in the name of usability”, too many of them make the same mistakes as 20 years ago (when the approach to web design wasn't as sophisticated as nowadays or the expert advice as accessible as in the present days).

Well, it's time for you to “shake off" these “bad habits”, to take advantage of this time of year (a time of resolutions making) for making some strong commitments in this respect.

And here they are, the 5 long-lasting web design errors that we'd like to “confront” you with:
 

1. Failing at Responding to Users' Need for Clarity

Whether you're deliberately compromising clarity for the sake of “innovation”, for showing off your creativity, or you're simply overlooking its key role, it's time you helped your design (re)gain its clarity!

It's time you (re)considered your relation with your website's visitors: 

  • you need to “serve” them first, by making it crystal-clear where they need to click and where exactly all the clicking will take them to
  • and only then to “gain them over” with your talent and “appetite” for innovation.

It's not the other way round. It never is!

Now here are some “long-living” web design mistakes affecting clarity:

A. Unexpected content placement/Ambiguous category names

We preferred pairing these two examples of “popular” web design mistakes since they both lead to the same unwanted result: users getting the feeling that the particular content they're searching for is always somewhere else on the website.

It's perfectly legitimate and even advisable, as a web designer in Toronto or as a website owner, to want to break up the conventional patterns of design.

And yet, be aware that “you're playing with fire”.

Interfering with you users' browsing habits, placing certain pieces of content where they would never have expected to find them, might have the opposite effect: discouraging your visitors due to the time they will have wasted looking the information they needed.

Also, if you fail to clearly name your categories and your visitors land on web pages of your site having nothing to do with the content they were expecting to find (signaled by the “inappropriate” way in which you named your categories), you risk to make them bounce off your site for good.

B. Hidden fees

Reducing prices' visibility or hiding away certain fees is the quickest way to “crafting” a negative user experience!

So, shake off this bad habit and make a pledge for designing exclusively big and bold pricing information this year!

C. Misleading, almost identical links or navigational categories

It says it all: you risk (again) to piss off your visitors, who'll land on the “wrong” pages on your website for didn't stick to the principle of clarity when naming your links/navigational categories.

And this is how you lose some potential loyal visitors which could have converted into customers!
 

2. Failing at Efficiently Applying Basic UX Principles

How will your website's visitors find the needed information on your website? This is the question!

The question that should keep you alert throughout the whole designing process, lest you should wrongly apply or forget all about the fundamental UX “rules”.

You should envision your “mission like this: blazing your user's path to the due destination. Which is the information that he/she's searching for on your site!

And by “stuffing” your text paragraphs with internal links, placing your buttons in unexpected places or hiding away your navigation bar sure is not the way to do it!

Now here are some common UX errors you should commit yourself to avoiding this year:
 

A. Repetitive similar links

Resist the “temptation” of turning your visitors' quest for specific information hosted on your website into a “mission impossible”.

Forcing them to click on a heavy loads of almost identical links, over and over again, in order to access the information they're actually looking for, is nothing but a “sloppy” web design practice.

And you will only “succeed” in discouraging your visitors. 
 

B. “Islets” of information

Here's a basic UX principle that way too may web designed keep “overlooking” even now, when “usability” is one every web designer in Toronto's lips: connecting together webpages hosting similar type of information.

You should avoid stranding your visitors on “final destination” type of web pages on your site. They do find the information they were looking for (hopefully), but are not “lured” with alternative destinations, as well: other pages on your website presenting a similar type of information that they might find useful.

In conclusion: make sure you don't “sabotage” yourself. Permanently “tempt” visitors with alternative pages they could visit, pages linked to the ones that they'll access first both through phsycal clickable links and through the similarity of the information that these pages provide!
 

C. Irrelevant search results

Remember: UX is all about lightening your users' path to the information they need.

Now imagine the following scenario: your visitor types his/her search items into your navigation bar, get the suggested link of a specific page on your website only to land there and to discover that it has nothing to do with the type of content he was expecting to find, based on his specific search terms.

How did you let this happen? 

You've incorrectly or insufficiently tagged your facets and filters!

Now that you know how to avoid this mistake, you'll have no excuse for letting the above scenario turn into reality on the websites you'll design in 2017!
 

D. Casting away users on micro-sites

This is a web design mistake related to the one causing “islets” of information (that we've already detailed here).

Probably the most popular website relying on sub-sites is Yahoo. And this is a good example of web design: users are directed to visit certain subsites while they're provided with the way to go back on the main site, as well.

This is a good practice that you, too, should stick to when you handle sub-sites web design: whenever you suggest your users to visit a certain sub-site, remember to always make the home button as visible as possible.

Otherwise you'll just cast them away, you'll drive them off the main website and thus “sabotage” yourself.

Why would you want that? 
 

3. Failing at Creating An Effective Information Architecture

What's the point in creating valuable content when you, afterwards, “sabotage” yourself by making it discouragingly difficult for them to scan through it?

A well planned information architecture is what makes the difference between hasty web design and perfectly structured, intuitive navigation flow-ensuring web design. It's the very foundation stone of good design!

An effective information structure implies organizing, labeling and structuring the whole content available on your website as clearly as possible.

By the time you start to actually design your website, you'll have everything planned: how your future visitors will get from one section of your website to another, your page order, the number of pages your website will have, everything, to the slightest details, will have already been thought through.

What's the purpose of all these content structuring efforts?

Your users will effortlessly and quickly understand what your site is about, will be able to scam through its content and to easily “detect” the specific information that they're looking for.

Now here are 2 major information architecture mistakes you should avoid:
 

A. Content clutter

We'll never stop “bugging” you with this advice (presented to you in various forms) on this blog: declutter your website and you'll half won your “battle”!

Think “5 second attention span” and then think “fierce competition in the digital marketing arena” (competition which will get even fiercer this year).

No visitors will have the time or the will to try and “digest” huge blocks of text and to waste too much energy trying to navigate their way though piles of images, overcrowded products galleries or cluttered apps (weather app, countdown app, audio player etc.).

So, never bid on your user's goodwill!

Instead, do your best or easing his/her job for “digesting” the content on your website:

  • shorten your paragraphs
  • give white (or so called: "empty space") space its due importance
  • always bid of bullets
     

B. Hidden relevant links

And here we get to the risk of “auto-sabotaging” again! 

Avoid placing relevant links in totally inappropriate, hard to find places on your website, such as amidst ads.

It will be like “looking for a needle in a haystack” for your visitors to find these particular links and thus you'll run the risk of blocking their access to key pages on your website.

This is how our list of web design “don'ts” for 2017 looks like!

Think them through, see which one(s) of them has been part of your work routine for too long now and make a pledge to “brake up with it/them” this year!

Jan 06 2017
Jan 06

Curious what 2017 has in store for you in terms of new powerful web design trends? It is crucial for you, as an entrepreneur or business owner operating in the online world to “tell the future”, isn't it? 

Well, allow us to be your “fortune tellers”!

To reveal to you 3 web design trends that will dominate the web design industry this month and which we anticipate that we'll “dictate” how designers and business owners will approach web design this year.

Ready?

Here are the most influencing trends in web design in January 2017:
 

1. Crafting Visually-Appealing Shopping Experiences 

Stunning imagery + (unique) story telling products = new shopping experiences based on planting the “seed of desire” in your viewers!

That's how we could call these new shopping experiences that (usually) high-end online stores, with fewer items on their inventories, have started to craft.

We already “suspect” it to become one of the most influencing of all the 3 web design trends that we've selected for you for this post! Definitely the trend that will influence how we do web design in Toronto!

So, you'd better give it a great deal of consideration if you own a Drupal e-commerce website or if you're planning to boost your business with one such website this year.

It might just be the surest way of setting yourself apart from all the common shops offering clunky shopping experiences, requiring to much clicking from their visitors, annoying them with too many options to select from and with over-sized navigation menus. 

Set yourself apart and join the high end shops' exclusive league instead!

The league of those brands that focus on the pure beauty of their products and that masterfully showcase it to their users triggering a sense of desire in them. All while while making sure that their online shopping experience is seamless (take Amazon's example for instance).

It's no news to anyone: Instagram has influenced and will continue to influence the way digital business owners approach to web design in 2017. 

So, bid on visually-arresting images, on card-style interfaces and remember to invest your products with a unique story (your brand's unique story) to “tell” your website's visitors!

First you visually dazzle them away with your high end design and it's only afterwards, once they've started to scroll down, that you reveal to them all the other “details” such as prices.

This is how major brands have been “charming” their customers with great success, so how about adapting their techniques to your own website?

Instill that sense of “gotta have this high-end, beautifully designed and unique story-telling product” in your website's visitors!
 

2. Using Ample Negative Space for Directing Viewer's Eye

When used right, the web design technique of "playing with" an ample “empty” space is such a powerful one!

Whether we're talking about the “empty” space that you'll decide to surround your images or text with, or about the background color or simply the strategically placed white space on your website, this “airy” space on your website lacking any visual elements can help you direct your visitors' attention to key elements on your web pages.
 

You'll practically guide the viewer's eye to the more “crowded” part of your design. You'll actually “tell” your users where to look and where to click! 

Note: when considering the use of ample negative space, think beyond (commonly) symmetrical design! Get creative and strive to strike a visually impacting balance between text or images and negative space in a rather asymmetrical format.
 

3. Breathing Life In Material Designs Using Pastel Colors 

Get ready to witness a shift in the usage of colors in web design this year!

If bold, neon colors have been “the go-for trend” in 2016, we've been collecting some “solid proofs” that pastel hues will steal the spotlight this year! As a Toronto web designer or entrepreneur operating in the digital “realm”, you should definitely keep an eye on how this trend will continue to evolve over the year!

Softer colors will climb the colors' hierarchy, going from (just) background colors to hero headers'/main imagery's dominating colors.

Expect to witness more and more brands (and you should seriously consider jumping on this trend yourself, too):

  • pairing pastel colors with images featuring the same soft hues
  • pairing photography with imagery featuring the same pastel palettes

Note: pastel colors will continue to perfectly complement material and flat designs as they've had over the last years, too.

So from this point of view there's nothing new under the sun in 2017's web designs! And yet, softer colors won't be playing just a “secondary” role, somewhere in the background.

Designers will start matching and pairing them in various ways for putting together the central images themselves.

Therefore, you'd better start considering playing some more with pastel color palettes when designing or redesigning your Drupal website/s this year. 
 

What do you think? Will these 3 web design trends, that have influenced designers more than other trends this month, turn into THE most powerful ones this year?

Which one(s) of them (if any) is it more likely to “influence” you, too, when you develop the web projects that you've planned for 2017?

Dec 21 2016
Dec 21

Will you be a superhero or a villain? What are you going to do with all those superpowers that UX invests you with? 

Will you be a superhero willing to build trust and to nourish long term relationships with his/her users or a manipulative villain driven by his urge to get his numbers up at all costs?

UX invests you with so much power! It practically reveals to you all the valuable cognitive psychological biases, all the mechanisms to use for triggering certain emotions in your customers (pride, greed, anger, envy etc.) and for manipulating them to act in certain ways.

It's this power that can either help you gain success or ruin you (you sooner or letter)!

A solid understanding of user psychology, when used the right way, will help you "perfect" your visitor's journey on your website. It gives you the ideal resources for making this journey as logical, intuitive, pleasant and meaningful as possible. Good UX leads to happy customers first, then to loyal customers!

A solid understanding of user psychology, when used the “bad” way will help you deceive your visitors, through certain tricks applied to your interface. It will help you influence them to carry out certain actions that are beneficial exclusively for your business: purchasing, subscribing, installing your software on their devices, revealing the details of their credit cards etc.

In this respect, here are some of the most “popular” manipulative design practices that have taken over the internet (being widely used even by some of the most influential brands, too) and that we advise you to stay away from (“Better safe than sorry!”):
 

1. The Disguised Ads 

You click on what looks like “genuine” copy and "Boom!": a commercial pops up on your screen or (and this is the really bad scenario) a software starts to download on your device!

Does this sound familiar to you? Have you been there already? Have you visited that website since the “incident”?

Well, if you've already been a “victim” yourself, then you (should) have even more reasons to empathize with your own customers: don't use disguised ads on your website! It will only grant you (really) short term gains, but you'll lose a potentially loyal customer (which is gold) and credibility.
 

2. The Roach Motel

Here is another tricky web design practice that's widely used by web/apps owners, accepted and “perceived” as “an innocent little scam” (pick a web developer at random and he/she will deny that the "roach motel" might be considered as a “truly” deceiving practice). When it fact it's nothing but a skillfully crafted means to trick and to retain users.

You convince them to subscribe to your newsletter or to sign up for your your software free trial, then you turn the whole process of unsubscribing into a discouraging “ordeal”.  

By deceiving your users and hiding away from them the information on how they can close their accounts, you will get them hooked on your product for a long, long, long time!

Step into the light! Use your UX superpowers the right way:
 

  • inform your users, from the very beginning, that they'll actually need to call you or to write to you if they decide to unsubscribe
  • make your unsubscribing method(s) visible on your website 

Turn UX into a force for good!
 

3. The Forced Continuity

This UX design practice is so ingrained into the digital world that you might even not perceive it as “dark”, but simply as “common”.

How does it work? Picture this scenario: you “lure” your online customers to sign up to your free trial and it's at this point, as well, that you ask them for their credit card details. You're also cunning enough to let them know that they have total control over their accounts, meaning that they get to cancel their memberships any time after the trial period if they're not satisfied with your product (or due to any other reason). 

What you (let's assume that it's you who is using this “devilish” UX technique) rely on is that in many cases users forget to unsubscribe after the trial period and that you get to keep charging them, since you have their credit card details.

In those rare cases when they do remember to close their accounts, you'll make it as discouragingly hard for them to do that as possible.

Tricky isn't it? We, at OPTASY, our web design company in Toronto, think it's just “lame” to “glue” customers to your products against their will instead of making them desire your product!

Step into the light and use your UX superpowers the right way:
 

  • notify your customers once the end trail ends and give them the possibility to choose whether they cancel or continue to use your product/service
  • make your cancellation method/policy visible on your website
     

4. The Sneak Into Basket

Now this is one annoying UX design practice (from the online shopper's perspective), that way too many e-commerce websites continue to use!

How does it work? Let's assume you're the next “victim”: you add an item to your shopping cart and you then realize that the website has automatically added another product or service (such as insurance), that you don't want to purchase. Or at least you would have preferred to be asked if you wanted to purchase it before instead of having it “sneaked into” your basket.

OK, so you might “trick” some clients and increase your gains, but just imagine all the negative publicity that all those frustrated customers will create around your brand! 

Not only that you'll lose those specific customers, but by spreading the news about the bad experience they will have had on your site, they'll discourage your potential customers, as well, from ever accessing your site.
 

5. The Misdirection/ The Bait and Switch

A more than suggestive short description of this deceiving practice would be: changing the patterns that you've set up on your website and that your user will have got accustomed to, without warning him/her!

Therefore, you take him/her by surprise and “trick” him into performing a certain action.

In most cases it's about clicking a link/button which, till then, used to lead to a certain page, with no exception: your visitor will click on it without knowing that he/she has just bitten your “bait”.
 

Now try to imagine the long-term consequences, especially if you're using this deceiving technique for tricking your customers to spend their money on certain items on your website! 

Step into the light! Use your UX superpowers the right way:
 

  • make all the options of same size and equally visible
  • ask for your user's confirmation: give him the choice to either continue or to cancel 
     

6. The Scarcity Inflation 

Admit it it! How many times a day does your inbox get “loaded” with newsletters striving to catch your attention and to make you react immediately to expressions such as: “Only 1 hour left till”, “Hurry Up! The sales end today”, “Only a few left!” etc.?

This deceiving pattern, too, is “exploited” to such extent in the highly competitive digital world (where competition for customers is truly fierce), that you may even not even perceive it as “sinister” and manipulative. 

But it sure is! Our advice for you is not to go there: don't “exploit” your users' emotional biases towards scarcity and limited availability. Building trust should be one of  UX design's most honorable goals!

Unless, of course, you do have limited availability to certain products/services that you promote on your website.

7. The Trick Questions

Resist the temptation to “exploit” users' tendency to (just) scan through the written content on a website and to use deceiving copy for disguising opt-in buttons as opt-out buttons!

Be better than that! Be future-oriented instead of (just) “hunting” only short-term gains!

Put these 7 UX patterns on your “Not To-Do List” and decide to put on your superhero “costume” instead of your villain mask!

Dec 20 2016
Dec 20

Visual hierarchy, especially on an e-commerce website, is a way too powerful “weapon” for you to underestimate it or to ignore it!

When used right it empowers you to steer your visitors' attention on key elements on your website and, moreover it eases their “job” as visitors (possible future shoppers), too. We all need guidance so that's precisely what you'll be offering your visitors: guidance. You'll build “bridges” between different types of content on your website so that they can navigate through, smoothly, without getting disoriented or discouraged by a rigid, monotonous block of content.

By joggling with different sizes, with contrasting colors, with spacing and with overall layout, you determine what gets noticed first and which elements on your website carry more “value”.

Therefore, you discreetly guide your visitors towards “key” components doing them a favor: making their journey time-efficient. They get from point A to point B (your shopping cart page) as quickly and intuitively as they hoped when they landed on your website.

Your make your website “usable”, you upgrade it with “usability”, which is the to foundation stone of user experience.

Enough beating around the bush now: here are 6 “way too powerful for you to ignore” methods that you could use for crafting efficient visual hierarchy on your e -commerce website, 6 techniques that any Toronto web designer should add to his/her own "toolbox":
 

1. Be Generous With Your Negative Space

Remember that we've “talked about” the white space's importance when we pointed out how the human brain reacts to differently to different colors (in our post on user psychology and web design)? It's there that we mentioned that white space “helps you put together a clean, pure design, one showcasing certain elements of your work“?

Well, well, well! It's time to start perceiving this “empty space, “white space” or “negative space”, however you wish to call it, as a distinctive “element”, one claiming its real importance, and not just as a “absennce of elements”.

Once you've started perceiving it as an element on its own, you should consider it the card up your sleeve that you could use for grabbing your users' attention and for steering it towards elements of high importance on your website. 

How? Here are just a few examples:

  • be generous with spacing between paragraphs and with the margins framing your blocks of text so that your shoppers can perceive your written content as “important” (we talked about “adding value” through visual hierarchy: well this is an example of “how it's done”) and “digest” it more easily
  • put your call to action button into the spotlight by simply adding more negative space around it. It's that white space that will set it apart from the rest of the elements on your website and make it instantly pop out!
  • dare “derailing” from the so very “trendy” and overly used web deign practice where you place a large image on your front page to draw attention to and you “suffocate” it  by other elements crowded around it. Give this central, visually-arresting image a bit (jut a bit more, no need to exaggerate now) more space, white space, and you'll instantly balance out the whole layout and, moreover: your attention-grabbing central image will grab even more attention now with that “barrier” of negative space framing it!
     

2. Juggle With Different Sizes

Get playful, get daring, but mind you don' forget that: balance makes it efficient after all!

Therefore, enjoy the power of “manipulating” that size invests you with, make sure you don't “sabotage” yourself!

Neighboring elements of different sizes, where some are a lot bigger than others, will draw attention to the oversized one, that's true, but it might as well cast an unwanted veil of shadow on still quite important sections on your website. And you don't want that!

So, make use of this technique while remaining conscious of its counter-effects, of the importance to keep a certain balance in everything.
 

When it comes to e-commerce web design, we recommend you to play with sizes on your homepage, on the key imagery and text that you have there!
 

3. Think Contrast When Choosing Your Color Palette

As we already mentioned in the introductory paragraph: you need to adopt a more refined color contrasting technique than the now rudimentary ones like: “paint it all in red” or “set it against a background in a muted color”.

You need to start thinking through how you actually pair those colors, how you group them on your site. 

Go for wining “combos” of red-and-green, yellow-and-purple, orange-and-blue and  variations of these combinations of complementary colors.

Think through the selection of your call-to-action and sales announcing elements. Challenge your skills at pulling off the most efficient eye-catching color contrasts: go for a black background and neon colors or simply make sure the elements on your website (images, texts) neighboring thoae key elements that you want to draw your visitors' attention to, are in contrasting colors.

So, you've got our point: bid on color contrast and start viewing the colors on your website as parts of a whole “ecosystem” where each color can outshine/be outshone by or highlight/be highlighted by its neighboring colors.
 

4. Grab Attention Through The “Static vs In Motion” Effect

It's a scientifically proven fact: our attention gets instantly caught by things/persons in motion. The question that arises now is: how are you going to use this information for determining, in advance, what your shoppers should notice first once on your website?

You have three options for getting the most out of “motion's power”:

  • you add one or two discreet animations here and there, on key places on your website. And here we need to stress this idea of “discreetness”: your animations should be subtle; it's highly important that you don't go too far. It's quite easy to overdo it, you know, and instead of “cunningly” driving your visitors' attention towards the elements of major importance to you, to annoy them instead, to drive them off your website due to your too flashy, bling-bling animations. Not only that these “overly flashy” animations will annoy your shoppers, but they'll steal even the minimal attention away from the other elements on your website. And you don't want that!
  • you add an auto-playing video. Again, be very cautious not to go for a too absorbing video that leads to nothing (no subscription, no purchase). One of the best practices in this case it to design pages around your video, that your visitors should be discreetly “tempted” to access.
  • you go for a photo-video hybrid. They're such a popular trend in e-commerce web design these days! No wonder, for they put together the visual power of an image with the one of a motion, the latter being so discreet and idealy subtle. Therefore, it comes with the advantage of not outshining the neighboring elements. It's a type of motion-implying (visual hierarchy providing) technique which works wonders especially when applied on a visual that's already stealing the spotlight on your website (e.g. the large central image on your front page).
     

5. Set Up a Scanning Pattern

No need to strive to reinvent the wheel, when you can just as well use it to your own benefit!

This is the case with the ways users usually scan through the content of a website: there are two main human behavior-determined, already tested patterns: no need to invent a third one. All you have to do is pick one or another.

So, which one will it be? The F pattern or the Z pattern? Even the web design forums in Toronto are divided in 2 groups, depending on the scanning pattern they prefer.

Let us detail each one a bit before you can make a decision:

  • they both start in the upper left of the website (where usually logos are placed), go all the way to the upper-right corner (so this explains why upper page horizontal navigation bars still rock) and it's from there that they go on separate ways
  • in the F pattern the user's eye returns to the left side of the screen sort of mimicking the left-right-left-right eye movement specific to the act of reading (this is why this pattern is used predominantly on blogs). How is it useful on your e-commerce website? It enables you to nicely structure and display rows of images that shoppers can easily scan through. A “trick” you could use when adopting this pattern is to display secondary promotions on the right side of your website. It's there that the user pauses for a second or two before going back to the left side of the web page. So, “exploit” that short pause, so to say!
  • the Z pattern is already an “emblematic” one for front pages. Here you have the upper row, then the attention-grabbing image in the center of the page, presenting the site's man features or showcasing its products/services, then the bottom row. It's an ideal pattern for pages centered around one single action: such as landing pages or one page presentation websites, but it can be effectively adapted to the specific needs of an e-commerce website.
     

6. Set Up a Rhythm Only To Break It In The Name of Visual Hierarchy

Crafting a truly effective visual hierarchy is all about mastering the “establishing vs breaking up” patterns technique!

By simply derailing from a repetitive construction on your website you'll instantly draw attention, you'll break up the routine and “make them wonder” while they pause on that disruptive element.

Therefore, dare breaking up the repetition you will have set up in your layout organization, in the whole structure of rows on your website, for drawing attention.

Then, feel free to “exploit” the empty space you will have created there, in that section on your website “different” from the rest, for placing the key element(s) that you want to draw shoppers' attention to. 

Maybe “manipulating” is a too strong word, but it describes perfectly the power that a strategically constructed visually hierarchy places in your hands. Give it a try! Pick one of our suggested techniques and see how it works for influencing your users' behaviors on your e-commerce website!

Dec 17 2016
Dec 17

We're back with 5 more (priceless) storytelling design principles for you, as promised in our previous post! 5 other means for crafting an engaging story around your brand/products/services and for telling it on your website as compared to “just” presenting/showing stuff on your site.

And before we break them down, let's recap, very briefly, some main points from Part 1:

  • your story is already unique, but you need to make it interesting as well
  • your story should focus on interactivity and it MUST engage
  • your story should put together a whole experience (an authentic one, one that users can enjoy only on your website
     

6. Make Them Interact With Your Story

Remember those really good stories from your childhood? And by “good” we mean those that had the power (or maybe it was just the talent of the storyteller himself/herself?) to get you in the story itself. How they managed to stir your imagination to the point that you were the main character yourself, you were in the story, fighting bad guys, rescuing princesses or being a rescued princess yourself?

Well, that's (more or less) the same effect that your visual storytelling should have on your users! The effect that your web design and development efforts should focus on. Your users should be subtly “dragged” in the story and turned into its lead characters.

Besides engagement, interaction in visual storytelling means discreet guidance, too.

Your visitor should feel, as if he's getting deeper into your story while he's navigating on your website; as if he's turning over the pages of a book.

Make sure you insert all the right directional cues, so that your user's journey, from the “once upon a time” on your homepage, all the way through the “intrigue” (your products pages) and up to the last “happily ever after” (your shopping cart page/subscription page) is as fluid as going from one chapter to another.
 

7. Let Your Mascot Tell It For You

Mascots make some great alternatives to “client testimonials” taking the role of storytellers, to a rather invisible storyteller or to the team itself telling your company's/brand story.

It can be either the storyteller himself or a character within the story and it adds that overdose of personality and uniqueness to your visual storytelling (there can't be two identical mascots, therefore yours is as authentic as the story itself). 

So, think it through: what if a mascot personalizes a character within your story? Don't you think it would breath life in your products/items and help the customer relate to your story far more easily? 

Homework: try thinking about 3 iconic mascots of worldwide brands and how you'd perceive those companies' products/services if there had been no emblematic mascots in the first place!
 

8. Let Your Background Image Tell It

From silent “story whisperers”, in the background, to secondary characters, to lead characters, large background images can take any role you'd like them to play in your story.

When used right, background images can instantly get your visitor in the story from the very front page. So, what role would you invest your background image with:

  • will it be a subtle background image, discreetly setting up the right mood of your story?
  • will it be strategically blurred in some parts and focused in others, thus conferring a felling of depth to your website's design and steering your users' attention towards certain elements of your story?
  • will it be clear and meaning-conveying, telling the story all by itself?
     

9. Go For Parallax Scrolling and Turn Your User Into a Narrator

Here's another great visual storytelling technique that's used more and more frequently in web development and that helps you turn your visitors into your story's narrators.

How does parallax scrolling work and help you create that sense of “authorship” in your users? Easy: you get to show different layers of a design on your website and, depending on your users' scrolling behaviors, these layers respond differently.

Therefore, there you have it: your visitors get that highly engaging feeling that they're actually the ones putting together the story that's being told on your site.
 

10. Tell It on Social Media

Remember when we mentioned, in Part 1, that visual storytelling is aimed at helping you build your own community, your own loyal audience?

Well, social media platforms are an amazing resource for achieving this particular goal. They are, by nature, far more “personal” and thus you get to create that emotional bond with your visitors far more quickly.

So, rely on social media for telling/sharing your story. “Write” it with brand-related images that are impressive enough to be shared and commented upon, with events and discussions around your products/services.

“Write” it and “tell” just like a traditional storyteller would, by getting the most out of the newest resources of web design.

This is it! This is how our list of 10 design principles that are great for helping you design and tell your visual story looks like. How about yours? 

Dec 16 2016
Dec 16

“Any good story should give you a promise that it will lead somewhere that's worth your time” (Andrew Stanton).

This quote is just perfect as a starting point for our discussion on design principles that help you narrate your own unique (engaging and interactive) story on your website!

What does it mean actually?
 

It means that you need a “good story”, and yours and yours only can be nothing less but 100% authentic (for it's “yours” and no one else's, of course it's unique!) and it's up to you to make it look as fascinating as possible.
 

Then, you need a “promise”, which in visual storytelling terms it relates to the “emotion” that your web design should stir in your user.

Your company's craftily designed story will add meaning to products/services and will trigger emotions in your users. Without the story that you wrap them up in your products are just, well, products, like any other millions alike.
 

OK, so you must have a story to tell, anyone has, but how do you incorporate it in web design? How do you tell it to your users (or to your client's users, if you're a web design and development agency who needs to design an engaging story while building the website itself, too) just like a truly gifted storyteller would: keeping his/her audience fully engaged and thus far more likely to receive his/her message?

First, you answer to this 3 major questions:

  • Who is your audience?
  • What goals have you set up for your brand?
  • Which is the message you want to convey?

Next, you'd better write down (and hopefully keep this post-it somewhere close to you) the 3 major components of any engaging visual storytelling:
 

CONTENT     IMPACTFUL IMAGERY   INTERACTIVITY

Then, you take a close look at our 10 design principles for incorporating storytelling into your web design:
 

1. Let the Images Tell Your Story
 

Face it: people would always “assimilate” images way better than long, text-stuffed content!

Images have the power of triggering those emotions that you want them to way faster than words so, you should reflect on that.

After your seconds of reflection, you should start to carefully pick your images and to put them together in the album that will make the best storyteller for your brand.

It will not just appeal to your users and enchant them, visually, but it will gradually guide them deeper and deeper into your story. It will slowly “pour” your own brand message into their minds. 

In short: images will always make far more than “just” a “nice wrap” for your story, they can be the story itself if selected and handled with great craftsmanship.
 

2. Tell It Through Words, Powerful Words

And by “words”, we do mean“words”, you know, not long, tiresome textual stories (like chapters in a book).

Therefore, think through your choice of words for your call to action button, for your navigation menu, for the central content itself.
 

Think cohesion, as well, when you choose your words (they should complement and put together the whole “plot”) and see each one as a truly powerful little storyteller (if chosen right).

It's the words that you choose that will create the “voice” that will narrate your story. Therefore, depending on your company's profile, on its message and on your target audience, your “narrator” could be formal or casual, for instance.

Invite your visitors to “delve into” the story that's being told on your website. Invest your words with some of the “once upon a time” introductory phrase's power!

Note: always keep in mind that the “supreme” goal of your “string” of words narrating your brand's story is to engage and to get your visitors to interact with your website. Make your users interact, whether that means clicking on your call to action button, signing up to your newsletter or purchasing a product. 
 

3. Put a Face on Your Storyteller(s)

In other words “breath” some personality and authenticity into your website! Breath some “life” into its design.

It's such a popular trend these days that companies should reveal the team behind their brand message, the people who had been hidden behind the user interface and whose presences the visitor could just “sense”.

In other words: let your team tell your company's story. They're the ones that know it better!

Your future customers will relate far more easily with people than with the products/services that they create/provide. So, add the human factor to your brand's message, making sure it's a human factor with a unique personality (it's “your” story, after all: dare to show off its uniqueness).
 

4. Instead of “Telling” Your Story, How About “Illustrating” It?

Now that we've just talked about infusing personality into your visual storytelling, we should point out, as well, that illustrations add even more personality to your website than images!

The roles they can take on are far more varied and far more refined. And where do you add that they can be (depending on the artist of your team who created them, of course) a bit more “personal” and therefore more “powerful” than images.

Take a collage of crafted illustrations, for instance! You get to use them for pointing out relationships between different elements of your visual storytelling and you get to use them for presenting sequential steps (e.g. how your “innovative” product should be used).

They're far more dynamic than images, so consider them turning into your storytellers!
 

5. Tell It Through a Video

Just imagine your visitor: instead of having to go through your written or visual story, he/she'd just lay back on his chair and enjoy watching a video story! Far more convenient, don't you think?

Create a powerful story around your product and tell it in a video. Make it fun and wacky, artsy and visually appealing, educational, or truly impactful, depending on your company's profile.
 

You decide whether it's you who'll actually narrate it or someone else (one of the most efficient ways still is that where some your happy customers tell your story in that video).

And these are just the first 5 tips and tricks that we've prepared for you (from a series of 10), tips that are part of our own "toolbox", the one we rely on here, at our web design agency in Toronto, so that you can go ahead and get the most out of the true power of visual storytelling on your website. 

To be continued, with our other 5 tips in our next post! 

Dec 06 2016
Dec 06

We're back, as promised in our previous post, with 7 more design principles that you should “steal” from those e-commerce websites that have already “made it big”.

If the 5 principles that we revealed to you in that post revolved around the visually-appealing aesthetics that any website should “wrap” its conversion goals in, today we'll be tackling the issue of usability. 

After you've learned all about delighting your visitors and visually enchanting them, today we'll reveal to you the 7 (surprisingly) subtle changes that you could apply to your website for discreetly guiding your visitors towards the final purchase, for making the whole “path” they'll need to cross from the moment they land on your site to the shopping cart page as easy to follow as possible.
 

1. Make Your Search Box Visible

Run a test! Go online, pick, let's say, 10 random websites, access them and try to time how many seconds it takes you to spot the search box on their homepages.

Needless to add that the “winner” is the site that “scores” the shortest time needed for you to track down its search box.

It's the same with your e-commerce website. You should, indeed, invest lots of time and creativity in getting it upgraded with striking visual elements to delight and to engage your visitors with and to pay great attention to the whole information structure and to the layout of your website, but mind you don't overlook the search box's major importance! 

All your efforts in making your products/services as visually-appealing and desirable as possible might just go down the drain right from the start if you “manage” to frustrate your visitor by wasting his/her valuable time looking for your search box.

In a nutshell: make your search box pop out!
 

2. Discover Which Colors and Color Contrast Convert For You

Before you rush in to paint all your call to action buttons in red (since it's a general consent that red triggers a sense of urgency and therefore that it converts better) or before you rush in to change it from red (since you've discovered that, well, it did not help you reach that high conversion rate you expected it would) to orange (for you've red about it being the perfect call to action color for “aggressively” urge your users to buy), you should first:

  • consider which is the emotion/which are the emotions that each colors conveys (maybe if you're selling beauty products you'd better go for cheerful pink rather than “alarming” red, for instance)
     
  • run some tests for finding out which is the color that converts better for you and you only (what works for others might not work out for you, too)
     
  • depending on the color that you decide to choose for your foreground and, most of all for your call to action button, you should choose a contrasting color for your website's background.

And here we are! To the very color-related “subtlety” that we wanted to point out to you: strive to find not just “your” website's color, the one that converts best for you, but the high-converting CONTRAST for your website, too.

It's the contrasting background that will help you make your call to action buttons pop out, you know. So, think in pairs of colors: purple and yellow, orange and blue and so on...
 

3. Go For An Attention-Grabbing Call To Action

Put your call to action in a container, make it stand out!

Your call to action button should be grabbing your visitors' attention even quicker than your search box.

If in the case of the latter your role is more that of a guide, one willing to assist the visitors to quickly find the information they're looking for, when it comes to your call to action you should make sure it simply grab their attention the very moment they land on your website.

We've talked about “wooing” your website's users, about delighting and “spoiling” them with striking imagery and quality content, but even so: you should keep in mind that at the any of their “visits” you still want them to buy or to subscribe. 

In short: don't rely exclusively on the foreground-background contrast and add do more! Try a contrasting container for your call to action! It's the key element of your website, so you should make use of all the available resources for making it grab the attention!
 

4. Give White Space Its Due Importance 

Here's another design subtlety that you could apply for making your call to action stand out: placing it against white space! Give it a try, test it on your website and see whether it works for you, too, whether a white background makes your conversion button even more visible! 
 

5. Put Together a Visual Hierarchy

Remember that we've already talked, in our web typography-related post, about the hierarchy's high importance in web design?
 

Well, it's time to lay stress on it once again: visual hierarchy paves the way to an optimized user experience (and therefore to that conversion rate that you've been dreaming of)!

Display all the elements on your website in a powerful visual hierarchy and you'll discreetly and efficiently guide your visitors towards the target (purchase or subscription) that you've set up for him/her.

Turn his/her delve into the multiple layers of content (all the way to the final purchase) on your website as smooth and fluid as possible with the help of an effectively-structured hierarchy!
 

6. Keep Your Navigation Bar Short and Simple

Now it's time you examined your navigation bar! 

How many links/buttons do you have there? Is it on top of your page or somewhere else? Are its labels generic or descriptive?

Once you've moved your magnifying glass across it and (maybe) you've “detected” some aspects that could be improved, here are our navigation bar-related tips for you:

  • keep it short: go for an ideal no. of 5 items 
  • go either for a standard horizontal one, placed on top of your page or for a vertical one, placed on the left side of your front page: no need to get creative here, for “innovation” in this case is more likely to affect usability
  • go for descriptive rather than generic labels: give your visitors a hint of what you do, who you are and not just standard, impersonal information (“Who Are We”, “What We Do”)
  • put your key items at the beginning and the end of your navigation bar 
  • links, links, links, not buttons: links are far better for SEO reasons, since search engines can detect the written text, they're easier to edit and where do you ad they they load quicker than buttons, too!
     

7. Guide Them With Directional Cues 

We all need a bit of guidance!

Therefore, help your website's visitors quickly spot your lead-generation forms and your call-to-action buttons with directional cues.

Use them for directing their attention to the conversion-generating elements on your website. They help you minimize the risk that your users may get too distracted by/captivated by all the other appealing types of content on your website and that they may outlook (or, even worse: that they may not spot them in due time once they've made up their minds) the “really” important ones (for you): call to action buttons.

And here we are, at the end of our list of conversion-centered design tips and tricks for you. Have you had the chance to test them already (or maybe just some of them? Have they worked for you? Feel free to share any other design subtleties not showing up in our list here and which worked “wonders” for you!

Dec 05 2016
Dec 05

First of all, we should get one thing very straight: you will never ever meet your conversion goal if you're “just” selling stuff on your website.

“But it's an e-commerce website, it's supposed to sell products/services!”

That's perfectly true, but you need to strive luring, delighting, engaging and “giving” something to your visitors first (pretty much like in real-life, where you greet your guests with yummy snacks or at least just coffee). It might be some visually-arresting photos to please their eyes with and to trigger certain emotions in them or some interactivity features to show them that you care etc.

The actual sell will eventually come, stay reassured, if you master all the preliminary “customer wooing” steps! But it should come last!

In other words, your site's conversion goal should be... “camouflaged” by and beautifully wrapped in the whole aesthetics of your website. It's your website's design that will entice your visitor to prolong his/her visit on your site and it's design, again (certain usability-related design subtleties), that will “light his/her way” to the final purchase. 

Let's see now which are these 5 design principles that turn web design into “web design that sells”:
 

1. Spoil Them With High-Quality Photography
 

It should be visually-appealing! That's the golden rule of any e-commerce website.

Hiring a good photographer for upgrading your website with sharp, high-quality, beautiful shots of your products might just be the best investment you'll make! 

It's no subtle “trick”, if you think about it! Just put yourself in your visitor's shoes: aren't you more inclined to buy products presented to you in some visually-striking photos that scream “you need me in order to be fully happy”, than products featured in low-resolution, blurry images, that tell no story, either? That don't lure you and make you “need” them?

So, what we've learn from this first “lesson”?

That you need to make your products look really, I mean really, hard-to-resist-to and that amazing photography has always been the surest and quickest means to help website developers/owners reach that goal!
 

2. Balance It With A Great Layout

We could as well call this second design principle: COHESION.

Make sure that the key elements on your website, those that you want to drive the visitors' attention to (i.e your product shots), are nicely complemented and highlighted by your website's layout! 

Think “cohesion” when you design (or, even better, hire an experienced web designer, since the “one man show” method is not always the most efficient one) your layout. Put together all the colors, shapes and textures so that the result should harmoniously complete the “story” told on your website and not steal the spotlight away from your products/services or clash with them. 
 

3. Bring Interactivity To Your Website

Face it (and adapt to it) or lose it: there's a new word for “selling” these days! It's called “engagement”!

So, how does your website keep your digital addicted users engaged? They definitely expect to get engaged, you know, to be offered the possibility to write comments, reviews. They like to stand out from the "faceless" mass of generic visitors on your website.

What are you going to do about that?

Well, there are plenty of user engagement tools that you could upgrade your e-commerce website with and we're going to list only 2 of them:

  • add videos to your website; stunning video elements focusing on your products, that will grab your visitors' attention and will keep them engaged for a minute or two (videos will continue to be, in 2017, too, a major online sales-booster)
     
  • implement a separate window where users get to take a really close look at the products they're interested in; it should allow them to move those products, to zoom in and take a close look at them in different angles before they decide to purchase them 

In short: get creative and strive to add a few more in-between elements to the conventional “customer-purchase” schema!
 

4. Give Background Its Due Importance

You need to embrace your the backing image's full potential! It's far more than merely “something” that just fills up just the space behind your products, the main focus on your website.

When used right, when strategically selected, a full-sized backing image can enhance your products even more. 

First, consider your type of business (needless to add that it's a different image that you should go for if you're selling financial products on your website and a totally different one if you're selling artsy handmade products).

Next, adapt your banking image to the type of message that you're trying to convey. It should, as already mentioned: enhance your product (make sure to strike a balance between minimalist and visually-appealing).
 

A major trend these days, when it comes to backing images, is the blurred background. Give it a try! See what's there, online, come up with your own blurred backing image, integrate it in the “story”, test it and see whether it meets your website's goal.
 

5. Add the Human Factor

Show the clothes that you're selling on a model's body, show the gadget that you're selling as being used by someone, add at least one person to an otherwise "antiseptic" representation of a room decor if you're selling furniture and so on.     

You've got the point, haven't you? You should help your visitors relate to the “character/s” in the “story” you're presenting on your website.

You should help them empathize with them, feel as if they're the ones happily using those specific products.

It's always easier to relate to an emotion (the happiness, the relief, the pride, the satisfaction that your product triggers in the person showing up in your photos), than to a product.

Face it, do what it takes to adapt your website's design to this principle or lose it (lose that conversion rate that you've been fantasizing about)!

So there you have them! The first 5 answers to the question that has probably been on your mind for some time now: “what are those high-converting sites doing differently?”

STAY TUNED, for in our next post we'll be sharing with you 7 more design subtleties that top converting e-commerce websites rely on!

Dec 01 2016
Dec 01

Since the Web pays tribute to the whole concept of UX these days, since all web developers direct their efforts towards “hooking”, engaging and pleasing (whether that means impressing, informing, shocking or enriching) the User, typography has started to regain its glow! 

Even now, in the age of breathtaking imagery and attention-grabbing videos, typography is still king! Add a short, impacting text line (in a strategically chosen typeface) to a striking image or upgrade a stunning, hypnotizing video with a powerful written text and you'll instantly strengthen your message, you'll instantly add a new layer of meaning to it!

On the other hand, “worn out”, conventional typefaces or too embellished typefaces, that won't support the literal message you're trying to convey, bad spacing, lack of contrast or any other unfortunate way of handling web typography can ruin your website (if it's not easy-to-read your visitors will definitely bounce off, whereas if it does not complement and strengthen your message, if it does not help it trigger the type of emotion you're trying to trigger in the user, all your efforts put in web design and programming are at risk).
 

But What Is Typography After All?

Very basically put: typography is how the text looks. 

If we are to elaborate this rudimentary definition a bit: typography is more than just the arrangement of written content (paragraphs, forms, sentences, words); it's also how written text interacts with all the other types of content on your website: videos, images, color. It's about how it manages to “collaborate” with all the other content types for conveying the message/triggering the emotion you want to trigger in your users. 
 

Why Should You Bother So Much About It?

Because it's that “invisible” force that might either strengthen your relationship with your User or “destroy” all your hard work. It depends a lot on how you use it (or how you refuse to use it).

Since 95% of the content on the web is written content and considering the “fierce competition” out there, among websites, you just can't afford ignoring or not paying enough attention to how texts gets displayed on your website.

Learn to use web typography to your advantage: when done right, it's a “force” that helps you create visual interest, better structure your information design, make your written content readable and in a nutshell: influence your users. A too powerful of a “tool” not to strategically use it, don't you think?

Easy-to-read! Persuasive! Does that ring any bell, you UX expert, you?
 

Tips For Improving Your Website's Typography Now

No need to panic now if, let's say, you're still displaying a way too “dusty” font on your website (such as Arial), or if you've taken a wrong decision and, driven by a wish to innovate, you've gone for a way too embellished typeface, when your text should just convey its literal meaning instead. There's nothing that some good practices in web typography can't fix. Here are our 4 tips for you!

1.  Hierarchies Are Major Readability-Boosters

Don't take our word or granted! Test it and see it for yourself. Do an A/B test:
 

  • on the left side: a piece of content with no hierarchy whatsoever, a block of text featuring pretty much the same font size (or with very little variations) for its headlines, title, body etc.
     
  • on the right side: a hierarchy-type of content with, let's say, a 15-17 px font size, a visible first headline, followed, closely, by the secondary ones (of about 150% of the body size), making reading much more fluid, featuring white spaces for the eye to rest on etc.

Isn't the whole information far better structured in the second example?

2. Choose the Right Typeface 

“And how do I know which one of “THE ONE”? Especially when the Web unfortunately “spoils” us with such an overwhelming “repertoire” of temping typefaces?

Well, to this question we have no unique valid “recipe” for you: see what's out there, on the web, analyze your competition, those websites that try to convey the same type of messages as yours and examine their fonts. Conduct your own “investigation”, see which are the most “effective” typefaces.

In between your own “investigations”, you could as well try out (and see if they work for you, too) these 3 body text typefaces-related tips that we've prepared for you here:

  • Even color: stay away from body text typefaces that break the rule of “evenness of color”, those that display patches of whiteness and blackness. Body text fonts should be consistent for displaying an easy-to-read text for your users
     
  • Sturdy shapes: make sure the typefaces you choose for your body text are easy-to-read at small size, too. So, a good practice is to choose high x-heights typefaces with less frills (lest the glyph shapes should turn into distraction for your users and the way too “subtle” fonts, at small sizes, should get outshone by the environment on the web page) 
     
  • Active texture: do your best to balance various aspects of the text block and type. Make sure your body text font's active texture (meaning the typeface's contrast with the white space of the page, the one enhancing visibility around the glyphs) is neither too dull or too lively. In other words, it shouldn't distract the reader/user from the text's message itself, nor bore him/her (making it difficult for him/her to actually distinguish the letters' shapes).

3. Adjust Your Line Spacing

In other words: allow your written copy to breath! How? By setting up your vertical spacing and giving your text more room (it will be a lot easier for the User's eye to scan it). 

A good practice, in this respect, would be to go for a line-height of 15-19pt if you're going for a 12pt font, for instance. You do the math what line-height you should go for if your font is bigger.

4. Adjust Your Line Width

“How many?” you may ask, “How many words should there be in a text line, within a paragraph?"

It's a common sense approach to go for an average of 45-75 characters if you're handling with a one-column web page and for 40-50 characters if there are multiple columns on your page. 
 

How about you? Which are your own web typography good practices? How do you make use of typography's “arsenal of cool tools”? How do you make it “serve” your website's purpose? 

Nov 21 2016
Nov 21

How do you find the online landscape now, when the air is filled with new possibilities, opportunities, forecasts and wishes for 2017?

You do find it dominated by the digital environment’s own trends, and technological breakthroughs, right? Moreover, it’s just dictated, as it has always been, by the future-oriented end user, let’s face it.

Since more and more end users won’t even get to visit your website on their desktop devices anymore, but exclusively on their mobile devices and moreover since more and more will visit it more frequently from their mobile phones, or tablets, you need to cope with this context or else you’ll turn into a “dinosaur” stubbornly attached to his “desktop supreme” belief.

How should you cope with the (not so) latest shifts in the online world? You should go beyond the “mobile-friendly” approach and you should adopt the forward progression, the “mobile-first” plan!

Draft Your Mobile-First Strategy from Day One

If you want to boost its effectiveness, you must draft it from the very beginning, from the product’s/services creation phase, so that you can align it with all your further marketing strategies and business manoeuvres.

Practically, starting with a mobile-first viewpoint allows you to automatically make all the other business strategies and operations revolve around it.

But First, Let’s Analyze Three Different Approaches to Mobile-Friendliness

1. Responsive Web Design

Let’s call this approach (which emerged in 2003) “the pioneer of all mobile-friendly techniques”. It practically revolutionized the way web designers and end users started to envision and to navigate through mobile websites and it’s still quite alluring even now, for many developers, due to its obvious advantages:

  • one URL for a given website across all devices
  • cost-effectiveness (derived, of course, from the above-mentioned advantage)
  • adaptability: web pages/content resize to any given width, enabling users to quickly switch from the way they used to navigate through websites on their PCs, to the vertical type of navigation (scrolling)

And yet, as any “pioneer” in its field, responsive web design has slowly started to show its weaknesses:

  • “adapting” content-heavy website for mobile devices with fewer functionalities and far less equipped for supporting all the heavy content lead to a significant increase in loading time
  • it inevitably looks like some sort of “compromise”: developed for the desktop and re-thought so that it should somehow fit the small screen devices’ features

2. Dedicated Mobile Site

Then, when web design responsiveness starts to show off its limitations, it was time for the “dedicated mobile sites” to shine!

Basically, they were subdomains of desktop websites. Users got “detected” when they accessed websites from their mobile devices and they got automatically directed to the mobile version of the desktop site, using a different URL.

The big step forward? This was the very first attempt of customizing the experience for the end user visiting a specific website on his mobile device, instead of just delivering him/her a “compromise”: a shrunk version of the standard desktop site. This approach paved the way for the mobile-specific content strategies.

And yet, there are certain disadvantages to this mobile-friendly approach, as well:

  • You have multiple URLs to juggle with (mobile and desktop)
  • If wrongly configured, it could easily lead to SEO-related trouble

3. Dynamic Serving (Server Side Components+ Responsive Web Design)

And here is the most complex (for the team of developers behind the website, who’ll have to respond so some bigger challenges now), but surely the most efficient (for the user’s experience point of view) mobile-friendly approach!

What makes it better?

As a web developer, it allows you to display content, using just one URL, based on a user agent: the user reaches a specific website from his mobile device, he gets “detected” by the server-side JavaScript and the HTML, CSS and JavaScript written and adapted to the mobile is delivered to him (instead of the same content created for the desktop website and afterwards somehow adapted so that it should, to a certain extent, fit the mobile, too).
 

Let’s sum up the pros: 
 

  • one URL
  • a much-improved user experience
  • mobile-targeted content

Now, Let’s Dive Into the Mobile-First “Philosophy”

“I think it’s now the joint project of all of us to make mobile the answer to pretty much everything” Eric Schmidt (Google).

Do you need more reasons for making your mobile-first website a top priority than these 2 major ones?

  1. desktop devices’ supremacy has started to fade away (more users will try to access your website from their mobiles and, moreover, there will be quite a lot of them who will be using only those devices for visiting your site)
  2. Google itself is all into the “mobile-friendly” “craze”

To these two main reasons for “saying yes” to mobile-first approach, add 2 main targets, too:

  1. freeing your future mobile-first website off all the heavy, unnecessary content, just an unwanted “legacy” from its “bigger brother”, the desktop website
  2. reducing Its loading time and overall making all the displayed info looking neat irrespective of the technology used on the specific devices that your website’s accessed on.

Graceful Degradation vs Progressive Enhancement

As we delve deeper into the mobile-first type of mentality that more and more website developers and website owners adopt these days, we should point out two main viewpoints that subsequently developed.

1. Graceful Degradation

It is a concretization of the need for a design to work properly across as many platforms and browsers as possible. With this “goal” in mind, designers strive so that the user enjoys the best experience while visiting a certain website and makes efforts so that this website functions properly, despite the inevitable shortcomings.

Basically, the resulting website would need to scale back and lose some of the content that would slow it down or did not adapt to certain viewpoint sizes. It was about “losing the heavy content”: graceful “degradation”.

This viewpoint’s limitation is obvious: the final product often features the look of an afterthought, of an unpolished (one-size-fits-all) product.

2. Progressive Enhancement

The whole perspective changes when you adopt this mobile-first viewpoint: you practically start by making your website look amazing and function properly on a low technology mobile device, thus trimming it to its core features, and then you progressively add new, heavier content, new features and turn it into a more robust desktop-ready website. See the difference?

It’s a much more organic way of developing a website: from its nucleus, made of its most vital elements, to a far more complex version of it. No need to rethink it from scratch so that it should work properly on mobile or, even worse, to “make it fit” (and it never does in a “natural” way) for mobile devices. You go your way up!

Also, when it comes to content (you know, “the all mighty king”), to the way that it gets enhanced or constrained by these two types of “methods”, the progressive enhancement “wins again”.

It’s obvious why:

  • the graceful degradation: all the heavy content gets loaded on the largest platform and even though much of that content is removed from the mobile web pages, the already loaded heavy content still slows down the mobile website.
  • the progressive enhancement: the basic elements get loaded first, making navigation much smoother on a mobile device and loading time much lower, and then progressively additional resources get added, when/if needed (to platforms that can support them well).

The Top-Down Method vs The Mobile-First Method

We’ve already tackled these two mobile-friendly types of approach, but without actually naming them, so we’ll just sum up the basics:

1. The Top-Down Method: creating a website for large-screened devices, then “decreasing” it for smaller and smaller-screened devices. The main shortcomings are:

  • overloading mobile devices with way too heavy content, with too much information
  • omitting many of the tempting features and functions specific to mobile phones

2. The Mobile-First Method is all about usability, all about user-friendliness. Start with the highly simplified, core version of your site which should work perfectly on devices equipped with lower tech and level it up so that it should evolve into a website suitable for the latest high-tech devices.

Facing simplicity (you’ll practically have to “work” with only 80% of your desktop’s screen size) maintaining it and making it your main goal, enables you to keep focused on the core elements of your website and on how the end user can carry out any given action on your site as quickly and intuitively as possible!

Going from small to big is always far easier and it seems to be far more efficient, too!

Needless to add that the mobile-first approach is a flexible, constantly evolving strategy. It needs constant “trimming”, constant modifications so that it organically adapts to all the technological changes and to the shifts in users’ way of interacting with the digital world, as well!

Nov 17 2016
Nov 17

You do agree that a good web designer must always strive to “read the future”, right?

To predict the trends and align his/her efforts with them even before they get to turn themselves into trends. Well, we’re here to lend you a helping hand with that, empowering you with a forecast on what will change, what will become even more prevalent and eventually what will become outdated in UI design in 2017. 

So, here’s what professional experts with extensive experience in UI design predict for the year to come:
 

1. Extreme Minimalism

If in 2016 the trend of minimalist, clean, airy design spread like wildflower, wait to see the trend of extreme minimalist design simply explode in the year to come! 

Well-experienced designers predict that a magazine-specific layout (which some visualize in black-and-white, while others featuring bold, retro-style colors and arty, pop culture themes) will take over the digital interface.
 

Big, visually-appealing photos, engaging videos and highly simplified icons will outshine the long copy. Copy which will eventually get refined to short, easy to read and to understand phrases.
 

Conclusion: the print layout is expected to take over the digital world and the human eye will become, in 2017 more than now, the main “target” for all designed interfaces.

2. Micro-Interactions and Animations

By far the most popular and therefore the best representation of a successful micro-interaction is Facebook’s “like” button.
 

Well, it looks like in 2017 designers will strive to come up with many more interactive forms of visuals, challenging their creativity to add the fun factor to them, too, so that they should: inform and engage and entertain at the same time. 

Users feel „important” for a certain feedback is asked from them and they get to visualize what will happen if they click a certain button, if they perform a certain action.
 

Interaction is key in 2017’s web design and if you add creativity and fun, as well, then you’ve got yourself a magic formula!

3. Illustrations

UI design has been about authenticity (“template web design” has been forgotten long, long time ago) this year and it will surely be about authenticity even more in 2017! About authenticity and personality, as well!
 

Even more than photography, illustrations allow you and your team to get creative and to enjoy unlimited freedom when you’re trying to present your brand’s uniqueness through storytelling.
 

Go for doodle-like illustrations if you want to portray a fun, playful brand or for line-based illustrations if you want to project a more sophisticated, professional look for your company.

4. Gradients and Vivid Colors

Ok, how about flat design and muted colors? Been there, done that, it’s time to move along and to experiment! 
 

What does this mean? It means that if you want to infuse some personality and dynamism into your UI design in 2017, you’d better get bold and go for vibrant color palettes and gradients.
 

Warning! Make sure that the vivid colors that you’ll opt for compliment and highlight your content. That you don’t sabotage yourself by choosing a color palette that goes against your content!

5. Parallax

Since we’ve already forecast the trend of the „new”, modern magazines-specific layout, parallax is the perfect mechanic to pair it with!
 

The effect where the foreground moves at a faster rate than the background creates the impression of dynamism and of a fluid flowing content that both we and users are addicted to.
 

If you compliment it with text and imagery and with that non-traditional type of layout we were just referring to, the effect of fluidity is guaranteed!
 

Still, be cautious! If you’re not prudent, parallax can tire your users’ eyes!

6. Typography

Bid farewell to once so cutting-edge, now „dusty” sans-serifs fonts and say „hello!” to the new big, bold, artsy looking fonts!
 

In 2017 you’ll get to challenge your creativity not just to put together illustrations, eye-catching minimalist layouts and „humanized”, fun-filled micro-interactions. You’ll get to create your own statement „look at me” typefaces, too, thus adding even more personality to your content!
 

Remember! You can craft uniqueness by simply putting big, beautiful fonts into the center of your stage!

7. Eye-Catching, Full-Screen Video

It’s true that it’s no longer a breakthrough trend, but immersive, visually-appealing videos will become even more prevalent in 2017!
 

Again, as we’ve already mentioned, the human eye gets (vision more than any other human sense) constantly stimulated through dynamic, storytelling videos. They catch attention, they engage and if you pair them with eye-pleasing typography you get: a match made in heaven!

8. Scrolling Down and Long Content

And here’s another not-that-new-anymore trend that will continue to grow in the year to come, too: continuous scrolling!
 

Why is it that this type of viewing has got so popular is pretty obvious: users get to „digest” long content in a fluid, less-disruptive motion.
 

What’s truly interesting is that it has become more and more popular for larger screened devices, too. That’s right, those old strict demarcation lines between mobile and desktop devices type of design have become more and more blurry. 
 

Expect to see more and more websites featuring this type of mechanic on desktop devices, too.
 

Big plus! Continuous scrolling down is a so very versatile mechanic, since it works great on landing pages, on news stories, long-form copy and, again, on all devices, too! 

9. Breaking the Grid

Since we’ve already stressed out that dynamic layout is going to be a big trend in 2017, we couldn’t possibly have left this related forecast out: UI designers will be breaking the rigid grid!
 

Feel free to experiment, in the name of fluidity and dynamics! Play with focal points, layering, motion and depth, since your UI design’s potential will no longer get limited by a grid.
 

Be cautious though!  Never ever should you put form ahead of function! Know your limits, when you’re experimenting breaking from the grid’s tradition, lest you should come up with a UI design less intuitive and rather confusing for your user. You definitely don’t want that!

10. Cards-Based Design

Told you there’s going to be little (close to none) „borders” left between desktop and mobile devices design. Card-based design is just one eloquent example, a trend that will grow more and more influential in 2017!
 

Just think about, let’s say, Pinterest! It’s probably one of the best examples of engaging cards-based design. The secret behind its popularity: it enables designers to structure and display large bits of data on a screen at a single click/tap/scroll. 
 

Not only that you get to organize your information so that it should be easy-to-dig-through for your users, but you can customize your cards, too! 
 

How do you prefer them? Do you want them to spin, to flip or to stack maybe?
 

And now we’ve reached the end of our list of „premonitions” when it comes to 2017’s trends in UI design.

Which one/s of them do you find more „likely to turn into a big hit”, which one/s of them do you consider to be outdated already and what other predictions, that we haven’t added to our list, can you share with us? 

Nov 09 2016
Nov 09

How self-absorbed are you? 

You don't need to answer that, for we all know that each web designer secretly shelters its own overdose of pride (towards his own creativity, his thirst for innovation and so on)... Still, if you're determined to make it in this user-centered digital world, you'd better lose some of that "I burst creativity and I “exhale” innovation and the user can't possibly not admire my... works of art!"

User psychology principles, combined with your own creativity, result in... powerful web design that actually influences (and which is much more than aesthetically pleasing). Curious now to discover how your site users' brains actually work?

The Human Brain Craves Order 

Chaos on your website might look like some sort of a... statement to you, but beware of the temptation of getting too... innovative. You'll then risk to come up with a web design lacking:

  • consistency
  • familiar web design patterns (e.g hamburger menu, account registration, continuous stroll, FAQ, breadcrumbs etc.)

In a few words, make it easy for your user to surf through your interface with the help of a logical hierarchy. 

Also, be sure to remain consistent with the theme and with the design patterns that you've settled for throughout your website.

One more thing: reward your visitor through recognition. Make him feel safe and sort of... proud of himself by placing:

  • your contact information where he's used to find it, based on his previous experiences
  • the call to action button, as well, where he'd normally find it
  • the logo on top, as he's used to seeing it an so on...

Speaking of the “recognition pattern”, what better examples could you think of other than:
 

  • Google, that guides our searches based on our browsing history and past searches
  •  Amazon, that guides us in our future selections based on our previous purchases   

Cement this pattern of recognition in your user-friendly interface! 
 

Still, The Human Brain Can “Digest” a Certain Dose of Surprise

… but only if you're really carefully how you dosage it and how you present it to him.

What does this mean? It means that yes, of course that you're allowed to think outside the box, to get innovative, but you get to break the familiar patterns if and only if:

  1. You've already asked yourself why you're breaking up the standard pattern
     
  2. You're confident that your new one is better (and not just different)
     
  3. You're sure that it's intuitive enough for your user (that it triggers surprise and not just frustration)

The safest way to... incorporate innovation into your web design is by placing the new pattern where the user doesn't expect it to be and by rewarding him, as well (most important), once he will have discovered it. 

You'll thus influence him to embrace the new method of interaction!

The Human Brain Craves... Trustworthiness

User psychology-centered web design revolves around this common principle after all: first you do all the work it takes for winning your customer's trust and only then you can actually expect him to... reward you (by placing an order, by subscribing to your newsletter you name it)

So, is your website trustworthy? You know how to build appealing websites, but do you know how to upgrade them so that they convey trust as well?

  • Familiar design elements (e.g. menu at the top)
  • Visible page headings and titles
  • Detailed contact information at the bottom of the website
  • Consistency in design (e.g using the colors in your logo throughout the entire website, even if just for links or for small icons)
  • Placing your logo throughout your website (thus reinforcing branding and... building a sense of recall in your user's brain)
  • “Less is more”, when it comes to content and... only easy-to-digest, perfectly structured content is king (“concise” is the golden word in the... user-centered online world)

The Human Brain Reacts to Colors

And there's a whole study pointing out each color's array of specific emotions/reactions (that they trigger in the user's brain).

Here are just some of the main color's characteristics, according to user psychology principles applied to web design:

  • Red: it conveys a state of emergency (e.g. Chinese restaurants using red to urge their future customers to... satisfy heir hunger) and alert (see it CNN's news alerts or where it's used to point out sales mark downs)
  • Green: you won't find a more... easily to be processed color than green, nor one conveying the same state of optimism. In a few words: when it doubt... go for green! Being easily associated with nature, it's heavily used for beauty products websites.
  • Blue: it makes the best choice when the main emotion you want to convey to your target audience is... trust. Rely on calm, cool shades of blue when you want to build a website on a solid foundation of trustworthiness, when you want to gain loyalty from your users (giants like Facebook and Twitter have and also lots of banks are using it on their websites). So, blue is trust and openness!
  • Purple: go with the “royal” color if it's a message of... high-brow type of brand/services/products that you want to convey to your users. Many beauty and retail websites are “painted in purple” for this color's calming and soothing effect on the users.
  • White: what's more inviting than white? It helps you put together a clean, pure design, one showcasing certain elements of your work and where do you add that there's much fuss about the almighty “white space”. What does it mean? It means that you should design with these necessary white spaces in mind (spaces on the website with no text or imagery), some “breaths of fresh air” for your user's eyes.
  • Black: it's strong and powerful, but on the other hand... emotionless. Used mostly for luxury products retailers, it can help you trigger the right emotions that you want to if... used wisely (balance is key, after all, no matter what colors you choose)
  • Grey: so modern and professional, yet lacking personality, some might say. 
  • Pink: when you say “pink” you automatically say “feminine”, “fun” and “youthful”. So, you pretty much got the picture which should be your target market when you use lively or soft shades of pink!

How Does User Psychology Dictate Layout, Typography and Content?
 

Layout

We've already strengthened the importance of the “white space” concept, but we're going to... put it into the spotlight once again: use “comfort zones” in your layout (white zones), where your visitor can... rest his/her eyes and his brain if you want to guarantee him a pleasant experience on your website.

Typography

When it comes to fonts (and we do thank CSS3 for giving us access to a brand new world of... friendly fonts), they still divide into 2 major categories, each one of them addressing 2 types of users, 2 types of fields of activity:

  • Serif fonts: the ones conveying professionalism, traditionalism and importance (used on educational websites, newspaper websites...)
  • San serif fonts: preferred by... modern brands, on the cutting edge side (e.g. Google and Apple)
  • Also, balanced spacing is key (put enough space between your letters/paragraphs so that your text doesn't look too dense and so that it shouldn't convey a certain flightiness, either)
     

Content

Basically, it all revolves around structuring your content in order to be easy to be digested...

Now how about turning this empowering user psychology knowledge into the driving force behind your own future persuasive web designs?

Jun 07 2016
Jun 07

The internet is constantly changing and speed is quickly becoming the major metric of progress and a key indicator for website developers. Here are a few new features which can help you speed up your website and reap the rewards of faster internet.

HTTP/2

HTTP/2 was first published in May 2015 and has been supported since the second half of 2015 – HTTP/2 is a new and improved version of the WWW protocol. HTTP/2’s main improvement is the ability to cover multiple requests with a single connection – this improved ability, called multiplexing has the capacity to revolutionize the world of web designers forever. Current techniques used such as Data URIs and sprites won’t be used anymore. HTTP/1 used to be efficient when loading one large image but when it was necessary to load several smaller images the situation changed drastically – it simply wasn’t able to cover multiple concomitant requests. The new version improves this situation and HTTP/2 can handle multiple simultaneous requests with ease.

HTTP/2 compresses headers before requested data is sent, which ultimately simplifies the transport by a great deal. This newer version is also non textual and binary, unlike the previous version – this improves performance by a whopping 50%!

The difficult thing about upgrading to HTTP/2 is not the HTTP itself but the fact that browsers only support it over SSL. So if you want to implement HTTP/2, the first thing you should do is get a SLL certificate. Once you have the SSL certificate, you can implement HTTP/2 on your own if you have administrator rights for your server. Otherwise, it depends on your server hosting or web hosting company.

The SSL Certificate

SSL certificates encrypt the connection between a client and server. Getting your own SSL certificate is not as hard as you think – you can actually get one for free with Let’s Encrypt.

Let’s Encrypt is a relatively new authority when it comes to SSL certificates – their ultimate goal is to eliminate all manual processes required to obtain a certificate. With Let’s Encrypt the whole process is automated and finished in just a couple of minutes. You can also get a certificate through your server hosting company or web hosting provider.

Brotli

Brotli was recently introduced by Google – this new compression algorithm will reduce the size of transported data, effectively increasing the speed of your website. Compared to other compression solutions, Brotli offers a 20 to 25% better compression ratio. As such, webmasters can save up to 40% on HTML files traffic and around 25% on JavaScript and CSS related traffic.

Unfortunately, Brotli is only supported by Firefox and Chrome at the moment but other major browsers will follow soon. Major servers such as Node.js, Apache and Nginx all require a packet installation – there’s no server offering Brotli by default at the moment.

Content Delivery Network

A Content Delivery Network or CDN for short is a set of servers located in different parts all around the world. These servers all contain a replica of your website and all its assets – software, videos, images, etc.

When someone accesses your website, the data is loaded from a server that’s closer to the visitor, thus increasing your website’s loading speed.

Another advantage to CDN systems is the improved reliability of your website – the content is spread around many other servers which means that your hosting server doesn’t have to bare such a large load of traffic. Usually, websites that use a CDN system will load 50% faster compared to regular websites which use only one hosting server.

May 31 2016
May 31

If you are a developer or a web development agency and you’ve just built a web development prototype, you might often find yourself in a bit of a pickle – your users might find it ugly or your web development demo might look very bad. Here are a few "golden" design tips for web development, guidelines on how to make your web development demos look as good as they deserve.

Keep your cool, By Far One of The Most Valuable Design Tips for Web Development

One way of putting it is like this: “Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.”. Jared Spool’s quote is spot on for all design work but it’s especially true when it comes to web development and demos. If you are building a web development demo users shouldn’t really pay attention to the design aspects of it, but its functionality and purpose.

If you’re trying to make your demo more stylistic, you’re actually moving away from your ultimate goal – keep it simple and focus on its functionality. If it doesn’t look as good as you’d want it to be, try removing some web development design elements such as effects, borders or shadows.

Try to avoid complex color palettes

Poor color choices can make or break a design – your color picks should be made during the UI design process, even if it can be tempting to make bold color choices early in the project.

When making the UI wireframe, you’ll begin using monochrome rudimentary lines and shapes. Once you finished that part, you can start adding more details until you reach the color aspects of your project. Here are a few tips when picking your colors:

It’s a good idea to keep your demos monochrome with plenty of greys until you’re ready to color it up properly.

Another tip is to avoid fully saturated colors, especially when your demo will be viewed on an illuminated screen as this can lead to discomfort for your users.

In the same time, you should avoid black and white due to the same reasons as previously stated – sticking to shades of color will make your users less tired and improve UX.

Add color to your monochrome design but do it just one at a time – each color can be a distraction to your users. Pro tip: you can use a range of saturations of just one color – this will offer plenty of variety and you basically can’t go wrong.

Simple typography works best

If you’re building a web development prototype or a demo there’s no need to for fancy fonts but here are a few pointers on typography:

If you don’t know what to pick, sans-serif works best in all situations. Serif fonts usually have details where strokes terminate. These fonts can help you bring a little bit of personality to your design and at the same time make your text easier to read. While serif fonts have some advantages, they’re not usually used for UI design since at smaller sizes they display varied stroke weights.

Other fonts you should take a look at are humanist droid sans, used by Google in their Android interface, noto, and roboto. If you’re an Apple fan you can go for San Francisco or Neue Helvetica. Firefox OS uses Fira Sans. All these are sans-serif fonts which you can use for your project.

Sometimes characters can be difficult to distinguish – combinations such as 9g, 6b, 2Z, 5S, I11 or 8B can be very confusing for users, depending on the font chosen. It’s best to first test them out in order to see readability and if that’s fine keep using it, if not, do some changes.

White space works wonders

Functional space or white space helps web development designers in many different ways – this space reduces your visitor eye strain, can help draw attention to particular areas of your page and creates a general sense of balance. Cramped UI will make users tired and uncomfortable but keep in mind that “less is more” works perfectly at this stage.

More breathing space will offer your users a breather as well – boosting line heights, margins and plenty of padding works great. And this is one of those priceless design tips for web development to put on top of your "must-do" list.Spread everything out on your design and it will look much better.

Spacing needs to be consistent throughout your design – consistency is the key to harmony and rhythm.

Improve your web development workflow

Foundation and Bootstrap can be a great help to developers even though they receive criticism for making websites look too generic – these tools are perfect for prototypes. Foundation and Bootstrap actually make the right choices on your behalf, leaving you with ample time to focus on other aspects of your project.

Spare yourself the extra work and just grab templates from Foundation or Bootstrap which you can customize to fit your style. Most of these templates are very comprehensive, so you’ll definitely have all the pieces you need to get going.

Conclusions

By following these design tips for web development you’ll smooth any problems you may encounter when building a prototype or demo.

May 11 2016
May 11

Bootstrap is a giant framework with almost everything you could need for building a site or web app interface. Bootstrap is changing, version four is in alpha release. Naturally, we’re just as curious to know what’s different, so I dived into the documentation to find out. Keep in mind, though, that this is an alpha release. It cannot be considered feature-complete. It could radically change.

From Less to Sass

This is obviously the biggest and most important change. Heck, you’ve probably already heard of it. People have gone so far as to procliam the “death of Less” due to this switchover. Well, I don’t know if anything’s gone and died because the Bootstrap team decided to do things differently. It is, however, a monumental undertaking, and it will drastically change how people use and customize the framework. Sass is just generally more developer-friendly, with wider support, a bigger community, and yes, more features. It can do some things that, right now, Less just can’t. I say this with sadness. I’ve never made any secret of my love for Less; but it seems that the community at large has spoken, and declared that Sass is just, well, better.

New features

Figures

Figures are for showcasing single media objects (usually images), with an optional caption. Support for Bootstrap’s various helper classes is factored in, so you can align and style the image (and its caption) however you like. Images placed in a figure element, given the right classes, become responsive automatically.

Flexbox

Now, due to lack of support, Flexbox has not replaced the regular grid system. However, it is available to anyone who wants it. Change a variable, recompile the Sass, and boom! You now have a new, modern layout system.

Cards

Okay, we’ve been seeing the proliferation of card-based design for some time now. Bootstrap now has a specific component for them, with myriad layout options. You can group them up, keep them separate, add headers, footers, buttons, images, and overlay text on those images. Wells, thumbnails, and panels all get replaced by the new card component, so in that way, Bootstrap is a bit more streamlined.

Reboot: new customization variables

Bootstrap has historically been a bit of a pain to customize, aesthetically speaking: There were a lot of styles to over-write, and individual variables to customize if you wanted to make your Bootstrap-based site look like anything other than a Bootstrap-based site. Heck, remember all of those customization apps made just for changing Boostrap’s look? Well the developers have heard your prayers and Github issues. Change all of the transition animations at once, disable rounded corners, change all the colors, or anything else you like with one big bunch of Sass variables. It’s all there in the Reboot module, and it’s about time. We can expect some more original-looking designs now, with any luck.

Rem and em units

That’s right, we’re moving away from pixels, to these relational units of measurement. This ties into the whole customization thing, too. Want a tighter design with thinner margins? Change the main text size, maybe a couple of variables, and boom. Everything looks “thinner”.

Stuff that’s basically the same

As you might expect, everything got re-written and upgraded (because of the Sass move). But still, the basic usage for most of these components will be the same. Do double-check the documentation, though. Certain things will have changed. Take the grid, for example: they added an “extra-large” tier to the grid system, presumably for those ridiculously huge retina screens that we’re seeing these days. · Alerts · Breadcrumb · Button dropdown · Button group · Buttons · Card · Carousel · Code · Collapse · Dropdowns · Forms · Images · Input group · Jumbotron · Label · List group · Modal · Navbar · Navs · Pagination · Popovers · Progress · Reboot · Scrollspy · Tables · The Grid · Tooltips · Typography

Other updates

No more IE8 support

It’s about time. There’s not a whole lot more to say about that. Not much will change for most of us. Anybody who really, really needs to support legacy browsers will have to use an older version of Bootstrap.

All JavaScript plugins have been re-written

The proliferation of ES6 means that a lot of people are re-writing their JavaScript. This means performance improvements for all, the exodus of older browsers, and programmers having fun with new toys. It’s a win-win.

Overall impressions

Where Foundation is going “smaller” and more streamlined with specialized frameworks, Bootstrap seems to want it all. They have done a lot of work to improve performance, and streamline what they could, but Bootstrap still aims to do just about everything you can think of. Mind you, anyone can configure their version of the framework however they like by dropping unnecessary modules, or adding new ones. It’s not a big deal. Still, there’s definitely a one-size-fits-all mindset in play. And that can be a good thing. There are large, wide-scope projects out there that need the room to expand. In any case, Bootstrap will continue to satisfy its users’ needs. It’s going to be mostly the same, but better.
Source: http://www.developerdrive.com

Apr 28 2016
Apr 28

Every expert from every field has his or her own tools of the trade and web development is no different – web development tools are one of the most important factors to every project and these tools could mean the difference between finishing your project on time or passing multiple deadlines. Luckily enough, plenty of top web development tools are available for just about every platform. Here is our list of OS X apps which you should include in your web development tools box:

Browsers for web development

One of the most important tools for web development is a browser – you’ll need to view your website after you created it right? But it’s not so simple – you will need to test your website for many browser versions, including beta and nightly builds. With that taken into consideration, you’ll most likely need Opera Next, Chromium, Chrome Canary, Firefox Aurora, and Firefox Nightly.

Koala

Koala, apart from its cute name, is another nifty web development tool which is used to compile CoffeeScript, Compass, Sass, and LESS into a browser-compliant format. If you’re using any of these techs, Koala is definitely a must.

Anvil for web development

Anvil is an interesting free app which allows web developers to create .dev domains. You’ll see it as a new icon in the OS X menu bar and you can turn it on or off, create domains or add your projects to it. If you’re looking for a tiny web development tool to manage or work on your local websites with, Anvil is perfect.

Keka

When handling multiple files, you need a reliable compression service to help you along. Most web developers may use ortar, rar or zip but Mac has its own built-in feature to extract and manage these formats – this service is rather limited so you’re better off with Keka. Keka is a free open source OS X app for file compression and extraction.

Keka supports zip, rar, ortar, ISO, DMG, Tar, Gzip, 7z and it can extract to PAX, CAB, EXE and RAR formats. Keka allows you to split compressed files into different parts of specified sizes, apply password restrictions or automatically delete source files after extraction or compression.

Web development & Web Sharing

Since Apple removed the Web Sharing option from the OS X system preference, you might want to install the Web Sharing plugin. This little plugin will allow you to host local websites under the local host address. Once you install it you’ll be able to see a new panel in System Preferences – here you’ll be able to switch web sharing off or on.

File compression, One of The Very Top Web Development Tools for Mac OS X

We talked about Keka before but there are two ways you can use it to compress files. You can either download this small web development tool and install the services contextual menu or you can drag and drop your files directly into the Keka app window.

Sequel Pro

MySQL is one of the most popular databases in the world – plenty of websites rely on MySQL for storing and managing databases. If you are using OS X, Sequel Pro is a must-have for web development. It’s a native OS X app built in Cocoa and it also features a nice and friendly GUI. With Sequel Pro you can create, filter databases, import, export, remove, create users and execute MySQL queries.

The iPhone Emulator

All web developers need to take mobile users into account when building their websites, hence the need for a web development tool that can be used to test websites for specific platforms. Devs can use physical tablets or phones or they can go for the easier option – a simulator like iPhone Simulator. All you need to do is just install Xcode from the AppStore and you’re done – you have another web development tool in your little toolbox.

Icons8

If you’re looking to use icons, Icons8 is one of the top web development tools that you can use. Just install Icons8 and you’ll be able to search through its over 2800 collections of icons. Once you find something you like, you’ll be able to copy it to Finder, Xcode or Photoshop.

Github and SourceTree

Even if you’re building a small website or a presentation website, you’ll need a control version system to track your revisions and changes to the project’s code. Github is the most popular service for version control and you can install it on OS X as well. SourceTree is another mentionable service – both of these services are the backbone of any respectable web development agency.

Poedit

Poedit is the best web development tool you can use for translating websites into multiple languages. Not only that but you can translate plugins and Wordpress Themes as well with this little app.

Automator

Automator is a web development tool that’s pre-installed with OS X. This little app allows users to automate tasks such as cropping multiple images at once, creating thumbnail images, changing file extensions and renaming files in batch.

Dash

Dash collects documentation for a lot of the popular programming languages, including LESS, Sass, jQUery, CSS3 and HTML5. Users can search through code snippets, functions, syntax, and other valuable information.

Apr 07 2016
Apr 07

I’m not a fan of color theory. But the theory has always eluded me, and, truthfully, I’ve never found it useful when trying to use color in my projects. Somewhat ironically, I’ve been finding that the better I get at choosing and using color, the better I become in the theory behind it. Of course, that doesn’t really help when you’re just starting out, does it? That’s why, in this article, you won’t see a single color wheel. Instead I’m going to show you a simple color workflow that you can use in your next web project. You will, of course, subconsciously be learning the theory along the way. So, I recommend coming back in a few months time and giving the theory another go.

Choosing A Base Color

We can see something like 10 million colors at any given time, that’s a huge amount of colors. And out of those, we need to choose one — just one color — to be the base of our website, for our brand. Everything will stem from this one color, so it’s kind of important.

How to choose a starting color

Now, picking a color out of the blue (pun intentional) would be quite easy, but we’re not going to do that. For any project in which you’re having contact with clients, you should try to justify as many of your choices as you can. If you don’t, it’ll be a case of your favorite color versus their favorite color. They’re the client. They’re paying you. They will win. Don’t think too much about it. Just make sure you have some kind of reasoning behind your color choice (and every choice, for that matter). It’ll make you look good.

Tips on choosing a starting color

• Use what you have. If the client has a logo with an established color, that will usually be your starting color. • Eliminate your competitors’ colors. If one of your main competitors has a strong brand color, don’t copy it if you can help it. Find your competitors’ colors to eliminate them from your own color schemes. • Think about your target audience. The colors of a website for a pizza shop would sure be very different from the colors for a kids club. Think about who will be using the website and how you want them to feel (excited, serious, taken care of, etc.). • But don’t default to stereotypes. If you’re designing a website for young girls, you don’t have to use pink. Avoid clichés to gain credibility. • Play a word game. If you’re struggling, write down any words that you associate with the client’s business. This list should give you some ideas for colors. If you’re really struggling, hop on any website about color meanings and see which fits best. You should now have a base color in mind for the design. It should be something simple like red, green, blue, yellow or pink. We’ll get to the exact shade next. Let’s say you choose blue.

Choosing A (Nice) Base Color

Instead of messing about with Photoshop’s color-picker to find a nice shade of blue, we’re going to steal like an artist and use other people’s design choices to help us out. First, go to Dribbble.com and Designspiration.com and click on the “Colors” link in both. You can use this as the next step to find the right shade of blue. For a fresh and energetic brand, go for one of the lighter, brighter blues (one of the top five options). For something a bit more corporate and serious, the bottom five should be a better fit. Choose a shade from each website to see actual designs that use that color. You can then use any of CSS-Tricks’ color-picking techniques to grab the exact colors right in the browser. Not only will you see different versions of your base color, but you will easily see colors that match.

Creating A Strong Color Palette

All right, you should now have a HEX value for your color. Now we’re going to make a palette out of that color. And it’s easier than you think. The problem with this kind of color palette is that applying it to a real design isn’t very practical. Most palettes have way more colors than you’d ever need, especially considering that we need to add an average of three neutral colors to every scheme: • white, • dark gray, • light gray (optional). If you tried to add five or six colors to the neutrals, it would be a mess. All you really need are two colors: • a base color, • an accent color (we’ll get to this in a jiffy). If you can create a website using only these five colors, you’ll get a much better result than if you were to go overboard with complementaries, split-complementaries, triads and the rest.

Finding your accent

Your accent color will be used in very small amounts on your website, usually as a call to action. So, it needs to stand out. Your next step is to go to Paletton.com and type your HEX code into the color box. From here, you can find your accent in two ways. First, you could click the “Add Complementary”! That yellow there? That’s your accent. Alternatively, if you don’t like the color it has generated, you can click around the icons at the top to find something more suitable. Personally, I quite like the red that comes up under the triad icon, so I’m going to use that for our scheme. There is, of course, science and stuff behind what Paletton is doing; but, for now, let’s put a pin on it. You’ll learn the theory a bit later, and all will become clear. So, below is our color scheme as it is now. We’ve got a nice base color and a shot of an accent. Let’s add white to the mix, because white is always good. All that’s missing now are some grays.

Adding the gray

For most of my web projects, I find having two shades of gray to be infinitely useful — one dark, one light. You’ll use them a lot. The dark is usually used for text, and the light for when you need subtle differentiation against all that white (usually for backgrounds). You can choose your grays in one of two ways: • You could use Dribbble.com and Designspiration.com again to find a nice gray from your previous results that matches your base color. But usually it’s easier to type blue website in the search bar, which will show more grays in the results. • If you have Photoshop or the like, you could use Erica Schoonmaker’s technique to harmonize your grays with the base color.

Creating harmonious grays

To get our shiny new harmonious grays using Erica’s method, we’ll start by picking two default grays out of a hat. Then, follow these steps: 1. Create two shapes and fill them with #4b4b4b and #f5f5f5. 2. Insert a color fill layer above your two shapes. 3. Change that fill to your base color. 4. Set the blending mode to overlay, and bring the opacity right down to between 5 and 40% (in the example below, it’s set at 40%). 5. Use the color picker and copy your new values. I should point out that this method works exceptionally well when your overlay color is blue. For any other color, you will want to either bring the opacity right down to 5 to 10% or stick with your original grays. Our color scheme is complete.

Applying Your Color Scheme

Now that we’ve got our color scheme, it’s time to apply it. This is a whole other article unto itself. Tip: If you struggle with color, a good trick is to create your website layout in grayscale first. Figure out the hierarchy, and then experiment with the color later. Our accent, red, stands out beautifully against the base color. This is used in very small areas, for buttons and in the icons. The less you use this color, the more it will stand out. The dark gray is used for the text, logo and icon outlines. (Don’t skip putting the colors in your icons. It’s a small detail but makes a big difference.) The white and light gray form the background. The light gray doesn’t have to be here at all, but I find it is another small detail that really makes a website look polished.

Conclusion

As you can see, we really don’t need much more than the palette we’ve created today. But that doesn’t mean you are limited to these colors! As you’re designing, you might decide it’s appropriate to introduce some more colors to your palette. That’s totally fine! As long as you’re attentive, you can use the steps above to find more colors that work with your scheme. The beauty of this is that the more you do it, the better you’ll become at choosing colors. You’ll get to know what works together and what doesn’t. Sometimes, the method above will yield results that are less than desirable, so feel free to tweak things. Play around and have fun learning color theory, without the theory!
Source: https://www.smashingmagazine.com

Mar 09 2016
Mar 09

The World Wide Web Consortium (W3C) is putting cybersecurity on its radar. It has announced that it is launching a new working group designed to standardize Web authentication and provide a more secure and flexible solution to password-based logins.

“Every other week you see news of a password leak or data leak from another major site, and as a user of the Web, every place you go you are asked to log in with a username and password,” said Wendy Seltzer, technology and society domain lead for the W3C. “That is difficult to manage on the user side, and not the best we can do in security.”

The new Web Authentication Working Group will work on creating a Web-wide standard that provides strong authentication without relying on a password. According to the organization, even strong passwords are susceptible to phishing attacks, database breaches and other hack attacks.

“When strong authentication is easy to deploy, we make the Web safer for daily use, personal and commercial,” said Tim Berners-Lee, director of the W3C. “With the scope and frequency of attacks increasing, it is imperative for W3C to develop new standards and best practices for increased security on the Web.” The W3C’s work will be supplemented with the FIDO Alliance’s FIDO 2.0 Web APIs. According to Seltzer, FIDO has already had success developing its own multi-factor authentication, and its APIs will help the working group ensure standards-based strong authentication across all browsers and related infrastructure. “Our mission is to revolutionize authentication on the Web through the development and global adoption of technical specifications that supplants the world’s dependency on passwords with interoperable strong authentication,” said Brett McDowell, executive director of the FIDO Alliance.

“With W3C’s acceptance of the FIDO 2.0 submission, and the chartering of this new Web Authentication Working Group, we are well on our way to accomplishing that mission.” In addition, the working group will complement prior work on the Web Cryptography API and Web application security specifications. “We’ve seen much better authentication methods than passwords, yet too many websites still use password-based logins,” said Seltzer.

“Standard Web APIs will make consistent implementations work across the Web ecosystem. The new approach will replace passwords with more secure ways of logging into websites, such as using a USB key or activating a smartphone. Strong authentication is useful to any Web application that wants to maintain an ongoing relationship with users.” The Web Authentication Working Group’s first meeting will take place on March 4 in San Francisco.

Source: http://sdtimes.com

Jun 02 2015
Jun 02

In April 2015, NASA unveiled a brand new look and user experience for NASA.gov. This release revealed a site modernized to 1) work across all devices and screen sizes (responsive web design), 2) eliminate visual clutter, and 3) highlight the continuous flow of news updates, images, and videos.

With its latest site version, NASA—already an established leader in the digital space—has reached even higher heights by being one of the first federal sites to use a “headless” Drupal approach. Though this model was used when the site was initially migrated to Drupal in 2013, this most recent deployment rounded out the endeavor by using the Services module to provide a REST interface, and ember.js for the client-side, front-end framework.

Implementing a “headless” Drupal approach prepares NASA for the future of content management systems (CMS) by:

  1. Leveraging the strength and flexibility of Drupal’s back-end to easily architect content models and ingest content from other sources. As examples:

  • Our team created the concept of an “ubernode”, a content type which homogenizes fields across historically varied content types (e.g., features, images, press releases, etc.). Implementing an “ubernode” enables easy integration of content in web services feeds, allowing developers to seamlessly pull multiple content types into a single, “latest news” feed. This approach also provides a foundation for the agency to truly embrace the “Create Once, Publish Everywhere” philosophy of content development and syndication to multiple channels, including mobile applications, GovDelivery, iTunes, and other third party applications.

  • Additionally, the team harnessed Drupal’s power to integrate with other content stores and applications, successfully ingesting content from blogs.nasa.gov, svs.gsfc.nasa.gov, earthobservatory.nasa.gov, www.spc.noaa.gov, etc., and aggregating the sourced content for publication.

  1. Optimizing the front-end by building with a client-side, front-end framework, as opposed to a theme. For this task, our team chose ember.js, distinguished by both its maturity as a framework and its emphasis of convention over configuration. Ember embraces model-view-controller (MVC), and also excels at performance by batching updates to the document object model (DOM) and bindings.

In another stride toward maximizing “Headless” Drupal’s massive potential, we configured the site so that JSON feed records are published to an Amazon S3 bucket as an origin for a content delivery network (CDN), ultimately allowing for a high-security, high-performance, and highly available site.

Below is an example of how the technology stack which we implemented works:

Using ember.js, the NASA.gov home page requests a list of nodes of the latest content to display. Drupal provides this list as a JSON feed of nodes:

Ember then retrieves specific content for each node. Again, Drupal provides this content as a JSON response stored on Amazon S3:

Finally, Ember distributes these results into the individual items for the home page:

The result? A NASA.gov architected for the future. It is worth noting that upgrading to Drupal 8 can be done without reconfiguring the ember front-end. Further, migrating to another front-end framework (such as Angular or Backbone) does not require modification of the Drupal CMS.

Sep 22 2013
Sep 22

Drupal LogoSorry Drupal, but it’s time we broke up. I’d like to say it’s not you, it’s me, but that would be lying. I’ve left you for the warm, comfortable, welcoming embrace of WordPress.

This blog has been running on Drupal since January 2007. I started it out on Drupal 5, and systematically upgraded through versions 6 and 7. As a content management system, I was intrigued by the possibility of having different content types on one site and theming them as I saw fit with a combination of Views and CSS.

At the time, I genuinely felt that Drupal was an up-and-coming content management system. Its modularity seemed to have infinite possibilities and appealed to the site builder in me. However, over time the flaws in the system started to become apparent. Here are a few things that left me cold:

  • Third party modules: With each major new version of Drupal, it would take an age for many of the popular third party modules to be updated. The lag in this department made it difficult to keep the core CMS up-to-date, which was massively frustrating. And don’t get me started on some of the modules whose developers simply abandoned, leaving many users high and dry.
  • No default WYSIWYG editor: Coming from WordPress, this always struck me as a strange decision. Drupal didn’t come bundled with a default WYSIWYG editor, the logic being that it would remain interoperable with as many as possible to give users a wider range of choices. Fair enough, but WordPress manages to use a standard editor that supports keyboard shortcuts and customisation and means that a WordPress interface is familiar and comfortable no matter what site you’re working on.
  • No built-in media management: This may have changed with Drupal 8, I can’t say for sure. But Drupal – when I first installed it – had no support for image uploads or any media management whatsoever. In WordPress, you can hit the media library and reuse images you’ve already uploaded. You can easily edit meta data and insert content according to your needs. And they make it incredibly easy to embed YouTube videos – just paste in the URL and it’ll handle the conversion process.
  • Writing became a chore: If you look at the content I’ve posted on this blog, you’ll see that I’ve posted very little in the last couple of years. One of the main reasons for this is that publishing with Drupal is an awful experience. For a start, you spend more time tinkering with the build than actually creating content. The issues like media management, difficulty of inserting media into posts and formatting your content are just too time consuming. Whereas, with WordPress, I can fire up the editor and be drafting away, dropping in images and videos, having my content autosaved and using the pre-existing taxonomies, etc. It’s just seamless and the CMS doesn’t get in the way of writing in the same way that Drupal does.

Oh, and I can even see a word count as I type.

Look, this isn’t meant to bash Drupal. It’s a fine system, and there are some remarkable, dedicated people behind it. But it’s just too clunky for me. And I have different objectives now and much less time to spend fiddling with a CMS. But I’m still boggled by some of the decisions that have gone into that system – they’ve tried too hard to keep it open and like the LEGO kit of content management systems. Fine if you like tinkering, but not conducive to writing good content.

WordPress logoIn order to migrate to WordPress, I grabbed my Drupal 7 database and dumped it onto my MacBook’s local MAMP server. After a couple of attempts, I was able to migrate the data across to WordPress. There was a little bit of data ‘massaging’ required to get everything just right, but the process actually went rather well. I’d hate to have to migrate a larger site though!

Once I’d tidied up the data using WordPress locally, I exported the data as WXR and imported it into a multisite WordPress install I keep for my older/abandoned websites. I’ve re-uploaded all my image data, and also redirected the links to my most popular posts. Everything’s working beautifully, and the site immediately benefitted from the caching the multisite install of W3 Total Cache offers.

I feel like I can finally start writing on this blog again. I’ve had ideas for articles I’ve wanted to share here for a long time, so you may be seeing more things appear here in the next few weeks. For the moment, I’m running with the stock Twenty Thirteen theme, which is nicely mobile optimised, but maybe I’ll do some theme development of my own soon.

It’s also highly possible that I’ll migrate a few other sites across to WordPress from Drupal.

PAGE 2

Drupal LogoAfter a seriously long wait, Drupal 6 has been released to the web. By coincidence, I checked for it yesterday, as I’ve been watching the Drupal site for a while. I’ve done a quick upgrade (made a major screw-up along the way), and upgraded some modules.

All in all, this site isn’t too heavy on contributed modules. I don’t even use pathauto here, so upgrading was relatively straightforward.

My big screw-up was that I put the site into maintenance mode to prepare for the upgrade. Then I logged out to verify that maintenance mode had worked. Big mistake. When the site’s in maintenance mode, there’s no obvious way to log back in as the admin.

Thankfully, a quick search reveals that by accessing yoursite.com/user, you can log in again. Phew!

Anyway, my big test at the moment is to confirm if Windows Live Writer and Drupal 6 will work together. This post has been drafted in Live Writer, so I’m intrigued to see what happens when I hit that post button…

Update: Someone has sponsored a port of the Drupal 5 blog API across to Drupal 6. It’s now available as a module to download. I’ve just tested it against this blog and it works perfectly.

PAGE 3

Drupal 7 image

Oh, hello! If you’re reading this, it’s the first entry I’ve posted to my blog since upgrading the site to Drupal 7!

A major version upgrade like this isn’t something to be taken lightly. I’ve had to drop certain modules along the way and make a full backup of my site’s database and files. There’s a certain kind of anxiety one experiences when doing a major version Drupal upgrade, so I thought I would share my upgrade process with others. Other Drupal users are invited to share their experience and tips on upgrading at the end of the post!

So you want to upgrade to Drupal 7? Well, here’s how I went about it:

1. Inventory your third party modules

Take stock of third party modules in use on your site. In its Drupal 6 incarnation, I was using CCK, Administration Menu, Boost, Date/Time (Date popup), Geshi Filter, ImageFieldl Assist, ImageAPI/ImageCache, Backup/Migrate, Feedburner, Global Redirect, IMCE, Integrated Metatags, Mollom, Pathauto, Read More Link, Scheduler, Site Verification, Token, Anti Spam, Google Analytics, Views, jQuery UI, WYSIWYG, XML Sitemaps.

A bit of preparation work will save you time in the long run: CCK is largely integrated into Drupal core now, so there’s no need to install it for Drupal 7. The Feedburner module seems to be dead in the water. Integrated Metatags has been replaced with the Drupal Metatag module. The list goes on. You need to check this sort of thing out in advance, because if there’s a critical module on your site that hasn’t been ported to Drupal 7 yet, it’s a bit of a deal breaker. Lesson? Do your prep work!

2. Backup your database

I used the Backup/Migrate Module to backup my site’s database and downloaded it to my hard drive. Worth mentioning that at this point you should consider the site frozen and not be adding any new content or files to it.

3. Backup your CMS files

I also take a full backup of the entire Drupal installation at this point. You can either FTP your files locally, sync them over SSH with the rsync command or just zip up the entire Drupal installation and download the tar.gz file.

I literally tarred up my entire Drupal root and downloaded the tarball, which left me with a reliable database and directory structure in case the upgrade was a disaster and I had to roll back.

4. Maintenance mode

Right, it’s time to start making changes, so pop your site into maintenance mode so that visitors know the site is temporarily unavailable.

5. Disable third party modules and themes

At this point, you want to disable all third party themes and set your theme to one of the Drupal defaults like Garland. This reduces the risk of upgrade problems associated with third party code and brings your site back to a basic Drupal install.

6. Remove the old Drupal installation

Next, I create a subfolder under my ‘sites’ directory and move all the Drupal 6 themes and third party modules from sites/*/modules in there. The D6 versions will be incompatible with Drupal 7 anyway, but these serve as a reminder of which modules need to be reinstalled at the end of the upgrade process.

Once I’ve done this, I create a folder in the site root and move the old Drupal installation in there. This is pretty much everything except the ‘site’ and ‘files’ folders, which contain the bulk of the user-generated content. Again, this is mostly a convenient failsafe in case we need to roll back, and it also ensures a clean Drupal 7 installation. It would be incredibly messy to just overwrite the old Drupal 6 with the new files.

7. Download and unpack Drupal 7 files

Download and unpackage the Drupal 7 files. Whatever your preferred method – FTP the files up to your host, which. An be slow, or my favourite technique: using SSH and downloading and extracting the tarball.

wget http://ftp.drupal.org/files/projects/drupal-7.10.tar.gz
tar xfz drupal-7.10.tar.gz
cd drupal-7.10/
cp –rpf * ../
rm -rf ./drupal-7.10/
rm -f drupal-7.10.tar.gz

The above procedure downloads the latest version of Drupal (7.10 at the time of writing this), extracts it to a subfolder in my web root. I then jump into the Drupal-7.10 directory and copy all the files to the web root. The last two commands are simply cleanup to remove the archive and extracted files.

8. Begin the upgrade process

With all your Drupal 7 files in place, it’s time to visit your site and begin the upgrade process. I found by hitting the homepage, it automatically threw an alert about the ‘existing Drupal site’ and gave a link to run the upgrade script.

However, if there are any lingering issues that need addressed before you can upgrade, you’ll see a diagnostic page detailing what needs fixed before you can continue. Once the upgrade is finished you should be able to see your site content. Breathe a sigh of relief that you’ve got this far and haven’t lost your content!

9. Reinstall and update modules

Now begins the laborious process of downloading, enabling and upgrading the third party modules. I found drush to be essential here. I’d download one or two modules at a time, enable them and then run any attendant database updates. It’s as easy as this (probably easier if you’re a Drush ninja!):

drush dl token pathauto
drush en token pathauto
drush updatedb

I worked through my list of D6 modules and installed the Drupal 7 equivalents. I found that installing the Drupal 7 version of a module meant running database updates, which is why the updatedb command is included here.

It’s probably a good idea to check the functionality of each module as you go along to ensure it’s working as expected and that there aren’t any new settings that require your attention. Also worth checking your Drupal error log and status reports in case you need to address any compatibility issues.

10. Install a Drupal 7 compatible theme

Before I began the upgrade process, I gave my Gerrybot theme a complete overhaul to work with Drupal 7. It’s not quite ready for public use yet – there are a few things I need to tidy up – but I’m hoping to release a version of the theme for other Drupal users shortly.

Hint: If there are any Drupal theming folks who would like to help tidy up the code for public use, please get in touch with me!

Over to you…

So, that’s my Drupal 7 upgrade process. Hopefully others will find it helpful, and hopefully other Drupal experts will take advantage of the comments area to talk about their own process for upgrading from Drupal 6 to 7. If there’s a more streamlined method, I’d certainly love to hear it!

Dec 11 2012
Dec 11

Drupal 8, originally scheduled for an August 2013 release, will from all appearances not just be another version upgrade. There will be extensive improvements on issues that matter to all types of Drupal users. That last sentence doesn't do it justice. Really Drupal 8 will be a quantum leap among Content Management Systems and Web-Application Frameworks.

Who will Drupal 8 benefit the most, users or developers? This is hard to quantify, but so far it seems that the end user will feel the biggest shift. The most dramatic changes for end users will be a simplified interface for content modification, and improved mobile compatibility. But these are not the only enhancements that are underway for what is undoubtedly the most ambitious Drupal version to date.


If you can post to Facebook, You can post to Drupal 8

Posting content will be as easy as it is on popular social networking sites. If you can post to Facebook, you will be able to post to Drupal without any additional training. The usability for site managers is also markedly improved. This is all due mainly to the Spark distribution work which allows in-place editing, see http://drupal.org/project/spark. The goal is that content creators, site managers and end users will have the option to just click what they want to edit on a page, like the title, text, or images and change them directly without having to switch to an administrative editing interface. I know that end users have instinctively tried to edit content just by clicking on blocks of text when given Drupal without any training. This update will make the process of seeing what your changes look like as you compose feel entirely natural.


Mobile

Drupal 8 is setup for mobile in multiple ways. The new Drupal is being built so that from the moment of first use, you will be able to interact with your site on both traditional and mobile displays. Additionally, work is underway towards “responsive layouts” which allow site creators to place regions of text, graphics and other elements so that everything appears readable on mobile devices and your laptop, auto adjusting size and orientation to whatever you are using at the time. Mobile apps will also be able to tie into Drupal 8.

Say you feel like logging into your Drupal site and checking on new comment activity, but you only have your mobile phone. With Drupal 8 you'll be able to do that with an interface that works well with your mobile device; no scrolling around and trying to enlarge text. While much of this is possible with Drupal 7 with extra setup beforehand, we're going to see this become the standard on Drupal 8.


HTML5 and High-Performance

Drupal 8 does HTML5, the shiny new version of Hyper Text Markup Language that supports video, audio, better forms, 2D/3D graphics and animation. That's just the start of the great things HTML5 offers and it's with Drupal 8 it's already built in, link: http://www.switched.com/2010/05/11/what-is-html5-and-why-should-you-care.

Major work is going towards performance improvements in Drupal 8, we'll be blogging later to explain how. To generate pages suitable for a variety of devices it is important for Drupal 8 to be quick, and major progress is already underway to enhance speed, mainly on the “front-end,” and that means on your end-user device.

Lastly, efforts are being made to include back-end wizardry which allows custom apps to connect to the Drupal database in standardized ways using new and improved Web-Services. Web Services are how different computer devices communicate with each other over the Internet. When you visit somewhere else in the world it is good to speak the language, in this case the computer's language. Improved Web Services allow your Drupal 8 site to communicate better with the world, that is other applications, be they mobile or most anything else which speaks these standardized data languages.


Other Initiatives

The other main initiatives, overlooking all the many tweaks and interface improvements are: multilingual, design, and configuration management (and the Views module group is in core).

If you have a multilingual site, or more to the point, want a multilingual site, Drupal 8 now includes the language systems in core. So adding languages and translations is more like installing or updating modules.

Designers will also see big changes with the way themes are made using Drupal 8, and given the mobile initiatives this is imperative. The goal here is to make design (theming) work better. The end result is cleaner and more elegant web design.

There will also be improvements in configuration management. When creating sites, most developers have multiple installations of the site, development, staging and production, or minimally development and production. In Drupal 8 configuration management makes it easier and methodical to maintain these separate installations while simplifying deployment of new code, updates and alterations. Besides the time saved for developers, these procedural improvements will benefit site owners because their site can be better maintained, more stable, and more secure.

Recently the Views module has been added to core. If you don't know what Views is in Drupal, suffice it to say that now, with a default Drupal 8 installation, site-builders will be able to make complex web applications, similar to many of the popular ones we know and love, like Twitter for instance, without adding additional external modules (of course you may end up adding just a few of the thousands of available modules to add some cool functionality). Yep, it's excellent.

That's a long list so far and that's just the beginning. Drupal 8 has even more in store for all of us due the large and growing community of ambitious and hard working contributors.


This blog entry is based on an informal presentation and post-discussions about Drupal 8 given by Darrell Ulm at Drupal Camp Ohio 2012.

Jul 30 2011
Jul 30

Drupal has no native CRM system. But it should have one. Drupal CRM (known by various other names including DropCRM and DCRM) is the attempt to rectify this situation, and at DrupalCon London this year, I propose that the very first code is to be created and used as a springboard to kickstart development work.

Update: the original post was not too clear on explaining the structure of the CRM that has loosely been decided so far, and what sort of scope the sprint is intending to have, so I have attempted to clarify this a little!

The problem thus far is that although there has been a lot of discussion on the subject of a Drupal CRM and even a dedicated website put in place, momentum has still not yet built to the point where the community is writing code.

What is it?

DrupalCon London is obviously a great place to get things going, and Friday 26th August is code sprint day. I propose that we pledge to bring the first code to the DrupalCon table on this day, collaboratively, so that by the end of DrupalCon, we have enough momentum to sustain the development of this ambitious module.

Some will see this as a hypocritical move on my part, since Tigerfish will not actually be at DrupalCon beyond Thursday 25th August, and will not actually be at the code sprint. We are a small development company who don't have the resources to dedicate to more than 3 days of DrupalCon (although we intend to make the most of our time there!) so regrettably we're back to business as usual on the Friday.

Can you be an organiser?

That said, I will personally be participating in the code sprint, if it goes ahead, by working remotely, but it does mean that there is the need for a local organiser; someone to arrange the code sprint and make sure everyone has what they need.

If you are willing to organise the code sprint on Friday 26th August, please express your interest in the comments or by using the contact form on this site. This won't be particularly difficult work, or even require that you have an intimate knowledge of PHP or Drupal itself, but it will need someone to act as a focal point at the conference. This is a really exciting role, so do give it some serious thought!

Objectives

"Mighty oaks from little acorns grow."

The aim is straightforward:

  • Create fundamental API functions crm_contact_select(), crm_contact_update() and crm_contact_delete().
  • Work only with a single 'individual' type of contact at this stage. There will be scope to add organizations, events and all other kinds of functionality later, but for now it should stay as simple as possible, so stick with the straightforward concept of an entity that represents a single person.
  • Create a feature that will handle the installation of any CRM-specific database tables and any dependent modules.
  • Thus this will create the underlying basic data structure for the CRM.

That's it! It's very simple, but these are the absolute bear essentials. I consider that crm_contact_update() will need to be intelligent enough to either insert a new contact or update an existing one, based on the information it receives, so the three functions will serve as the CRUD for the module.

Methodology

The code takes priority at this stage, so anything is better than nothing, but I am going to impose the following recommendations:

  • The code will be written for Drupal 7 only. A Drupal 6 version of the CRM will be made available as a backport, but this is of secondary importance and all code for the project should be written for D7 initially.
  • The code can follow the existing outline architecture, but does not have to. It would be good if everyone agreed on the same data structure, but this might be unrealistic right now, so several solutions to the same basic problem might be productive or even essential at this early stage.
  • The code should be fully documented. A comment block will exist at the top of each file, and there should be a PHPdoc comment for each function. Where not obvious, inline comments should explain any functionality within functions.
  • The code should be fully unit tested. Simpletest is part of Drupal 7 core so the more tests that can be automated, the fewer bugs will appear to due regression and oversights as development progresses.
  • Code should pass coder tests.
  • We are very lucky to be able to use the CRM project on the Drupal website. Code should use the crm_ "namespace" to be consistent.
  • Code should be committed somewhere, creating several separate branches if necessary. Ideally code can go on the CRM project itself on drupal.org, but otherwise perhaps a GitHub repository will do for now. By the time DrupalCon arrives, I will make sure a place exists to store the code.

Interested?

My primary aim is to get the code sprint made official and set up. The requirement for this is that we have an organiser who will be in charge of overseeing the code sprint in person at DrupalCon (see above), and secondarily that people are interested and willing to contribute to this.

Please express your interest in the comments below, and show that you want to help get this monumental project off the ground! Jamie Abrahams has kindly volunteeed to organise the code sprint, but it would be great to have at least one backup so do still consider it!

Please keep away from the comments for discussing CRM architecture and code-specific ideas, or anything not directly related to this blog post. The appropriate place for that at the moment is the Drupal group.

Thanks in advance for your support!

Jul 15 2011
Jul 15

Recently, I blogged about Drupal's plans to integrate HTML5 into its next release. However, version 8 of Drupal is at least a year away. What's a Drupal dev to do, if they want to start using HTML5 right now? There are a variety of tools and techniques. Let's look at them.

Drupal 6 or Drupal 7 – Does it matter?

In a word, “no”. In fact, if all you want to do is use HTML5 elements on your website, you don't really need to use the Drupal tools – themes and modules – to use HTML5 on your site. All you need to do is change the doctype in your theme's page.tpl.php file from:

to

html.

Simple, eh? You can now use HTML5 tags like “<video>”, “<audio>”, “<canvas>”, etc., on your pages. For a full list of HTML5 tags and their browser compatibility see: http://caniuse.com/#cats=HTML5. If you are a more visual person, you might prefer this interactive graph by HTML5's Superman, Paul Irish.

Modernizr

Better yet, use Irish's modernizr, “an open source, MIT-licensed JavaScript library that detects (browser) support for many HTML5 & CSS3 features” (http://diveintohtml5.org/detect.html). There's a module, available for both Drupal 6 and 7. If you prefer, you can build your own modernizr script, choosing just the elements you want to use to keep your script small, download your customized library, and add it to the head of your theme's page template files with:

<script src="http://civicactions.com/blog/2011/jul/15/using_html5_with_drupal_today/(path-to)modernizr.min.js"></script>

In Drupal 6, this would be page.tpl.php and in Drupal 7, html.tpl.php. Read the full instructions here.

HTML5 Sectioning Flowchart

Semantic Elements

If you want to use HTML5 semantic elements, you do not necessarily need an HTML5 theme. You can manually replace the CSS “divs” you want to change, in your various template files, with their corresponding HTML5 elements: “<div id=”header”>” with “<header>”, “div id=”main”>” with “<section id=”main”>”, etc. Each theme will likely vary slightly, in how it implements HTML5 semantic elements. If you compare the two Drupal 6 themes, HTML5 Base and Boron, for example, you'll see that Boron turns each “block” into a “section” while HTML5 Base leaves “block” elements as “blocks”. See the handy flowchart from HTML5doctor.com, and this excellent post, also from HTML5doctor.com, for instructions on how and where to use the new semantic elements. For a more indepth discussion of HTML5 semantic elements, see http://diveintohtml5.org/semantics.

HTML5 Shiv or Shim

Last in the process of adapting your own theme for HTML5 is linking to Remy Sharp's HTML5 enabling script. What this does is get Internet Explorer to recognize HTML5 elements. All you need to do is put the following in your “<head>” element:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Tada! You've rolled your own HTML5 theme!

Once you are done, check your work via the HTML5 Outliner.

Drupal HTML5 Themes

There are many good HTML5 Drupal themes that, with the exception of implementing modernizr, have done all of the above work for you. If you want to reap the benefits of Open Source community work, use one of them – and apply the time you save bettering it, or working on some of the many modules in development for HTML5.

Currently, there are almost 600 themes for Drupal 6, and almost 200 for Drupal 7. Of these, for Drupal 6, 17 reference “HTML5”, and for Drupal 7, 20. Almost all of the HTML5-referencing themes are starter themes; that is, they are not designed to be used as is, but as bases from which to build your own theme.

Drupal 7 Themes

The most popular Drupal 7 HTML5 theme is Sky. I suspect it is most popular because it's been around, in one form or another, since 2007. I'm not saying it's not a good theme! I've used it, for Drupal 6. It's clean, attractive and can be used as is, or as a base them. It's currently maintained by the Drupal HTML5 initiative leader, Jacine.

The second most popular is AdaptiveTheme (as of today, Thursday, July 7, 2011 – yesterday, the second most popular was Omega), which, despite the name, does not in fact, appear to be “adaptive”. “Adaptive” or “responsive”, in regard to web sites, generally refers to the use of CSS3 media queries to assign different stylesheets for different sized viewports and devices. Version 7.x.2.x of AdaptiveTheme, according to this page, will incorporate media queries, but until then, there is no AdaptiveTheme Mobile sub-theme for Drupal 7. If you want to use media queries, nothing is stopping you from adding them yourself. AdaptiveTheme includes features: rounded corners settings, RDFa and microformat compatibility, “Gpanels which are drop in snippets for creating multi-column layouts (such as a 5 column footer)”, and optional settings for things like: adding “extra CSS class names via theme settings” and “SPAN elements to menu anchor text”.

Media Queries

For an excellent tutorial on media queries, see this Web Designer Wall post. Here's a simplified example of media queries in action, from another Web Designer Wall tutorial, and here's a fine collection of sites using media queries. Oh, and here's the anti-media-queries argument; namely, that media queries do not strip out large images and scripts, thus rendering your web site too large and slow for mobile devices. The answer to that, however, is to use a bit of Ye Olde Javascript.

Framework simply uses HTML5 structural markup, while Genesis is only HTML5 friendly in the latest development version.

The now fifth most popular, Omega, is interesting. Firstly, it is an “adaptive” or “responsive” theme using media queries. Secondly, it integrates with a module, “Delta, originally designed to only work with it, that, in concert with another module, Context, allows you to use “different layouts/settings for various portions of a site”. Lastly, another module, like Delta, originally designed for use only with Omega, Omega Tools, allows you to quickly develop a sub-theme using Drush. Omega is rather large: 1.1MB! You could probably throw out all but the base folder and/or a starter kit, bringing the size down to about 350K, however.

Gamma and Beta are both Omega sub-themes.

Boron is a minimalist theme based on the popular Zen. Boron also comes in a Boron for Zen flavour. Boron for Zen is only for Drupal 6.

Panels 960gs (HTML5), Zentropy and MinimalistTheme are all Boron-based. Panels 960gs incorporates the 960 Grid System and Panels module. Zentropy is based on Paul Irish's HTML5 Boilerplate, meaning it is optimized for performance and mobile, among other things you can find out about here.

LayoutStudio's HTML5 version is in process, while HTML5 Base, a promising theme by Drupal 7 base theme designer, Jen Simmons, is still only available in a development version.

Plink, like HTML5 Base, looks interesting but is still only available in a development version. Plink comes with media queries, modernizr, “baked in” LESS and a “jQuery Mobile default sub theme for use in mobile switching”.

Drupal 6 Themes

If you want to take advantage of the almost 6000 modules that exist for Drupal 6, you might want to forego Drupal 7 for now. Though it appears that there are 17 HTML5 themes for Drupal 6, many are only HTML5 for Drupal 7, or merely reference the term in their write ups. Sky, for example, is only an HTML5 theme for Drupal 7; likewise, AdaptiveTheme, Genesis and Layout Studio. Framework, Boron, Drixel 5, HTML5 Base, modernbird, Boron for Zen and Roots are HTML5. *Whoops, looks like as of today, HTML5 Base is no longer available for Drupal 6, but is available for Drupal 7; only as a development version, though.

Roots is based on HTML5 Boilerplate and appears to be well thought out.

There are many good HTML5 starter themes for both Drupal 6 and 7. It's also easy to adapt your own theme for HTML5, or to adapt an existing theme for your specific needs. There does not seem to be a strong front-runner in the HTML5 starter theme arena, comparable to the popular Zen. What HTML5 theme are you using or are you interested in? Why?

Modules

For Drupal 6, 26 modules reference “HTML5”, and for Drupal 7, 22. Many of these modules are still in development or not yet available. Let's look at what we have.

Video is the most popular “HTML5” module for both Drupal 6 and 7. It's been around (sans HTML5) since 2005. Video allows users to “upload video in any format, play video in any format “ and transcode video to the HTML5 friendly h246, Theora and VP8 codecs.

Second up is Media: Vimeo. This module extends the functionality of Embedded Media Field to allow users to embed videos from the Vimeo video service, “using HTML5 when supported”. Media: Archive provides similar functionality for audio and video served from Archive.org. The Drupal 6 version of Media: Archive doesn't appear to support HTML5. The Drupal 7 version has some HTML5 support and plugs into the Media module.

Third most used is Elements, which provides a library of form elements: tableselect, emailfield, searchfield, telfield, urlfield, numberfield and rangefields, that a developer can use in their own modules. (Note that the Drupal 7 version does not include tableselect element - this functionality is available via the Drupal 7 core.)

HTML5 Tools is a diverse set of tools to help developers HTML5-ify their site. You need to install Elements to use HTML5 Tools, whichg is comprised of itself plus a sub-module: HTML5 Forms Tools. Forms Tools overwrites Drupal default forms with their HTML5 counterparts – or will do that. Currently, only email elements on user settings and site configuration pages, the search element on the Search Module, and the search element on the Search Theme Form are ready. Follow the progress of this module here.

Plupload Integration creates multiple file upload capabilities, and utilizes an HTML5 widget if the client computer supports it.

MediaFront is a media player who's appearance can be customized without writing code. It utilizes the Jquery Open Standard (OSM) Media Player, which plays many types of media.

JPlayer integrates the jPlayer JavaScript library with CCK file fields and Views. The jPlayer JavaScript library “provides an HTML5-based player, that uses a Flash fallback.”

VideoJS (HTML5 Video Player) is another HTML5 video player that utilizes an HTML-based solution to video display: Video for Everybody, and javascript, to cover an optimal number of browsers and devices.

There are HTML5 modules, and adjustments to existing modules, in development for GeoLocation (I know, I know, not strictly HTML5!), Canvas, processing.js and websockets. There are several graphing modules in development: Visualize, GraphAPI and Rgraph. There's an HTML5 image editor module ready to go. To see all that is available for HTML5, go here.

It's an exciting space: HTML5 and Drupal. As we've seen, we don't really need HTML5 specific themes and modules to at least get started using HTML5 on our Drupal sites; however, there are many available to help us, and many more in active development. As always, along with having fun, remember to join in: create, share and help develop the modules and themes you want to see!

Pages

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web