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.

Blog Placeholder
How many times haven't you heard this line: “There must be a CSS for that!”. You might have said to yourself: “yeah, right, like CSS could be the answer to any coding dilemma”.   You'd be surprised: in way too many cases it actually turns out to be that “magic formula” you need. And it would be a pity not to make use of CSS's helpful resources. With only one or a few more lines of code CSS works its magic for you, lifting a heavy weight off your shoulders!   Enough beating around the bush now: we'll go ahead and share with you our top favorite CSS tips that will help you improve and thus speed up your workflow:   1. Center Your Content Vertically   A bit frustrated for there is no “official” method (yet) for centering content within its container in CSS?   We've been there, too, you know. And here is the solution that we're happy to share with you after our own experience of striving to align text in CSS: the line-height property.   Let's use it in an example:   .nav li{ line-height:50px; height:50px; }   Note: make sure that your line-height value is (almost) the same as your container's height!   Furthermore, you need to keep in mind that this method applies only to single line texts. If you're dealing with a multiple lines text, going for this solution will only add too much white space to your website (it's logical if you consider that the same line-height value will be applied to the space between those lines).   So, stick to single line texts such that of navigation menus when applying this CSS trick.    2. Dealing With CSS Tables    We'll just have to accept it now: there's nothing we can do to turn back the hands of time and make up for all the time “wasted” when we didn't use display: table for handling CSS layout.    So, let's sum up our “findings” regarding this CSS “trick”.   First, you can use display: table for efficiently:   setting equal heights for neighboring columns (it's true, you can also use JavaScript for that, but: oh boy! isn't JS a lot heavier and packed with its own particular drawbacks!) centering an item, vertically, next to a larger one     And now if you're still a big hesitant to replace the conventional “table layout” with this new “formula”, let us add that unlike it, this “new” (although it's been specified in CSS even from its 2.1 version) can quickly be turned responsive: you just need to add a breakpoint for removing the display: table.    There' more! Here are other 2 “great things” that you can achieve with this CSS solution:   float-less grids tables without the <table>   3. A Few Words About Transition   How are you responding to the challenge of puling of hover effects on the websites that you're building these days (for gradually changing the menus or the images' colors)? Admirably? OKish? Or really badly?   Well, if you've been having trouble creating really smooth effects, CSS is ready to lend you a hand. Just take a look at this example here:   .entry h2:hover{ color:#f00; transition: all 0.3s ease; } Why should you replace the old JavaScript technique for creating hover effects? Because you're in a highly competitive world (the online world), where you simply can't afford not reaching for “perfection” (instead of "second best").   In other words: why should you stick to jarring jQuery animations (or to the much heavier JavaScript) when you could go for a more time-effiecient (just an additional line of code, no need for you to learn a new language if you're a coding newbie) smoother hover effect?   So, it's a win win situation: for you and for your website's future visitors!   4. Aim for The Absolute Positioning   Centering in CSS is probably the ultimate source of “frustrations”!   With all those different elements, requiring different CSS properties before they can be “tamed”/centered, “absolute positioning” sure sounds like a beautiful utopia, wouldn't you agree?   But it can become reality: you just need to start using the position property. Like in this example here:   position:absolute; top:20px; right:20px   Just type in bottom, top, left and right and add a pixel value to each one of them, thus keeping a steady control of where your element will be positioned on your website.   For instance, in the above example we've set that the element should be positioned at 20x from the top.   Note: this CSS trick works wonders when you're dealing with a single child element (otherwise the other element within the same container will get affected)   5. Pull Off the “Storybook” Effect   You love it, we love it, they (your website's visitors) sure love it!   The storybook effect, you know, the one focusing on capitalizing the first letter of a page/paragraph is still so loved since it reminds everyone of all those old story books brightening up their childhood memories.   So, why not recreate this attention-grabbing typographical effect on your website? Especially, when it's so quick and easy to do it in CSS?    The :first letter pseudo element is the CSS “trick” you need to use for puling off this "traditional printed book" effect.   p:first-letter{ display:block; float:left; margin:3px; color:#f00; font-size:300%; } You can just see, in the example above, how you can use :first letter, plus specific pixel values, for targetting the very first letter of the first line of the selected element on your website: here it makes it 3px wider than the rest of the letters in the text.   And these are just 5 CSS tricks that can help you create better looking websites. They “aim” for guaranteeing both a better user experience and less sleepless nights and moments of frustration for you and your team, too.   Give them a try, run some tests and find our if they'll boost your efficiency as web developer/s, too! ... Read more
Adrian Ababei / Dec 07'2016
Is Your Website Designed to... Sell? 7 High-Converting Design Principles to Apply- Part 2
We're back, as promised in our previous post, with 7 more design principles that you should “steal” from those e-commerce websites that have already “made it big”.   If the 5 principles that we revealed to you in that post revolved around the visually-appealing aesthetics that any website should “wrap” its conversion goals in, today we'll be tackling the issue of usability.    After you've learned all about delighting your visitors and visually enchanting them, today we'll reveal to you the 7 (surprisingly) subtle changes that you could apply to your website for discreetly guiding your visitors towards the final purchase, for making the whole “path” they'll need to cross from the moment they land on your site to the shopping cart page as easy to follow as possible.   1. Make Your Search Box Visible   Run a test! Go online, pick, let's say, 10 random websites, access them and try to time how many seconds it takes you to spot the search box on their homepages.   Needless to add that the “winner” is the site that “scores” the shortest time needed for you to track down its search box.   It's the same with your e-commerce website. You should, indeed, invest lots of time and creativity in getting it upgraded with striking visual elements to delight and to engage your visitors with and to pay great attention to the whole information structure and to the layout of your website, but mind you don't overlook the search box's major importance!    All your efforts in making your products/services as visually-appealing and desirable as possible might just go down the drain right from the start if you “manage” to frustrate your visitor by wasting his/her valuable time looking for your search box.   In a nutshell: make your search box pop out!   2. Discover Which Colors and Color Contrast Convert For You   Before you rush in to paint all your call to action buttons in red (since it's a general consent that red triggers a sense of urgency and therefore that it converts better) or before you rush in to change it from red (since you've discovered that, well, it did not help you reach that high conversion rate you expected it would) to orange (for you've red about it being the perfect call to action color for “aggressively” urge your users to buy), you should first:   consider which is the emotion/which are the emotions that each colors conveys (maybe if you're selling beauty products you'd better go for cheerful pink rather than “alarming” red, for instance)   run some tests for finding out which is the color that converts better for you and you only (what works for others might not work out for you, too)   depending on the color that you decide to choose for your foreground and, most of all for your call to action button, you should choose a contrasting color for your website's background.   And here we are! To the very color-related “subtlety” that we wanted to point out to you: strive to find not just “your” website's color, the one that converts best for you, but the high-converting CONTRAST for your website, too.   It's the contrasting background that will help you make your call to action buttons pop out, you know. So, think in pairs of colors: purple and yellow, orange and blue and so on...   3. Go For An Attention-Grabbing Call To Action   Put your call to action in a container, make it stand out!   Your call to action button should be grabbing your visitors' attention even quicker than your search box.   If in the case of the latter your role is more that of a guide, one willing to assist the visitors to quickly find the information they're looking for, when it comes to your call to action you should make sure it simply grab their attention the very moment they land on your website.   We've talked about “wooing” your website's users, about delighting and “spoiling” them with striking imagery and quality content, but even so: you should keep in mind that at the any of their “visits” you still want them to buy or to subscribe.    In short: don't rely exclusively on the foreground-background contrast and add do more! Try a contrasting container for your call to action! It's the key element of your website, so you should make use of all the available resources for making it grab the attention!   4. Give White Space Its Due Importance    Here's another design subtlety that you could apply for making your call to action stand out: placing it against white space! Give it a try, test it on your website and see whether it works for you, too, whether a white background makes your conversion button even more visible!    5. Put Together a Visual Hierarchy   Remember that we've already talked, in our web typography-related post, about the hierarchy's high importance in web design?   Well, it's time to lay stress on it once again: visual hierarchy paves the way to an optimized user experience (and therefore to that conversion rate that you've been dreaming of)!   Display all the elements on your website in a powerful visual hierarchy and you'll discreetly and efficiently guide your visitors towards the target (purchase or subscription) that you've set up for him/her.   Turn his/her delve into the multiple layers of content (all the way to the final purchase) on your website as smooth and fluid as possible with the help of an effectively-structured hierarchy!   6. Keep Your Navigation Bar Short and Simple   Now it's time you examined your navigation bar!    How many links/buttons do you have there? Is it on top of your page or somewhere else? Are its labels generic or descriptive?   Once you've moved your magnifying glass across it and (maybe) you've “detected” some aspects that could be improved, here are our navigation bar-related tips for you:   keep it short: go for an ideal no. of 5 items  go either for a standard horizontal one, placed on top of your page or for a vertical one, placed on the left side of your front page: no need to get creative here, for “innovation” in this case is more likely to affect usability go for descriptive rather than generic labels: give your visitors a hint of what you do, who you are and not just standard, impersonal information (“Who Are We”, “What We Do”) put your key items at the beginning and the end of your navigation bar  links, links, links, not buttons: links are far better for SEO reasons, since search engines can detect the written text, they're easier to edit and where do you ad they they load quicker than buttons, too!   7. Guide Them With Directional Cues    We all need a bit of guidance!   Therefore, help your website's visitors quickly spot your lead-generation forms and your call-to-action buttons with directional cues.   Use them for directing their attention to the conversion-generating elements on your website. They help you minimize the risk that your users may get too distracted by/captivated by all the other appealing types of content on your website and that they may outlook (or, even worse: that they may not spot them in due time once they've made up their minds) the “really” important ones (for you): call to action buttons.   And here we are, at the end of our list of conversion-centered design tips and tricks for you. Have you had the chance to test them already (or maybe just some of them? Have they worked for you? Feel free to share any other design subtleties not showing up in our list here and which worked “wonders” for you! ... Read more
Adrian Ababei / Dec 06'2016
Is Your Website Designed to... Sell? 7 High-Converting Design Principles to Apply- Part 1
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! ... Read more
Adrian Ababei / Dec 05'2016
Get Started: Build Your First Custom Module in Drupal 8
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! ... Read more
Adrian Ababei / Dec 02'2016
How Readable Is Your Website Content? 4 Best Practices on Using Typography in Web Design
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?  ... Read more
Adrian Ababei / Dec 01'2016
Drupal AMP: Drupal's Accelerated Mobile Pages Module
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!  ... Read more
Adrian Ababei / Dec 01'2016
How to Speed Up Your Website: 10 Most Effective Optimization Techniques
Websites sure have changed dramatically since the rise of the internet, wouldn't you agree? When competition for winning User's attention with gorgeous design and high quality, interactive content intermingling with online marketing strategies/tools has become so fierce, what do you do?   How do you resist the temptation of  overloading your website so much that it will end in annoying your visitors since it will load all its "awesomeness" way too slow for their high speed lifestyles?   Here is where we come in, lending you (or just reminding you of, since we're sure that many of the following "tips and tricks" on optimizing your website for gaining some more speed are no news for you) some helpful advice on how to regain control over the speed of you site (and to gain the amounts of traffic you've been fantasizing about and the conversion rates that you've dared hoping for and not just a beautifully looking website for your (and your friends' maybe) own pride and joy only.   1. Is it Really Worth the Effort?   First things first! Before you even put together your action plan you should realize and accept that optimizing your site is not just about speeding it up: it's also about the UX and SEO benefits that it comes with.   It's about improving your users' experience while on your website and thus turning them from first-time visitors into loyal visitors (and from visitors into to customers).    Just think about it: the quicker content on your site loads, the less bandwidth your visitors use (it will reduce your bandwidth costs).   2. Aim for High Speed, Not Size   Aim for the (apparently) impossible: while your site gains (inevitably) more weight, strive to keep it optimized and efficient!   Constantly monitor its speed, while keeping up with the trends (which are building websites with rich-content pages and outstanding imagery, which risk to weight them down).   3. Go for Modular Code   You might think now: "But, wait a minute: modular code will just add even more bloat to my website!"   It's true, it will "load" it with more options for you to choose from, BUT think about modular code this way: you get to put together multiple common pieces of your code using less. Take combining two CSS classes, for instance: module coding gives you the same results with less "resources" that could bloat you website.   And that, my friend, it how efficiency looks like!    4. Draw A Line Between Development and Production Level Code Bases   Handle the two environments differently! In short: realize the difference between compressing the code and compressing the images on your website.    the code's compression depends a great deal on the language you're using (go for Google’s htmlcompressor, for YUI Compressor for CSS, or any other method that suits you)   the images' compression could just as well mean using Photoshop's "Save for the Web" tool. Keep diving into the "sea of tools and best practices for image formats, compression algorithms, quality monitoring and so on” available online.   5. Keep It Super Neat   It's a common sense practice not to "abuse" your server, don't you think?    Just imagine it "exhausted", trying to efficiently handle all the messages you send it: web fonts, JavaScript, CSS style sheets. If you "empathize" (and you should) with it, then start applying these tips for easing all its hard work:   load stylesheets at the top and scripts at the bottom   bundle up your images, nice and neat, so that it should be easier for your site to load them   6. Go From Poorly Written To Readable Code   Besides "heavy", large images, un-optimized code is another major factor that slows down your website. So, as regards best practices for writing you code (for reaching top speed), we have 2 tips for you:    if possible, call JavaScript last (by the time JavaScript starts slowing everythinf down, your site will have already displayed the markup, processed the HTTP requests, the CSS. etc.)    write identifiable, short CSS selectors: they will be far more speedy in doing "accomplishing their mission"   7. Optimize Your Fonts   Remember that we've talked about beautiful typography being forecast as one of the UI trends in 2017? Well, looks are not enough when you're approaching your site from its efficiently/speed perspective.   You need both beautiful and optimized fonts if you want to keep your site's performance high, all while enticing your visitors with gorgeous design. Here are a few tips for optimizing your fonts:   compress, compress, then compress your fonts some more (use FontLoading Api for instance)   juggle with maximum 2 fonts   go for font-face (whenever you need to access external font resources)   select only the variants you need (no need to overload you website with all the available weights and styles)   ease your site's job: go for  WOFF2, WOFF, TTF, and EOF formats   use CSS inlining   8. Do It For Google   Pleasing Google and pleasing the User are (or at least it should be) the goals that drove you when you actually built your site (or your client's) in the first place, right? Well, then if you've already started to draft a “How to speed up my site” plan in your head while reading this post, you're on the right path: Google rewards developers/site owners like you!   The almighty search engine will always appreciate (and thus rank better) optimization-oriented developments practices. It's pretty logic: a happy user (“happy” for the web pages he/she accesses load content really quickly and doesn't make him/her lose valuable time) means... “happy Google”, so to say.   And how does this impact you? You do the math!   9. "Tame" Your Third Party Scripts   In a few words: don't let the “little ones” run the show on your website!   Mind you monitor all those third party scrips (Facebook “like” buttons, analytics trackers etc.) lest they should considerably slow down your website!   10. Limit Your Dependency Requests   How do you limit all those dependency requests adding bloat to your website and slowing down the downloading process? There are a couple of good practices that you should consider starting today:   use a CDN (especially if you're website's a large, heavy-content one)   use SVG or sprites methods for handling images from your style sheets    This is it, our “decalogue” of good practices for optimizing your website for higher speed. One more thing we'd like to add: there's no such thing as “a too fast website”, there's always room for even more optimization!  ... Read more
Adrian Ababei / Nov 30'2016
Here Is How You Add Responsive Images To Your Drupal 8 Website
  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. ... Read more
Adrian Ababei / Nov 29'2016
10 Tips To Make Your App Steal the Spotlight
What's the ideal dosage for putting together the perfect blending of functionality and design in an app? Does functionality come first and steals design a bit of its fame or, on the contrary, it's the fine looks that catch the eye and this first good impression gets, later on, strengthened by great functionality, easiness to use and all that?   Does clean and clear, simple and elegant, refined and minimalist mean... basic?    How can you be unique in a huge mass of uniqueness and creativity bursting apps developers? What if uniqueness hinders functionality? What if functionality constraints uniqueness.   Well, these are just some of the questions you might ask yourself now, when you've got your “moment of pure genius”, you've had a greater than life idea of an app and now you face the challenge of making it steal the spotlight, of making it set itself apart from a huge crowd of great apps, all trying to woo and entice the User.   We don't have the answers to all of your questions. Still, we have 10 tips and tricks that we hope will boost light on your path (to success) and boost your confidence as an app developer:   1. Make it Unique   “Duh!”, you might say, but still, we need to stress out (over and over) the high importance of being ten times more unique than your competition.   You need to “exhale” creativity, so wrap up your app in distinctive features and appealing (nothing like your users have seen before) visuals that will help it stand out from the crowd. Pour uniqueness in all the stages of your app's development: from its name, to its graphics and to the engaging content you insert in.   You can't afford to go for “safe and easy” and “nice and cozy” when competition is as high as in apps' world!    Extract uniqueness from every feature! So what if the idea of your app has been already exploited over and over again? Think outside the box:   drop in some good sarcastic humor it that defines you   go for a totally new type of design   focus on one single detail, that has been neglected by everyone else, and cast a light upon it   put in some of you as a unique human being able to tell his/her very own unique story    and success will come, we guarantee you. Just that the road to success is paved with uniqueness, that's all!   2. Put Your Lights (Keywords) On   Put your keywords to work! They'll be the shedding light upon your app!    Still, don't rush in to pick basic info related to your company that anyone can easily find online or keywords overused by your completion already.   Stick to your uniqueness-paved road to success. Remember? Carefully choose the keywords that best speak out of your app's amazing features. Select your “own” keywords!   3. Detail It   It would be such a shame to leave out some of the awesomeness of your app, not to shed light on some of its great features now wouldn't it?   Therefore, make sure you accurately describe your app to your users! Start with a concise, yet “powerful” sentence that will present/market your app's distinctive feature (what it does that others don't, what makes it stand out, how does it... ease or brighten up your user's life)?   After he/she will have read your description, your user has to get instantly familiarized with your app's main functionality and luring features. Make sure to put in all the info that makes your app unique, to include all its beneficial features in its description and to make your text as easy to read as possible as well.   Convey the very essence (what makes it different from is previous versions an what makes it set itself apart from other similar apps), but don't spare details that could help your users get familiarized with it.   4. Think Global    Going for a cross-border distribution strategy is not an option, it's a must!   It's either a “Dare and think big!” or a “Stay connected to the globalized society!” mentality. Pick the one that suits you best and make sure you keep this in mind: create multiple versions of your app for different key markets around the world.   Adapting it to new and new environments, cultural differences.... now that's going to be a “sweet” challenge that you'll have to respond to!   5. Dazzle Them With Graphics   Again, you might think (as in the case of “uniqueness”): “Duh! Of course my app has to feature outstanding graphics!”   Well, we just wanted to double check that you're aware of how great looks sustain and enhance functionality! So, go ahead and mesmerize them with great graphics!   Let your jaw-dropping images convey the message you want convey and to stir the type of emotion you want to trigger in your users. Strategically use the colors affiliated to the mood you want to create through your app. Should your app fill up your uers with energy or rather to help them relax after a hard day at work? Make great graphics serve your goals!   6. Go For Eye-Catching Icons   “Don't judge a book by its cover!” So not true in case of great apps!   Face it: it's that tiny little icon that will determine your app's trajectory: up for fame and success or... down to “eternal” oblivion. Which one should it be?    Here are a few tips for you, for creating “attention-grabbing” icons:   lose the words: no need to get your icon stuffed with text no one can read and which, moreover, tends to outshine the icon's awesome graphics. Don't sabotage all your work from the very beginning! keep it clear, simple and different: take that small window put at your disposal as a tiny canvas that you have to project your app's specificity on. Here, conceptualization is key if you really want it to make it stick it to your users' memory (you surely can think of some great brands which are easily recognizable though their so very conceptual logos, right?). Consider your icon as your app's logo in apps' world and, therefore, put a great deal of effort into its design! make it simple, yet not rudimentary: you don't want your icon to have an unfinished, unpolished look. So, although you have to stick to simplicity, do feel free to play with colors, highlights, reflections, shadows   7. Keep It Simple    Remember the UI trend forecasted to make waves in 2017, the one related to “extreme minimalism”, that we pointed out to you in one of our previous posts on this blog?   Well, here we are stressing out the importance of keeping your design simple and elegant once again. Keep in mind that your users will be on the road and not comfortably seated in their desk chairs at home, facing their PCS.   So, whenever you think you've put together a minimalist design for your app, ask yourself this: “Should this be the very last variant or I can still simplify it (and thus refine) it even more?”   When it comes to UI deign, a simpler interface will definitely keep your users engaged some more. So, place your bid on simplicity! Effectively use your colors and ease your user's job, making it simple for him/her to do more with less touchscreen gestures. Keep it simple and your first-time user will turn into a regular one!   8. Make It The Easiest to Use   Considering the frenetic lives we're living and the tremendously fierce competition in apps' world (with so many other apps out there “fighting” for your users' attention and loyalty), making your app easy to use shouldn't be your goal anymore. You need to make it the easiest one to use instead!   It's not an easy job for you, we're well aware of that, but if you manage to achieve his ultimate goal, if you manage to skillfully mix and match chunky font with intuitive swiping and bright colors and to come up with a super easy to use app, then expect to see it there, on apps' “walk of fame”!    9. Build Some Buzz Around It   Spread the news about your awesome app, show it off to some of you target users, in a few words: create some buzz around it. Don't rely exclusively on its official launch for releasing it into the wild!   Strategically put together the proper “launch” environment for it:   rely on keywords-related methods (App Search Optimizatio and Search Engine Optimization are but 2 solutions you could choose from) design the screenshots that make the perfect curiosity-stirring teasers   10. Design It For Them, Your Target Audience   That's right, no need to be a daydreamer and think that EVERYONE, regardless of age, profession, sex, level of education, location etc. will love your app!    Instead, make sure to dazzle and make a difference in your own' segment of the whole audience targeted by the apps' ecosystem. Once you've defined your target audience's portrait, keep it in your head throughout the entire app development process!     These are our 10 tips for you, aimed at helping you make your next app stand out from the crowd! How does your own “toolbox” look like? What other trends, surveys and advice from those who've already “made it big” in apps' world do you rely on in your work as a remarkable apps developer? ... Read more
Adrian Ababei / Nov 28'2016