We are a web development team of our word. And since we promised we would come back with some more best practices for a sustainable web development process... here we are! In this post, as already revealed to you in “Part 1”, we will be highlighting: all the “tweaking” you can do at a server level so that it should use less unnecessary energy (and reduce its overall CO2 output) how to approach content on your site with sustainability in mind Here we go: Tips on Improving Your Server Performance: Consider Switching to a Green Host If you're confident enough (or your team is) to get your hands dirty in server configuration and maintenance there are plenty of high-impact measures you could apply: 1. Use the BigPipe Module for Drupal 8 BigPipe has been and still is one of Drupal 8's biggest “innovations”. It's nothing new, Facebook's been using this technique for a long time for improving page load times. Yet, now you have it in the form of a stand-alone module that you can leverage right on your Drupal 8 site! And it would be a pity not to! Just think about it: the BigPipe module practically segments each one of your web pages into multiple pagelets and streamlines the content loading process. It sends the cachable content segments first and the non-cachable, dynamic content last. 2. Make a Habit of Optimizing Your Database Drupal “saves the day” (and the planet, too, when used properly) once again! It gives you the DB Maintenance module to enable, to leverage and to integrate with your sustainable web development workflow. And this will prove to be a powerful tool to support your database optimizing endeavors: it runs MySQL's OPTIMIZE TABLE regularly using cron. 3. Get the Most of All The Caching Improvements in Drupal 8 If in Drupal 7 you still need to enable caching yourself (configuring your site's performance on the Admin page), in Drupal 8 page caching happens... naturally, by default (as well as assets aggregation). And there's more! The caching enhancements made to Drupal 8 impact even pages “carrying” dynamic content. And this is a big step forward towards top site performance and using energy responsibly if it's an interactive (and therefore with dynamically generated content) Drupal site that you own. 4. Move to HTTP/2 … and expect your web pages to load X times faster! Be (still) one of the early adopters of HTTP/2! Why should you wait till it turns into a major trend? What you know for sure now is more than enough if you're truly determined to go further with your sustainable web development initiative: the vast majority of modern browsers do offer great support for HTTP/2 it's proven that the HTTP/2 server push method makes a great “latency killer” by sending the requested data to the web browser BEFORE the later even “has the chance” to request it! 5. Move to a Green(er) Host A website about to turn green calls for a... green hosting company, don't you agree? So, it's time you get picky when it comes to choosing your host and to put the company you're already collaborating with to the... green test: which is its policy towards sustainability and its contribution to creating a more sustainable web? how committed is it to using energy responsibly? If it does not live up to your standards of sustainability... consider migrating to a more “welcoming”, greener host! 6. Compress Your Cached Pages And here you can choose the Drupal way or the Apache way of compressing your Drupal cached pages. Also, you could even step up when it comes to your commitment to a sustainable web development workflow. Supercharge your server by installing Varnish and enabling Drupal's own Varnish module, as well. This way, your server will be ideally equipped for caching, not to mention that Varnish is conveniently easy to configure! 7. Switch from a Data Center to a CDN Network … and reduce, significantly, the energy used during content delivery to your users' devices. Practically a CDN will locate the server (since we're talking about an entire network of servers put at your disposal) that's geographically closest to a given visitor on your website. Next, it will serve the requested content from THERE, much faster and using less energy. In short: better content delivery times for your users a reduced energy consumption for moving data/content from your server to their devices. Sustainable Web Development at a Content Level: Keep It Light, Make It “Findable” Once you've made your commitment to sustainable web development, optimizing your content: for SEO for a lighter on-page load for an improved user experience ... is a must. And here are the 3 “fronts” you should be concentrating your efforts on: 1. Keep It Light, Keep It Short We've already tackled the “irresponsibly heavy images'” issue. So we're not going to point out, once again, the tools and the techniques at your disposal for reducing your visual content's size. What we do want to outline now is that you should keep your user interface efficiently simple! Don't make your visitors get tangled up in visuals, don't turn your UI into a maze for your visitors to solve. Keep it lean and shamelessly intuitive! 2. “Find-able” Should Be the Keyword to Describe Your Content The less time a visitor invests in tracking down the information he is looking for, the smaller his/her web use carbon footprint will be! And how do you make your content easy to find? There are a few simple tricks: a well-thought-out navigation; apply all the best UX practices for a great search experience get the most of Drupal's core search enable the Apache Solr module (especially if it's a high trafficked site that you own) and integrate your green Drupal site with the popular search platform 3. Time to Archive Your “Last Season” Content All those out-of-date images, unused files, “dusty” written content that no one reads anymore still lingering on your website, all those videos dating centuries ago should... go. Should get archived! Not only will you lighten the load your site needs to carry (and reduce energy waste) and take a burden off your server's shoulders, but this decluttering session will benefit your users too. Pages will load significantly fast! And overall maintenance costs will get lower. Not to mention that pages will load fresh, quality content ONLY for search engines to index and your users to enjoy. The END! This is our list of tips and tricks on how to implement the sustainable web development principles into your own website. As you can see, you're not being nickel and dimed in options when it comes to making your Drupal site (more) Earth-friendly! And they do range from basic, handy solutions that require no out-of-the-ordinary technical expertise, to a bit more complex ones. So you have no excuses for not contributing, at a basic level at least, to building a more sustainable web!
A web life without plugins, without extensions for web designers and developers or add-ons! Still: as competitive and as demanding as the present one! Just try and picture yourself as a web designer in this given web environment! Would you manage to stay relevant? With no design toolkit to boost your productivity, to lighten your work and to turn repetitive and otherwise time-consuming tasks into a matter of just a few simple clicks? We didn't think so either! Luckily, in today's web life (imagination test over now!) you're definitely not short on choice when it comes to life-saving extensions that you get to drastically speed up your workflow with. And since no designer worth his/her salt would ever stop adding new and new useful extensions to his/her toolbox, here are our 7 recommendations for you: 1. Spectrum How could you even dare hoping to provide the best user experience on the websites that you're designing without embedding accessibility into your efforts? Well, Spectrum is your “ally extension” in all your accessibility implementing and constantly improving endeavours! Basically what it does is enabling you to visualize your work-in-progress exactly as a visually impaired visitor would! It'll point out to you low contrast problems and issues of badly chosen colors (from the standpoint of those users with color vision deficiency). Once the issues highlighted, you can go ahead and... handle them! 2. CheckMyLinks Now speaking of creating an optimal user experience: broken links will easily “sabotage” all your efforts in this respect! And opting for a ridiculously time-consuming method of closely examining your entire website, link by link, is no option in modern web. CheckMylinks is! This extension will do all the “dirty work” for you: it will crawl into your website and run an in-depth check-up on your entire “infrastructure” of links. Once you have the “link diagnosis” delivered to you, applying the right “treatment” will be less time and energy-consuming, wouldn't you agree? 3. Eye Dropper, One of The Life-Saving Extensions for Web Designers How many times haven't you experience a “love at first sight” for certain... colors found on other websites? How could you turn such a “got to have it” color into an accurate source of inspiration? You take either the long or the short path: you take a print screen, enter your screenshot into the photo editor of your choice and, using your eyedropper tool you engage in a looong, irksome (and nonetheless frustrating) color-identification “marathon” you install this Chrome extension, give that “irresistible” color a click right there, on the website, and, as if by magic, you'll discover precisely what color it is Accuracy, time-efficiency and, of course, productivity-boosting! With Eye Dropper you'll kill not 2, but 3 birds with one stone/click! 4. Window Resizer Compare these 2 possible scenarios here where you need to check how that website that you're currently working on would look like on various devices, having multiple screen resolutions: you literally put together a “pile” of mobile devices having some of the most common screen sizes and... test your Drupal site on each and every one of them you install Window Resizer and carry out an UI testing process right in your browser's window, which will adjust, automatically, to all the given screen sizes; this way you'll get to see how your site is going to look on all of those screen resolutions Now could you deny that Window Resizer could easily get included in the exclusive group of “can't live without" extensions for web designers”? 5. MultiClipboard Here's one extension that will streamline your code copying-and-pasting workflows! And make you ten times more efficient, needless to add! Practically the MultiClipboard plugin does precisely what it promises: it allows you to simultaneously “joggle” with multiple clipboards! It makes it easier for you to copy and grab code from one place and store it in a different Notepad file. Since it keeps track of your recently copied texts, you get to retrieve them and paste them back to their original files! 6. WhatFont What font is that? The one that instantly caught your eye on that website you were surfing on and that you still (secretly) fancy about? How can you tell for sure? You harness the WhatFont's power, that's how! Once enabled, you only need to hover on that text written in the attention-grabbing web font and voila: you'll identify this particular font in a... click! Mission accomplished! Now you get to replicate it in that design that you're currently focusing on! Easy peasy! And where do you add that it can also identify the services generating the web fonts and that its supports Google Font API and Typekit, too! In other words: when in doubt, sift through the bunch of useful extensions for web designers available out there and find the answer to pretty much all your “web design questions”. 7. AutoSave Put your valuable work under a heavy shield: this Notepad plugin will “watch your back” by automatically saving your work every few seconds. So you can focus exclusively on crafting amazing designs instead of focusing on... clicking “Save” over and over again lest you should lose crucial coding. And our list of 7 extensions for web designers that will speed up your workflow and make you X times for productive ends here! We're curious now: which are your own top favorite ones? Is/are any of them listed here?
Adrian Ababei / Aug 29'2017
It's time you embraced the DATA! That's if you still want a leads-generating website and not just a “pretty painting on a wall”, in an art gallery, that, well, everyone's briefly looking at, but no one's buying! The days of aesthetics' “dictatorship” and of the instincts and personal preferences-based decisions are over. It's time you leveled up and took ONLY smart, data-driven web design decision within your organization! It's data, cold facts and numbers that will hep you get your website from “just pretty” to “both effective and pretty”. It's data, again, that will speed up the design decisions making within your organization and help you launch your Drupal site on time and on budget. It will filter all your options down to those that are numbers-backed-up. Those that you can then leverage for ensuring a hassle-free, enjoyable user experience on your website. And now, let us point out to you the main questions that you should be asking yourself and the key mindsets that you should adopt once you engage in a data-based website designing process. 1. Which Are The Specific Results That Your Website Should Target? Do you want to attract more subscribers via your website? Or maybe you want to convert your website visitors into customers? Or you aim, instead, for social media sharing or for the downloading of the materials that you're offering on your website? In other words: which is your specific conversion goal? The one that you're trying to achieve via your website? It's the answer to this basic question that will make the keystone of your whole web design strategy! 2. Move the Spotlight From Your Business Goals to The User's Tasks First of all, let's get one aspect straight: you are not your website's target user! Therefore, all the data-driven web design decisions that you will make should target the “real” user's needs, pain points and expectations and not yours, as a company! Now, speaking of expectations, in web design we prefer to call them “user tasks”. The tasks that your website visitors need to complete (to make a booking, to buy a product, to subscribe to a newsletter, to read blog posts etc.) Your “job”, as the “entity” behind the “front store”, which is your Drupal site, is to make carrying out these user tasks as effortlessly as possible: design with user experience in mind stick to the generally-accepted design conventions, thus creating a sense of familiarity And it's precisely on those pages on your site where their tasks and your business goals, as an organization, intersect, that your main sources of conversions will be (let's say subscriptions: they can be both something the users need to do, some filling-in forms tasks, and your objective as the website owner, as well) 3. Set Up Your Data-Collecting Tasks, a Key Step in a Data-Driven Web Design “OK, OK, I get it; I need to make data-based web decisions only, but how do I collect that usable, key data?” you might ask yourself. Glad you asked, actually! Here are some examples of tests you could run and to-do tasks you could set up and assign to different members of your Drupal team: identify your users' current pain points, determine the causes why you're losing conversions on your website, it's own weak points (run some surveys, rely on your customer service team's gathered feedback from your clients etc.) analyze your competitors' own sites, see what works and what doesn't in your own industry turn Facebook Audience Insights into a powerful tool for getting to know your users better try identifying the reasons why your users won't convert: find what the key differences are between your visitors and your customers 4. Make Empathy-Driven Design Decisions Welcome everyone on your website! Users with disabilities here included! Especially since Drupal makes it so simple for you to meet the web accessibility standards. Therefore, you have no excuse left for refusing to empathize with your users and, this way, for knowingly refusing to achieve your conversion goal. 5. Guarantee Your User a “Painless” Visit And by “painless” we actually refer to common-sense design “rules” that are constantly being broken by organizations, on their websites, for the sake of innovation. Remember: when aesthetics interferes with website usability, it quickly turns into a “trap”! Don't fall into it! Now here are those “common sense rules” that we were referring to: always choose context-sensitive icons with meaning (no need to demand your users to “solve mini-puzzles” for figuring out what action each icon triggers) resist the temptation of breaking the tried & true conventions ensuring usability on your website (place your shopping cart, your sing in button, your navigation bar and all the other key elements on your web pages precisely where your visitor's used to finding them) always “bid on” high contrast for your written content guide them through the steps of their tasks with the help of gestural interactions We're more than sure that these web design conventions are nothing new to you. Nevertheless, what we're trying to point out by enlisting them here is that: you should never compromise usability for the sake of innovation, of breaking the norms! Serve your users' needs of usability first and impress them later! 6. Keep Key Information Above the Fold Although some might argue and feel like going against this convention, keeping the top benefits, the key information above the fold still is a more than relevant “rule”. You might be thinking that not revealing your products'/services' “luring” benefits from the very beginning builds up suspense, yet you'd better handle your visitors' time with great caution. The more time you ask them to invest in the visit on your website, the fewer your chances to convince them to convert will get. To sum up: display all your main benefits, your CTA elements and all the other crucial information above the fold. The deeper you'll bury them, the better you'll hide them from your users, “bidding” on suspense, the more frustrated they'll get. 7. Go for an Ideal Number of Choices, A Key Rule in Data-Driven Web Design And by “ideal” we mean that too many options could get their decisions making process way too cumbersome and challenging. While too few will only confuse your users and make them feel not properly cared for and attended to. How do you achieve this ideal number of choices? Well, here are some simple tips you can easily put into practice: create filters that will help them “swim through” the whole set of options, but make sure you make them as specific as possible and that you add them to the most popular (and therefore the choices-packed ones, too) categories on your site opt for simple, straightforward categories structure them in a hierarchy by assigning priorities 8. Tailor A Personalized Experience for Each One of Your Users Is there any point in stressing out that we're living in a personalization-dominated digital world? Users already expect you to “orchestrate” some perfectly tailored experiences for them on your website, so... there's no hiding from this trend anymore. How do you comply with it while ensuring that all this effort will translate into conversions? Well, by studying your visitors and collecting a whole load of key data regarding their browsing histories on your website, regarding their geolocation, their purchasing histories etc. Next, you get to leverage all that data for crafting your personalized content (in the format of personalized recommendations) for each one of them. It's not going to be a quick and easy process, we won't hide this from you, yet a personalized content marketing strategy still remains THE most effective one. If Amazon keeps using personalized content for boosting their sales, then it must be (still) working, right? 9.Leverage The Power of Video Content on Your Website We won't be focusing on this aspect, since we've already dedicated it a two-parts blog post on this site. Using video content on your Drupal site is not even a matter of a “web design trend”, but a data-driven web design decision. It's plain, "cold" data that supports the usage of video content. 10.Use Social Proof For Building Credibility Testimonials, previous partnering companies' logos, an “impressive” number of sign ups, customer reviews, these all make the type of data that the user, too, collects before he makes his own decision while on your website. So, make sure you have them all there, displayed and visible enough for your users to easily spot them. This type of social proof is the type of credibility evidences that your users expect to see on your website! 11. Constantly Monitor Your Data and Make The Due Adjustments So you've launched your website, created based on data-driven web design decisions only. What now? Well, now you get back to work and you collect even more data! Site monitoring never ends and designing your website's a continuous process. Therefore, always be ready to make some small adjustments here and there if the data you'll collect via GoogleAnalytics, Hotjar or via any other business intelligence tool that you prefer indicates that you should: monitor your users' clicks and scroll behavior leverage all the information that the heat mapping process delivers you and make the right changes on your Drupal site How about you? Have you already incorporated and turned data into a key component of the web designing processes within your organization?
Adrian Ababei / Jun 01'2017
“Little things done right matter”. And there's no point denying that you, too, consider the 404 error page on your website a “little thing”. Something not worth investing too much thought and creativity into, right? But what if you did focused on its UX? What if instead you managed to reduce the “shock” your users might experience when finding themselves stranded on your 404 Page not Found page? What if you turned this “accident” or “incident” (that you can't 100% avoid, it happens to all of us) into an opportunity to show them that you care about little things being done right? Especially when these neglected “details” involve their own time and can affect their experience on your Drupal site? A cleverly designed 404 error page will turn into a: surprise for your visitors opportunity for you to “show off” the (other) high quality content on your website an opportunity to build trust (showing them that you pay attention to such usually underestimated details involving them will no doubt pave your way to their loyalty for your brand) And now, without further ado, here's “the anatomy” of a cleverly crafted 404 page that won't drive users off your website from the very first second: 1. But First: How Do Users Land on Your 404 Error Page? As online users we've “wandered” on 404 pages a few times (at least) ourselves. As Drupal site owners/developers/designers we had to face this frustrating reality: our site users landed on this “no man's land” page on our websites. Links do break, pages get removed from our website, so “cracks” like these, where users risk to fall, do appear. The most common causes are: the user mistyped an URL the user clicked on a broken link the page he/she wanted to navigate to has been moved (yet the visitor has not been redirected to the right page) or even removed 2. Instead of Leaving Your User Stranded, Give Him/Her Some Directions No need to “punish” your website visitors for having landing on your 404 error page! They must be feeling confused or frustrated already! So, instead of making them feel as if they've just landed landed on a “stranded island” and simply leave them find they way out of there, how about throwing them some “ life rings”? How about giving them some suggestions on where to go next and thus keeping them on your website? Here are the most common solutions you could rely on for turning this opportunity (that they've accessed your site) from a potentially lost one (since they're on your 404 No Found Page after all and they risk to leave your website) into a regained one: make it super easy for them to reach your homepage (they might have landed on your site from another website, for instance); a visible link to your front page can do wonders. “tempt” them with links to the content on your site that you're most proud of (they could be links to the most frequented category pages on your site or to your most popular blog posts etc.) suggest them a couple of related products (if it's an e-commerce website that you own) or bestsellers in your attempt to determine them to continue to enjoy their shopping spree on your website consider including a menu on your 404 error page, one that would include several possible paths they could follow for reaching other parts of your website consider including an “issue reporting form” on this page In other words: there are plenty of quite basic and obvious “remedies” for helping your visitors find their way out of your 404 page, but not out of your website. Just put a little effort in finding the “rescue” paths that are most suitable for your audience and your site's particularities, too. 3. Throw Them a Life Ring: Add a Search Box To Your 404 Error Page Not Found And speaking of “life rings” to throw to your users, as you imagine them as being on a stranded island once on your 404 page, adding a search box (or even a sitemap) is such an efficient little “trick”! Again: don't “punish” them for having had the bad luck to land there! It happens to the very best of us! If it's your Drupal website's an old one, for instance, chance are that you removed some of its pages of redirected them. So, why not making it super easy for your visitors to just search for the pages they wanted to access in the first place? Although opinions can vary, we here at OPTASY still prefer this solution to that of automatically redirecting your user on a different page. Let him/her be the one to decide where to go next! 4. Make It Context-Sensitive And since we've used the “stranded island” expression twice already, the following “tip” for cleverly crafting your 404 error page is: don't make it look like a “stranded island”! That's right! Aim for consistency and make sure that this particular page, too, sticks to your website's overall design guidelines! Keep the same colors, fonts and style, making it look like a component of your website and not like “the black sheep” of your site. And, speaking of making your 404 error page not found “context-sensitive”, you should consider adapting its content the given context, too. For instance, let's say you have a visitor landing on this 404 page from one of the category pages on your Drupal website, while trying to access a particular category page that no longer exists. In this case you could consider placing a (or several) link to another one of your popular category pages. Adjusting your 404 error page to your site's particularities in terms of design and branding and to your users' search experience (what page your user was searching for, what page did he/she visited last before landing on your error page etc.) is crucial if you want to keep your visitors on your website! 5. Use Humor Cautiously: It Can Get Annoying and Outshine Functionality We do know that throwing in a bit of humor and adding some proofs of creativity is a huge trend in 404 error page design these days. Yet we advise you to handle humor with great caution! Especially when it risks to affect your page's overall functionality! First of all that no user will find it funny to have his/her time wasted as he/she has to wander on an error page. Secondly, turning their frustration/confusion into a joke will only amplify it! And here's a more than suggestive example of a highly “risky” usage of humor on a 404 error page: In other words: think twice next time you decide to just throw in a video starring a cute pet or to just put a “funny” drawing on your 404 error page with no explanation of why your visitor has landed there and where he/she can go next. Instead of aiming to make them smile, you'd better adopt a more practical approach: help them leave your error page while still continuing their journey on your website! And these are our suggestions for you on how to cleverly design a 404 error page that should keep your users on your website. How does the “anatomy” of an effectively design error page look in your opinion?
Adrian Ababei / May 26'2017
Of course that we all know “the middle way” is the safest path to follow and yet... it's not that easy to find it or to stick to it, right? How do you know how many choices to tempt your website users with? How can you tell when content becomes “too much content” or when the delivered information is discouragingly scarce? Striking a balance, when it comes to information density is, undoubtedly, the work of a “chemist”: pouring precisely the ideal dose so that the final “potion” is, indeed, useful to your users! There's no such thing as one-size-fits all principles to follow here. Yet, there still are some more-then-useful guidelines to consider when it comes to achieving the proper dosage of content to greet your visitors with on your Drupal site. Ready? Here they are: 1. Information Density DOES Have a Huge Impact on the Overall UX So, before we go any deeper into the whys and hows of keeping information density under control on your Drupal site, you should first acknowledge its high influence on: usability navigability user experience How come? Well, it's pretty obvious: the amount of content that you deliver via your website, to your users (taking the form of written content, images, color, controls, textures) will determine whether he/she will keep navigating or leave your site in frustration. Moderation is key, lest you want your heavy load of information to bog him/her down or the lack of information to drive him off your site! Always have the USER in mind wen you create your wireframes! Web design trends and movements should come second. 2. Information Clutter and the Paradox of Choice A whole collection of visually-striking images... attention-grabbing videos... multiple calls to action... testimonials... rates... recommended products... super long copy... and, in this overcrowded web page (for yes, this content, in all its forms, is displayed on a one single web page) “sprinkle” some, let's say, celebrity endorsements, too! Can you visualize this heavy-content page? Can you easily “digest” all that “virtual” content and effortlessly make your way through it? So, you get our point: always put yourself into your Drupal site visitors' shoes and always anticipate whether you risk to deliver excessive information, to offer them way too many choices. Which will automatically “paralyze” them, instead of engaging them. You'll end up confusing them! “Bombarding” your users with way too many options and too much visually-distracting information for them to “digest” will only result in a bad user experience. One of the possibly winning formulas: Headline + An Image + A Description + The Price +A Call to Action + Some Reviews Per Product. 3. Balancing Information Density: Tips and Tricks Now, before we go on with our list of tips and tricks, let us share with you a couple of key questions that will indicate you the right path to take for achieving... perfectly balanced information density: "What Is The Goal I Want to Achieve With this Web Page (Landing Page)?" "What Tasks Should My Drupal Site Visitor Carry Out?" "What Information Does He/She Need in Order to Complete These Tasks?" There! Once you have the answers to these 3 key question, you'll step on the good path to properly adjusting the amount of the information that you'll present on your website. And now, the promised tips and tricks for pulling off a reasonable information density: attention-grabbing call to action button persuasive, clear and concise call to action text clean and neat design with a strategic use of white space fluid, intuitive user flow and path to reaching your web page's goal visual hierarchy (masterfully use texture, color, white space to direct the user's eye where you want to guide his/her attention to) And since text without exemplifying images is like cake without frosting, take a look at this example of clean design and information structuring leading to zero ambiguity or paradox of choice: A few elements, that clearly communicate to the user which are the company's available services = good UX! 4. When Minimalism in Web Design Becomes a Pitfall Just because it's “trendy”, it doesn't mean that it's going to serve your site's goals of usability and navigability! Do keep this in mind when you decide to “declutter” and to overly simplify your Drupal site's design! Less sure is more, no doubt about that! Just make sure you don't turn “less” into “scarcely enough”! When in doubt, go for a “moderate minimalism” formula: An eye-catching headline + The value proposition + The description + The tagline + A concise and attention-grabbing call to action! And, as a golden rule: always consider the nature of your Drupal site, its audience and their expectations before you “blindly” adhere to one web design ideology or another. Needless to add that if it's a magazine's website that you're working on, adding just a few “teasing” lines of text on each page will greatly affect the UX. 5. And Yet: High Information Density's Not Always a No-No Surprised that we're actually suggesting you to go “against the tide”? In fact, we're just asking you to take some time to consider these possible good aspects of an information-heavy web page: users don't need to keep scrolling down for reaching the information they're looking for. It's all there, on the very same page! since it's in the users' habit now to almost unconsciously use the “Control+F” combo of keys to find the information they're searching for really fast, you'll be actually streamlining their quick on-page searches you'll create the impression of abundance and especially if it's a e-commerce Drupal site that you own/design, greeting your users with an entire collection of striking images, articles and items on promotion will undoubtedly give the impression of abundance (again: always adjust the information density to the very nature of your own site) In conclusion: what you should avoid, at all cost, is not really high information density, but poorly organized, crammed on-page content! "Clutter” will always discourage users. High information density is necessary for certain websites (news sites, for instance), so you can't afford risking to fall into the “pitfall” of minimalist design. And not delivering the content that your visitors land on your site for in the first place. Now speaking of efficiently structuring information on a web page, take a look at the example here below: although it's a content-heavy page, you can still fluidly “navigate” trough the displayed content! 6. How to Design for High Information Density Now that we've see that high information density is something you shouldn't avoid at all cost, given the nature of your own Drupal site (if it's precisely information that your users visit it for) and that poor alignment and information “clutter” is what you should stay away from, let's discover together how you can pull if off right by using some web design “tips and tricks”: cluster similar content: this way you'll manage to efficiently structure large amounts of information, “asking” your users to invest a lower amount of effort for reading and assimilating it go for a basic, “familiar” layout: when your web pages is “heavy on content”, the last thing you want is to “exploit” your users' attention with an overly complex, innovative layout. Keep it simple and go for a common one instead, one that all users will instantly understand: the standard horizontal area on top standing for the main navigation, a column on the left playing the role of a secondary navigation... rely on graphics for breaking up text-packed copy: font variations, pictures, graphic elements strategically “sprinkled” in your text will make it easier for users to “digest” it effectively use the white space on the page: and since white space is “gold” on a content-heavy web page, use it wisely for breaking your long passages of text into smaller, “airy” chunks use color for enhancing navigability and readability: using the same color for the same type of content will instantly make the entire information load on your web pages look more structured, more organized and... easier to follow. The mental effort that you'll challenge your users to invest will be significantly lower. So we've tackled issues of good alignment, effectively grouping content and all kinds of web design tricks for making a content-packed web page as little mentally exhausting for the user as possible. Now let us continue with a “bad example” for supporting our “pledge” for perfectly structured, organized content. Here it goes: Wrapping Up Moderate minimalism is the right path to follow! High information density is not always a bad thing, yet crammed, cluttered and poorly organized content is! When the nature of your website requires for a considerably heavy “load” of information to be delivered, rely on web design tips and tricks for breaking your content into smaller chunks and for efficiently organizing it! There are cases when high information density is definitely a no-no: when accessibility is a critical issue to consider when your site addresses a senior audience when your site is marketing/branding-focused and thus aiming to visually delight the users rather than delivering them their daily “dose” of information
Adrian Ababei / May 16'2017
Speed, high performance still play their leading roles on the “online stage”. And yet, their “dictatorship” wouldn't be possible without other factors, in supporting roles, such as looks/web design. So, taking an informed decision when it comes to “putting a face on” your website, selecting from the overwhelming wide collection of Drupal 8 Bootstrap Themes available out there, is crucial. And here is where we, the OPTASY team, come in to trim your discouragingly heavy load of Drupal 8 Bootstrap Themes to the “five-star” ones. To those 7 ones that are both on Drupal themers and Drupal 8 website owners' top favourite lists. Still, before we go on with our list, let us answer the legitimate question that might be “bugging” you right no: “But why a Bootstrap theme?” Here is why: it's THE truly powerful front-end HTML framework for building interactive web pages it aligns with Drupal 8's mobile-first approach it's actively maintained: its popularity is backed-up by numbers: from all the Drupal 7 and Drupal 8 themes installed on March 2017 over 140,000 have been Bootstrap-powered And now, let's proceed with our list of 7 best Drupal 8 bootstrap themes, ranging from the best rated ones to the best selling ones so far in 2017: 1. TICO, Head of the Drupal 8 Bootstrap Themes List And no wonder why it's head of the list: it has something for everyone: a modern look and feel for the website visitor a fully responsive design a whole set of cool tools for Drupal site administrators to use and streamline their work with a slider, block builder... an easy to use drag and drop site builder for Drupal themers to quickly put together and turn into reality the web designs they have in mind it's powered by some of the latest web technologies (CSS3, Bootstrap 3, HTML5 etc.) for Drupal developers to easily implement all the desired functionalities with 2. AKLAS This clean and modern template manages to kill two birds with one stone: both those looking to give their company websites' a professional, rather corporate look and those working in a creative industry, looking for a clean and neat design that would best showcase, without outshining, their portfolios. Other features you can't ignore: it's 100% responsive it runs on modern technology: SASS (“spoiling” the Drupal web development team behind your website with power and easiness of use) and... the Bootstrap front-end framework (of course!) 3. JOURNAL 8 This is the only theme from our list which is designed especially for Drupal 8! Not just adapted to, but created for Drupal 8 from the ground up and, this way (as you can just guess) incorporating all of Drupal 8's “goodies”: the in-line WYSIWYG editor Views as part of Drupal's core So, if you want to power your website with a theme that reflects all the best Drupal 8 practices, Journal 8 is THAT one. 4. VANESSA Now, this is a cool “booster” for any start-up company's site, app or other web product! It's a light landing page theme, mobile-first and with a modern design. The perfect boost you need for propelling your business in the fiercely competitive online world! And there's more! Since, as a start-up, you shouldn't implicitly settle for basic functionality and rudimentary design. No sir: it's HTML 5 and CSS3-powered it grants you unlimited power of customization: you get to “play with” Drupal 8's custom blocks, such as Taxonomy, Views, Content Types and the rest of “crew” for personalizing your site's look to perfectly fit your company's unique needs it comes “loaded” with a collection of 630 icons for you to scan through and pick from it comes backed up by extensive documentation it grants you Video & Image Backgrounds 5. UNIVERSH If it's a template that should meet the specific needs (of functionality and design) of an education website, that you're searching for, then Universh is the ONE! Not only that it's been designed with your education Drupal site's particularities in mind, but also as a whole tool-set of customization options for you to choose from and to mix and match to your liking: a collection of more than 10 one-page layouts to dig through for choosing the most suitable one for your site's homepage a whole “load” of predefined headers, footers and menu styles to scan through and select from 30+ ready-to-use widgets And to all these customization-oriented tools put at your disposal, add the CSS3, HTML5 and Bootstrap 3.3.5 technologies: the 3 cherries on top! 6. PORTO, One of the Best Selling Drupal 8 Bootstrap Themes Beauty and convenience that's how this theme could be easily described! Its increasing popularity's due, to a great extent, to its easiness of use. Practically it empowers you to get your Drupal 8 site up and running in... just a few hours. With powerful functionality and spectacular design already out-of-the-box, your job will resume to taking just a few minor decisions. To simply choosing from all the options put at your disposal. Some of this theme's tempting features would be: you're free to change your background colour from light to dark or the other way round, by simply adding an HTML class the same surprisingly easy and fast method applies when it's your site's layout that you'd like to change: from wide to boxed or vice versa it's fully responsive it comes with pre-built view support and template for Drupal Commerce it's written in a clean code it's masterfully configured it offers you first-class support 7. RHYTHM Out-of-the-box commerce theme... built with unlimited extensibility in mind (your site's “bugs-proofed” when you need to add new Drupal 8 modules, new features to it)... it targets both site admins/content editors with its “easy to find and edit” content tools and site builders thanks to its clean code, highly customizable background, content, color schemes and “power” coming right out-of-the-box. There you have it: a short list of the main reasons why you should consider Rhythm, too, when you're drafting your own list of best Drupal 8 Bootstrap Themes to consider for your own site. And... cut! This is where we turn off the spotlights that we've put on THE most popular Drupal 8 Bootstrap Themes. Now don't feel compelled to go for precisely one of these 7 themes The “perfect match” for your own website might not even be listed here. Nevertheless, it cannot be for no reason that particularity these ones have already won the appreciation and the good rates from most of the Drupal site owners and developers, right?
Adrian Ababei / May 12'2017
“The details are not details.They make the design.” (Charles Eames) And we couldn't agree more! Especially in the context of the web today, where users need to sort the often discouraging “offer” of websites competing for their attention. In a digital landscape where highly influencing trends like “ultra minimalism” and “drastic” simplicity rule, no web designer or website owner, would risk to “overload” their websites with stunning visuals and content. So, it's not without surprise that forced to reduce the load of “resources” of eye-catching visuals and engaging copy they have switched their attention to... details! To those little elements apparently insignificant in the context of the “big pictures”, but which have now got the “leading parts”. And yet, using the right “dosage” of attention-grabbing visuals that these details could “encapsulate” and of engaging copy (now turned into “microcopy”) is a true art! In this respect, let us point out to you a few tips that will help you “master” the art of “joggling with” design details for delighting and for keeping your visitors engaged to your site/app: 1. Challenge Them to Interact with Your Site “Bid” on interaction tools and don't let your website visitors get “lazy” during their visit on your website! Get creative (here's a website that might inspire you: Bellroy) and choose your tool (not your “toolbox”, for you don't want to turn your website into way too demanding and distracting “amusement park” either), the on that will stir your users' curiosity and urge them to click, to interact in order to actively discover how your product's made or which is the feature that sets it apart and so on. Challenge your visitors with little “puzzles” they need to “solve” (meaning: “interact with”) for discovering your products'/services' story. Challenge them to turn from visitors to participants! Create the right context for them to interact with a key element on your website. 2. Intrigue and Delight Them with Beautiful Typography Impressing and keeping your users engaged to your website could also mean switching the spotlight to such an “common” detail as typography. “Common” and “obvious” and yet, loaded with such power that too many web designers tend to overlook! But you're not one of those designers or Drupal website owners, right? In this respect, here are two ways in which you could trigger amazing typography's power on your website: you could go for artsy looking, visually-arresting character shapes you could play with proportions and surprise your users with some oversized letters Whatever suits you! Or better said: whatever suits your own website's audience! Beautiful lettering is probably the best example of an apparently “insignificant” detail that you can “empower” to impress and to engage all by itself! 3. Consistency: One of the Key Web Design Details Keep it consistent! It's a rule that you just can't risk breaking! Keep your design consistent throughout your website, and here we're referring to: colors that represent your brand's identity and your site's specificity the particular use of imagery on your website specific typography that you've chosen to go with on your site and that you should stick to on all its pages Familiarity is what your users expect to find on your website, therefore, remaining consistent to your website patterns is a common sense principle you should not undermine! You definitely don't want to make your visitors feel like they're challenged to think about your site's design and you definitely don't want to risk breaking the “familiarity” rule by surprising them with new design elements on each page. It's more time-consuming for them and, therefore, way too risky for you! 4. Trigger Users' Reaction Using Microinteractions Or, better put “microinteractions serving specific purposes”! It's you who'll decide what roles they should play on your website, how precisely they should enhance your visitors' journey (just think of Facebook's globally popular “like” button): to give feedback once your users have completed certain actions on your site to change a setting to signal them when they're not handling a task correctly to enable them to tap on/off an alarm These one-touch bits of interaction make another great example of web design details which can get invested with key functions adding value to users' overall experience on your website! 5. Surprise Them With a Tiny, Yet Sufficiently Intriguing Animation Surprise them: make your animation so tiny and almost perfectly blending into the rest of the design! Another one of those web design details that you could turn into a "superpower". This way, the little “unexpected discovery” that your users will make will not just delight them, but keep them engaged with your website, as well! Keep it simple (no need to create something too time-consuming and pointlessly complex) and strive to turn it into a perfect “surprise factor”! 6. Add Cues and Transitions To Discreetly Guide Them Through Don't get greedy when it comes to your website's visitors own time! To the time they're willing to invest in exploring your site. Instead, insert highly intuitive transitions on your website that will help them efficiently invest their time in exploring it! Instead of wandering about and trying to figure out by themselves how to get from point A to point B, why not insert these directional clues for them? Your website's navigation shouldn't be a puzzle to solve! Therefore, cues make one of those web design details that you can't afford underestimating! 7. Add Purposeful Microcopy What do you do when you're constrained to both visually impress and to engage users using just the limited resources offered by a minimal web design? Well, you get creative and you efficiently “exploit” those resources. Such as the tiny text inside buttons, in the footer or in your fill in forms.You go ahead and get those bits of copy written, edited and reedited till they “encapsulate” precisely the call to action messages “capable” to impact your users. You'll have just a few characters at your disposal: use them efficiently! 8. Intrigue Them and Trigger Interaction with Cinemagraphs These intriguing “living images” make a great tool for surprising your visitors and for making them engage with the content on your website. Movement will always catch the eye! And you don't even need to go for something too visually absorbing: an unexpected touch of color on an otherwise black-and-white image a little “collage” of photography and illustration elements a tiny element the visitors wouldn't expect to see given the web design context of a specific page etc. The list of effective, not to be underestimated web design details could go on, but it looks like our today's post is getting a bit too lengthy: we'll try grouping the rest in one of our next posts. How about your own list? What other seemingly insignificant, in fact highly powerful little details (“powerful” in the hands of skillful web designers) does it include?
Adrian Ababei / Mar 27'2017
It's no doubt that these web design myths “controlling”, just like some “tyrants” the online world, have initially emerged as web design innovative notions, turned into widely used techniques, and, finally, into highly influencing web design trends. It's also true that since their “adopters” have started to take them way too literally or to refuse to adapt them to the ever-evolving digital landscape, to the ever-changing users' digital behaviors, these web design practices have gradually turned into... myths. Into rigid, “dusty” web design mindsets risking to affect both the design's quality itself and the website visitors' experiences. Be better than that! Be smarter than that! Take smarter design decisions than those still “stuck” with these preconceived assumptions which are no longer relevant in 2017's web design context. And here are the 10 web design myths “exposed”: 1. "The 3 Second Rule" This is probably the best exemplification of a notion turned into a rigid “rule”. Of a concept taken ridiculously literally! No need to develop a paranoia imagining your generic website visitor holding a timer in one hand and his mouse (if we're talking about a desktop user) in the other and counting precisely those 3 seconds! It's absurd! The 3 second rule is just a figure of speech (it could easily be a 2 second a 4 or 5 second rule) “invented” only to stress the importance of an optimized page loading time. To “warn” you that you should constantly strive to boost your website's performance. If your web pages load in, let's say, 4 seconds, it's really not the end of the world! Instead, if they load in 3 seconds just to show a bad design and low quality content... then you might be, indeed, facing a major traffic problem! 2. "White Space Is a Wasted Chance of Capitalizing Space on My Site" This is already a “prehistoric” type of web design preconception! And we couldn't give you better examples than Google's front page and Apple's clean and airy design where big chunks of white space act as spotlights directing our eyes towards their “star” products! “Clutter” is your biggest enemy when it comes to web design! While white space and moreover, strategically using it for guiding your users' attention towards key points on your website, well, this is almost an “art”! Less sure is more, in this case! White space acts as a spotlight focused on the key content(s) on your web pages, but only if you just know just how to focus it! 3. "Mobile Device Users Are Always On the Fly and Easily Distracted" It's a false assumption now “cemented” in the collective thinking: mobile device users are always on the go, always in a rush and easily distracted! It's noting but an exaggerated generalization! In fact, studies (Google's studies, the one that we're referring to here taken in 2012) have shown that: 68% of mobile device users are, in fact, accessing websites from their smartphones in the comfort of their homes (surprise, surprise!) 67% of desktop users are simultaneously using another device, as well, as compared to 57% of mobile device users. We're all living in the age of distractions. We get constantly distracted whether we're just watching TV, doing online shopping on our smartphones or reading articles on our PCs! You should still design for highly mobile users, but being fully aware that “on the run”, “striving to resist various distractions”, is not the main context that your mobile device users will be visiting your website in! 4. "Good Usability's a Must, While Good Aesthetics an Option" This thinking's maybe one of the riskiest user experience pitfalls! With all the web designers and web owners out there playing all their cards on good usability, they tend to undermine good aesthetics' key role or (even worse) to ignore it completely. You can't effectively reach out to your users and turn them into customers, if you don't emotionally connect with them, first. If you don't strive to make the very best impression (and since we're all highly visual creatures, a “good first impression” is nothing but another word for “great looks”). Usability's a very technical concept, made of certain (equally) technical, precise tactics to implement for achieving good usability on your website. While aesthetics is far more “human” and it's to humans that you need to reach out to first and only then to... “prospects”. Do keep that in mind! When combined, these two “powers”, good usability and good aesthetics, or, better said, good usability and credibility (that good aesthetics invests your Drupal website with) you can't get but a superpower to turbocharge your website with! 5. "User Feedback Is Not to Be Questioned or Debated" Of course that you should constantly ask for your users' feedback, it's vital for every business, be it online or not! What you should avoid doing is: taking that feedback, all the comments that your visitors will leave on your site, too literally! People don't always know what they want and they're quite bad at explaining their preferences, why is it that they like/dislike certain features on your website or anticipating their future choices/behaviors. A “healthy” way of doing web design is to dig in, starting from your users' comments, to the core problems! Base your design decisions on those core problems to be solved, first and foremost! Complying with your users' suggestions/complains, should come second on your list of “motivations”. 6. "Simplicity Can Only Mean Minimalism"- One of the Popular Web Design Myths And this web design myth is still influencing, to a great extent, web designers' work and website owners' design decision-making! There's this popular belief turned into a whole trend, that you can't possibly achieve a simple design than by cutting out UI elements, by drastically reducing steps and user interactions on your website. False! Even a complex web design can be made simple if you're a gifted web designer! Focusing on simplifying users' experiences and reducing the visual surface (minimalism) is not the same thing as reducing all the “friction” that a way to laborious, overly demanding design would imply from the user's point of view (simplicity). Its not the same thing as striving to reduce some of the energy that he/she would invest in visually “digesting” the content on your website. Notice the difference? 7. "Good Design is Self-Sufficient" “Design in the absence of content is not design, it’s decoration.” Therefore, looks aren't everything and good design isn't self-sufficient! Visually-arresting graphics, cool fonts and visually-appealing colors won't compensate for the absence of high quality content. In other words: if there's no happy “marriage” between web designers and content marketers, you'll be left with a great looking website that only you and your team will get to admire. For no user will ever find it! If you don't enhance your great looking design with meaningful, engaging content that not only that completes it, but adds extra value to it, with content that addresses your visitors' needs, then your design won't go beyond its decorative function. 8. "The Homepage Is The Most Important Page on My Site" Homepage's “supremacy” has started to fade away! If it used to be the page that users always landed on first, since it served as the main directory and, therefore, since there was no other way for accessing a website, today this is no longer the case. And it's time that you, too, started to see the homepage's supremacy as a web design myth! Now users can land directly on a product page, coming from certain links posted on social media or on other sites. Your website's visitors might not even get to visit the front page at all. Moreover, and this is especially the case with websites selling products or services, you should accept the fact that your users aren't there for delighting themselves with the “wow” content on your homepage! For them your front page is nothing but a “gateway” to the product pages that they're really interested in. Or, depending on the site's specificity, to the information they can find on other pages of your Drupal site.. Think of Facebook! How often do you visit its homepage as a logged in user? Put together, all the web pages on your site are much more frequented than your homepage. Just think about that! 9. "The Three Click/Two Tap Rule" This is another baseless assumption! That all the elements on your website should be at a three-click's distance or a a two-tap's distance (on mobile devices). Irrelevant! Whether your users decide to prolong their visits on your site or to leave it after just a few seconds, has nothing to do with this rule. User's main interest is to carry out his task (purchasing something, getting a key info etc.) You could abide by the three click rule and still witness visitors leaving your website in a rush if the content that they'll you'll deliver them, after precisely these three clicks/two taps, doesn't engage them or meet their needs. As a general rule: it's precisely when web design rules are taken too literally that they risk to turn into web design myths! 10. "Cutting Out The Navigational Choices"- One of the Influential Web Design Myths Somehow this theory initially related strictly to short term memory and to multiple product choices, has started to impact web design, particularly navigation, as well! It's one thing to cut out items from an excessive product/services collection (leading to the paradox of choice) and a completely different thing to start removing pages from your navigational bar/menus. It's those pages that grant your user easy access to the content on your site that he's interested in. It's them that will enhance his/her exploration of your website! So, instead of blocking his/her access to different web pages on your Drupal site and of negatively impacting his overall experience with your website, you'd better figure out how to efficiently group these pages. And it seems that we've reached the end of our list of 10 web design myths you should be aware of and... stay away from! Have you “busted” others, as well?
Adrian Ababei / Mar 22'2017