Don't you just feel the sweet taste of new possibilities right now?
And still, any new Drupal 8 project comes with its own set of challenges, as well, and choosing a theme, from the very start, is probably one of the greatest ones.
What should it be then?
Should you go for a classic base theme (AdaptiveTheme or Zen, maybe), for a contributed theme instead or maybe you prefer implementing the framework yourself or build your very own theme, from scratch, relying on Drupal core?
Before you make the decision that will have a huge impact on your whole project's structure, take some time to go through this quick “quizz” here and try to give yourself some clear answers:
are you dealing with a multi-site project (meaning that your theme, once chosen and implemented, will be used across all the other websites, too)?
is the person maintaining the theme a HTML guru or a CSS expert?
will this theme be used just on the website itself or for internal apps as well?
what level of front-end performance optimization does it imply?
Classy vs Stable: Which Base Theme Works Best for You?
This might just be the most important choice to take during your Drupal project's life-cycle!
It's your theme that dictates/overrides your CSS, JS and Drupal's markup, you know. Where do you add that your chosen theme can feature a parent-child relationship, where the sub-theme inherits the base theme's templates, JS and CSS.
In short: think through your theme choice for the sake of your project's success and your whole workflow!
“And still, which one to choose: Classy or Stable?”, you might ask yourself.
Here's how you can tell which one suits you (as a Drupal developer, with certain goals in mind and with a certain theming experience) and your particular web project (which comes with its own set of particularities):
are you planning to add classes only where the context demands them? Then Stable's The base theme for you!
do you want lean markup, with very little classes (e.g toolbar and contextual links), giving you the freedom to customize your own markup patterns in your theme, to create only those classes that are required by your project? Stable again, is the “lucky” word, in this case!
do you want to have a set of classes at your disposal, to tweak and use as styling hooks, right from the starting point? Then it "write" Classy all over your Drupal project!
This being said, let's see which are the 5 factors that you should consider before you choose your Drupal 8 base theme:
1. How Much CSS and Markup Updating Does it Require?
How much CSS out-of-the-box does your chosen theme come “equipped” with?
It makes a great difference, you know. Take these two examples for instance:
You decide to build your website on Classy theme, which in Drupal 8 comes with very little core CSS, so you will have to write your own classes and occasionally even to override the templates, depending on what you want your classes to style.
You're building your theme on Zurb Foundation or Boostrap, which come with their own of out-of-the-box classes that all you need to do is apply to your markup. What's important for you to keep in mind, if you incline for this particular work scenario, is that once you have your Drupal site built, there's going to be a lot of template customization to do for adding all those out-of-the-box classes to your site's new components!
2. Has Your Client Expressed Any Preference?
Your client may or may not come with his/ her own preferences when it comes to the theme that you and your team should to build his website on.
Be sure to have one aspect settled with your client, during your before-the-project meetings: are you supposed to maintain the theme that you two will decide upon on the starting point or is there a chance that this should be replaced with a new one, as the project unfolds? It's essential that you discuss this aspect with your client, for it's important for both of you to consider the learning curve (and implicitly the extra time) of each new theme.
In case your client has no specific preferences regarding the theme to be used for his site, your own theming experience and your development process preferences will be the only factors that will influence your theme choice!
3. Consider the Design
It's no news for any developer, no matter his/her level of experience, that Drupal is tremendously flexible! When it comes to theming, it allows you to build practically anything you want: ranging from a large web app, to great customer-facing websites in the latest design and functionality trends!
Depending on what exactly you need to design in Drupal, you get to choose among several platforms:
Ember or Adminimal make some great administrative themes, that will do their job superbly helping you build your back-end app
Zurb Foundation or Bootstrap make great choices if your web project includes components such as tables and forms
4. Will You Be Using a Pattern Library?
A base theme always makes the perfect choice if you're planning to create your own patterns.
In other words: keep it simple, at the theme level, especially if you'll be applying your own classes, which will then get themed by your own pattern library styles!
5. Consider Performance
Less is always better! You keep that in mind and let this common-sense motto guide you through your theme selection!
The more functions, JS libraries and settings your website needs to load, the heavier its “burden” will be (and the longer its load time will be, as well).
Go for a light theme based on Drupal core, which won't come equipped with its own heavy load of out-of-the-box JS libraries and CSS and remember that if less is always more, so does “testing makes it perfect”!
Remember to test all the theme settings on your website, thus keeping its front-end performance closely monitored!
These is our list of factors that any Drupal developer should take into account and think through before choosing the base theme for his/her project. Do you have any other aspects that you usually consider and which determine you to go for a specific base theme or another once you start your Drupal web projects?
Adrian Ababei / Dec 12'2016
How many times did the inspired title of an article made you “reward” the copywriter with a click and then: surprise, surprise! You landed on the website hosting it and you couldn't have found your way out of there any faster?
The photo/graphic/video in its header was so “dusty” and boring or, on the contrary, so flashy and annoying, stuffed with clumsily grouped elements, overloaded with information and showing off a totally uninspired color choice!
Now, answer to this question: how many times did you open a newsletter or landed on a new website and from that very moment time stopped? It captured your attention and you kept on scrolling and clicking, then did some more scrolling! It was the best “scientific” proof supporting time's relativity theory!
The hero image got to you, you wanted more and more of what that site had to offer and ended up spending more time there than you planned (maybe even buying something or subscribing to their “crafted” newsletter)!
If you want your own website visitors' experiences to be more like the one in the scenario no. 2, then you should learn to master these contrast-creating design subtitles:
Think Through Your Color Choice
Color sure isn't the element you should pick in a rush! It can either wow your users and propel your message to them or it can instantly drive them off.
Carefully consider the message you wish to convey (your whole's brand's identity) and then make your selection based on that and that only.
As a general rule of thumb: you don't need to go for a strong color if it doesn't represent your brand's personality, just to catch their attention. It will eventually be a major turn off.
Also, before you go ahead and add splashes of your “winning” color to your hero image, be sure that: it matches the rest of the design (preferably a simple one if you're going for a bold color).
With cohesion (with that stunning image or visually-engaging video that you're planning to use) and contrasting colors in mind, feel free to enhance your brand's message by simply adding the right color to your hero image: colored typography, colored user interface elements. Such a subtle, yet effective “trick” when you manage to make the right (color) choice!
But what if there's just no “match made in heaven” between the hero image and your brand colors?
In that case, you adapt:
try a color overlay on the photo
test a black and white solution for the text or image
put the strong colored elements in your navigation bar
If you've tried all of these creative “fixes” and there's till no chemistry between image and colors, consider losing the mandated color.
Moreover, color alone can be “the hero” of your hero image, you don't need an image at all! Combine it with powerful text lines, featuring beautiful typography, and you have your hero image that impacts users just by its striking (crafted) simplicity.
And here we get to the “extreme minimalism” principle again! Such a powerful web design trend!
Wow Them With Bold Typography
Here's another way of using contrast to catch the eye: beautiful and bold lettering contrasting in size and (or) color!
Keep it simple, but carefully craft its simplicity!
Consider the typeface selection and get creative when it comes to choosing your words (that's right, meaningful, powerful words, not a whole paragraph). Go for the true emotions-triggering ones all while relying on:
fonts that pop out (set against contrasting backgrounds)
unusual font sizes (either undersized or oversized; the "out of the ordinary" will always catch attention)
Think About Light and Dark Spaces
After lots of mixes and matches, rearrangements and a whole dose of creativity you've finally managed to pull off a great “light vs dark spaces” contrast for your hero image and them boom: all your work is ruined when you try to make it responsive.
The text, images and buttons are all chaotically displayed now!
Does this work scenario sound familiar to you?
Then here are your options:
go for another image (it's hard, I know, especially if that was “The” one and you've spent so much time scanning though hundreds of images to find the perfect one)
go for color overlay
go for another typeface, color and size
Do a Strategic Cropping
“It's a trap, don't go for it (like many other designers do)!”
We're referring to the widely accepted idea that the hero image should “fill in” the first screen!
Be better than that! Think outside the box:
let the content therein determine how you should crop it
accept and implement the idea that your hero header could be either smaller or larger than the browser
give the other elements on the page their due importance, too
dare going for an unusual shape (it will certainly intrigue and catch attention)
consider an unusually deep image that will only incite visitors look for more
Make Your Call to Action Stand Out
Here's another trap that you get caught in: losing the whole purpose of your hero image!
You've worked so hard to make your header wow your users with a visually-arresting, engaging graphics, you've strategically picked your colors, your beautiful typography, too, you've added the perfect emotions-triggering/persuasive words: it's a true work of art!
And still: haven't you forgotten about the “main character” itself?
Yes, the call to action button! It should be there, right into the spotlight!
It should let your visitors know what you want them to do (besides staring and letting themselves be visually “spoiled” by your hero header).
How do you make your call to action stand out and grab their attention?
You rely on color or size contrast! It should strike a powerful contrast with the backing image and, moreover, you should empower it with clear, simple and readable words.
Let them know that they should “buy” or “subscribe” or maybe “read more” in just a few straightforward words!
Add Animation
Movement will always catch the eye!
Therefore, it makes a highly efficient attention-grabbing element for a hero image.
Now don't think that you'll have to pull off an entire cinematographic experience (you shouldn't go that way, you shouldn't make your hero image way too flashy and overwhelming).
Simplicity is key, remember?
Therefore consider going for subtle movements for your header, one that should aim at:
surprising the users
standing out (from the other “just” text or “just” video featuring ones)
How about you?
Are you making the most of contrast when you create your own winning hero images? Have you, maybe, discovered other ways of using this deign concept to engage your visitors and to make them “stick around”. “Other” than the ones we included in our list above, maybe? Feel free to share them with us in the comments below!
Adrian Ababei / Dec 09'2016
Let me guess: your whole work as a developer (and even more so if you're a front end developer) depends on and relies on NPM, the "Holly Grail" of JavaScript package managers!
How about Facebook's own (not that) recently released package manager?
Has it even stirred your attention, just to see what new features it comes equipped with and how/if it can improve your whole workflow? Or have you stubbornly overlooked it, sticking to your way too familiar, already tested JavaScript package manager?
But what if it actually helps you handle your Javascript files much faster (thus gaining time, which is gold especially when you're dealing with huge web projects)? What if it is more secured? What if you discover that it's a much more simplified version of the standard "monopolizing" NPM?
If you're willing to continue to handle your Javascript frameworks, libraries or plugins in the same familiar pace, no need to continue digging up more info about what Yarn can do for you.
But if you're not too afraid to test and eventually embrace innovation and if you're constantly looking for breakthroughs that could help you get even more efficient in your work, well, then here's why should start using Facebook's Yarn today:
1. Catching Mode
Imagine this scenario: you're trying to install a package that you already installed once, in the past, and your internet connection goes down!
Here Yarn comes to your rescue: it practically catches the packages that it downloads and this features allows it to it handle previously installed packages without internet connection.
Could you have imagined this when you were using NMP?
2. Secure and Faster Installs
Security is vital when you're deploying lots of packages during the development process of a big web project!
Stay reassured: Yarn inspects every package's integrity for you, keeping your project protected from any corrupt package that you might need to install.
As for speed (and this is no "small" detail when you need to install lots and lots of JS packages), Yarn becomes a serious competition for NPM: depending on the packages' sizes it can turn an install into a matter of just a few seconds.
3. Registry Compatibility
Need to download a package from the NPM repository? Or maybe from Bower or other custom repo?
Yarn "spoils" you with registry compatibility. So, feel free to install and boost your web project with whatever JavaScript package you need!
4. Deterministic Install Algorithm
Bid farewell to machine specific bugs!
For Yarn uses lock files, which allows it to keep the same node_modules directories structure; it practically installs the same dependencies regardless of the types of development environments (that's right,Yarn allows you to install them across multiple machines) that you're installing your JavaScript packages in or of the order in which you install them.
Just imagine: same structure (node_modules directories) for all the "participants" in a large project; close to zero bugs that would otherwise replicate on multiple machines.
5. Improved Network Performance
On a scale of 1 to 5 how frustrated do you get when your package's installation fails more than 2 or 3 times in a row?
Good news: Yarn will make the whole process stress-free. How? It queues up, mitigates and constantly retries the failed requests, thus reducing the no. of installation failures.
Does This Mean We're Witnessing The End of NPM?
No, we're not, for one major reason: open-source projects don't work that way.
The whole community behind it (bringing together Facebook, Google, Exponent and Tilde engineers) see themselves as NPM contributors instead of "annihilators".
In a nutshell: Yarn is the proof of how a piece of code written so that it should address secific work scenarios better than the generally-used and proven “tool” can turn into a competitive new tool that other teams of developers can deploy, as well.
Note: there still are improvements to be made (but we're talking about Facebook here, so expect the team behind it to work hard to continuously perfect it) and making Yarn capable to help you handle private packages (its main limitation at the moment) is on top of the list!
How can get started with Yarn? Well, it's available on GitHub, under a BSD-2-clause license. Go get it, test it and share your thoughts in the comments bellow! We're more than curious what are your impressions about the new Yarn vs the conventional NPM "competition" (for developers' preferences) are. Happy Yarning!
Adrian Ababei / Dec 08'2016
How many times haven't you heard this line: “There must be a CSS for that!”. You might have said to yourself: “yeah, right, like CSS could be the answer to any coding dilemma”.
You'd be surprised: in way too many cases it actually turns out to be that “magic formula” you need. And it would be a pity not to make use of CSS's helpful resources. With only one or a few more lines of code CSS works its magic for you, lifting a heavy weight off your shoulders!
Enough beating around the bush now: we'll go ahead and share with you our top favorite CSS tips that will help you improve and thus speed up your workflow:
1. Center Your Content Vertically
A bit frustrated for there is no “official” method (yet) for centering content within its container in CSS?
We've been there, too, you know. And here is the solution that we're happy to share with you after our own experience of striving to align text in CSS: the line-height property.
Let's use it in an example:
.nav li{
line-height:50px;
height:50px;
}
Note: make sure that your line-height value is (almost) the same as your container's height!
Furthermore, you need to keep in mind that this method applies only to single line texts. If you're dealing with a multiple lines text, going for this solution will only add too much white space to your website (it's logical if you consider that the same line-height value will be applied to the space between those lines).
So, stick to single line texts such that of navigation menus when applying this CSS trick.
2. Dealing With CSS Tables
We'll just have to accept it now: there's nothing we can do to turn back the hands of time and make up for all the time “wasted” when we didn't use display: table for handling CSS layout.
So, let's sum up our “findings” regarding this CSS “trick”.
First, you can use display: table for efficiently:
setting equal heights for neighboring columns (it's true, you can also use JavaScript for that, but: oh boy! isn't JS a lot heavier and packed with its own particular drawbacks!)
centering an item, vertically, next to a larger one
And now if you're still a big hesitant to replace the conventional “table layout” with this new “formula”, let us add that unlike it, this “new” (although it's been specified in CSS even from its 2.1 version) can quickly be turned responsive: you just need to add a breakpoint for removing the display: table.
There' more! Here are other 2 “great things” that you can achieve with this CSS solution:
float-less grids
tables without the <table>
3. A Few Words About Transition
How are you responding to the challenge of puling of hover effects on the websites that you're building these days (for gradually changing the menus or the images' colors)? Admirably? OKish? Or really badly?
Well, if you've been having trouble creating really smooth effects, CSS is ready to lend you a hand. Just take a look at this example here:
.entry h2:hover{
color:#f00;
transition: all 0.3s ease;
}
Why should you replace the old JavaScript technique for creating hover effects? Because you're in a highly competitive world (the online world), where you simply can't afford not reaching for “perfection” (instead of "second best").
In other words: why should you stick to jarring jQuery animations (or to the much heavier JavaScript) when you could go for a more time-effiecient (just an additional line of code, no need for you to learn a new language if you're a coding newbie) smoother hover effect?
So, it's a win win situation: for you and for your website's future visitors!
4. Aim for The Absolute Positioning
Centering in CSS is probably the ultimate source of “frustrations”!
With all those different elements, requiring different CSS properties before they can be “tamed”/centered, “absolute positioning” sure sounds like a beautiful utopia, wouldn't you agree?
But it can become reality: you just need to start using the position property. Like in this example here:
position:absolute;
top:20px;
right:20px
Just type in bottom, top, left and right and add a pixel value to each one of them, thus keeping a steady control of where your element will be positioned on your website.
For instance, in the above example we've set that the element should be positioned at 20x from the top.
Note: this CSS trick works wonders when you're dealing with a single child element (otherwise the other element within the same container will get affected)
5. Pull Off the “Storybook” Effect
You love it, we love it, they (your website's visitors) sure love it!
The storybook effect, you know, the one focusing on capitalizing the first letter of a page/paragraph is still so loved since it reminds everyone of all those old story books brightening up their childhood memories.
So, why not recreate this attention-grabbing typographical effect on your website? Especially, when it's so quick and easy to do it in CSS?
The :first letter pseudo element is the CSS “trick” you need to use for puling off this "traditional printed book" effect.
p:first-letter{
display:block;
float:left;
margin:3px;
color:#f00;
font-size:300%;
}
You can just see, in the example above, how you can use :first letter, plus specific pixel values, for targetting the very first letter of the first line of the selected element on your website: here it makes it 3px wider than the rest of the letters in the text.
And these are just 5 CSS tricks that can help you create better looking websites. They “aim” for guaranteeing both a better user experience and less sleepless nights and moments of frustration for you and your team, too.
Give them a try, run some tests and find our if they'll boost your efficiency as web developer/s, too!
Adrian Ababei / Dec 07'2016
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!
Adrian Ababei / Dec 06'2016
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!
Adrian Ababei / Dec 05'2016
So, you could not resist the temptation to try out the much-praised Drupal 8! You've installed it, you've already “played” with its core modules, its contributed modules and that's it? Don't you think it's about time you leveled up your Drupal 8 skills?
The next step to take is learning how to team up your own skills and knowledge with Drupal 8's full potential for putting together some amazing custom-made modules. Modules that would instantly add extra value to the sites you'll build.
Don't let the “rumors” stating that the whole custom modules building process is so different, and therefore more challenging, from Drupal 7, that it's lengthier and way too discouraging.
We're here to show you that it takes just 8 quick and easy steps for you to create new modules (to meet your sites' specific needs) in Drupal 8! Walk us through all these steps:
1. File Structure
It's under modules folder in the root directory that you should keep both your contributed and your custom modules in Drupal 8:
modules/contrib/
modules/custom/
So, go ahead and get your first custom module started by creating a folder in your Drupal installation at the path: sites/all/modules/custom/sa_module.
Keep in mind: If you're configuring multiple sites, you need to use modules specifically for each one of them:
sites/your_site_name_1/modules/
sites/your_site_name_2/modules/
2. Create the .install file
A Drupal schema (representing one or more tables and their related keys and indexes) is defined by hook_schema(). You'll find it in modulename.install file. hook_schema() and it should return an array mapping ‘tablename’ => array (table definition) for one of the tables defined by the module.
3. Create the .info.yml file
That's right, you have a “info.yml” file extention in Drupal 8 (replacing the “.info file” that you got used to using Drupal 7). It applies to profiles modules and themes, too.
So, that being said, you now need to create your .info.yml file (i.e. sa_module.info.yml), thus letting Drupal know about your new custom module. Your file will look something like this:
name: Drupal 8 custom module example
type: module
description: 'Example for Drupal 8 modules.'
package: Custom
version: 8.x
core: 8.x
Follow this path for enabling your module: https://goo.gl/ADSWyt OR Click on Extend from Menu.
4. Create the .routing.yml File
When it comes to handling routing in Drupal, you'll be using Symfony 2 components. The routing file that you'll create will help you navigate into Drupal using the method of a controller class (meaning that you'll be specifying different controller actions).
You'll be writing the path in routing.yml file and the resulting file will look something like this:
example.my_page:
path: '/mypage/page'
defaults:
_controller: '\Drupal\example\Controller\ExampleController::myPage'
_title: 'My first page in Drupal8'
requirements:
_permission: 'access content'
1. The first line is the route (a symfony component mapping an HTTP request to a set of configuration variables).
Define your route as a module_name.route_name ‘module_name => sa_module’ ‘route_name => list’.
2. The second line is the path: you'll need to specify the path that this route should register to, in short: the path (of the module) where the users will be redirected. See the leading forward slash “\” in the URL to the route from our example.
3. The third line shows your defaults: you get to specify several things here. For instance, in our above example we have 2 defaults:
_contoller: referencing a method on the ExampleController class
_title: the default page title
You, could, for instance, have "_form" define classes under defaults, as well, helping you define the forms included in your custom module (for example EditForms, DeleteForms, AddForms)
4. The fourth line displays requirements: here you get to specify the type of permissions to be granted to your users for accessing specific pages on your website: “add”, “edit”, “delete” and “access” for instance.
5: Create the .module file
Unlike in Drupal 7, where the hook menu() defines page callback functions, in Drupal 8 it defines menu items exclusively.
Make sure that the path and the route in which in your example.module matches the ones written in your example_module.routing.yml.
Let's have a look at our above-example, for instance: there the route 'route' => 'example.my_page' in example.module should be identical to example.my_page: in example.routing.yml
6: Create Controller Class
First, a few words about “controller”:
it may contain multiple types of arbitrary logic that your site needs for rendering content on a certain page
it's a php function that processes the HTTP request and returns a response
Create a “modules/custom/sa_module/src/Controller" folder and then (within the same folder) a file named AdminController.php.
7. Create Model Class and Forms
Once you've set up your AdminController, you need to introduce a model class (i.e. SaUserInfo.php) in order to link it to your database. It's this model class that you'll create now that will help you set up methods like add(), delete(), update() etc.
8. Create Menu on Admin
One more step and you're ready to launch your very first custom Drupal 8 module right from the Admin Panel ! Create a file sa_module.links.menu.yml, which will set Menu at the Top.
And this is it! 8 quick and easy steps for building your first custom module in Drupal 8! Give it a try!
Adrian Ababei / Dec 02'2016
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?
Adrian Ababei / Dec 01'2016
Drupal's ready to turn into your best ally in your endeavours to constantly comply with Google's ever-changing “rules”! With mobile-friendliness being the ultimate goal and the main words on the lips of all marketers and web developers these days, it would be quite “reckless” to ignore all the efforts that the Drupal community has put into developing this module: Drupal AMP (Accelerated Mobile Pages).
Just think about it:
as a marketer speeding up your website's load time on mobile means happy users (boosting UX) and therefore, “overwhelming” organic traffic for you
as a content editor, it instantly eases your whole workflow: you're given the easy-to-use toolkit for making your content mobile-friendly in no time
as a web designer, it lifts a great deal of the “pulling off the best solution for crafting responsive design” weight off your shoulders
In short: it's “Optimize for mobile or die trying!" Not really an exaggeration if we think that you only have less than 5 seconds to catch your users' attention and to get them hooked on your website. 5 golden seconds when, if your site loads all its awesome content at a really slow speed or makes content look weird on mobile devices, you can as well “bid farewell” to your users. They'll be off to greener pastures in no time: to websites ideally optimized for the web, that doesn't waste their way too valuable time.
What Web Pages Does It Target?
That's right, you should know before installing the Drupal AMP module that it doesn't address your whole website. It targets blog posts and informational, news article-based pages on your website!
So, it's not geared towards e-commerce websites!
How Does It Work?
If you're still undecided, facing the challenge of picking between Drupal AMP module and other solutions available out there for helping your site gain speed on mobile devices, consider this: the Drupal AMP module is an open-source project!
So, if you're a future-oriented type of developer/marketer, you know what this means: it will constantly get tested and improved!
But how does it work precisely?
Once you integrate it into your website, it creates a new view mode for the targeted content type.Then, you get to choose the AMP field formatters that will handle your target content's conversion for the mobile (formatters for video, text or images). Next, it's the PHP library that “comes into the picture”, processing the entered HTML and doing its best to come up with the proper AMP HTML equivalents.
It practically gets to “work its magic” on any type of content that you want to optimize for the web.
Let's dig into the AMP Theme and the AMP PHP Library!
OK, now walk us through short “descriptions” of each one of the AMP module's 2 main components:
AMP Theme: familiar with the AMP HTML (a subset of HTML) and its standard? The one aimed at encouraging beautifully looking, quickly loading content on mobile? Well, then you should know that what the AMP Theme does is actually producing the markup that this standard requires for websites venturing in the mobile world. Moreover (for it's still a Drupal theme that we're talking about, so it's got “flexibility” written all over it), it enables content managers to come up with custom-made AMP pages. They gain total control over how these pages on mobile will actually display their content!
AMP PHP Library: it handles the final corrections and repairs. Whenever the entered HTML doesn't comply with the AMP HTML standard, it's the PHP library that makes the right images, Youtube HTML, Tweets and Instagram conversions and creates the issues reports. Take it as a “quality assurance” tool!
In a nutshell: with Drupal 8 you can now respond to the challenge of the “developing for the mobile landscape” trend: quickly displaying AMP HTML pages on your website!
How Do You Install Drupal AMP?
Familiar with Composer Manager? For it's this module that will help you a great deal installing and therefore, boosting your website with all the “mobile optimization features” that AMP comes packed with!
So, here are first steps to take:
first, a composer.json file (in the Drupal AMP module) confirms the dependency on the AMP PHP library (which features its own dependencies)
other modules could state the same library dependencies
last, the Composer Manager module gathers all the info in the composer.json files of the modules (all those installed on your website) and puts them all together, thus avoiding the risk of ending up with several modules installing the same dependencies.
Now walk us through the installation process:
Keep in mind: We'll be enabling the Composer Manager module before we go on and install the Drupal AMP one!
enter this command (in your Drupal's website directory): drush dl amp, amptheme, composer_manager and get your AMP theme, AMP module and Composer Manager downloaded.
enable the first items needed for your installation: drush en composer_manager, amptheme, ampsubtheme_example. It's at this step that we're enabling the “ExAMPle subtheme". Take a look at its code, for it will reveal to you how you can, later on. customize your AMP pages.
use Drush for enabling your AMP module: drush en amp
Next, you'll be notified about dependencies being downloaded.
There you have them all enabled and ready to be used: the AMP theme, the AMP module, the AMP PHP library and the example subtheme, too.
Configure Your Site For The Drupal AMP Module
Go to /admin/config/content/amp, the AMP module's configuration page. There, pick the content types that you'd like this module to come up with AMP equivalents for!
Bravo! You're now closer than ever to show off your optimized website which loads its high-quality content faster than ever on mobile!
Adrian Ababei / Dec 01'2016