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.

The Drupal 8 Layout Builder Module: How It Revolutionizes Content Layout Creation in Drupal
What's your favorite tool for creating content layouts in Drupal? Paragraphs, Display Suite, Panelizer or maybe Panels? Or CKEditor styles & templates? How about the much talked about and yet still experimental Drupal 8 Layout Builder module? Have you "played” with it yet? As Drupal site builders, we all agree that a good page layout builder should be:   flexible; it should empower you to easily and fully customize every single node/content item on your website (not just blocks) intuitive, super easy to use (unlike "Paragraphs", for instance, where building a complex "layout", then attempting to move something within it, turns into a major challenge)   And it's precisely these 2 features that stand for the key goals of the Layout Initiative for Drupal:  To turn the resulting module into that user-friendly, powerful and empowering page builder that all Drupal site builders had been expecting. Now, let's see how the module manages to “check” these must-have strengths off the list. And why it revolutionizes the way we put together pages, how we create, customize and further edit layouts. How we build websites in Drupal...   1. The Context: A Good Page Builder Was (Desperately) Needed in Drupal It had been a shared opinion in the open source community: A good page builder was needed in Drupal. For, even if we had a toolbox full of content layout creation tools, none of them was “the One”. That flexible, easy to use, “all-features-in-one” website builder that would enable us to:   build complex pages, carrying a lot of mixed content, quick and easy (with no coding expertise) fully customize every little content item on our websites and not just entire blocks of content site-wide easily edit each content layout by dragging and dropping images, video content, multiple columns of text and so on, the way we want to   Therefore, the Drupal 8 Layout Builder module was launched! And it's been moved to core upon the release of Drupal 8.6. Although it still wears its “experimental, do no use on production sites!” type of “warning tag”, the module has already leveled up from an “alpha” to a more “beta” phase. With a more stable architecture now, in Drupal 8.6, significant improvements and a highly intuitive UI (combined with Drupal's well-known content management features) it stands all the chances to turn into a powerful website builder. That great page builder that the whole Drupal community had been “craving” for.   2. The Drupal 8 Layout Builder Module: Quick Overview First of all, we should get one thing straight: The Drupal 8.6. Layout Builder module is Panelizer in core! What does it do? It enables you, the Drupal site builder, to configure layouts on different sections on your website. From selecting a predefined layout to adding new blocks, managing the display, swapping the content elements and so on, creating content layouts in Drupal is as (fun and) intuitive as putting Lego pieces together. Also, the “content hierarchy” is more than logical:   you have multiple content sections you get to choose a predefined layout or a custom-design one for each section you can place your blocks of choice (field blocks, custom blocks) within that selected layout   Note: moving blocks from one section to another is unexpectedly easy when using Layout Builder!   3. Configuring the Layout of a Content Type on Your Website Now, let's imagine the Drupal 8 Layout Module “in action”. But first, I should point out that there are 2 ways that you could use it:   to create and edit a layout for every content type on your Drupal website to create and edit a layout for specific, individual nodes/ pieces of content   It's the first use case of the module that we'll focus on for the moment. So, first things first: in order to use it, there are some modules that you should enable — Layout Builder and Layout Discovery. Also, remember to install the Layout Library, as well! Next, let's delve into the steps required for configuring your content type's (“Article”, let's say) display:   go to Admin > Structure > Content types > Article > Manage Display hit the “Manage layout” button   … and you'll instantly access the layout page for the content type in question (in our case, “Article”). It's there that you can configure your content type's layout, which is made of:   sections of content (display in 1,2, 3... columns and other content elements) display blocks: tabs, page title... fields: tags, body, title   While you're on that screen... get as creative as you want:   choose a predefined layout for your section —  “Add section” —  from the Settings tab opening up on the right side of the screen add some blocks —  “Add block”; you'll then notice the “Configure” and “Remove” options “neighboring” each block drag and drop the layout elements, arranging them to your liking; then you can click on either “Save Layout” or “Cancel Layout” to save or cancel your layout configuration   And since we're highly visual creatures, here, you may want to have a look at this Drupal 8 Layout Builder tutorial made by Lee Rowlands, one of the core contributors. In short: this page builder tool enables you to customize the layout of your content to your liking. Put together multiple sections — each one with its own different layout —  and build website pages, carrying mixed content and multiple layouts, that fit your design requirements exactly.   4. Configuring and Fully Customizing the Layout of a Specific Node... This second use case of the Drupal 8 Layout Builder module makes it perfect for building landing pages. Now, here's how you use it for customizing a single content type:   go to Structure>Content types (choose a specific content type) click “Manage display” on the drop-down menu  then click the “Allow each content item to have its layout customized” checkbox and hit “Save”   Next, just:   click the “Content” tab in your admin panel choose that particular article that you'd like to customize click the “Layout” tab   … and you'll then access the very same layout builder UI. The only difference is that now you're about to customize the display of one particular article only. Note: basically, each piece of content has its own “Layout” tab that allows you to add sections, to choose layouts.  Each content item becomes fully customizable when using Drupal 8 Layout Builder.   5. The Drupal 8.6. Layout Builder vs Paragraphs “Why not do everything in Paragraphs?" has been the shared opinion in the Drupal community for a long time. And yet, since the Layout Builder tool was launched, the Paragraphs “supremacy” has started to lose ground. Here's why:   the Layout builder enables you to customize every fieldable entity's layout it makes combining multiple sections of content on a page and moving blocks around as easy as... moving around Lego pieces    By comparison, just try to move... anything within a complex layout using Paragraphs:   you'll either need to keep your fingers crossed so that everything lands in the right place once you've dragged and dropped your blocks or... rebuild the whole page layout from scratch   The END! What do you think:   Does Drupal 8 Layout Builder stand the chance to compete with WordPress' popular page builders? To “dethrone” Paragraphs and become THAT page layout builder that we've all been expected for? Or do you think there's still plenty of work ahead to turn it into that content layout builder we've all been looking forward to? ... Read more
RADU SIMILEANU / Nov 02'2018
Designing for a Global Audience? 5 Things to Consider for Making Your Website Internationally Friendly
Designing for a global audience should be straightforward simple, right? You'd just translate the written content on your current website into all the different languages of your target audiences and you're good to go... Well, not even close. Closer maybe, but definitely not close.  For, as the Globalization & Localization Association (GALA) says it, far more accurately than I could: “The aim of localization is to give a product the look and feel of having been created specifically for a target market, no matter their language, culture, or location.” And proper localization (or contextualization, if you prefer) is precisely what you should aim for when trying to reach a global audience. Now, making your website internationally-friendly is subject to a lot of considerations; translating the written content into different languages is but one of the many steps to take. Let me point out to you just 5 of the essential ones to keep in mind:   1. Can Your Current Web Hosting Solution Handle That Amount of Traffic? Let's take this hypothetical (yet not impossible) scenario: You've been selling custom-designed stationary in Canada for a while now. Your eCommerce website's server is in Vancouver. Still, your Canadian customers just don't seem so “mesmerized” with your hand-crafted products as you expected them to be. So, what do you do? You go global! You start selling your stationary in... South Korea, as well, and online orders start to ramp up.  But your web hosting provider doesn't have servers in Asia, as well, to back you up with, and so the page loading speed on your website gets close to... lousy. There are scripts, files, images to be loaded and to all these all too common heavy-weighing factors, now you add the distance factor, as well...  Your server just can't handle it... In this hypothetical case here, you have 3 viable solutions at hand:   you supercharge your website with a CDN for high speed you replace your current provider with another one that can provide you web hosting globally you upgrade your current hosting plan, opting for one that can handle higher volumes of traffic   It's up to you how you'll equip your website to cope with the expected larger-than-normal amount of traffic.   2. Is the Used Imagery Culturally Relevant for Your International Audiences? And yes, when designing for a global audience you need to consider this aspect, as well: Will all the international audiences that you're targeting resonate with the images displayed on your website? Do these images convey the same message, irrespective of culture, location, spoken language...? Are there any culture-specific meanings or symbols that you might have overlooked? Make sure they're not “packed with” references that a global audience wouldn't understand. Or risk misinterpreting... And, above all: Take your research seriously when you're planning to reach global audience; ensure your site's imagery can't get interpreted as offensive in some of the cultures that you're targeting.   3. What Do Your Chosen Colors Symbolize in Different Cultures? Make sure that you base your color choice on an in-depth research on the color symbolism in different cultures. And not solely on aesthetic aspects. In this respect, the examples of colors having both positive and negative connotations, depending on the cultural area, are numerous: Take white, for instance, a color that means both cleanliness, innocence or/and... death (in China). Choose your color palette wisely and do not leave the selection up to your designers entirely. Designing for a global audience is no more than a compromise, after all: You trade visually-striking design for a globally-relevant one. One that's both... global and local.   4. Remember to Use Hreflang Tags when Designing for a Global Audience  Why bother?  Well, you could take the hreflang tags as some kind of “traffic signs” indicating to  the search engines:   that the content on your website has been translated into multiple languages precisely which version of that content they should deliver to your site's visitors, depending on their location   As for how you can add them to your site's content, the Moz team has a more than “enlightening” blog post on the topic of hreflang tags, so I'm not going to get into details here. Now, let's move on to the last point on my list of aspects to pay attention to when designing for a global audience:   5. Is Your Website Optimized for Globally Accepted Keywords? And “globally accepted” sure doesn't come down to: Showing the translated version of each one of your target keywords each time it shows up. Now, let's take this common example: What if you're optimizing one of your site's pages for the keyword “dinner recipes”, but in some parts of the USA the equivalent “supper” is more frequently used? Then, you'll need to:   do your own research on all the possible keyword variations  account for them when doing keyword optimization on your website's pages   Et voila: these are just 5 of the essential aspects to consider when designing for a global audience. As you can see, translating the words on your website is just the very base of the “pyramid” of techniques to apply for avoiding common gaffes when you go global. That if you want to do it the right, of course... Photo by Kyle Glenn on Unsplash. ... Read more
Adriana Cacoveanu / Sep 11'2018
3 Essential Steps to Convert Your Website to a Progressive Web App
Thinking to convert your website to a progressive web app? And why shouldn't you? Since the benefits are obvious:   you “end up” with a website behaving like a native web app … one that works offline (and “offline” is the new black these days, right?), having its own home-screen icon  improved user experience: not only that your site goes mobile, but users don't even need to get your site-turned-into-an-app downloaded from an app store and then installed on their devices   Furthermore: Putting together a PWA out of a regular website (or blog) is unexpectedly easy! Basically, any site/blog can be turned into a progressive web app... No need to let yourself discouraged by terms such as:   service workers web app manifest (or “manifest.json)   … for the whole process is actually far less complex than it sounds. Here, see for yourself: go through the 3 essential steps it takes to convert your website to a progressive web app:   But First: All You Need to Know About PWAS— Benefits & Common Misconceptions A succinct and clear enough definition of progressive web apps would be: A PWA is a website that behaves like a native mobile app once visited on a mobile device. Whereas a more detailed and comprehensive one would go something like this: A PWA is a sum of modern web capabilities (and basic mobile capabilities) that enable users to save it on their own mobile devices (thus enjoying a native app-like experience) and access it offline, too. And now, without getting into the old “native mobile app vs PWAs” debate, let me point out to you some of progressive web apps' most “luring” benefits:   as compared to native apps, the setup process, on users' end, is significantly simplified: PWAs get instantly installed on their home screens, with no need to visit an app store for that they can get accessed offline, as well, via the home screen icon (a huge step forward from responsive web design) installation is conveniently lightweight: a few hundred KB essential files get cached locally (needless to say that this makes them faster than the standard web apps) they feature modern web capabilities: push notifications, cameras, GPS updates are run automatically, with no user interaction not only that they work offline, too, but once the network connection is restored, they synchronize the data    And now, before we virtually convert your website to a progressive web app, let's go, briefly, through some of the most common misconceptions about PWAs:   a. A progressive web app is literally an... “application”. Not necessarily: A progressive web app can be a blog, an online shop, a collection of... dog memes, you name it. Do not take the term “application” too literally when referring to PWAs. It's more of a concept, a code optimization technique which, once leveraged, "turbocharges” your app-like website or blog to deliver content faster.   b. Progressive Web Apps Are Developed Specifically for iOS or Android. On the contrary! Probably one of PWAs' “hardest to resist to” advantage is that: They're platform-independent. So, you don't need to:   develop separate codebases comply with platform-specific submission guidelines   c. Your Site Has to Be a JS-Based Single Page One So You Can Turn it Into a PWA. Nothing of that sort! If you're currently running... something on the web (be it a set of static HTML files), then you can easily make a PWA out of it!  And now, let's go straight to the 3-step set up process of a PWA out of your regular website:   Step 1: Go HTTPS to Convert Your Website to a Progressive Web App There's no way around it: the HTTPs protocol is the ONLY way to go when it comes to progressive web apps! All data exchanges need to be served on a secure domain: over an HTTPs connection! And how do you switch from HTTP to HTTPs? You get yourself an SSL certificate from a trusted authority. Now, there are 2 ways to get hold of it:   if your site runs on your own server (or at least you have root access to your server), consider setting up the LetsEncrypt certificate. if your website runs on a shared hosting, then both the process and the cost of your SSL certificate (for yes, there will be a monthly or an annual fee) depends greatly on your provider.   Step 2: Create a Web App Manifest  “But what is a web app manifest?”, you might ask yourself. A JSON text file that contains all the meta data of your PWA: description, scope, start_url, name, images, display, short_name... It's this information that will let browsers know how precisely they should display your app once saved as a home-screen icon. Now, before I go ahead and share a working example with you — one including the must-have entries of any web app manifest — I should also highlight that: A link to this JSON text file should be placed in the <head> of all your PWA's pages: <link rel="manifest" href="/manifest.json"> That, of course, after you've:   entered all the information about your PWA copied the manifest.json created a new “manifest.json” file in the root directory of your site and pasted it there  It should be served with:   Content-Type: application/json HTTP header or a Content-Type: application/manifest+json   And here's a “sample” piece of code: { "name": "My PWA Sample App", "short_name" : "PWA", "start_url": "index.html?utm_source=homescreen", "scope" : "./", "icons": [ { "src": "./android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "./android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#ffee00", "background_color": "#ffee00", "display": "standalone" } Once the “Manifest” section of the Chrome's Development Tools Application tab has validated your JSON file, it will generate an “Add to home screen” link to be accessed on all desktop devices. Tip: as you convert your website to a progressive web app you don't necessarily need to configure the manifest.json file yourself — with all its different images sizes, meta tags etc. Instead, if you want to make it quick, you can just make a 500x500 sized image of your PWA and then rely on Real Favicon Generator to create all the needed icon sizes and a manifest file for you! And this is just one of the generators you could use!   Step 3: Set Up Your Service Worker This is where the “true power” of your PWA lies: A service worker is a JavaScript file, placed in your app's root, that plays the role of a “middleman” between the browser and the host. The one which, once installed in the supported browsers, intercepts and responds to the network request in different ways. Note: in most cases, it's for caching all the static files, so that our PWAs can function offline, too, that we use service workers. Now that we've seen what a service worker is, here's how you create one as you convert your website to a progressive web app:   a. You get it registered first things first. For this, just run this code in the JS file on your site: if ('serviceWorker' in navigator) { // register service worker navigator.serviceWorker.register('/service-worker.js'); } Practically, it will check whether the browser does support Service Workers and, if it does, it registers your Service Worker file. Note: NEVER call this file, inside your website, like this: <script src="./service-worker.js"></script> b. If you do not need your PWA to work offline, too, just set up an empty /service-worker.js file. Users will just be notified to install it on their devices!   c. Once you've registered your Service Worker, generate your Service Worker file, too. For this, just run this command in your terminal: $ npm install --global sw-precache Next, go ahead and run it on your website directory: $ sw-precache Et voila! You will have generated a service-worker.js including the service worker contents.   Test It Out! At this stage of the "convert your website to a progressive web app" process, you should:   check whether your service worker got properly registered and installed on Chrome run a performance audit on your PWA, using Chrome's Lighthouse Extension   For the first operation, go through these 3 basic steps here:   press F12 to open your Chrome Dev Tools click on the “Application” tab next, on the sidebar, select “Service Workers”    Then, check whether your service worker has been properly activated and is running normally: Just tick the “Offline” checkbox and try reloading. Does your PWA-site still display its content, even when there's no internet connection? Now let's run an audit using Chrome's dedicated testing tool, Lighthouse:   press F12 again to visualize the Chrome Dev Tools select the “Audits” tab then select “Perform an audit” check all the suggested checkboxes and finally, run the audit    And here's how the generated report would look like: The END! This is how you convert your website to a progressive web app in 3 steps:   enabling HTTPS configuring your web app manifest creating your service worker   See? Any website can be turned into a PWA and you don't need to be a senior developer to do it. ... Read more
Silviu Serdaru / Jul 24'2018
10 Essential Modules to Start Building Your Drupal Site from Scratch: Toolkit Must-Haves
So, you've installed your version of Drupal and you're now ready to actually start building your website. What essential tools should you keep close at hand, as a site builder? Which are those both flexible and powerful must-have modules to start building your Drupal site from scratch? The ones guaranteeing you a website that:   integrates easily with all the most popular third-party services and apps is interactive and visually-appealing, irrespective of the user's device is a safe place for users to hang on, interact with, shop on, network on... is conveniently easy for content managers and admins to handle   Luckily, there are plenty of modules, themes and plugins to overload your toolbox with: Long gone are the code-centric webmaster's “glory days”! Nowadays, as a Drupal site builder, you have a whole array of tools at your disposal to just start building and getting a Drupal site up and running in no time. Sometimes without the need to write a single line of code! But, let's not beat around the bush any longer and have a close look at these 10 essential modules that you'll need for your “Drupal 8 site building” project:   1. Password Policy Definitely a must-have module: Just consider that Drupal accepts ANY user password, be it a... one-letter password! So, in order to set up your own stricter and safer password policy, you need to install this module here. Then, you can easily define:   the minimal (and maximal) no. of characters that any user password on your Drupal site should include the no. of special characters that it has to include specific restrictions Like: "one can't use his/her email address as his/her password"   2. Comment Notify Why should this module, too, be in your essential toolkit of modules to start building your Drupal site with? Because it implements the functionality to get notified — you, the admin or content manager —  as soon as a user posts a comment on the website. Note: you can get “alerts” about both the logged in and the anonymous visitors' comments.   3. Breakpoints, One of the Must-Have Modules to Start Building Your Drupal Site  It goes without saying that one of the Drupal site building best practices is providing it with a responsive web design. And this is precisely what this module here facilitates: Setting the proper media queries, once you've defined your own breakpoints.   4. Simple Hierarchical Select             A module whose functionality bubbles up to the content manager's experience. Whenever he/she will have to make a selection involving both categories and subcategories, this hierarchical type of selection will prove to be more than useful: Practically, once you/they select the “main” option, a new drop-down menu/widget including the subcategories to select from, pops up, as well. Like in the image here below: 5. EU Cookie Compliance And complying with this EU notification is mandatory.  So, this is why EU Cookie Compliance is another one of the essential modules to start building your Drupal site with: It displays the given notification — providing visitors with the option to agree or/and to read more information about your cookie policy —  in the footer of your website.   6. Shield               Any Drupal site building guide would advise you to install a module that shields your website from anonymous users and search engines when running your test environments. And this is what Shield is built for: To screen your site from the rest of the world —  except for you and the logged in users — when you deploy it in a test environment. A more than convenient method, as compared to manually setting up a .htpasswd and then integrating it with .htaccess.   7. Beauty Tips     If you're not just another Drupal site builder, but a user experience-centric one, you must consider also those modules to build your Drupal site with that boost the level of user interactivity. Like Beauty Tips here. It displays balloon-help style tooltips whenever a user hovers over a certain text or page element on your website. Pretty much like Bootstrap tooltip does.   8. Secure Login           Another one of the Drupal site building best practices is to turn it into a safe place for your users to be.  In short: to protect their privacy. And if you're building a website that's available on both HTTP and HTTPS, the Secure Login module comes in handy as it makes sure that:   the user login form all the other fill-in forms that you'll configure for extra security   … get submitted via HTTPS. It locks them down, enforcing secure authenticated session cookies, so that user passwords and other critical user data don't get exposed all over the internet.   9. Menu Target   It's another one of those essential modules to start building your Drupal site with if you're determined to provide the best user experience there. What does it do? It enables particular visitors on your site — those granted permission to edit and to add new menu items — to choose whether they open menu items in new windows or in the current ones.   10. Persistent Login A module that makes up for the “Remember me” feature that's missing from the user login screen in Drupal: It comes to implement this missing option, one independent from the PHP session settings. So, we're not talking about the conventional, too long “PHP session time” here, but about a more secure and user-friendly “Remember me” feature added to the login form. Furthermore, the module enables you to define some extra security policies, too:   the no. of persistent sessions that a Drupal user can enjoy at the same time specific pages where users still have to log in again after how long the logged-in users will need to re-enter their credentials once again   And 2 “Extra” Modules to Consider When Building Your Drupal Site By “extra” I mean that they're not really essential modules to start building your Drupal site with. Yet, they're the first 2 ones to consider right after you've put together your “survival” toolkit as a site builder:   1. Site Settings & Labels     Take this common scenario: You need to display a social network URL on multiples pages on your Drupal site.  What do you do?   you hard coding this single setting in the source you start building a custom Drupal module for handling this variable you install the Site Settings & Labels module and thus display a checkbox to render page elements through a template conditional   The “c” variant's undoubtedly the winner here.  A win-win for you, in fact:   you save the time you'd otherwise have spent coding you improve the user experience on your Drupal site   2. Slick/Slick Views/Slick Media           It's actually a suite of modules to start building your Drupal site with. One “injecting” the needed functionality so that you can easily set up:   carousels slideshows   … on your freshly built website. Note! I won't lie to you: setting up the library dependencies is not exactly a child's play. Yet, once you've succeeded it, configuring the modules in this suite, right in your Drupal admin, is piece of cake. The END! These are the 10 must-have modules to start building your Drupal site from scratch with. Would you have added some more?  Or maybe you wouldn't have included some of the modules listed here, as you don't consider them “essential”? A penny for your thoughts! ... Read more
RADU SIMILEANU / Jul 20'2018
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