Adrian Ababei / Dec 08'2016
Adrian Ababei / Dec 07'2016
We're back, as promised in our previous post, with 7 more design principles that you should “steal” from those e-commerce websites that have already “made it big”. If the 5 principles that we revealed to you in that post revolved around the visually-appealing aesthetics that any website should “wrap” its conversion goals in, today we'll be tackling the issue of usability. After you've learned all about delighting your visitors and visually enchanting them, today we'll reveal to you the 7 (surprisingly) subtle changes that you could apply to your website for discreetly guiding your visitors towards the final purchase, for making the whole “path” they'll need to cross from the moment they land on your site to the shopping cart page as easy to follow as possible. 1. Make Your Search Box Visible Run a test! Go online, pick, let's say, 10 random websites, access them and try to time how many seconds it takes you to spot the search box on their homepages. Needless to add that the “winner” is the site that “scores” the shortest time needed for you to track down its search box. It's the same with your e-commerce website. You should, indeed, invest lots of time and creativity in getting it upgraded with striking visual elements to delight and to engage your visitors with and to pay great attention to the whole information structure and to the layout of your website, but mind you don't overlook the search box's major importance! All your efforts in making your products/services as visually-appealing and desirable as possible might just go down the drain right from the start if you “manage” to frustrate your visitor by wasting his/her valuable time looking for your search box. In a nutshell: make your search box pop out! 2. Discover Which Colors and Color Contrast Convert For You Before you rush in to paint all your call to action buttons in red (since it's a general consent that red triggers a sense of urgency and therefore that it converts better) or before you rush in to change it from red (since you've discovered that, well, it did not help you reach that high conversion rate you expected it would) to orange (for you've red about it being the perfect call to action color for “aggressively” urge your users to buy), you should first: consider which is the emotion/which are the emotions that each colors conveys (maybe if you're selling beauty products you'd better go for cheerful pink rather than “alarming” red, for instance) run some tests for finding out which is the color that converts better for you and you only (what works for others might not work out for you, too) depending on the color that you decide to choose for your foreground and, most of all for your call to action button, you should choose a contrasting color for your website's background. And here we are! To the very color-related “subtlety” that we wanted to point out to you: strive to find not just “your” website's color, the one that converts best for you, but the high-converting CONTRAST for your website, too. It's the contrasting background that will help you make your call to action buttons pop out, you know. So, think in pairs of colors: purple and yellow, orange and blue and so on... 3. Go For An Attention-Grabbing Call To Action Put your call to action in a container, make it stand out! Your call to action button should be grabbing your visitors' attention even quicker than your search box. If in the case of the latter your role is more that of a guide, one willing to assist the visitors to quickly find the information they're looking for, when it comes to your call to action you should make sure it simply grab their attention the very moment they land on your website. We've talked about “wooing” your website's users, about delighting and “spoiling” them with striking imagery and quality content, but even so: you should keep in mind that at the any of their “visits” you still want them to buy or to subscribe. In short: don't rely exclusively on the foreground-background contrast and add do more! Try a contrasting container for your call to action! It's the key element of your website, so you should make use of all the available resources for making it grab the attention! 4. Give White Space Its Due Importance Here's another design subtlety that you could apply for making your call to action stand out: placing it against white space! Give it a try, test it on your website and see whether it works for you, too, whether a white background makes your conversion button even more visible! 5. Put Together a Visual Hierarchy Remember that we've already talked, in our web typography-related post, about the hierarchy's high importance in web design? Well, it's time to lay stress on it once again: visual hierarchy paves the way to an optimized user experience (and therefore to that conversion rate that you've been dreaming of)! Display all the elements on your website in a powerful visual hierarchy and you'll discreetly and efficiently guide your visitors towards the target (purchase or subscription) that you've set up for him/her. Turn his/her delve into the multiple layers of content (all the way to the final purchase) on your website as smooth and fluid as possible with the help of an effectively-structured hierarchy! 6. Keep Your Navigation Bar Short and Simple Now it's time you examined your navigation bar! How many links/buttons do you have there? Is it on top of your page or somewhere else? Are its labels generic or descriptive? Once you've moved your magnifying glass across it and (maybe) you've “detected” some aspects that could be improved, here are our navigation bar-related tips for you: keep it short: go for an ideal no. of 5 items go either for a standard horizontal one, placed on top of your page or for a vertical one, placed on the left side of your front page: no need to get creative here, for “innovation” in this case is more likely to affect usability go for descriptive rather than generic labels: give your visitors a hint of what you do, who you are and not just standard, impersonal information (“Who Are We”, “What We Do”) put your key items at the beginning and the end of your navigation bar links, links, links, not buttons: links are far better for SEO reasons, since search engines can detect the written text, they're easier to edit and where do you ad they they load quicker than buttons, too! 7. Guide Them With Directional Cues We all need a bit of guidance! Therefore, help your website's visitors quickly spot your lead-generation forms and your call-to-action buttons with directional cues. Use them for directing their attention to the conversion-generating elements on your website. They help you minimize the risk that your users may get too distracted by/captivated by all the other appealing types of content on your website and that they may outlook (or, even worse: that they may not spot them in due time once they've made up their minds) the “really” important ones (for you): call to action buttons. And here we are, at the end of our list of conversion-centered design tips and tricks for you. Have you had the chance to test them already (or maybe just some of them? Have they worked for you? Feel free to share any other design subtleties not showing up in our list here and which worked “wonders” for you!
Adrian Ababei / Dec 06'2016
First of all, we should get one thing very straight: you will never ever meet your conversion goal if you're “just” selling stuff on your website. “But it's an e-commerce website, it's supposed to sell products/services!” That's perfectly true, but you need to strive luring, delighting, engaging and “giving” something to your visitors first (pretty much like in real-life, where you greet your guests with yummy snacks or at least just coffee). It might be some visually-arresting photos to please their eyes with and to trigger certain emotions in them or some interactivity features to show them that you care etc. The actual sell will eventually come, stay reassured, if you master all the preliminary “customer wooing” steps! But it should come last! In other words, your site's conversion goal should be... “camouflaged” by and beautifully wrapped in the whole aesthetics of your website. It's your website's design that will entice your visitor to prolong his/her visit on your site and it's design, again (certain usability-related design subtleties), that will “light his/her way” to the final purchase. Let's see now which are these 5 design principles that turn web design into “web design that sells”: 1. Spoil Them With High-Quality Photography It should be visually-appealing! That's the golden rule of any e-commerce website. Hiring a good photographer for upgrading your website with sharp, high-quality, beautiful shots of your products might just be the best investment you'll make! It's no subtle “trick”, if you think about it! Just put yourself in your visitor's shoes: aren't you more inclined to buy products presented to you in some visually-striking photos that scream “you need me in order to be fully happy”, than products featured in low-resolution, blurry images, that tell no story, either? That don't lure you and make you “need” them? So, what we've learn from this first “lesson”? That you need to make your products look really, I mean really, hard-to-resist-to and that amazing photography has always been the surest and quickest means to help website developers/owners reach that goal! 2. Balance It With A Great Layout We could as well call this second design principle: COHESION. Make sure that the key elements on your website, those that you want to drive the visitors' attention to (i.e your product shots), are nicely complemented and highlighted by your website's layout! Think “cohesion” when you design (or, even better, hire an experienced web designer, since the “one man show” method is not always the most efficient one) your layout. Put together all the colors, shapes and textures so that the result should harmoniously complete the “story” told on your website and not steal the spotlight away from your products/services or clash with them. 3. Bring Interactivity To Your Website Face it (and adapt to it) or lose it: there's a new word for “selling” these days! It's called “engagement”! So, how does your website keep your digital addicted users engaged? They definitely expect to get engaged, you know, to be offered the possibility to write comments, reviews. They like to stand out from the "faceless" mass of generic visitors on your website. What are you going to do about that? Well, there are plenty of user engagement tools that you could upgrade your e-commerce website with and we're going to list only 2 of them: add videos to your website; stunning video elements focusing on your products, that will grab your visitors' attention and will keep them engaged for a minute or two (videos will continue to be, in 2017, too, a major online sales-booster) implement a separate window where users get to take a really close look at the products they're interested in; it should allow them to move those products, to zoom in and take a close look at them in different angles before they decide to purchase them In short: get creative and strive to add a few more in-between elements to the conventional “customer-purchase” schema! 4. Give Background Its Due Importance You need to embrace your the backing image's full potential! It's far more than merely “something” that just fills up just the space behind your products, the main focus on your website. When used right, when strategically selected, a full-sized backing image can enhance your products even more. First, consider your type of business (needless to add that it's a different image that you should go for if you're selling financial products on your website and a totally different one if you're selling artsy handmade products). Next, adapt your banking image to the type of message that you're trying to convey. It should, as already mentioned: enhance your product (make sure to strike a balance between minimalist and visually-appealing). A major trend these days, when it comes to backing images, is the blurred background. Give it a try! See what's there, online, come up with your own blurred backing image, integrate it in the “story”, test it and see whether it meets your website's goal. 5. Add the Human Factor Show the clothes that you're selling on a model's body, show the gadget that you're selling as being used by someone, add at least one person to an otherwise "antiseptic" representation of a room decor if you're selling furniture and so on. You've got the point, haven't you? You should help your visitors relate to the “character/s” in the “story” you're presenting on your website. You should help them empathize with them, feel as if they're the ones happily using those specific products. It's always easier to relate to an emotion (the happiness, the relief, the pride, the satisfaction that your product triggers in the person showing up in your photos), than to a product. Face it, do what it takes to adapt your website's design to this principle or lose it (lose that conversion rate that you've been fantasizing about)! So there you have them! The first 5 answers to the question that has probably been on your mind for some time now: “what are those high-converting sites doing differently?” STAY TUNED, for in our next post we'll be sharing with you 7 more design subtleties that top converting e-commerce websites rely on!
Adrian Ababei / Dec 05'2016
So, you could not resist the temptation to try out the much-praised Drupal 8! You've installed it, you've already “played” with its core modules, its contributed modules and that's it? Don't you think it's about time you leveled up your Drupal 8 skills? The next step to take is learning how to team up your own skills and knowledge with Drupal 8's full potential for putting together some amazing custom-made modules. Modules that would instantly add extra value to the sites you'll build. Don't let the “rumors” stating that the whole custom modules building process is so different, and therefore more challenging, from Drupal 7, that it's lengthier and way too discouraging. We're here to show you that it takes just 8 quick and easy steps for you to create new modules (to meet your sites' specific needs) in Drupal 8! Walk us through all these steps: 1. File Structure It's under modules folder in the root directory that you should keep both your contributed and your custom modules in Drupal 8: modules/contrib/ modules/custom/ So, go ahead and get your first custom module started by creating a folder in your Drupal installation at the path: sites/all/modules/custom/sa_module. Keep in mind: If you're configuring multiple sites, you need to use modules specifically for each one of them: sites/your_site_name_1/modules/ sites/your_site_name_2/modules/ 2. Create the .install file A Drupal schema (representing one or more tables and their related keys and indexes) is defined by hook_schema(). You'll find it in modulename.install file. hook_schema() and it should return an array mapping ‘tablename’ => array (table definition) for one of the tables defined by the module. 3. Create the .info.yml file That's right, you have a “info.yml” file extention in Drupal 8 (replacing the “.info file” that you got used to using Drupal 7). It applies to profiles modules and themes, too. So, that being said, you now need to create your .info.yml file (i.e. sa_module.info.yml), thus letting Drupal know about your new custom module. Your file will look something like this: name: Drupal 8 custom module example type: module description: 'Example for Drupal 8 modules.' package: Custom version: 8.x core: 8.x Follow this path for enabling your module: https://goo.gl/ADSWyt OR Click on Extend from Menu. 4. Create the .routing.yml File When it comes to handling routing in Drupal, you'll be using Symfony 2 components. The routing file that you'll create will help you navigate into Drupal using the method of a controller class (meaning that you'll be specifying different controller actions). You'll be writing the path in routing.yml file and the resulting file will look something like this: example.my_page: path: '/mypage/page' defaults: _controller: '\Drupal\example\Controller\ExampleController::myPage' _title: 'My first page in Drupal8' requirements: _permission: 'access content' 1. The first line is the route (a symfony component mapping an HTTP request to a set of configuration variables). Define your route as a module_name.route_name ‘module_name => sa_module’ ‘route_name => list’. 2. The second line is the path: you'll need to specify the path that this route should register to, in short: the path (of the module) where the users will be redirected. See the leading forward slash “\” in the URL to the route from our example. 3. The third line shows your defaults: you get to specify several things here. For instance, in our above example we have 2 defaults: _contoller: referencing a method on the ExampleController class _title: the default page title You, could, for instance, have "_form" define classes under defaults, as well, helping you define the forms included in your custom module (for example EditForms, DeleteForms, AddForms) 4. The fourth line displays requirements: here you get to specify the type of permissions to be granted to your users for accessing specific pages on your website: “add”, “edit”, “delete” and “access” for instance. 5: Create the .module file Unlike in Drupal 7, where the hook menu() defines page callback functions, in Drupal 8 it defines menu items exclusively. Make sure that the path and the route in which in your example.module matches the ones written in your example_module.routing.yml. Let's have a look at our above-example, for instance: there the route 'route' => 'example.my_page' in example.module should be identical to example.my_page: in example.routing.yml 6: Create Controller Class First, a few words about “controller”: it may contain multiple types of arbitrary logic that your site needs for rendering content on a certain page it's a php function that processes the HTTP request and returns a response Create a “modules/custom/sa_module/src/Controller" folder and then (within the same folder) a file named AdminController.php. 7. Create Model Class and Forms Once you've set up your AdminController, you need to introduce a model class (i.e. SaUserInfo.php) in order to link it to your database. It's this model class that you'll create now that will help you set up methods like add(), delete(), update() etc. 8. Create Menu on Admin One more step and you're ready to launch your very first custom Drupal 8 module right from the Admin Panel ! Create a file sa_module.links.menu.yml, which will set Menu at the Top. And this is it! 8 quick and easy steps for building your first custom module in Drupal 8! Give it a try!
Adrian Ababei / Dec 02'2016
Since the Web pays tribute to the whole concept of UX these days, since all web developers direct their efforts towards “hooking”, engaging and pleasing (whether that means impressing, informing, shocking or enriching) the User, typography has started to regain its glow! Even now, in the age of breathtaking imagery and attention-grabbing videos, typography is still king! Add a short, impacting text line (in a strategically chosen typeface) to a striking image or upgrade a stunning, hypnotizing video with a powerful written text and you'll instantly strengthen your message, you'll instantly add a new layer of meaning to it! On the other hand, “worn out”, conventional typefaces or too embellished typefaces, that won't support the literal message you're trying to convey, bad spacing, lack of contrast or any other unfortunate way of handling web typography can ruin your website (if it's not easy-to-read your visitors will definitely bounce off, whereas if it does not complement and strengthen your message, if it does not help it trigger the type of emotion you're trying to trigger in the user, all your efforts put in web design and programming are at risk). But What Is Typography After All? Very basically put: typography is how the text looks. If we are to elaborate this rudimentary definition a bit: typography is more than just the arrangement of written content (paragraphs, forms, sentences, words); it's also how written text interacts with all the other types of content on your website: videos, images, color. It's about how it manages to “collaborate” with all the other content types for conveying the message/triggering the emotion you want to trigger in your users. Why Should You Bother So Much About It? Because it's that “invisible” force that might either strengthen your relationship with your User or “destroy” all your hard work. It depends a lot on how you use it (or how you refuse to use it). Since 95% of the content on the web is written content and considering the “fierce competition” out there, among websites, you just can't afford ignoring or not paying enough attention to how texts gets displayed on your website. Learn to use web typography to your advantage: when done right, it's a “force” that helps you create visual interest, better structure your information design, make your written content readable and in a nutshell: influence your users. A too powerful of a “tool” not to strategically use it, don't you think? Easy-to-read! Persuasive! Does that ring any bell, you UX expert, you? Tips For Improving Your Website's Typography Now No need to panic now if, let's say, you're still displaying a way too “dusty” font on your website (such as Arial), or if you've taken a wrong decision and, driven by a wish to innovate, you've gone for a way too embellished typeface, when your text should just convey its literal meaning instead. There's nothing that some good practices in web typography can't fix. Here are our 4 tips for you! 1. Hierarchies Are Major Readability-Boosters Don't take our word or granted! Test it and see it for yourself. Do an A/B test: on the left side: a piece of content with no hierarchy whatsoever, a block of text featuring pretty much the same font size (or with very little variations) for its headlines, title, body etc. on the right side: a hierarchy-type of content with, let's say, a 15-17 px font size, a visible first headline, followed, closely, by the secondary ones (of about 150% of the body size), making reading much more fluid, featuring white spaces for the eye to rest on etc. Isn't the whole information far better structured in the second example? 2. Choose the Right Typeface “And how do I know which one of “THE ONE”? Especially when the Web unfortunately “spoils” us with such an overwhelming “repertoire” of temping typefaces? Well, to this question we have no unique valid “recipe” for you: see what's out there, on the web, analyze your competition, those websites that try to convey the same type of messages as yours and examine their fonts. Conduct your own “investigation”, see which are the most “effective” typefaces. In between your own “investigations”, you could as well try out (and see if they work for you, too) these 3 body text typefaces-related tips that we've prepared for you here: Even color: stay away from body text typefaces that break the rule of “evenness of color”, those that display patches of whiteness and blackness. Body text fonts should be consistent for displaying an easy-to-read text for your users Sturdy shapes: make sure the typefaces you choose for your body text are easy-to-read at small size, too. So, a good practice is to choose high x-heights typefaces with less frills (lest the glyph shapes should turn into distraction for your users and the way too “subtle” fonts, at small sizes, should get outshone by the environment on the web page) Active texture: do your best to balance various aspects of the text block and type. Make sure your body text font's active texture (meaning the typeface's contrast with the white space of the page, the one enhancing visibility around the glyphs) is neither too dull or too lively. In other words, it shouldn't distract the reader/user from the text's message itself, nor bore him/her (making it difficult for him/her to actually distinguish the letters' shapes). 3. Adjust Your Line Spacing In other words: allow your written copy to breath! How? By setting up your vertical spacing and giving your text more room (it will be a lot easier for the User's eye to scan it). A good practice, in this respect, would be to go for a line-height of 15-19pt if you're going for a 12pt font, for instance. You do the math what line-height you should go for if your font is bigger. 4. Adjust Your Line Width “How many?” you may ask, “How many words should there be in a text line, within a paragraph?" It's a common sense approach to go for an average of 45-75 characters if you're handling with a one-column web page and for 40-50 characters if there are multiple columns on your page. How about you? Which are your own web typography good practices? How do you make use of typography's “arsenal of cool tools”? How do you make it “serve” your website's purpose?
Drupal's ready to turn into your best ally in your endeavours to constantly comply with Google's ever-changing “rules”! With mobile-friendliness being the ultimate goal and the main words on the lips of all marketers and web developers these days, it would be quite “reckless” to ignore all the efforts that the Drupal community has put into developing this module: Drupal AMP (Accelerated Mobile Pages). Just think about it: as a marketer speeding up your website's load time on mobile means happy users (boosting UX) and therefore, “overwhelming” organic traffic for you as a content editor, it instantly eases your whole workflow: you're given the easy-to-use toolkit for making your content mobile-friendly in no time as a web designer, it lifts a great deal of the “pulling off the best solution for crafting responsive design” weight off your shoulders In short: it's “Optimize for mobile or die trying!" Not really an exaggeration if we think that you only have less than 5 seconds to catch your users' attention and to get them hooked on your website. 5 golden seconds when, if your site loads all its awesome content at a really slow speed or makes content look weird on mobile devices, you can as well “bid farewell” to your users. They'll be off to greener pastures in no time: to websites ideally optimized for the web, that doesn't waste their way too valuable time. What Web Pages Does It Target? That's right, you should know before installing the Drupal AMP module that it doesn't address your whole website. It targets blog posts and informational, news article-based pages on your website! So, it's not geared towards e-commerce websites! How Does It Work? If you're still undecided, facing the challenge of picking between Drupal AMP module and other solutions available out there for helping your site gain speed on mobile devices, consider this: the Drupal AMP module is an open-source project! So, if you're a future-oriented type of developer/marketer, you know what this means: it will constantly get tested and improved! But how does it work precisely? Once you integrate it into your website, it creates a new view mode for the targeted content type.Then, you get to choose the AMP field formatters that will handle your target content's conversion for the mobile (formatters for video, text or images). Next, it's the PHP library that “comes into the picture”, processing the entered HTML and doing its best to come up with the proper AMP HTML equivalents. It practically gets to “work its magic” on any type of content that you want to optimize for the web. Let's dig into the AMP Theme and the AMP PHP Library! OK, now walk us through short “descriptions” of each one of the AMP module's 2 main components: AMP Theme: familiar with the AMP HTML (a subset of HTML) and its standard? The one aimed at encouraging beautifully looking, quickly loading content on mobile? Well, then you should know that what the AMP Theme does is actually producing the markup that this standard requires for websites venturing in the mobile world. Moreover (for it's still a Drupal theme that we're talking about, so it's got “flexibility” written all over it), it enables content managers to come up with custom-made AMP pages. They gain total control over how these pages on mobile will actually display their content! AMP PHP Library: it handles the final corrections and repairs. Whenever the entered HTML doesn't comply with the AMP HTML standard, it's the PHP library that makes the right images, Youtube HTML, Tweets and Instagram conversions and creates the issues reports. Take it as a “quality assurance” tool! In a nutshell: with Drupal 8 you can now respond to the challenge of the “developing for the mobile landscape” trend: quickly displaying AMP HTML pages on your website! How Do You Install Drupal AMP? Familiar with Composer Manager? For it's this module that will help you a great deal installing and therefore, boosting your website with all the “mobile optimization features” that AMP comes packed with! So, here are first steps to take: first, a composer.json file (in the Drupal AMP module) confirms the dependency on the AMP PHP library (which features its own dependencies) other modules could state the same library dependencies last, the Composer Manager module gathers all the info in the composer.json files of the modules (all those installed on your website) and puts them all together, thus avoiding the risk of ending up with several modules installing the same dependencies. Now walk us through the installation process: Keep in mind: We'll be enabling the Composer Manager module before we go on and install the Drupal AMP one! enter this command (in your Drupal's website directory): drush dl amp, amptheme, composer_manager and get your AMP theme, AMP module and Composer Manager downloaded. enable the first items needed for your installation: drush en composer_manager, amptheme, ampsubtheme_example. It's at this step that we're enabling the “ExAMPle subtheme". Take a look at its code, for it will reveal to you how you can, later on. customize your AMP pages. use Drush for enabling your AMP module: drush en amp Next, you'll be notified about dependencies being downloaded. There you have them all enabled and ready to be used: the AMP theme, the AMP module, the AMP PHP library and the example subtheme, too. Configure Your Site For The Drupal AMP Module Go to /admin/config/content/amp, the AMP module's configuration page. There, pick the content types that you'd like this module to come up with AMP equivalents for! Bravo! You're now closer than ever to show off your optimized website which loads its high-quality content faster than ever on mobile!
Adrian Ababei / Nov 30'2016
Proudly wearing its “mobile-first” aura, Drupal 8 is here to help you deal with the issue of responsiveness nice and smoothly. No need to write miles of code anymore, to master the art of pulling off HTML, back-end languages and JavaScrip combos anymore. In other words: Drupal 8 is here, have no fear! It projects a new world of easy-to-build responsive themes. It simply “spoils” you with an easy-to use responsive image setup (which comes in its core, another great news). Basically, it puts an image formatter and breakpoint mappings at your full disposal so that you can have your due-sized images, using HTML 5 picture tag, ready in just a few quick steps. Thus, you'll get your images adapted to every device's viewport in no time. Well, not really “in no time”, but in 5 simple steps! Walk us through this step-by-step demo: 1. Turn on Your Responsive Image and Breakpoint modules You've got that right: the Responsive Image Module is part of core Drupal 8, you get it upon installation and yet, if you want to use it you still have to first enable it. It's the same thing for the Breakpoints module, as well. How do you enable the Responsive Image Module in Drupal 8 you say? You go to /admin/modules You click the check box close to “Responsive Image” You click the “Install” button 2. Set Up Your Breakpoints “What is a breakpoint?” you say (if you're new to Drupal)? It's a window width that you get to set up, thus letting Drupal know that it should start using a different size image starting from that particular width size. Got it? Do you remember how things used to be in Drupal 7's Breakpoint module (oh, the (not so) good old days when Breakpoint was a contributed module!)? You could define your breakpoints in your admin interface. Well, not anymore! In Drupal 8 you have to set them up in code. If it's a pre-built theme that you're using, there's a high chance that your breakpoints are already set up. If you're creating your own theme instead, then you need to set them up yurself in breakpoints.yml file. So, here is how you set them up (make sure you start with the smallest ones): your_theme_slug.bannerImage.narrow: label: narrow mediaQuery: '' weight: 0 group: Banner Image your_theme_slug.bannerImage.wide: label: wide mediaQuery: '(min-width: 600px)' weight: 1 group: Banner Image 3. Create Your Image Style What image styles do you want for each one of your previously defined breakpoints? Once you've answered yourself that, go ahead and set them up (after you've done a bit of math setting up your breakpoints): Go to /admin/config/media/image-styles/add Type in your image style's name (we suggest you go for something descriptive) and click “Save” Click “Select a new effect” (you'll find it there, under “Effect”, in the next screen that will open up once you've clicked “Save”) Click “Scale and crop” Enter the width and height sizes Click “Add effect” Et voila! Can you go through all this process all by yourself now? For you still have to go back and create image styles for each one of the breakpoints that you've (virually) set up, you know. And this is how Drupal automatically resizes all the images, that you'll upload on your site, to the image styles that you will have defined. And it doesn't do all this the rudimentary way, no sir: first it sizes the image, then it crops off the extra so that the result should be a perfectly adapted new image (not the stretched or the shrunk, very unnatural looking type) 4. Define Your Responsive Image Style After you've created images styles for each breakpoint, go ahead and put them all together in a responsive image style. Go to /admin/config/media/responsive-image-style Give the “Add responsive image syle” button a click Give your style a name (go for something easily recognizable) Select the “Breakpoint group” (you know, the one that you've set up at step no. Select the breakpoints one by one and associate them each with one image style Can you see the option for fallback image style there, at the bottom? It's the “default” image that Drupal generates for those browsers that don't support responsive images (such as Internet Explorer 8). We recommend you to select the largest image style! 5. Allocate Your Responsive Image Style to An Image Field Just one more quick step to take and you can upload images on your website and let Drupal do all the formatting/smooth resizing job for you! Before it can do that, you still need to let it know what image field to actually responsify for you: Click on “Structure”- “Content Types” Click the arrow close to “Manage Fields” and then click “Manage Display” Spot your target image field (you'll see the entity type, ranging from taxonomy vocabulary to content type that your image field is assigned to) Select “Responsive Images” (under “Format”) Pick one of the responsive image mappings that you will have set up (under “Responsive image style”) Click “Update” And that's it! You've provided Drupal 8 with all the settings it needs for “working its magic”: pulling off images of appropriate sizes without comprising their quality.
Adrian Ababei / Nov 29'2016