LATEST FROM OUR BLOG

Take your daily dose of (only) relevant news, useful tips and tricks and valuable how to's on using the latest web technologies shaping the digital landscape. We're here to do all the necessary information sifting for you, so you don't have to, to provide you with content that will help you anticipate the emerging trends about to influence the web.

Does Your Website Tell a Story? Part 1
“Any good story should give you a promise that it will lead somewhere that's worth your time” (Andrew Stanton).   This quote is just perfect as a starting point for our discussion on design principles that help you narrate your own unique (engaging and interactive) story on your website!   What does it mean actually?   It means that you need a “good story”, and yours and yours only can be nothing less but 100% authentic (for it's “yours” and no one else's, of course it's unique!) and it's up to you to make it look as fascinating as possible.   Then, you need a “promise”, which in visual storytelling terms it relates to the “emotion” that your web design should stir in your user.   Your company's craftily designed story will add meaning to products/services and will trigger emotions in your users. Without the story that you wrap them up in your products are just, well, products, like any other millions alike.   OK, so you must have a story to tell, anyone has, but how do you incorporate it in web design? How do you tell it to your users (or to your client's users, if you're a web design and development agency who needs to design an engaging story while building the website itself, too) just like a truly gifted storyteller would: keeping his/her audience fully engaged and thus far more likely to receive his/her message?   First, you answer to this 3 major questions:   Who is your audience? What goals have you set up for your brand? Which is the message you want to convey?   Next, you'd better write down (and hopefully keep this post-it somewhere close to you) the 3 major components of any engaging visual storytelling:     CONTENT     IMPACTFUL IMAGERY   INTERACTIVITY     Then, you take a close look at our 10 design principles for incorporating storytelling into your web design:   1. Let the Images Tell Your Story   Face it: people would always “assimilate” images way better than long, text-stuffed content!   Images have the power of triggering those emotions that you want them to way faster than words so, you should reflect on that.   After your seconds of reflection, you should start to carefully pick your images and to put them together in the album that will make the best storyteller for your brand.   It will not just appeal to your users and enchant them, visually, but it will gradually guide them deeper and deeper into your story. It will slowly “pour” your own brand message into their minds.    In short: images will always make far more than “just” a “nice wrap” for your story, they can be the story itself if selected and handled with great craftsmanship.   2. Tell It Through Words, Powerful Words   And by “words”, we do mean“words”, you know, not long, tiresome textual stories (like chapters in a book).   Therefore, think through your choice of words for your call to action button, for your navigation menu, for the central content itself.   Think cohesion, as well, when you choose your words (they should complement and put together the whole “plot”) and see each one as a truly powerful little storyteller (if chosen right).   It's the words that you choose that will create the “voice” that will narrate your story. Therefore, depending on your company's profile, on its message and on your target audience, your “narrator” could be formal or casual, for instance.   Invite your visitors to “delve into” the story that's being told on your website. Invest your words with some of the “once upon a time” introductory phrase's power!   Note: always keep in mind that the “supreme” goal of your “string” of words narrating your brand's story is to engage and to get your visitors to interact with your website. Make your users interact, whether that means clicking on your call to action button, signing up to your newsletter or purchasing a product.    3. Put a Face on Your Storyteller(s)   In other words “breath” some personality and authenticity into your website! Breath some “life” into its design.   It's such a popular trend these days that companies should reveal the team behind their brand message, the people who had been hidden behind the user interface and whose presences the visitor could just “sense”.   In other words: let your team tell your company's story. They're the ones that know it better!   Your future customers will relate far more easily with people than with the products/services that they create/provide. So, add the human factor to your brand's message, making sure it's a human factor with a unique personality (it's “your” story, after all: dare to show off its uniqueness).   4. Instead of “Telling” Your Story, How About “Illustrating” It?   Now that we've just talked about infusing personality into your visual storytelling, we should point out, as well, that illustrations add even more personality to your website than images!   The roles they can take on are far more varied and far more refined. And where do you add that they can be (depending on the artist of your team who created them, of course) a bit more “personal” and therefore more “powerful” than images.   Take a collage of crafted illustrations, for instance! You get to use them for pointing out relationships between different elements of your visual storytelling and you get to use them for presenting sequential steps (e.g. how your “innovative” product should be used).   They're far more dynamic than images, so consider them turning into your storytellers!   5. Tell It Through a Video   Just imagine your visitor: instead of having to go through your written or visual story, he/she'd just lay back on his chair and enjoy watching a video story! Far more convenient, don't you think?   Create a powerful story around your product and tell it in a video. Make it fun and wacky, artsy and visually appealing, educational, or truly impactful, depending on your company's profile.   You decide whether it's you who'll actually narrate it or someone else (one of the most efficient ways still is that where some your happy customers tell your story in that video).   And these are just the first 5 tips and tricks that we've prepared for you (from a series of 10), tips that are part of our own "toolbox", the one we rely on here, at our web design agency in Toronto, so that you can go ahead and get the most out of the true power of visual storytelling on your website.    To be continued, with our other 5 tips in our next post!  ... Read more
Adrian Ababei / Dec 16'2016
How to Conduct a Content Audit and... Why Should You? A Step-by-Step Guide and Main Benefits
Here's some food for thought: If you don't know where you are, you can't figure out where to head to!   What does this mean in the context of a website content auditing?   It means that if you're clueless about the content existing on a website (or you have some sort of collected data, but you haven't gone deeper with your content analysis) you can't possibly set up any business goals for the given website. Or you might just draft them based on some superficial insights.   How are you supposed to migrate from Joomla to Drupal, for instance, or to apply any improvement-oriented change on a website if you don't know know enough about its whole intricate network of content layers and about  how these can affect your whole performance-boosting strategy?   So, you got our point: it is vital for you to closely evaluate the content on a website before you rush in to put together any sort of content strategy, before you set up any daring business goals.    And Still: Why Is It Crucial To Run a Content Audit?   More often than not even your client doesn't have an in-depth knowledge of how the whole content “mosaic” on his website looks like.   Therefore, you could see the content audit as the base of the "pyramid” that your whole project is (whether this project implies a redesign, integrating a totally new CMS, migrating the website from an older to a newer version of an CMS, coming up with an SEO strategy etc.).   It's the “diagnosis” that you can put on this website and depending on which you can, later on, come up with the suitable “treatment” (aka business development strategy).    Here's what you get to “dig up” during this content evaluation process:   valuable information about the workflows and content life-cycle   certain content patterns   “gaps” within the content, that need to be filled up with strategic content   you get to identify the “weak” pages on a website, those with low performance    How Do You Actually Evaluate Content on a Website?   Now that we've pointed out why it is vital for you not to underestimate or, even worse, to skip this preliminary step of every web project, here comes the next legitimate question: how it's done?   Well, you practically set up 2 main “barometers” for evaluating each web page:   performance per page (analyze HTML tags and keywords)   specific business goals   And here we need to stress out this last idea: let your specific business goals guide all your insights throughout this auditing process!    Note: you should start moving your imaginary magnifying glass across those particular pages of “critical importance” for the given website first! They could be the ones including products/services or the “About Us” page, but it depends greatly on each site's particularities and goals.   But What Does This Audit Include More Precisely?   1. Personas   If your (or your client's) website's content doesn't “talk the language of” or doesn't meet the needs of its persona, then it's as useful as a beach umbrella for an Eskimo.   Therefore, first of all:   you need to check whether that persona's profile has already been sketched you need to check whether the already existing content on the website “speaks his/her language” you need to establish, at this point, what content stays as such, what content needs improvements and what content goes, based on whether it's efficiently adapted to that persona's specific profile   2. Content Inventory   At this step you “just” pile up all the content on the website. So, no need to “examine” it yet (take baby steps; “patience is a virtue!”, you know), just make sure you collect all the existing content and put it together in an inventory.   3. Stakeholders Meetings   They are the ones that have been “pumping up” content on the website, so they should be the ones holding the most valuable information regarding the site's target audience.    Therefore, make your your “investigation” includes chit-chats with these key “content handlers”, too!   4. Content Gaps Evaluation   Compare how the existing content is performing to how it should have or you would like it to perform in the future.   Identify the “weakest links”: on which pages content is less effective than on the rest of the website.   Next, after you've identified the causes, come up with solutions, too! How can you fill in those gaps with proper, strategically crafted content, aimed at meeting your visitors/customers needs?   5. Your Competition's Content Evaluation    Your competitors' content is “pure gold” for you!   “Spy” on them, examine their own content, their whole content strategies, try to identity their own “weakest links”, too.   Collect as many valuable data as you can regarding their own personas, how much content, what type of content (whether it's high quality or low quality content) they have on their websites etc.   Keeping an eye on competition is a method that will never “grow out of trends”! At least not in matters of content auditing!   6. SEO audit   A content audit without an in-depth SEO audit is pretty much like a diet based on exercise, but not completed by healthy foods, too. Only half efficient!   So, grab on your imaginary magnifying glass and scrutinize the depths of the website from an SEO perspective: examine the meta descriptions, keywords, URL structure, 404 errors, title tags.   Do a little “dirty work”, so to say, which will help you figure out how all mighty Google perceives this website!   What Type of “Content” More Precisely?   By “content” we do refer to both on-site and off-site content, you know.   On-site types of content that you should analyze:   homepage   category pages   product descriptions   landing pages   blog   etc.   Of-site types of content that you should analyze:   social media   ebooks   emails   whitepapers   etc.   This macro-evaluation will allow you to identify whether the brand message is consistent through all these various types of content.   How Do You “Wrap Up” and Present Your Final Insights?   And here you are now, with an impressive “pile” of valuable findings that you've collected during your content audit process.   How do you present your conclusions to your client now?   Let us give you a few helpful tips:   put them all together in a compelling story (never underestimate the power of storytelling)   put together a strategy: clear goals+ clear means for meeting these goals   select the “key” findings to present   start your presentation with good news and continue with “issues” that you've identified during the audit     And here is how you run a content audit! At least this is how we run it here at our web design company in Toronto! ... Read more
Adrian Ababei / Dec 15'2016
Drupal or Wordpress? Depends on The Type of site You Will Build!
Drupal or Wordpress definitely make the most popular CMSs of the moment and considering that they do share quite a lot of similarities, too, making a straight choice between them can get quite energy and time-consuming.   How should you know for sure which one is THE one that will respond better to your web project's specific needs?    Before you dive into our in-depth comparative review of the two famous CMSs, (that we hope it will manage to steer you in the right direction), we need to put this straight right from the start: there is no such thing as “one is better or worse than the other”.   Both Drupal and Wordpress work wonderfully when it comes to suit specific needs, therefore, there' no question of hierarchy here, only a matter of  “suitability” so to say.    Each one of the two is designed for a specific type of website (and, thereby, comes with a specific set of expectations from its future owner), that's all! Drupal or WordPress: Which One Is More Advanced in Terms of Functionality? Here's something to reflect on: Drupal's far more advanced functionality (compared to Wordpress's) is, at the same time its strength and its “Achille's heel”.    How come?   It all depends on the level of technical knowledge of the one deciding to “unleash” and handle its functionality. It can lure and be an “irresistible' challenge for some, but it can discourage others!   Drupal requires someone with more than “some” technical experience (or at least one who's well aware, from the start, that there is a steep learning curve involved) for handling all its various features- content types, taxonomies, blocks, views- and livening it up to its full potential. Once handled by “technical savvy hands”, it can handle all types of refineries that Wordpress can't: it can handle heavy content and multiple website stakeholders (website admins, content editors, publishers you name it).   As for Wordpress, it will definitely manage to cast a spell upon you if have basic technical skills. Designed as a blogging platform, Wordpress's performance can be affected to a great extent if it's “forced” to carry away a too heavy load of plugins and content “on its shoulders”. Otherwise, if you keep your Wordpress website light, it can reach pretty much the same level of performance as a content-stuffed, large-scale Drupal website.   See? Told you!   It all revolves around the type of website that you need to build (and also around your level of technical knowledge).   Drupal is more robust, but it's quite “picky” when it comes to “revealing its true power” to the one handling it: it's a CMS built by developers for developers, after all.   Wordpress keeps its performance within good parameters as long as you don't overload it (and it requires zero technical skills, too)! Drupal or WordPress: Which One Is More Flexible? HIGH PERFORMANCE and FLEXIBILITY sure are the 2  pillions of any great website on the online landscape, wouldn't you agree?   "Flexibility" is another word for “Drupal”. The CMS practically “overwhelms” you with a wide collection of free themes, modules and tempting customizing options, which you can pick, tweak and use for constantly editing and boosting your website's looks and performance.    And yet, it's a “gift with a twist” that Drupal makes you! There's no point in hiding it (and even we, as Drupal developers in Toronto aren't going to conceal this detail): you need to be a developer for efficiently handling all its modules. They require customization and therefore technical skills.    But once you've learned how to install, costume and update modules in Drupal, how to “unleash” all that extra functionality that these modules “encapsulate”: oh boy, it's such a confidence-booster! You'll get to build a website capable of handling thousands of users and thousands of content-stuffed pages!   Wordpress isn't a cheapskate, either, when it comes to “spoiling” its users with no less than “millions” of plugins and themes. Moreover, it definitely has a strong advantage for the non-tech savvy ones: you don't need to be that technical for successfully integrating all those plugins and perform all the needed editing yourself: on colours, font, layout, you name it. Ease peasy!   But you get to do all that only as regards small size websites, you should definitely keep that “tiny” detail in mind! Drupal or WordPress: Which One Ranks Higher in Search Engines? When comparing Drupal to Wordpress in matters of SEO-related features, what you should know is that there is no matter of “better” or “worse”! It's just a matter of “two different, yet equally efficient approaches”!   Let's dig into more details!    With “tantalizing” plugins, such as Yoast's SEO, Wordpress helps you ideally optimize your website for search engines in no time (and with no great technical skills required either, remember?). It “spoils” you with a quick and easy way of optimizing your site.   As for Drupal, it comes with a certain “edge” given by the fact that it can handle way larger websites. Loads of content and truckloads of daily visitors to handle, you can just figure it out yourself, come with a different approach to SEO, with totally different SEO needs and strategies. Moreover, you need to know what you're doing, when handling Drupal, if you want to efficiently optimize your site.   Here's another “detail” for you to reflect on: when it comes to page load times (and you're well aware of Google's “weakness” for websites that load fast) Drupal comes equipped with robust and (most important) out-of-the-box catching features, as compared to Wordpress, where you have caching plugins that you get to use for speeding up your website! Drupal or WordPress: Which One Handles Security Better? Whitehouse.gov is built on Drupal!   Need I say more? Drupal takes security to a higher level, that's for sure, and no wonder since it's been designed to suit the specific security needs of enterprise-level websites!   Wordpress, since it's been designed as a blogging platform, is more vulnerable. It takes just a hacked plugin for hundreds (or more) of  Wordpress websites to get “infected”, so just reflect on this for a minute or two before you make your final choice.   Size does matter! The size of the website that you develop determines its future security needs, as well (so, you can't compare a blog to a governmental website, right?).   There's more! Choosing the right platform specific hosting application is decisive when it comes to managing security risks: you have Acquia and Pantheon if you go for Drupal you have WP Engine and since recently Media Temple, too, if you go for Wordpress We, here, at our web development company in Toronto, manage to “sleep well at night” since we are Acquia partners! Drupal or WordPress: Which One Is Easier to Use? This is the aspect that Wordpress excels at! Anyone can use it!   You get to set up your Wordpress site and make it look sharp and functional in no time without having to be a programming languages guru! With its simple user interface, it turns building a website into a matter of minutes and even its customization doesn't pose great problems or causes severe headaches.   Things get a bit trickier with Drupal! It's not hard to use it, it's just a bit more challenging to learn how to use it in the first place!    Once “armed” with enough technical skill, the sky is the limit with Drupal: you can develop far more advanced (and therefore confidence-boosting) websites. Its interface, too, is easy to use, so that won't be a problem. It just requires a bit more time (and will) to learn how to mix and match its core features and how to edit anything in the back-end, too.   And, the good news is that it looks like Drupal 8 paves the way to turning its CMS more accessible for non-developers (such as content editors, for instance), too. So, there are chances that Drupal steals the “crown of easiness to use” away from Wordpress in the future to come! Stay tuned!   Also, you can relax: they both get your back covered!   That's right, both CMSs are supported by active user communities, so you can easily get the answers to your questions or the needed documentation!   Another highly important “detail” is that both Drupal or Wordpress reward you with freedom in terms of design! You get to design your templates to your liking, no matter which one of the CMSs you'll go for!   We'll end our comparative review with 3 last questions that you should ask yourself before you go for one CMS or another:   1. Does your future website have to handle multiple user permissions?   2. Will it feature multiple content types (and page templates)?   3. Does it require enterprise level security? ... Read more
Adrian Ababei / Dec 14'2016
Drupal vs Joomla: Which One to Choose for Your Web Project? And Why?
You are aware, aren't you, that there's a lot at stake when choosing the “right” CMS, the one that meets your particular web project's needs? So, you definitely need to think it through and to consider all the main aspects!   Still, no need to panic now! To get stressed out that you risk to make the wrong choice, for you can't tell which one is the perfect fit for your particular work scenario.   The best way to find your answer if by asking yourself the right questions!   As simple as that!   What's your level of knowledge of the main programming languages (CSS, HTML, PHP)?   What type of website will you be developing (a corporate website, an e-commerce website, a social network etc.)?   What future do you anticipate for this website? Are there any chances that it should grow significantly? Will it require new functionality and is it likely to face the challenge of traffic overloads later on?   And so on...   Are You Joomla's or Drupal's “Target” User?   Are you're a “tech savvy” developer, with a consistent coding experience in the basic programming languages? Then you're the type of target user that the community developing Drupal envisioned for this platform!   Are you confident that the site you're about to build will grow and, therefore, get more and more “greedy” when it comes to new features and constant customization (and you have a certain “weakness” for the after-launch “polishing” and constantly upgrading processes? Then you should definitely go for Drupal.   Do you have basic technical skills instead? Are you looking for a super easy to use CMS that doesn't require certain language programming skills? Then Joomla is the platform that you'll find be comfortable with! It will allow you to have your e-commece or social networking site up, running and looking attractive in no time!   Is It A Joomla-Specific or a Drupal-Specific Website That You'll Build?   What type of website are you planning to develop?   And (after you've discovered whether you're Drupal or Joomla “material” answering to the question in the previous paragraph) this might just be the question that will help you make a choice between the two popular CMSs!   Is it an ecommerce website that you'd like to set up quick and easy, with no customization implied or maybe a fully functional social networking website and you have basic technical skills? Then you've got yourself a winner: Joomla!   Are you facing an a lot more challenging project, where you need to rely on your technical expertise and deep experience as a web developer for building large scale websites? Then it's Drupal that will help you meet and exceed your client's daring business goals. For instance here, in our web design company in Toronto, we often face the challenge of developing content-packed websites. So, we know that we can rely on Drupal: its been designed for handling truckloads of users and large amounts of data, you know.   And where do you add that, due to its catching features, Dupal loads faster, too? And it requires less server resources than Joomla, as well?   Checked and double checked! If you're planning to start a daring (even a multisite) website project, one that's sure to grow steadily in traffic and content in the future to come, then go for Drupal!   How Do Drupal and Joomla Respond to Your Need of Customization?   FLEXIBILITY and CUSTOMIZATION are Drupal's “little name” and respectively “middle name”!   So, you bring in your passion for “getting your hands dirty” up to your elbows in lines of code and it will spoil you with an overwhelming array of themes, plug-ins and all sorts of other configurable options!   Select the ones that respond to your website's ever growing needs, mix and match them and then skillfully integrate them, boosting both its looks and functionality!   It's true, Drupal “expects” you to be more of a technical savvy (compared to Joomla), but it also gives you unlimited freedom: feel free to come up with any needed improvements to your site, to create custom modules, to play with themes, to upgrade its out-of-the-box features to your (or your client's) liking. Sky it the limit!   Oh, and I almost forgot: they're all free! It's a “detail” that you should take into account if you consider that some of Joomla modules and plug-ins are not free of charge!   So, yes, when it comes to flexibility and customization, it depends a lot on your own needs:   Do you actually want to be able to constantly customize the look and feel of your website? Drupal enables you to do that painlessly.   Do you just want to set up a functional site as quickly as possible, without investing to much time and skills into its customization? Then Joomla, with its already famous easy to use interface, will help you set up your social network or online shop as quickly and stress-free as you say: “Joomla”!   What About Security? Which One Makes A More “Secured” Choice?   It would have to be Drupal!     And I'm not saying it because it's Drupal that we're building wesites on here, in our digital agency in Toronto! Just think about it (for it's pretty obvious): how many hacked Drupal websites have you heard of compared to Joomla or Wordpress sites?   It's true that those who've “pledge to remain 100% faithful” to these two CMSs will come to “counterattack” stating that this is only because there aren't as many websites built in Drupal as there are in Joomla or Wordpress.   And yet, it's a proven fact: Drupal takes security to another level, compared Joomla. Its worldwide community of developers is constantly “hunting” down threats and is always on the lookout for any weaknesses showing up in the system. Moreover, whenever they spot security vulnerabilities, they patch them up and “expose” then on the website.   Still, even if with its not that strong approach to the security factor, Joomla, too, responds to security vulnerabilities and it gives you the chance to strengthen your site's level of security, to upgrade it with new extensions. Yet, it is important to keep in mind that you'll need to constantly run the necessary updates for keeping it properly shielded!   Which Are Joomla's and Drupal's SEO Capabilities?   If you're concerned about the SEO aspect (and you should be, especially if it's the challenge of a large scale, multilingual website project that you need to respond to), then there's no “better option”, there's just ONE option: Drupal!   It “beats” Joomla in terms of SEO capacities, being equipped with far more advanced SEO features.   Still, it's true that you can optimize your Joomla website for the search engines, too. The main difference is that you'll need to actually create those custom SEO-related features yourself (and since this CMS “boasts” to be “a dream come” true for the non technical savvy ones, this aspect might just be an unpleasant surprise for you).   How Do They Handle Technical Support?   When it comes to their help portals, if you're a beginner you'll find Joomla's technical support far more accessible.   You can find the answers to all you Joomla-related “dilemmas” and you'll be able to get all the guidance you'll need as compared to Drupal's support options, which are more “from developers to developers”: a lot more technical.    So, there's no "better" or "worse" help portal! It's just a matter of responding to their own target users and “speaking their language”.   What other strong and weak points of these two popular content management systemshave you “dug up” yourself ? What other similarities and major differences? We're looking forward to reading about them in the comments below! ... Read more
Adrian Ababei / Dec 13'2016
Consider These 5 Aspects When Picking Your Base Theme in Drupal 8
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? ... Read more
Adrian Ababei / Dec 12'2016
6 Easy Tips on How to Use Visual Contrast for Designing Alluring Hero Images
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! ... Read more
Adrian Ababei / Dec 09'2016
Blog Placeholder
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!   ... Read more
Adrian Ababei / Dec 08'2016
Blog Placeholder
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! ... Read more
Adrian Ababei / Dec 07'2016
Is Your Website Designed to... Sell? 7 High-Converting Design Principles to Apply- Part 2
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! ... Read more
Adrian Ababei / Dec 06'2016