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.

What Does It Take to Develop a Mobile-First Content Strategy for Your Drupal Website?
There's no way around it, not anymore: with Google's index now mobile-first, adopting a mobile-first approach when building a new Drupal site (or redesigning a legacy one) is… a must! It no longer depends on a specific project's needs or on the used technology. The need to develop a mobile-first content strategy has gone from particular to universal. And facing the challenge of:   (re)creating optimizing structuring   … content on your Drupal website means conforming to those specific patterns that mobile users have developed for reading content on their smartphones. In short: developing a fully responsive Drupal site comes down to centering your mobile content strategy around the idea that: It's for the smallest screen sizes that you should plan your content for, first things first … then scale it up from there. Now, let's see precisely what it takes to develop a mobile-first content strategy. What focus points and must-have components to include:   1. Take the Smallest Screen Size as the Starting Point In other words: think mobile-first! And by “mobile” I do mean “smartphones” — the smaller the screen size, the better.  This way, you'll be adjusting your content so that it makes the most of the smallest interface. Starting “small” is the best way to stick to the “keep it simple” approach: Thinking through every content-related decision in the light of the viewport size challenge will constrain you to keep the truly essential content elements only. Hence, this “spartan” way of eliminating the unnecessary will reflect on your site's desktop design, as well:  It will turn out cleaner and lighter.   2. Use Visual Content Wisely: Weigh Your Choices of Images  The golden rule when it comes to the imagery that you'll use on your responsive website is: If an image doesn't enhance and complement your content, then you're better off without it! And I know what you must be thinking: “But people remember what they see far more easily than what they read.” True, you need to keep in mind that visuals do come at a cost, though: Those stunning, visually-arresting images on your website risk to divert your users' attention from the message itself. And still, probably the most heavy-weighing reason why you should use images wisely when you develop a mobile-first content strategy is: weigh. Visuals risk to take up valuable screen space and thus:   outshine your calls to action themselves impact your site's overall performance (leading to frustration)   Now that doesn't mean that you should strip your content off ALL the visuals! Absolutely not! Just to be cautious and weigh your every choice, think through your every decision involving the usage of an image.  Once you've selected the truly essential ones, keep in mind:   not to no resize them (or optimize them in any other way) before uploading them to your CMS: let Drupal do the heavy-lifting here  to leverage the Responsive Image module's (Drupal 8) capabilities for resizing them to fit the given screen sizes   3. Content Before Design This is the right sequence to follow when you're designing (or re-designing) your Drupal site with mobile users in mind: First, you create and strategically organize your content and upload it to your Drupal 8 CMS. It's only then that you focus on styling and developing a responsive and visually-striking web design. If it's legacy content that you're dealing with, trying to convert it to mobile, the very first step to take when you develop a mobile-first content strategy is: Removing all the design elements from your written content.   4. Create a Hierarchy of Your Calls to Action Making the most of a small interface means also setting your priorities in terms of calls to action: Pair each one with a corresponding objective, evaluate them all wisely, then select THE call to action that's most critical for you and place it — and it alone — above the fold.   5. Organize and Optimize Your Content for Mobile Devices I'll briefly list all the key requirements that mobile-friendly content should meet — aspects to pay attention to when writing content for mobile devices — for I'm sure they're nothing new to you: the phrases should be kept short and concise, thus eliminating the burden of “never-ending-scrolling” the content should be sharp, targeted and skimmable, so users can easily “digest” it and modular, so that users can swiftly browse through it “modular” meaning made either of multiple clear paragraphs — each one standing for one thought — or chunks of 3 paragraphs at most    6. Optimize Media, too, When You Develop a Mobile-First Content Strategy And there are a couple of essential steps that you mustn't overlook when it comes to mobile-optimizing your media:   always go for thumbnails instead of video players that your users would have to load and thus strain on your site's valuable resources don't ever use autoplay on your audio and video content  optimize your sound, image and video files both for large and small devices   7. Trim Down Your Navigation Menu In other words: when you develop a mobile-first content strategy, consider simplifying your navigation to its truly essential links. No user would gladly scan through a “beefy” navigation menu taking his device's entire screen:   flatten your navigation: stay away from the technique of piling up submenus, layers and navigation points feel free to place the links that you'll remove on other places on your website (or even to turn them into calls to action)   8. Convert Your Legacy Content to Mobile-Friendly Content  If it's a legacy Drupal website that you need to restructure and to adapt to your mobile users' specific patterns for browsing through and consuming content on their smartphones, then it's time you:   dug into your static HTML … and cleaned it up   And by “cleaning it up” I do mean:   removing inline media removing the fixed-width tables eliminating floats with content  breaking it down into skimmable chunks of content   … that can be easily structured into content fields. The END! These are the 8 main aspects to focus on when you develop a mobile-first content strategy.  Now time to test the “saying” that: “Creativity strives under constraints.” … and to make the most of those small interfaces. ... Read more
Adriana Cacoveanu / Jun 11'2018
How to Use Bootstrap with Angular 4? Here Are 3 Ways to Add It To Your Project 
Here you are now: your Angular 4 front-end app ready to... wow its users! “Almost ready” actually! For it still needs styling... And what better HTML and CSS framework to go for than Bootstrap, right? But how to use Bootstrap with Angular 4 more precisely? How do you properly integrate it into your Angular 4 CLI project? Great news: you have not just one, but 3 options at hand for adding it! Let me get into details:   On Using Bootstrap in Your Front-End Development Process Is there any need to list here the reasons why it's precisely Bootstrap that you're planning to implement into your Angular CLI project? Angular 4, to be more specific. After all, it's the most popular framework for styling websites built in HTML, CSS and modern web & mobile JavaScript frameworks (like Angular here): It's an open source, feature-rich framework that turns front-end development into a such a “breeze”. Basically, it empowers you to build responsive layouts without the need to be a CSS “expert”. And now, let's break down further with the step-by-step “tutorial” on how to use Bootstrap with Angular 4:   Step 1: Create a New Angular Project Using Angular CLI  The very first step to take is obviously setting up a brand new project. Use the Angular Command Line Interface to generate it. But first, install it to on your system: $ npm install -g @angular/cli It's only then, once you've installed its NPM package, that you can go ahead and... generate your new project.  For doing this, just type the following command in your CLI: $ ng new myproject Next, feel free to change into that specific directory and to turn on the web server: $ cd myproject $ ng serve “App works!” This is the message that you should be seeing in your browser right now.   Step 2: Install Bootstrap to Your Project Now that you've launched your new Angular project, it's time to add your Bootstrap library, as well. And you sure aren't nickel and dimed in options. There are 4 ways to add Bootstrap to Angular 4.   Step 3: How to Use Bootstrap with Angular 4 — 3 Different Ways to Integrate It Option 1: Install Bootstrap from CDN And there are 2 particular files that you'll need to install from CDN into your project:   the Bootstrap CCS file the Bootstrap JavaScript file    Note: keep in mind to add the jQuery JavaScript library file, as well! Next, open the src/index.html file and insert the following:   the <link> element to add the Bootstrap CSS file at the end of the head section a <script> element for adding jQuery at the bottom of the body section a <script> element for inserting the Bootstrap JS file at the bottom of the body section   Eager to see “Bootstrap in action” in one of your project's component templates? Then give it a try:   open the src/app/app.component.html enter the following code there:   <div class="container"> <div class="jumbotron"> <h1>Welcome</h1> <h2>Angular & Bootstrap Demo</h2> </div> <div class="panel panel-primary"> <div class="panel-heading">Status</div> <div class="panel-body"> <h3>{{title}}</h3> </div> </div> </div> And it's the following message that this HTML template code should trigger in your browser: “app works!” Note: go for a Bootstrap theme of your choice; once you've downloaded it (from Bootswatch.com for instance), its bootstrap.min.css file will get instantly opened up in your browser. Just copy the file's URL and use it to replace the string assigned to the href attribute of the <link> element, in the index.html file. And voila! It's precisely those colors, defined by your chosen theme, that get displayed in the browser now!   Option 2: Install Bootstrap using NPM And here's another valid answer to your “How to use Bootstrap with Angular 4” dilemma! Simply enter: $ npm install bootstrap@3 jquery –save It's this command that will integrate Bootstrap and jQuery into the node_modules folder of your Angular 4 project directory. Moreover, it will include these 2 dependencies in the package.json file, as well. Once properly installed, you can find both packages at:   node_modules/bootstrap/dist/css/bootstrap.min.css node_modules/bootstrap/dist/js/bootstrap.min.js node_modules/jquery/dist/jquery.min.js   Note! You have 2 options for integrating those files into your Angular 4 project:   add the file paths to the script array and to the file path of the angular-cli.json file add the corresponding <script> and <link> elements to your index.html file   Option 3: Add NG-Bootstrap to Your Project The great thing about this method is that you'll no longer need to add jQuery and Bootstrap dependencies. Ng-Bootstrap comes packed with a set of built-in native Angular directives which are already CSS and Bootstrap's markup-based. Now, getting back to our initial “How to use Bootstrap with Angular 4” question, let's see how we install this NPM package.  For this, just enter the following command in your Angular 4 project directory: npm install --save @ng-bootstrap/ng-bootstrap Next, make sure you also install Bootstrap 4 to your project: $ npm install bootstrap@4.0.0-alpha.6 And, the final step is to add the following files:   jquery.min.js bootstrap.min.js bootstrap.min.css   … to your .angular-cli.json file Now you still need to import the Ng-Bootstrap’s core module — NgbModule — from its @ng-bootstrap/ng-bootstrap package. To do this, just type the following import statement into app.module.ts: import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; All there's left for you to do now is to add the NgbModule to the @NgModuledecorator's imports array.  And since we're here, you'll find some more than “enlightening” info (chunks of code here included!) on the 2 different options at hand for importing the NGBModule: either in your project's child modules  or in your the root module itself … in this article here on Using Bootstrap with Angular.   Using The NG-Bootstrap Components: Which Are They?  With the NgbModule installed into your Angular 4 project, you're now able to use the Ng-Bootstrap components. To leverage them in your app.component.html. Speaking of which, here are the components at hand:   Accordion Alert Rating Tabs Carousel Progressbar Collapse Datepicker Buttons Pagination Typeahead Popover Timepicker Dropdown Modal Tooltip   The END! Does this answer your “How to Use Bootstrap with Angular 4” question?  Which method of adding this front-end framework to your project is more suitable for you? ... Read more
Silviu Serdaru / Apr 30'2018
Which Are The Best Free Magento 2 Themes and Why? Top 10
Conveniently customizable, ideally flexible and unexpectedly feature-rich... No wonder that you consider moving your site to Magento 2. Or having your brand new e-commerce site built on the latest version of Magento. And now you must be wondering: which are the best free Magento 2 themes to choose from? And let me guess, your “feature wishlist” goes something like this:   responsive (it goes without saying) functionality-rich visually-appealing flexible enough  capable to accommodate both medium and large-sized online store (you need to consider your growth plans, too, when choosing your theme, right?)   Oh, and yes: most probably time is not your best ally, am I right? Therefore, you can't afford to invest too much of it in comparing, weighing pros and cons, setting up a never-ending list, then trimming it down to the very best themes for Magento 2. Well, no need to, for I've got your back! Here's a top 10 for you, including only those themes with the best user reviews, themes that strike the perfect balance between great looks and powerful functionality:   1. Ves Yume Feature-packed, fully responsive and... free of charge. What more could you possibly ask for your theme? And speaking of its features, although they do come with no price tag on, they're unexpectedly powerful. For example:   gallery image product detail off-canvas menu & header link Ajax cart checkout improvements font awesome a handful of static blocks   In short: a full-collection of features and functionalities for providing both rich and convenient online shopping experiences to your customers.   2. F2 If it's a sleek & clean web design, suitable for a professional e-commerce site, that you're aiming at, then F2 is the theme to power your plans with! One which — although designed by the latest web trends — doesn't trade functionality for visually-striking looks.  And speaking if its features, let me point out to you the most tempting ones:   responsive design sticky header drop-down cart multiple product types configurable swatches   Moreover, it's one of those best free Magento 2 themes that are surprisingly flexible, as well. You're free to adjust it to perfectly fit your Magento project's type and size. Tip: where do you add that —  although looks play a major role here—  F2 is NOT overburdened with visual effects. Effects that would negatively impact your online store's performance!   3. Best Free Magento 2 Themes: Ketty, One of the “Oldest” Ones, too “Oldies, but goldies!” For, even if it's one of the “oldest” Magento 2 themes, Ketty's packed with some truly powerful features. And thus capable to “rival” much newer/younger themes. Now, if I am to highlight some of its attention-worthy features:   Ajax cart product zoom user-friendly admin panel with a new design highly customizable configurable swatches improved checkout cross-browser support   Also, F2 is one of the responsive Magento 2 themes, in case you were wondering...   4. Absolute One of Magento's “star” themes for 4 years now, Absolute's now available for Magento 2, as well. A highly professional theme overloaded with options to suit your every feature need. If I were to name just some of these hard-to-resist-to ones:   image slider theme editor featured product slider newsletter subscription my cart and compare product blocks on the homepage quick product overview   A responsive theme that has already earned itself a “reputation” among Magento users, conveniently packed with features to answer all your e-commerce requirements.   5. BizKick BizKick's made it to almost all users' personal lists of best free Magento 2 themes.  And for 3 strong reasons:   it's responsive it “spoils” them with a whole collection of advanced features it “tempts” them with a handful of clean and classy layouts   6. Ves Need Is it health spa services, glasses, beauty products, handbags, shoes or maybe clothes that you'll be selling on your Magento 2 e-commerce site? Then you might want to consider Ves Need.  It comes with an elegant, neat & clean design that will surely appeal to your (mostly) female audience. And where do you add that it's free, too!   7. Ves Fasony Designed with the customer's needs and expectations in mind, Ves Fasony is a responsive theme for Magento 2 built with Bootstrap 3.x. The key reasons behind its listing on this exclusive top here — featuring the very best free Magento 2 themes —  are the following:   it's built with online customers' needs and expectations in mind; it anticipates their requirements and delivers an amazing shopping experience it's optimized for touch drag and drop it comes with an owl carousel controlling the image slider   Moreover, Ves Fasony's ideal for women and men fashion, watches and bags stores. So, do keep this aspect in mind when you're evaluating the themes listing in this top, looking for the one that best fits all your e-commerce requirements.   8. FreeGo, One of the Best Free Magento 2 Themes It has the functionality — since it comes packed with a full set of powerful features — and it sure has the looks: a clean-elegant (almost minimalist) design. Moreover, FreeGo's fully responsive and puts a powerful back-end panel at your disposal. One that you can use for customizing your theme to suit your Magento 2 project in the slightest detail. And now, when it comes to its “load” of powerful features:   sold out label extension touch optimized slideshow child theme ready features product list (showcasing featured products) child theme ready all browser compatibility off-canvas menu   9. Ves Kasitoo A Magento 2 theme with a product-oriented and therefore attention-grabbing design, perfect for the following types of online stores:   glasses equipment fashion...   Moreover, it's turbocharged with a plethora of advanced features to power your e-commerce website with:   retina-ready images featured block on the homepage touch optimized deal products carousel  off-canvas menu social media buttons product tabs carousel    10. Ves Vigoss If you have a “guilty weakness for cutting-edge, clear design, you'll definitely love this Magento 2 theme! Apart from its great looks, it comes with a full set of outstanding features to tap into:   brand logo slider Ajax cart front interesting quick view it's fully responsive checkout improvements   And to this list of features, I cannot but add the Magento 2.0 UI and the Bootstrap 3.x layout components, as well.   The END! So, now that you've scanned through this list of best free Magento 2 themes, which is the perfect fit for your own e-commerce web project? Which one of them supports all your feature needs? ... Read more
Silviu Serdaru / Apr 20'2018
Adaptive vs Responsive Design: What Is the Difference? Which One Is Better for You?
Adaptive vs responsive design. Is there really a matter of “better vs worse”? What's the difference anyway? For the boundaries sure look blurry enough. Especially since both types of web design provide you with a solution to the same challenge. The one you're facing as a web designer: A design that should cater to all screen sizes. Now, instead of delving into this confusion even deeper, let's shed some light on:   the responsive design key features the adaptive design's particularities each option's advantages and drawbacks key differences between adaptive and responsive design   1. Responsive Design: What Is It?  Using one single layout when designing a web page, that adjusts itself to fit the given screen size. This would have to be a concise, yet comprehensive definition. If I am to add a bit more details to it, I would have to say that: It's a “fluid” layout, a “fluid” grid that we're talking about here, one using CSS, Content (Based Breakpoint) and media queries  … for setting up different style roles for each device/media type Long story short: the responsive design approach enables your site's pages to (more or less seamlessly) adapt to various screen resolutions. Note: implementing a responsive design does call for a website conceptualization phase and a deep understanding of the end user's needs and expectations!   2. Adaptive Design: A Concise Definition Or “progressive enhancement of a website” if you prefer: This approach to web design is centered around “multiple fixed layout sizes”. Basically, you'll need to create different layouts, one for each screen size. Once the website “identifies” the type of device the user's accessing it from, it just triggers the appropriate pre-set layout. A layout that you/your team will need to prepare in advance, needless to add (so, you'll need to plan your time and budget accordingly). Who's leveraging this approach? Apple, About.com, Amazon are just some of the big names. It's an alternative to the “one-size-stretches-to-all” option in modern web design. Note: since we can't be talking about a unique layout being re-sized over and over again, there's no impact on the overall design; no more over-stretching or other inconveniences of the sort.   3. Responsive Design: Why Would You Use It? And What Could Discourage You? Why and when would/should you be “tempted” to go with this approach to modern web design?  Let's go through some of this type of web design's most “irresistible” strong points, shall we?   it's easier to set up and less time-consuming to implement since the same design is being used, seamlessly, on all devices, a certain feeling of familiarity is being instilled, enhancing the overall user experience … we can talk about a unified visual (and operational) end-user experience  the collection of affordable templates at hand, suitable for most CMSs, is ideally rich and particularly “tempting” if it's a brand new website that you need to design a “one size fits all” type of flexibility it's SEO-friendly; since we can't be talking about distinct design versions, there's no negative impact on the SEO strategy either lower maintenance costs no redirection needed for establishing the connection between mobile and desktop sites   And yet, this approach does come packed with certain disadvantages, as well. Limitations that you need to note and ponder on before you make your adaptive vs responsive design decision:   you'll have less control over the screen size design expect longer mobile download times no possibility to fine tune the advertisements showing up on your website expect to have certain elements scattered, moving around the screen once the design readjusts itself to the given screen's width   4. Adaptive Design: Main Advantages & Drawbacks Your “adaptive vs responsive design” dilemma becomes even acuter when you realize that you need to choose between: A seamless design, plus a certain sense of familiarity and a suite of tailor-made design solutions catering to users' specific needs. And how do you choose, since both familiarity and customization have a huge impact on the user experience? Now, let's have a look at some of the adaptive design's strong points:   as mentioned: it enables you to deliver custom-made web design; different layouts created for various screen resolutions (instead of one layout “stretched/shrunk to all of them”) it complies with the requirements of modern user experience: personalization-focused UX and user-centric approach to web design  … meaning you're not creating the best UX, but the best UX for each one of the devices that your users will be accessing your website from by “tailor-made” I do mean “tailor-made advertisements”, perfectly optimized to your relevant user interface and tailored to the user data collected from smart devices in an adaptive vs responsive design debate, the first one will always win when it comes to performance: sites using an adaptive design are just faster … and speed will always be a differentiating factor in Google's eyes coding an adaptive design is more time-efficient implementing it is more cost-effective managing it tends to be easier since you only need to consider few states testing it is much easier (with more accurate results, as well)   And now, are you ready for a list of drawbacks to balance adaptive design's advantages with? Just so you can gain a more objective understanding, evaluating all the pros and cons in full:   it usually requires more work, and therefore it's used mostly for overhauling existing websites, rather than with new websites (considering that “more work” stands for “more time-consuming”) the site configuration being either desktop or smartphone-focused, tablets and notebooks users are... left in the middle it impacts your SEO strategy, since search engines will detect and penalize identical content showing up on different websites (“.com” and “m.com” sites)   5. Adaptive vs Responsive Design: Key Differences to Take Away The most notable differences for you to keep in mind from this comparative analysis of the 2 popular options at hand are the following:   a responsive design is a consistent one: what you get on desktop, you get on a smaller screen size, as well a responsive design might turn out to be easier to maintain on the long run: with every new screen size emerging, it will adapt to it, by default … by comparison, with an adaptive design you'll need to create a brand new layout for every new possible device, with a specific screen width, that might get released on a long-term, we could say that maintaining a site using adaptive design gets more challenging: it's several fixed layouts that you'll need to manage (instead of just one) the adaptive screen size (you'll be using static breakpoint for building adaptive design) is less flexible than the responsive screen design: you'll need to design (from scratch) for every display that you target   The END! Are all these strengths and limitations of the two popular approaches to modern web design of any help to you? For solving your “adaptive vs responsive design” dilemma? ... Read more
Silviu Serdaru / Apr 13'2018
How Green Is Your Drupal Site? 17 Steps to Sustainable Web Development, Part 2
We are a web development team of our word. And since we promised we would come back with some more best practices for a sustainable web development process... here we are! In this post, as already revealed to you in “Part 1”, we will be highlighting:   all the “tweaking” you can do at a server level so that it should use less unnecessary energy (and reduce its overall CO2 output) how to approach content on your site with sustainability in mind   Here we go:   Tips on Improving Your Server Performance: Consider Switching to a Green Host If you're confident enough (or your team is) to get your hands dirty in server configuration and maintenance there are plenty of high-impact measures you could apply:   1. Use the BigPipe Module for Drupal 8 BigPipe has been and still is one of Drupal 8's biggest “innovations”. It's nothing new, Facebook's been using this technique for a long time for improving page load times. Yet, now you have it in the form of a stand-alone module that you can leverage right on your Drupal 8 site! And it would be a pity not to! Just think about it: the BigPipe module practically segments each one of your web pages into multiple pagelets and streamlines the content loading process. It sends the cachable content segments first and the non-cachable, dynamic content last.   2. Make a Habit of Optimizing Your Database Drupal “saves the day” (and the planet, too, when used properly) once again! It gives you the DB Maintenance module to enable, to leverage and to integrate with your sustainable web development workflow. And this will prove to be a powerful tool to support your database optimizing endeavors: it runs MySQL's OPTIMIZE TABLE regularly using cron.   3. Get the Most of All The Caching Improvements in Drupal 8 If in Drupal 7 you still need to enable caching yourself (configuring your site's performance on the Admin page), in Drupal 8 page caching happens... naturally, by default (as well as assets aggregation). And there's more! The caching enhancements made to Drupal 8 impact even pages “carrying” dynamic content. And this is a big step forward towards top site performance and using energy responsibly if it's an interactive (and therefore with dynamically generated content) Drupal site that you own.   4. Move to HTTP/2 … and expect your web pages to load X times faster! Be (still) one of the early adopters of HTTP/2! Why should you wait till it turns into a major trend? What you know for sure now is more than enough if you're truly determined to go further with your sustainable web development initiative:   the vast majority of modern browsers do offer great support for HTTP/2 it's proven that the HTTP/2 server push method makes a great “latency killer” by sending the requested data to the web browser BEFORE the later even “has the chance” to request it!   5. Move to a Green(er) Host A website about to turn green calls for a... green hosting company, don't you agree? So, it's time you get picky when it comes to choosing your host and to put the company you're already collaborating with to the... green test:   which is its policy towards sustainability and its contribution to creating a more sustainable web? how committed is it to using energy responsibly?   If it does not live up to your standards of sustainability... consider migrating to a more “welcoming”, greener host!   6. Compress Your Cached Pages And here you can choose the Drupal way or the Apache way of compressing your Drupal cached pages.  Also, you could even step up when it comes to your commitment to a sustainable web development workflow. Supercharge your server by installing Varnish and enabling Drupal's own Varnish module, as well.  This way, your server will be ideally equipped for caching, not to mention that Varnish is conveniently easy to configure!   7. Switch from a Data Center to a CDN Network … and reduce, significantly, the energy used during content delivery to your users' devices. Practically a CDN will locate the server (since we're talking about an entire network of servers put at your disposal) that's geographically closest to a given visitor on your website. Next, it will serve the requested content from THERE, much faster and using less energy.  In short:    better content delivery times for your users a reduced energy consumption for moving data/content from your server to their devices.   Sustainable Web Development at a Content Level: Keep It Light, Make It “Findable”  Once you've made your commitment to sustainable web development, optimizing your content:   for SEO for a lighter on-page load for an improved user experience ... is a must. And here are the 3 “fronts” you should be concentrating your efforts on:   1. Keep It Light, Keep It Short We've already tackled the “irresponsibly heavy images'” issue. So we're not going to point out, once again, the tools and the techniques at your disposal for reducing your visual content's size. What we do want to outline now is that you should keep your user interface efficiently simple!  Don't make your visitors get tangled up in visuals, don't turn your UI into a maze for your visitors to solve. Keep it lean and shamelessly intuitive!   2. “Find-able” Should Be the Keyword to Describe Your Content  The less time a visitor invests in tracking down the information he is looking for, the smaller his/her web use carbon footprint will be! And how do you make your content easy to find? There are a few simple tricks:   a well-thought-out navigation; apply all the best UX practices for a great search experience get the most of Drupal's core search enable the Apache Solr module (especially if it's a high trafficked site that you own) and integrate your green Drupal site with the popular search platform   3. Time to Archive Your “Last Season” Content  All those out-of-date images, unused files, “dusty” written content that no one reads anymore still lingering on your website, all those videos dating centuries ago should... go. Should get archived! Not only will you lighten the load your site needs to carry (and reduce energy waste) and take a burden off your server's shoulders, but this decluttering session will benefit your users too. Pages will load significantly fast! And overall maintenance costs will get lower. Not to mention that pages will load fresh, quality content ONLY for search engines to index and your users to enjoy.   The END! This is our list of tips and tricks on how to implement the sustainable web development principles into your own website.  As you can see, you're not being nickel and dimed in options when it comes to making your Drupal site (more) Earth-friendly! And they do range from basic, handy solutions that require no out-of-the-ordinary technical expertise, to a bit more complex ones. So you have no excuses for not contributing, at a basic level at least, to building a more sustainable web! ... Read more
Adrian Ababei / Nov 08'2017
How Green Is Your Drupal Site? 17 Steps to Sustainable Web Development, Part 1
Have you turned on the green light on your Drupal site? Have you moved to a sustainable web development workflow? A “movement” (rather than just a trend) that will benefit both:   You, the website owner: since optimized page load times and “find-able”, easy to “digest” content translate into happy visitors coming back to your site   The planet: since a lighter load of content, along with users that can access it much quicker, translate into “no need” for an additional infrastructure and into fewer carbon emissions (users consume less energy searching for their target content, while your data's “journey” from your server to their devices gets shortened).   See? Everybody wins: you, your visitors... the planet itself. And where do you add that these sustainable web development best practices range from common sense, easy to implement measures (for the non-tech-savvy ones), to more in-depth practices if you want to go further with your “greening” initiative. In this respect, Drupal (and especially Drupal 8) is ideally equipped for helping you achieve high performance on your website. You just need to press the right “buttons” for harnessing all that locked-in power! Here is the list of best practices for a greener, responsible Drupal site, sorted into 3 main categories:   Drupal specific, ready to use tools for optimizing your website with Tips and tricks for fine tuning your server for high speed Best practices to keep your content light (images), to make it conveniently snappy (written content) and easy to find   Drupal Specific Tools and Techniques For a Sustainable Web Development Process With a whole plethora of tools that Drupal “shovels” into your toolbox, tools aimed at reducing on-page overload and boosting your site's performance, all you need to do is: use them! Now allow us to list just a few of the handiest ones with a high impact on your site's carbon output:   1. Disable and Remove Unused/Outdated Modules Confess it: do you have the Devel module still lingering on your production site? How about the Views UI module which you only use now and then for editing one of your Views? And how about all those modules that you just took for a spin, “seduced” by their much-appraised functionality and cool features, and that you've never actually used (or stopped using shortly after you've enabled them)? Modules which are now claiming their own share of resources on your website since with every page view some of their code, too, gets loaded. Time to declutter your “modules closet"! Wiping the dust off this load will actually speed up your site and... contribute to a healthier planet. A win-win!   2. Leverage the Lazy Loader Module's Power Another sustainable web development technique specific to Drupal, "too" handy not to make use of, is enabling the Image Lazyloader module.  It will load the images on your website only when/if the user scrolls down to them. A resources “saver” and page load speed booster valuable especially if it's an image-packed Drupal site that you own.   3. Jump on The “Design First” Trend “Mobile first” is so much more than just a fancy expression associated with Drupal 8 or a passing trend. It's an entire philosophy shaping the sustainable web: use your own site's resources responsibly! Since you're constrained to design for mobile devices first, you're constrained to achieve more with less. You just can't afford “stuffing” your site with heavy, optimized images or with bulky JavaScript libraries. Your web pages would then take ages to load on smartphones or tablets. This way, you're “forced” to start small and keep it simple, efficiently simple! And you'll end up restraining yourself from getting “greedy on energy” later on, in the context of adapting your site for larger screens and when you're “spoiled” with higher bandwidth.   4. Aggregate Your JSS and CSS Files You can lay back and get “responsibly lazy” letting the Advanced CSS/JS Aggregation Module do the assets aggregation job for you! A much more convenient, sustainable web development solution for compressing your JavaScript load than the standard one where you would enable the aggregation code in Drupal Core (Administer > Configuration > Performance). And where do you add that this life and energy-saving module use Google's CDN to load jQuery! Has one of the requested JavaScript or CSS files on your site been loaded already by a browser? Then just a cached version of that file will get loaded instead of downloading it fresh.  Also, consider moving your JavaScript and CSS in the footer (a performance enhancement that happens by default in Drupal 8) for gaining a boost in page load speed!   5. Keep Your Images Small Stuffing your site with large and larger images, with heavy visual content aimed to wow your visitors is nothing but sabotaging your site and disregard the planet. And you should at least strive not to “steal” your site's chances to win over more users! Keeping your images irresponsibly oversized will only prolong your users' waiting for them to load and, implicitly, increase their CO2 emissions. Drupal comes to your “rescue” once again providing you with the ImageCache module. Use it to minimize overall page weight. Then, go even further by teaming it up with handy tools such as TinyPNG or Compress PNG/JPG which will help you reduce your images' sizes even before you get them uploaded on your site.   6. Switch from PNGs and GIFs to SVG Wherever possible, of course. SVG (Scalar Vector Graphics) files come with the convenience of being: much smaller easy to scale, without having to trade clarity for that enabling inline writing for CSS & HMTL 5 files 3 strong reasons which turn the use of SVG files into a sustainable web development method.   7. Take Your Visitors Straight-Up to The Content They're Looking For The longer you leave your site visitors disoriented, scanning through in search of the information they're truly interested in, the more energy they'll consume. And the more frustrated and unlikely to come back they'll grow, obviously! This is why a Drupal module like SEO Checklist comes in handy! It provides you with a highly intuitive UI where you can simply “check” all those SEO steps to take for optimizing your content. This way you'll be enabling search engines to direct users precisely to those pages on your website that they're interested in.   And we shall stop here with our tips and tricks on how you can embrace sustainable web development practices and turn the green light on your Drupal site, too. More website “greening” advice (at a server-level & content-level this time) in “Part 2” of our post. Stay tuned! ... Read more
Adrian Ababei / Nov 08'2017
7 Extensions for Web Designers to Speed Up Your Workflow
A web life without plugins, without extensions for web designers and developers or add-ons! Still: as competitive and as demanding as the present one! Just try and picture yourself as a web designer in this given web environment! Would you manage to stay relevant? With no design toolkit to boost your productivity, to lighten your work and to turn repetitive and otherwise time-consuming tasks into a matter of just a few simple clicks?   We didn't think so either! Luckily, in today's web life (imagination test over now!) you're definitely not short on choice when it comes to life-saving extensions that you get to drastically speed up your workflow with. And since no designer worth his/her salt would ever stop adding new and new useful extensions to his/her toolbox, here are our 7 recommendations for you:   1. Spectrum  How could you even dare hoping to provide the best user experience on the websites that you're designing without embedding accessibility into your efforts? Well, Spectrum is your “ally extension” in all your accessibility implementing and constantly improving endeavours! Basically what it does is enabling you to visualize your work-in-progress exactly as a visually impaired visitor would! It'll point out to you low contrast problems and issues of badly chosen colors (from the standpoint of those users with color vision deficiency). Once the issues highlighted, you can go ahead and... handle them! 2. CheckMyLinks Now speaking of creating an optimal user experience: broken links will easily “sabotage” all your efforts in this respect! And opting for a ridiculously time-consuming method of closely examining your entire website, link by link, is no option in modern web. CheckMylinks is! This extension will do all the “dirty work” for you: it will crawl into your website and run an in-depth check-up on your entire “infrastructure” of links. Once you have the “link diagnosis” delivered to you, applying the right “treatment” will be less time and energy-consuming, wouldn't you agree?   3. Eye Dropper, One of The Life-Saving Extensions for Web Designers How many times haven't you experience a “love at first sight” for certain... colors found on other websites? How could you turn such a “got to have it” color into an accurate source of inspiration? You take either the long or the short path:   you take a print screen, enter your screenshot into the photo editor of your choice and, using your eyedropper tool you engage in a looong, irksome (and nonetheless frustrating) color-identification “marathon”   you install this Chrome extension, give that “irresistible” color a click right there, on the website, and, as if by magic, you'll discover precisely what color it is   Accuracy, time-efficiency and, of course, productivity-boosting! With Eye Dropper you'll kill not 2, but 3 birds with one stone/click!   4. Window Resizer Compare these 2 possible scenarios here where you need to check how that website that you're currently working on would look like on various devices, having multiple screen resolutions:   you literally put together a “pile” of mobile devices having some of the most common screen sizes and... test your Drupal site on each and every one of them   you install Window Resizer and carry out an UI testing process right in your browser's window, which will adjust, automatically, to all the given screen sizes; this way you'll get to see how your site is going to look on all of those screen resolutions   Now could you deny that Window Resizer could easily get included in the exclusive group of “can't live without" extensions for web designers”?   5. MultiClipboard Here's one extension that will streamline your code copying-and-pasting workflows! And make you ten times more efficient, needless to add! Practically the MultiClipboard plugin does precisely what it promises: it allows you to simultaneously “joggle” with multiple clipboards! It makes it easier for you to copy and grab code from one place and store it in a different Notepad file. Since it keeps track of your recently copied texts, you get to retrieve them and paste them back to their original files!   6. WhatFont What font is that? The one that instantly caught your eye on that website you were surfing on and that you still (secretly) fancy about? How can you tell for sure? You harness the WhatFont's power, that's how! Once enabled, you only need to hover on that text written in the attention-grabbing web font and voila: you'll identify this particular font in a... click! Mission accomplished! Now you get to replicate it in that design that you're currently focusing on! Easy peasy! And where do you add that it can also identify the services generating the web fonts and that its supports Google Font API and Typekit, too! In other words: when in doubt, sift through the bunch of useful extensions for web designers available out there and find the answer to pretty much all your “web design questions”.   7. AutoSave  Put your valuable work under a heavy shield: this Notepad plugin will “watch your back” by automatically saving your work every few seconds. So you can focus exclusively on crafting amazing designs instead of focusing on... clicking “Save” over and over again lest you should lose crucial coding. And our list of 7 extensions for web designers that will speed up your workflow and make you X times for productive ends here! We're curious now: which are your own top favorite ones? Is/are any of them listed here? ... Read more
Adrian Ababei / Aug 29'2017
Data-Driven Web Design: Make (Only) Smart Design Decisions
It's time you embraced the DATA! That's if you still want a leads-generating website and not just a “pretty painting on a wall”, in an art gallery, that, well, everyone's briefly looking at, but no one's buying! The days of aesthetics' “dictatorship” and of the instincts and personal preferences-based decisions are over. It's time you leveled up and took ONLY smart, data-driven web design decision within your organization! It's data, cold facts and numbers that will hep you get your website from “just pretty” to “both effective and pretty”. It's data, again, that will speed up the design decisions making within your organization and help you launch your Drupal site on time and on budget.  It will filter all your options down to those that are numbers-backed-up. Those that you can then leverage for ensuring a hassle-free, enjoyable user experience on your website. And now, let us point out to you the main questions that you should be asking yourself and the key mindsets that you should adopt once you engage in a data-based website designing process. 1. Which Are The Specific Results That Your Website Should Target? Do you want to attract more subscribers via your website? Or maybe you want to convert your website visitors into customers? Or you aim, instead, for social media sharing or for the downloading of the materials that you're offering on your website? In other words: which is your specific conversion goal? The one that you're trying to achieve via your website? It's the answer to this basic question that will make the keystone of your whole web design strategy! 2. Move the Spotlight From Your Business Goals to The User's Tasks First of all, let's get one aspect straight: you are not your website's target user! Therefore, all the data-driven web design decisions that you will make should target the “real” user's needs, pain points and expectations and not yours, as a company! Now, speaking of expectations, in web design we prefer to call them “user tasks”. The tasks that your website visitors need to complete (to make a booking, to buy a product, to subscribe to a newsletter, to read blog posts etc.) Your “job”, as the “entity” behind the “front store”, which is your Drupal site, is to make carrying out these user tasks as effortlessly as possible:   design with user experience in mind   stick to the generally-accepted design conventions, thus creating a sense of familiarity   And it's precisely on those pages on your site where their tasks and your business goals, as an organization, intersect, that your main sources of conversions will be (let's say subscriptions: they can be both something the users need to do, some filling-in forms tasks, and your objective as the website owner, as well) 3. Set Up Your Data-Collecting Tasks, a Key Step in a Data-Driven Web Design “OK, OK, I get it; I need to make data-based web decisions only, but how do I collect that usable, key data?” you might ask yourself. Glad you asked, actually! Here are some examples of tests you could run and to-do tasks you could set up and assign to different members of your Drupal team:   identify your users' current pain points, determine the causes why you're losing conversions on your website, it's own weak points (run some surveys, rely on your customer service team's gathered feedback from your clients etc.)   analyze your competitors' own sites, see what works and what doesn't in your own industry   turn Facebook Audience Insights into a powerful tool for getting to know your users better   try identifying the reasons why your users won't convert: find what the key differences are between your visitors and your customers 4. Make Empathy-Driven Design Decisions Welcome everyone on your website! Users with disabilities here included! Especially since Drupal makes it so simple for you to meet the web accessibility standards.  Therefore, you have no excuse left for refusing to empathize with your users and, this way, for knowingly refusing to achieve your conversion goal.   5. Guarantee Your User a “Painless” Visit  And by “painless” we actually refer to common-sense design “rules” that are constantly being broken by organizations, on their websites, for the sake of innovation. Remember: when aesthetics interferes with website usability, it quickly turns into a “trap”! Don't fall into it! Now here are those “common sense rules” that we were referring to:   always choose context-sensitive icons with meaning (no need to demand your users to “solve mini-puzzles” for figuring out what action each icon triggers)   resist the temptation of breaking the tried & true conventions ensuring usability on your website (place your shopping cart, your sing in button, your navigation bar and all the other key elements on your web pages precisely where your visitor's used to finding them)   always “bid on” high contrast for your written content   guide them through the steps of their tasks with the help of gestural interactions   We're more than sure that these web design conventions are nothing new to you. Nevertheless, what we're trying to point out by enlisting them here is that: you should never compromise usability for the sake of innovation, of breaking the norms! Serve your users' needs of usability first and impress them later!   6. Keep Key Information Above the Fold Although some might argue and feel like going against this convention, keeping the top benefits, the key information above the fold still is a more than relevant “rule”. You might be thinking that not revealing your products'/services' “luring” benefits from the very beginning builds up suspense, yet you'd better handle your visitors' time with great caution. The more time you ask them to invest in the visit on your website, the fewer your chances to convince them to convert will get. To sum up: display all your main benefits, your CTA elements and all the other crucial information above the fold. The deeper you'll bury them, the better you'll hide them from your users, “bidding” on suspense, the more frustrated they'll get. 7. Go for an Ideal Number of Choices, A Key Rule in Data-Driven Web Design And by “ideal” we mean that too many options could get their decisions making process way too cumbersome and challenging. While too few will only confuse your users and make them feel not properly cared for and attended to. How do you achieve this ideal number of choices? Well, here are some simple tips you can easily put into practice:   create filters that will help them “swim through” the whole set of options, but make sure you make them as specific as possible and that you add them to the most popular (and therefore the choices-packed ones, too) categories on your site   opt for simple, straightforward categories   structure them in a hierarchy by assigning priorities   8. Tailor A Personalized Experience for Each One of Your Users Is there any point in stressing out that we're living in a personalization-dominated digital world? Users already expect you to “orchestrate” some perfectly tailored experiences for them on your website, so... there's no hiding from this trend anymore. How do you comply with it while ensuring that all this effort will translate into conversions? Well, by studying your visitors and collecting a whole load of key data regarding their browsing histories on your website, regarding their geolocation, their purchasing histories etc. Next, you get to leverage all that data for crafting your personalized content (in the format of personalized recommendations) for each one of them. It's not going to be a quick and easy process, we won't hide this from you, yet a personalized content marketing strategy still remains THE most effective one. If Amazon keeps using personalized content for boosting their sales, then it must be (still) working, right?   9.Leverage The Power of Video Content on Your Website We won't be focusing on this aspect, since we've already dedicated it a two-parts blog post on this site. Using video content on your Drupal site is not even a matter of a “web design trend”, but a data-driven web design decision. It's plain, "cold" data that supports the usage of video content. 10.Use Social Proof For Building Credibility Testimonials, previous partnering companies' logos, an “impressive” number of sign ups, customer reviews, these all make the type of data that the user, too, collects before he makes his own decision while on your website. So, make sure you have them all there, displayed and visible enough for your users to easily spot them. This type of social proof is the type of credibility evidences that your users expect to see on your website! 11. Constantly Monitor Your Data and Make The Due Adjustments So you've launched your website, created based on data-driven web design decisions only. What now?  Well, now you get back to work and you collect even more data! Site monitoring never ends and designing your website's a continuous process.  Therefore, always be ready to make some small adjustments here and there if the data you'll collect via GoogleAnalytics, Hotjar or via any other business intelligence tool that you prefer indicates that you should:   monitor your users' clicks and scroll behavior   leverage all the information that the heat mapping process delivers you and make the right changes on your Drupal site   How about you? Have you already incorporated and turned data into a key component of the web designing processes within your organization? ... Read more
Adrian Ababei / Jun 01'2017
How to Cleverly Craft Your 404 Error Page to Keep Users on Your Site
“Little things done right matter”. And there's no point denying that you, too, consider the 404 error page on your website a “little thing”. Something not worth investing too much thought and creativity into, right? But what if you did focused on its UX? What if instead you managed to reduce the “shock” your users might experience when finding themselves stranded on your 404 Page not Found page? What if you turned this “accident” or “incident” (that you can't 100% avoid, it happens to all of us) into an opportunity to show them that you care about little things being done right? Especially when these neglected “details” involve their own time and can affect their experience on your Drupal site? A cleverly designed 404 error page will turn into a:   surprise for your visitors   opportunity for you to “show off” the (other) high quality content on your website   an opportunity to build trust (showing them that you pay attention to such usually underestimated details involving them will no doubt pave your way to their loyalty for your brand)   And now, without further ado, here's “the anatomy” of a cleverly crafted 404 page that won't drive users off your website from the very first second:   1. But First: How Do Users Land on Your 404 Error Page? As online users we've “wandered” on 404 pages a few times (at least) ourselves. As Drupal site owners/developers/designers we had to face this frustrating reality: our site users landed on this “no man's land” page on our websites.  Links do break, pages get removed from our website, so “cracks” like these, where users risk to fall, do appear.  The most common causes are:   the user mistyped an URL   the user clicked on a broken link   the page he/she wanted to navigate to has been moved (yet the visitor has not been redirected to the right page) or even removed             2. Instead of Leaving Your User Stranded, Give Him/Her Some Directions  No need to “punish” your website visitors for having landing on your 404 error page! They must be feeling confused or frustrated already! So, instead of making them feel as if they've just landed landed on a “stranded island” and simply leave them find they way out of there, how about throwing them some “ life rings”? How about giving them some suggestions on where to go next and thus keeping them on your website? Here are the most common solutions you could rely on for turning this opportunity (that they've accessed your site) from a potentially lost one (since they're on your 404 No Found Page after all and they risk to leave your website) into a regained one:   make it super easy for them to reach your homepage (they might have landed on your site from another website, for instance); a visible link to your front page can do wonders. “tempt” them with links to the content on your site that you're most proud of (they could be links to the most frequented category pages on your site or to your most popular blog posts etc.)   suggest them a couple of related products (if it's an e-commerce website that you own) or bestsellers in your attempt to determine them to continue to enjoy their shopping spree on your website   consider including a menu on your 404 error page, one that would include several possible paths they could follow for reaching other parts of your website    consider including an “issue reporting form” on this page   In other words: there are plenty of quite basic and obvious “remedies” for helping your visitors find their way out of your 404 page, but not out of your website. Just put a little effort in finding the “rescue” paths that are most suitable for your audience and your site's particularities, too.    3. Throw Them a Life Ring: Add a Search Box To Your 404 Error Page Not Found And speaking of “life rings” to throw to your users, as you imagine them as being on a stranded island once on your 404 page, adding a search box (or even a sitemap) is such an efficient little “trick”! Again: don't “punish” them for having had the bad luck to land there! It happens to the very best of us! If it's your Drupal website's an old one, for instance, chance are that you removed some of its pages of redirected them. So, why not making it super easy for your visitors to just search for the pages they wanted to access in the first place? Although opinions can vary, we here at OPTASY still prefer this solution to that of automatically redirecting your user on a different page. Let him/her be the one to decide where to go next! 4. Make It Context-Sensitive  And since we've used the “stranded island” expression twice already, the following “tip” for cleverly crafting your 404 error page is: don't make it look like a “stranded island”! That's right! Aim for consistency and make sure that this particular page, too, sticks to your website's overall design guidelines! Keep the same colors, fonts and style, making it look like a component of your website and not like “the black sheep” of your site. And, speaking of making your 404 error page not found “context-sensitive”, you should consider adapting its content the given context, too. For instance, let's say you have a visitor landing on this 404 page from one of the category pages on your Drupal website, while trying to access a particular category page that no longer exists. In this case you could consider placing a (or several) link to another one of your popular category pages. Adjusting your 404 error page to your site's particularities in terms of design and branding and to your users' search experience (what page your user was searching for, what page did he/she visited last before landing on your error page etc.) is crucial if you want to keep your visitors on your website!   5. Use Humor Cautiously: It Can Get Annoying and Outshine Functionality We do know that throwing in a bit of humor and adding some proofs of creativity is a huge trend in 404 error page design these days. Yet we advise you to handle humor with great caution! Especially when it risks to affect your page's overall functionality! First of all that no user will find it funny to have his/her time wasted as he/she has to wander on an error page.  Secondly, turning their frustration/confusion into a joke will only amplify it! And here's a more than suggestive example of a highly “risky” usage of humor on a 404 error page: In other words: think twice next time you decide to just throw in a video starring a cute pet or to just put a “funny” drawing on your 404 error page with no explanation of why your visitor has landed there and where he/she can go next. Instead of aiming to make them smile, you'd better adopt a more practical approach: help them leave your error page while still continuing their journey on your website! And these are our suggestions for you on how to cleverly design a 404 error page that should keep your users on your website. How does the “anatomy” of an effectively design error page look in your opinion?                    ... Read more
Adrian Ababei / May 26'2017