Drupal is a popular open-source content management system written in PHP. Having been created in the early 2000s by a Belgian student, it now powers some of the most prominent websites on the web (WhiteHouse.gov, Weather.com, etc.). It is often regarded as a competitor of CMSs such as WordPress and Joomla. One of the most important components of the Drupal project is its community of supporters (contributors, developers, evangelists, business owners, etc.). Prominent within this community stands the Drupal Association, responsible for "fostering and supporting the Drupal software project, the community and its growth". A giant leap from its predecessor, the 8th major release of the Drupal project has just hit the shelves. It brought about a serious modernisation of its code, practices and mentality. Many regard this shift as a real move away from the traditional notion of a CMS to more of a Content Management Framework (CMF) that provides a great platform for building complex applications. In this article, I'm going to answer some of the more frequent questions people have about Drupal when starting up for the first time or considering doing so: • Is it right for me? Who is it aimed at? • How can it be installed, and where can I host it? • How can I start working with it as a developer? • What options do I have for extending functionality or styling it?
Who Is Drupal Aimed At?
Since the beginning of the project, Drupal has evolved from being mainly a tool for building smaller sites to one that can now power enterprise-level platforms. Especially with Drupal 8, site builders and developers can easily scale up from small websites to large platforms with many integrations. For example, the adoption of Composer allows you not only to bring external libraries into a Drupal project, but also to use Drupal as part of a bigger project of applications and libraries. It's safe to say that Drupal is flexible enough to meet the needs of a wide range of projects. When it comes to development, Drupal has always had a relatively closed community—not because people are unfriendly, quite the contrary, but mainly because of the code typically being written in a Drupal way (resulting in what sometimes is referred to as Drupalisms). This has meant a learning curve for any developer starting up, but also less interest from developers of other PHP projects to jump in and contribute. This is no longer the case. Especially with the release of Drupal 8, the community now promotes a new mentality of code reusability and best practice across different open-source projects. Active participation in the PHP Framework Interoperability Group is part of this effort, and using a number of popular Symfony components in Drupal 8 core is a testament to this commitment. With this move, the Drupal community has gotten richer by welcoming many developers from other communities and projects, and it is sure to grow even further. So if you are a Laravel developer, looking at Drupal code will no longer be so daunting.
How Can I Install Drupal, and Where Can I Host It?
Traditionally, Drupal has had a relatively easy installation process, particularly for people who at least knew their way around a Linux environment. The project simply needs to be dropped into a folder your web server can run (which needs to be using PHP and have a MySQL or MariaDB database). Then pointing your browser to the/install.php file and following the steps takes care of the rest. The most important screen you'll see is the one in which you select a specific database to use. In terms of requirements, the LAMP stack (Linux, Apache, MySQL and PHP) environment has always been a favourite for Drupal to run in. However, it is in no way restricted to it. Solutions exist for installing it straight on Windows or Mac (e.g. using the Acquia Dev Desktop) but also on a Linux system that runs other web servers. The easiest approach, if you go with your own setup, is to use a LAMP server for hosting. For a bit more performance you can replace Apache with Nginx, but you'll then have to take care of some specific configuration that otherwise is handled in the.htaccess file Drupal ships with. However, if you don't want the hassle of maintaining your own hosting server, there are three main providers of specialised Drupal managed hosting: Acquia, Pantheon, and Platform.sh. These also provide a workflow for easy updates and development flow. Past that, you are looking at fully managed hosting with a Drupal development company.
How Can I Get Started Developing for It?
Developing Drupal websites has typically been the kind of thing you either liked a lot or didn't like at all. This is because when you were first introduced to Drupal, you encountered very many specificities that you didn't see in other projects. So if those tickled your fancy, you loved it forever. With getting off this island in Drupal 8, this is no longer the case as much. You still have plenty of Drupalisms left that you can love or hate, but you now also have external components like Symfony or Guzzle and, most importantly, a more modern way of writing code in general (OOP, design patterns, reusable components, etc.). So your PHP skills from building websites with Zend will come in handy. A good way of getting into Drupal development is to follow some online video courses. There are a couple of resources that are excellent for this purpose, most notably Drupalize.me. If, however, video is not your favourite medium, there are also many written tutorials and guides available to get you started. Since Drupal 8 is brand new, you'll find significantly more learning content for Drupal 7. Nevertheless, the focus in the community has been shifting recently towards Drupal 8, so you can expect more and more of these resources to crop up. And if you have no experience with any version of Drupal, it's best to focus exclusively on Drupal 8 as the changes between the two are big and perhaps you'd be facing unnecessary challenges.
How Can I Extend Drupal?
The main extension point of a core Drupal installation is its module system. Modules are used to encapsulate bigger chunks of reusable functionality that can/should work on different sites. Aside from the core modules, there are a large number of contributed ones, available for installation. Granted, most are still only for Drupal 6 and 7, but the community is catching up also for the newest version. This problem is also mitigated by the incorporation in Drupal 8 of a few popular contributed modules as well as extending the scope of what core can do out of the box (compared to Drupal 7). Lastly, custom modules (the ones that you write yourself) are the primary way you can add any functionality that you want and that is not available via a contributed module. Installing modules can allow you to plug in various pieces of functionality, but you should not treat this as a green light for adding too many. It's always better to stick to the ones you actually need, and don't be afraid to be critical in this respect. You can also work on finding a good balance between contributed code and the custom oneyou write yourself. Additionally, since we are talking about open-source software, you should always evaluate the modules you install. The following indicators are good examples to pay attention to: number of downloads and usage, commit frequency, maintainer engagement, state of the issue queue. And do keep security in mind as well. It's highly recommended you keep both Drupal core and any contributed modules up to date as this will significantly help you keep your site and server secure (though it doesn't ensure it).
What About Styling?
The styling layer of a Drupal site is handled (in large part) by its theme. Themes are similar to modules in that they are an extension point, but they have different responsibilities. They contain the styles, front-end libraries and in most cases template files that are used to output data. There has been great progress in Drupal 8 compared to the previous version: the popular Twig engine has been adopted for templating, theming has been limited to Twig template files, debugging and overriding templates has been made much easier, etc. Similar to the advances in back-end development experience (DX), the theming layer has been made more appealing to the non-Drupal crowd. Front-end developers can now easily work with Drupal themes without having to understand the ins and outs of the back end. Drupal core comes with a number of themes that can provide you with examples but also which you can extend from. There are also contributed themes similar to how there are modules. Popular front-end frameworks such as Bootstrap or Zurb Foundation have mature Drupal theme implementations for Drupal 7, which are also readying for Drupal 8. These work very well as base themes but also for quickly scaffolding a website and making it look decent. Paid themes are also available to try out. Usually they are very cheap and quick to set up. The problem with them is that they are worth exactly as much as you pay for them and usually have gaping holes in their flexibility. As a beginner, these themes can seem like a great way to set up a site, and they very well may be. However, as you progress, you'll learn to avoid them and build your own, based on external designs or even plain HTML/CSS/JS templates.
Conclusion
Drupal is a powerful tool for building websites and platforms of any kind. With each new major release, Drupal has shown a commitment to better itself, become more robust and flexible, and embrace outside communities as well. Source: http://code.tutsplus.com
Adrian Ababei / Mar 31'2016
Most web developers use CCS on a daily basis – This can be a good thing or a bad thing, depending on the organization of your codebase. Larger projects can be a CSS nightmare when not properly organized.
Good CSS etiquette requires well thought out coding principles, a good foundation and a large selection of tools to make your work easier. Each project, individual or team is different so the resources and tips below may or may not apply to your project but most of them can be incorporated into your workflow.
Coding Principles
Usually before starting your project you need to get together with your team members and decide on why and how you will do things. This will lead to a better and longer lasting CSS codebase. You can do this in different ways and styles, according to your needs and preferences. For example, you can use a text file or Google doc that’s shared between team members. It can also be its own website – it all depends on the scale and importance of your project. It’s a good idea to take a look at GitHub, it might help you get started.
CSS Preprocessors
CSS preprocessors can be a huge benefit to your project, if they are used correctly. Less and Sass are some of the most popular CSS preprocessors available. Preprocessors can be very helpful due to their features: limited nesting, multiple files, mixins and variables. Before implementing or using a CSS pre-processor, ensure that all team members are on the same page.
Starting resources
When working on a greenfield project, it’s a good idea to use Normalize.css. Normalize.css helps browsers to render all elements consistently. You can also check Jonathan Neal’s Sanitize.css. Another useful little resource is Bass.css, which is a collection of utilities and base element styles.
Grids
Generally speaking, sites that start of small will continue to grow bigger over time – without a solid grid foundation in place things can become very complicated very quickly. Hence it’s recommended to have simple or complex grid systems within your CSS which will spare you a lot of work in the long run.
Tools
A good foundation and solid principles is the base to creating good CSS. Let’s take it to the next level by using tools to improve our workflow. The most popular tools nowadays are Gulp and Grunt – each of these tools has a selection of features which we can use to provide feedback, manipulate the code and help enforce rules.
Other useful plugins include:
Recess – Developed by Twitter, it is a simple yet attractive code quality tool for CSS
CSS Lint – As the name states, this plugin helps you lint CSS files
PostCSS – One of the most popular CSS processors, currently used by Shopify, Twitter and Google
Page Speed Insights – You can run desktop and mobile performance tests for your site with reporting to help you with building the website.
Gulp and Grunt offer plenty of plugins that not only help your CSS but other aspects of your project as well – it’s highly recommended to spend time and familiarize yourself with these two.
Performance is very important for any online project, so you should definitely check out these tools and speed up your website: SpeedCurve, WebPageTest and Calibre.
The EditorConfig plugin is great when you’re working on a codebase with other developers. This little plugin aligns the coding standards set out by the team leader and ensures everyone is on the right track.
Conclusions
Experience always helps when creating CSS but keep in mind that nothing will ever be perfect. Keep analysing your code in order to ensure proper results and if you ever get stuck simply ask a friend for help.
Adrian Ababei / Mar 30'2016
Last summer we had to convert a huge code base from Javascript to Typescript. During this transition I learned a lot about the differences and similarities of the two. I developed an idea about what makes a good use case for Typescript and when it doesn’t make sense to use it.
Use cases for Typescript
1. Code size: When the source code is huge and more than one person works on the project, a type system can help avoid the obvious errors. This is specially true for SPAs. When someone can change code that potentially breaks another one’s code, it’s generally good to have some sort of safety mechanism. The TS transpiler reveals the obvious mistakes and is kinda smart (but can’t eliminate the need for debugging of course). If the source code is not huge, it probably doesn’t make sense to make it longer by adding type annotations. I have converted 180+ files from JS to TS and in most cases it added roughly 30% to the code size. 2. Previous baggage: if you or the majority of the team come from a strongly typed language like C# and does’t really want to go JS all the way, TS is a good alternative. Even though I recommend learning Javascript for good, there’s nothing preventing you from using Typescript without knowing Javascript. In fact Typescript is made by the same guy who made C# so the syntaxes are similar. In my company we had a team of C# developers who were coding a sophisticated desktop application in C#/WPF (which is front end in the desktop world) and then they were tasked to join my web project as full stack. So it was relatively a shorter path for them to learn Typescript for front end and leverage their C# knowledge for the backend. 3. As a replacement for Babel: The old Microsoft used to take something that is standard (for example Java) and add proprietary non-standard stuff to it (for example J++) and try to force developers pick one. Typescript is exactly the same thing to Javascript (after another try in 1996 divertingJScript from Javascript). Anyway, since ES6 is basically a subset of Typescript and the Typescript transpiler generates ES5 code, it’s practically possible to transpile ES6 code to ES5 (just as Babel) using the typescript transpiler. Though it’s not a strong use case IMHO. Typescript’s transpiler generates pretty readable ES5 code as output and that was one of the reasons Angular 2 team chose TS over Google’s own Dart language. 4. Promoted by lib/Framework: If you are using Angular 2 or another library that makes it particularly interesting to use Typescript, go for it. Just know that even though Typescript can use all Javascript libraries out of the box, if you want good syntax errors, you need to add the type definitions for those libraries externally. Fortunately the nice guys atDefinitelyTyped have made a community driven repo and tooling for that. But that is one extra step when you’re setting up your project (side note: for the JSX fans I should mention TSX).
When you’re better off without Typescript?
1. Extra transpilation tax: There are no plans to support Typescript natively in the browsers (Chrome did some experiment but cancelled later). This means you will always have to transpile your TS code before running it on the browser. For the standard ES6 it’s a whole different story. When ES6 is supported by most browsers, the current ES6 to ES5 transpilation would be unnecessary. ES6 is the biggest change in the language and I suspect most people would settle there, but those who want to try the experimental features of the next version of the language will transpile anyway. You just modify the file and refresh the browser. That’s all — no “watching” or “transpiling on demand” or build system is necessary. If you choose TS, you probably end up doing some extra book keeping for the keeping the type definitions for Javascript library/frameworks up to date (using Definitely typed or writing your own type annotations). That’s something you wouldn’t do for pure JS projects. 2. Weird debugging edge cases: Sourcemaps make it easier to debug Typescript, but the status quo is not perfect and there are really annoying/confusing edge cases that the browser thinks you are running a certain line of code but you are not. Also there are some problems debugging the `this` keyword and properties attached to it (hint: `_this`works in most cases). That is because Sourcemaps currently don’t have a good support for variables (but that might change in the future). 3. Performance penalty: in our project we had 9000+ lines of ES5 Javascript that delivered pure horse power for a WebGL component but we kept it that way. Typescript transpiler (just like Babel), has features and generates code that no matter how good the transpiler is, can’t surpass the optimisations of a good programmer. So we decided to keep it in plain ES5 for ease of debug and deployment (no transpilation whatsoever). That being said, the performance penalty probably is negligible compared to benefits of a type system and more modern syntax for most projects, but there are cases that milliseconds and microseconds matter and in those cases transpilation of any kind is not recommended (even Babel, CoffeeScript, Dart, etc.). That being said, Typescript doesn’t add any extra code for runtime type checking. All the type checking happens at transpile time and the type annotations are removed in the generated Javascript code. 4. Agility: it’s quicker to set up something in Javascript. The lack of type system makes it super agile and easy to change stuff. Sure you can break things easily but if you know what you’re doing, Javascript is more flexible. Remember one of the main use cases for using a type system is to make it hard to break stuff. If Typescript is Windows, Javascript is Linux. In JS land you don’t get the “helper wheels” of a type system and you’re assumed to know what you’re doing but you can ride faster and maneuver easier. Particularly if you’re in the prototyping phase, don’t waste your time with Typescript because JS is simply more agile and flexible. That being said, if you use a typed language, it might be quicker to write/modify code in an IDE because the type system makes it easier to determine syntax. Source: https://medium.com
Adrian Ababei / Mar 28'2016
WAI-ARIA or simply ARIA is a set of attributes which can be added to various HTML elements. These attributes are used to communicate property semantics, state and role to assistive technology through the accessibility APIs which are implemented in browsers.
W3C HTML specifications provide information regarding which ARIA attributes can be used on each HTML element.
Developer (un)friendly information
WAI-ARIA’s 3.2.7 section specifies certain requirements but these are not web developer friendly.
These requirements take the form of two large tables which include features with constraints – if you can use an ARIA attribute, the element is not listed. The reason behind this is that the purpose of this information is to be read by conformance checker implements and browsers, not developers.
ARIA attributes can also be used on a particular element – in the past one would have to go to the ARIA section and then go through the tables to find the desired attribute or element in order to locate its ARIA rules.
Developer friendly information
W3C HTML specifications have recently been updated to include ARIA information as well, which until then was absent. Each introduction section of each element definition now features ARIA information such as property attributes or allowed ARIA roles. This means that developers can find the information they need with ease, without having to search for it in the spec.
If an element can have roles set to it, it’s stated in the intro – a button element intro for example includes all possible ARIA role values and indicates the default role of the element, which does not need to be set manually. Each role is also liked to a description within ARIA’s reference section of the HTML spec which also includes a list of allowed aria attributes for each role value with other links to properties states and roles.
The idea behind this is to help developers get all the information they need in order to produce accessible things with HTML.
Adrian Ababei / Mar 27'2016
In just 10 short years the microblogging platform revolutionized how the world communicates by using just short 140-character snippets. Twitter became practically omnipresent in just 10 short years but it wasn’t a smooth ride. Twitter built a platform that’s useful for everyone – celebrities, politicians, marketers, designers and writers. Let’s take a look at some of Twitter’s key moments in history.
Twitter’s First Tweet
Jack Dorsey, the current Twitter CEO sent his first tweet on the 21th of March 2006, back when the company was simply known as “twittr”. Jack’s 2006 tweet started a snowball effect and soon enough twitter became one of the most popular social networks in the entire world, catering to people from all walks of life.
Twitter’s Logo Makeover
The Twitter bird is one of Twitter’s most iconic aspects. The simple yet expressive logo is immediately recognized and appreciated by users. That being said, the logo has changed a lot since 2006: Initially the bird used to be blue with a light-blue underbelly and a white patch instead of where the eye should be. The company then decided to make it look more cartoonish, giving the bird eyebrows and feet. Perhaps it was a bit too cartoonish because the company then decided that the feed should be removed and the birds colour should be changed as well. The next change saw the bird losing its eye and gaining a darker blue colour complete with its own little wing shape. Twitter’s current version is also the most minimal: a simple blue bird silhouette with no feet, eyes or hair.
Twitter goes public
Success can be measured in many things but success for a small tech company is definitely measured by going public on the NYSE. Twitter went public in 2013 and at the time it was the most hyped tech IPO since Facebook. Since then the company’s stock price went down dramatically and now it’s well under $26 a share – the initial IPO price. Only time will tell if Twitter’s CEO will be able to go back to their glory days.
Twitter’s Homepage Makeover
All tech companies undergo many design changes over the years – twitter is no different. Twitter’s current homepage features plenty of white space, card based design and a central column. Back in 2007 the homepage had an aquamarine border and a larger service description. By 2008 the homepage switched to landscape orientation and eliminated random user feed updates entirely. Between 2009 and 2011 the interface became more and more minimalized and forms became more highlighted.
Twitter’s future?
What will happen in the next 10 years of Twitter’s life? We don’t know. Most likely it won’t turn into another MySpace even though it’s currently struggling to make a profit and find its own identity in a market dominated by Facebook and Linkedin.
Adrian Ababei / Mar 26'2016
Most web development start-ups have the same problem – What programming language to pick? Which language should we specialize in? Technology selection can be a real drag, especially when dealing with larger teams of specialists with different favourites in mind. Here’s food for thought: do successful companies become successful because of the technology they used or the technology itself becomes popular because it’s used by a successful company?
Currently, PHP is not a popular choice for web development start-ups – most web development teams opt for Django or Ruby on Rails but in recent years PHP technology has evolved substantially - even to the point of becoming a direct rival for Ruby on Rails or Django.
PHP is actually an incredible tool for web development start-ups – it offers all the functionality of RoR at a much lower cost. PHP is great for web development projects which involve multiple components and rely on multiple tech solutions. Here is a list of reasons why PHP is a great tool for web development start-ups:
PHP allows fast web development
PHP is actually one of the fastest programming languages which you can use to code, deploy and execute. The whole language was designed on finding the fastest and shortest solutions to any web development problems. Apart from that, PHP’s lovely community has been moving it towards modular design.
PHP frameworks offer libraries and bundles which are ready to use, mouldable and easily configurable. If you’re interested in using PHP for web development you should definitely check out the Sonata Project for the Symfony framework – it offers ecommerce tools, content management features, technical utilities and admin bundles which in turn enable web development companies to lower their work load and shorten their path to the finished product.
PHP is cost effective
Web development companies won’t have any trouble with finding replacements for their team members, hiring new members or project stuffing. PHP developers are much cheaper than developers specialized in other programming languages – this can lead to a more affordable and competitive finished product. Certain very useful tools are free for use with PHP – these include integration tools like Deployer, Phing Project, Capifony, the PHPUnit framework and the Composer dependency manager.
Programming quality
PHP offers plenty of educational materials and best practices materials regarding common or complex programming tasks. While some may voice criticism of PHP unpredictability and inconsistency it’s good to remind users that these are problems of the past. The newest versions of PHP offer great frameworks such as Symfony and Laravel and great efforts have been made to define precise basic coding standards and guidelines.
Conclusions
PHP is a great tool for any web development start up, given its guidelines, processes and conventions. A solid team with plenty of experience will get your start up going in no time!
Adrian Ababei / Mar 25'2016
Google confirmed this morning it’s now testing a new way to sign into your Google account without having to type in a password. Instead, those who have been invited to try this new method of logging in authenticate by responding to a notification sent to their smartphone. The idea is similar to Yahoo’s recently launched “Account Key,” which also offers a password-free means of signing in involving a push notification sent to your phone that then opens an app where you approve the log-in. Passwords are often the weakest parts when it comes to securing users’ accounts, as many don’t use complex passwords or they reuse the same password across services. Two-factor authentication – like using a USB stick with a secret token or entering in a code sent via text method to your phone – can help to increase security, but many users also find this to be a hassle as it introduces an additional step to the login process. This new password-free login option, on the other hand, is about speeding up logins by offering a different way of signing in altogether. You only have to enter your email address when you’re signing into your Google account. Afterward, a notification will appear on your phone asking you if you’re trying to sign in from another device. Approve the login by tapping “yes,” and you’re in. This would be especially useful for those who always have their phone nearby while using Google services on other devices, like their computer, as well as those who have long and complicated passwords that are difficult to type. It could also help to protect against phishing – something that Google addresses today through its Password Alert tool, too. The test was first reported by a Reddit user Rohit Paul, which was then spotted by the blogAndroid Police. According to Paul, he was sent an email invitation to join a test group being given access to try the new technology on their own devices. The group is called “Sign-In Experiments at Google,” and is found here on Google Groups. While the link to the group is public, you can’t view or participate without a direct invitation. A Google spokesperson confirmed that this is, indeed, a new experiment now underway, noting that: “We’ve invited a small group of users to help test a new way to sign-in to their Google accounts, no password required. ‘Pizza’, ‘password’ and ‘123456’—your days are numbered.” After accepting the invite and joining the group, the email explains that you’re then able to sign in without entering a password but you can continue to use your typed password if you choose. In addition, Google says it may choose to ask for your password as an additional security measure if it notices anything unusual about your current login attempt. (And it’s helpful to be able to use your password in case your phone is dead, or goes missing.) In the case your phone is lost or stolen, your screen lock or Touch ID on your smartphone will protect your private data, as the thief or unknown party will not be able to unlock your phone. Google also advises in the case of a lost device, you should sign into your account from another device and remove account access from the device you no longer have in your possession. Google tells testers they are able to turn off this new means of signing in at any time, and, as the email Paul received notes, testers can leave the trial group if they don’t want to offer Google their feedback about the sign-in process. We understand that only a small number of users are being invited to test this new feature for the time being. Google did not comment on when it plans on expanding access to more testers or the broader public. The password-free sign in process works on both iOS and Android at present. Source: http://techcrunch.com
Adrian Ababei / Mar 22'2016
In the last few months Microsoft’s Edge browser has gained some popularity along with gains in usage and user share but it has a long way to go before becoming a competitor for Firefox or Chrome. Only a tiny minority of users use Window 10’s default browser for their surfing needs.
Is Microsoft Edge Becoming Popular?
Edge is the default browser for Windows 10 and interestingly enough it grew its user share in recent months. Net applications is a company that deals with vendor analytics – the company’s results state that Edge recently went up by five points, effectively gaining a share of 30.7% of users running Windows 10. Back in January the percentage was much lower, at 26%.
This is the first time since 2015 that Net Applications reported an increase in Edge’s usage for Windows 10 users. Before this sudden increase, Net Applications reported steady decline in use and usage for Windows 10’s default browser.
DAP's Report on Edge
DAP or the Digital Analytics Program also reported an increase in Edge’s usage but at a smaller percentage than that reported by Net Applications. DAP reported that only 24.9% of Windows 10 users actually use the Edge browser – this is just a five tenths of a percentage increase as compared to Net Application report of 5%.
Digital Analytics Program visits over 4000 websites on over 500 domains from the United States. Their report is based mostly on US users even though some visitors access these websites from other parts of the world.
StatCounter is another metrics company based in Ireland – StartCounter also reported an increase in Edge usage in the previous months. Edge’s share of Windows 10 users was set at 17.1, three tenths of a percentage increase from previous months. In the same time, Edge’s global usage share for Windows 10 users did not increase at all and stayed at 13.3%, data showed.
Safari Fares Much Better
Edge’s inability to attract Windows 10 users has stunned Microsoft as well – the majority of users usually rely on the OS default browser for their surfing needs but this is not the case for Windows. Mac users for example use the default Safari browser at a much higher percentage – two thirds of all OS X users use Safari on a daily basis.
The reason behind Windows 10’s default browser Edge is its incomplete functionality. Microsoft launched it without support for add ons and its appearance hasn’t improved from the old Internet Explorer which was never popular to begin with.
Adrian Ababei / Mar 18'2016
When it comes to landing page web design, people tend to make mistakes – a lot of mistakes. Some web designers go for a minimalistic approach and strip the landing page to its bare minimum – just a call to action button without any other distractions. Others opt for a more traditional landing page design with navigation menus, plenty of text and images. Good landing page web design implies removing anything that can lead your potential users from the page’s goal.
Try a landing page design with no navigation menu
Just 16% of landing pages are without a navigation menu – that’s quite alarming simply when you think about all the lost conversion opportunities. Numerous studies show that landing pages without any navigation menus fare much better than pages cluttered with links, videos and text. Although you may be tempted to keep certain links on your landing page try to keep in mind your landing page’s ultimate goal: having a high conversion rate.
Avoid stock images in your landing page design
Generic images and stock images in general can have a negative effect on your conversion rate simply because they look insincere or for the use of a better word fake-ish. Stock images fail to inspire any trust from your potential customers and your conversion rate will take a dive for it as credibility is one of the main engines that can drive conversion rates up.
Another great landing page design trick is placing images on top of your catchy page headline. Research shows that headlines placed under images are read by 10% more users – this can lead to a snowball effect as when users actually read a headline, they are inclined to continue reading down the page.
If done properly, your call to action is worth its weight in gold
One of the most important things on your page is the call to action – ironically, this is also the hardest thing to get right on a page. Think about your call to action’s colour – good colour contrast can help your users find and click your call to action. Another thing you should consider is size – yes, size does matter in landing page web design. Your call to action should be big enough to be easily readable by users but not gigantic. The button’s text should be persuasive, a mix of excitement and urgency all bottled up into one simple red or orange life-changing button.
Remove any other links or make them invisible
We already removed the navigation menu but you might still have a footer menu or a company logo. The ultimate goal here is to create a single-action environment that boosts your conversion rate. If you can’t remove links directly, make them invisible to the user – lower contrast, make the link text smaller, tone down anything that’s competing with the call to action for your user’s attention. Fewer distractions equal more conversions.
Too many choices spoil the broth
Consumers can get overwhelmed fairly quickly when faced with too many choices. Studies have shown that consumers tend to buy less when faced with a myriad of choices and that’s understandable. If you have 10 products on a page and you want to get the best one you should check all of them right? Who has time to compare 10 different products? Nobody – your visitors will leave your page thinking they will return some days later.
Landing page web design in a nutshell
When it comes to landing page web design, think of the one goal of your page – converting users. Everything else is redundant and should be removed swiftly and without regret.
Adrian Ababei / Mar 15'2016