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
Websites sure have changed dramatically since the rise of the internet, wouldn't you agree? When competition for winning User's attention with gorgeous design and high quality, interactive content intermingling with online marketing strategies/tools has become so fierce, what do you do?
How do you resist the temptation of overloading your website so much that it will end in annoying your visitors since it will load all its "awesomeness" way too slow for their high speed lifestyles?
Here is where we come in, lending you (or just reminding you of, since we're sure that many of the following "tips and tricks" on optimizing your website for gaining some more speed are no news for you) some helpful advice on how to regain control over the speed of you site (and to gain the amounts of traffic you've been fantasizing about and the conversion rates that you've dared hoping for and not just a beautifully looking website for your (and your friends' maybe) own pride and joy only.
1. Is it Really Worth the Effort?
First things first! Before you even put together your action plan you should realize and accept that optimizing your site is not just about speeding it up: it's also about the UX and SEO benefits that it comes with.
It's about improving your users' experience while on your website and thus turning them from first-time visitors into loyal visitors (and from visitors into to customers).
Just think about it: the quicker content on your site loads, the less bandwidth your visitors use (it will reduce your bandwidth costs).
2. Aim for High Speed, Not Size
Aim for the (apparently) impossible: while your site gains (inevitably) more weight, strive to keep it optimized and efficient!
Constantly monitor its speed, while keeping up with the trends (which are building websites with rich-content pages and outstanding imagery, which risk to weight them down).
3. Go for Modular Code
You might think now: "But, wait a minute: modular code will just add even more bloat to my website!"
It's true, it will "load" it with more options for you to choose from, BUT think about modular code this way: you get to put together multiple common pieces of your code using less. Take combining two CSS classes, for instance: module coding gives you the same results with less "resources" that could bloat you website.
And that, my friend, it how efficiency looks like!
4. Draw A Line Between Development and Production Level Code Bases
Handle the two environments differently! In short: realize the difference between compressing the code and compressing the images on your website.
the code's compression depends a great deal on the language you're using (go for Google’s htmlcompressor, for YUI Compressor for CSS, or any other method that suits you)
the images' compression could just as well mean using Photoshop's "Save for the Web" tool. Keep diving into the "sea of tools and best practices for image formats, compression algorithms, quality monitoring and so on” available online.
5. Keep It Super Neat
It's a common sense practice not to "abuse" your server, don't you think?
Just imagine it "exhausted", trying to efficiently handle all the messages you send it: web fonts, JavaScript, CSS style sheets. If you "empathize" (and you should) with it, then start applying these tips for easing all its hard work:
load stylesheets at the top and scripts at the bottom
bundle up your images, nice and neat, so that it should be easier for your site to load them
6. Go From Poorly Written To Readable Code
Besides "heavy", large images, un-optimized code is another major factor that slows down your website. So, as regards best practices for writing you code (for reaching top speed), we have 2 tips for you:
if possible, call JavaScript last (by the time JavaScript starts slowing everythinf down, your site will have already displayed the markup, processed the HTTP requests, the CSS. etc.)
write identifiable, short CSS selectors: they will be far more speedy in doing "accomplishing their mission"
7. Optimize Your Fonts
Remember that we've talked about beautiful typography being forecast as one of the UI trends in 2017? Well, looks are not enough when you're approaching your site from its efficiently/speed perspective.
You need both beautiful and optimized fonts if you want to keep your site's performance high, all while enticing your visitors with gorgeous design. Here are a few tips for optimizing your fonts:
compress, compress, then compress your fonts some more (use FontLoading Api for instance)
juggle with maximum 2 fonts
go for font-face (whenever you need to access external font resources)
select only the variants you need (no need to overload you website with all the available weights and styles)
ease your site's job: go for WOFF2, WOFF, TTF, and EOF formats
use CSS inlining
8. Do It For Google
Pleasing Google and pleasing the User are (or at least it should be) the goals that drove you when you actually built your site (or your client's) in the first place, right? Well, then if you've already started to draft a “How to speed up my site” plan in your head while reading this post, you're on the right path: Google rewards developers/site owners like you!
The almighty search engine will always appreciate (and thus rank better) optimization-oriented developments practices. It's pretty logic: a happy user (“happy” for the web pages he/she accesses load content really quickly and doesn't make him/her lose valuable time) means... “happy Google”, so to say.
And how does this impact you? You do the math!
9. "Tame" Your Third Party Scripts
In a few words: don't let the “little ones” run the show on your website!
Mind you monitor all those third party scrips (Facebook “like” buttons, analytics trackers etc.) lest they should considerably slow down your website!
10. Limit Your Dependency Requests
How do you limit all those dependency requests adding bloat to your website and slowing down the downloading process? There are a couple of good practices that you should consider starting today:
use a CDN (especially if you're website's a large, heavy-content one)
use SVG or sprites methods for handling images from your style sheets
This is it, our “decalogue” of good practices for optimizing your website for higher speed. One more thing we'd like to add: there's no such thing as “a too fast website”, there's always room for even more optimization!
Adrian Ababei / Nov 30'2016
Proudly wearing its “mobile-first” aura, Drupal 8 is here to help you deal with the issue of responsiveness nice and smoothly. No need to write miles of code anymore, to master the art of pulling off HTML, back-end languages and JavaScrip combos anymore.
In other words: Drupal 8 is here, have no fear! It projects a new world of easy-to-build responsive themes.
It simply “spoils” you with an easy-to use responsive image setup (which comes in its core, another great news). Basically, it puts an image formatter and breakpoint mappings at your full disposal so that you can have your due-sized images, using HTML 5 picture tag, ready in just a few quick steps. Thus, you'll get your images adapted to every device's viewport in no time.
Well, not really “in no time”, but in 5 simple steps! Walk us through this step-by-step demo:
1. Turn on Your Responsive Image and Breakpoint modules
You've got that right: the Responsive Image Module is part of core Drupal 8, you get it upon installation and yet, if you want to use it you still have to first enable it. It's the same thing for the Breakpoints module, as well.
How do you enable the Responsive Image Module in Drupal 8 you say?
You go to /admin/modules
You click the check box close to “Responsive Image”
You click the “Install” button
2. Set Up Your Breakpoints
“What is a breakpoint?” you say (if you're new to Drupal)? It's a window width that you get to set up, thus letting Drupal know that it should start using a different size image starting from that particular width size. Got it?
Do you remember how things used to be in Drupal 7's Breakpoint module (oh, the (not so) good old days when Breakpoint was a contributed module!)? You could define your breakpoints in your admin interface.
Well, not anymore! In Drupal 8 you have to set them up in code.
If it's a pre-built theme that you're using, there's a high chance that your breakpoints are already set up. If you're creating your own theme instead, then you need to set them up yurself in breakpoints.yml file.
So, here is how you set them up (make sure you start with the smallest ones):
your_theme_slug.bannerImage.narrow:
label: narrow
mediaQuery: ''
weight: 0
group: Banner Image
your_theme_slug.bannerImage.wide:
label: wide
mediaQuery: '(min-width: 600px)'
weight: 1
group: Banner Image
3. Create Your Image Style
What image styles do you want for each one of your previously defined breakpoints?
Once you've answered yourself that, go ahead and set them up (after you've done a bit of math setting up your breakpoints):
Go to /admin/config/media/image-styles/add
Type in your image style's name (we suggest you go for something descriptive) and click “Save”
Click “Select a new effect” (you'll find it there, under “Effect”, in the next screen that will open up once you've clicked “Save”)
Click “Scale and crop”
Enter the width and height sizes
Click “Add effect”
Et voila! Can you go through all this process all by yourself now? For you still have to go back and create image styles for each one of the breakpoints that you've (virually) set up, you know.
And this is how Drupal automatically resizes all the images, that you'll upload on your site, to the image styles that you will have defined. And it doesn't do all this the rudimentary way, no sir: first it sizes the image, then it crops off the extra so that the result should be a perfectly adapted new image (not the stretched or the shrunk, very unnatural looking type)
4. Define Your Responsive Image Style
After you've created images styles for each breakpoint, go ahead and put them all together in a responsive image style.
Go to /admin/config/media/responsive-image-style
Give the “Add responsive image syle” button a click
Give your style a name (go for something easily recognizable)
Select the “Breakpoint group” (you know, the one that you've set up at step no.
Select the breakpoints one by one and associate them each with one image style
Can you see the option for fallback image style there, at the bottom? It's the “default” image that Drupal generates for those browsers that don't support responsive images (such as Internet Explorer 8). We recommend you to select the largest image style!
5. Allocate Your Responsive Image Style to An Image Field
Just one more quick step to take and you can upload images on your website and let Drupal do all the formatting/smooth resizing job for you! Before it can do that, you still need to let it know what image field to actually responsify for you:
Click on “Structure”- “Content Types”
Click the arrow close to “Manage Fields” and then click “Manage Display”
Spot your target image field (you'll see the entity type, ranging from taxonomy vocabulary to content type that your image field is assigned to)
Select “Responsive Images” (under “Format”)
Pick one of the responsive image mappings that you will have set up (under “Responsive image style”)
Click “Update”
And that's it! You've provided Drupal 8 with all the settings it needs for “working its magic”: pulling off images of appropriate sizes without comprising their quality.
Adrian Ababei / Nov 29'2016