A few more weeks and... “Chin-Chin: Happy New Year!”. Meanwhile, while you were making your final edits to your wish list for Santa and adding a few more lines to your New Year's resolutions list, we've been doing our homework, too. We've run our investigations and come up with our own list: one including the most influential mobile UI design trends in 2019.
Both those trends:
that have timidly stepped on the mobile app design scene this year and will just grow more powerful next year
and those that will emerge in 2019 and quickly take over the “scene”
So, here they are: the 4 major trends to look into and rush to capitalize on next year.
1. Buttonless Screens: From Niche to Norm
Mobile UI designs without buttons have been around for some time, but we somehow didn't consider this would become... mainstream, right?
Just think:
Instagram and its buttonless design that kind of forces you to rely on gestures for swiping through different stories on the page, for moving backward and/or forward
Apple, Samsung, and Google, that are advocating for edgeless, clean screens; they implicitly “force us”, mobile app designers, to drastically trim down our in-app button collections. To remove buttons completely...
all those e-commerce apps that have simplified their checkout processes by... removing the cart button; customers can just drag and drop items into their shopping carts.
Conveniently intuitive, right?
The “buttonless UI” will be one of most prominent mobile UX trends in 2019:
After the “power button & volume button & homepage single button" trio, we'll be witnessing the growth of the “buttonless screen” trend in 2019.
In other words: it's time to rethink your mobile UI/UX designs; to make them more gestures-focused. Which might be as simple as... adding animations to show the gestures that end users need to perform for carrying out specific tasks.
2. Visual and Voice Interfaces Will Work Together
“Will graphical user interfaces ever be taken over by voice user interfaces?” “ is a question on Quora.
On the contrary:
Not only that voice-assisted interfaces (VUI) won't “annihilate” the visual ones, but the 2 of them will... happily coexist starting next year.
Get ready to witness a seamless integration of the two types of UI in 2019's mobile apps!
Or, even better:
Instead of being one of the passive witnesses, how about leveraging this trend, one of the most influential mobile UI design trends in 2019?
How would these apps, supporting a cohabitation of voice and visual interfaces, look like from a user's perspective?
the mic button will become... optional; mobile app users can just utter their questions/commands and the apps will interpret them.
he/she (the user) will be able to speak commands like “Show me the cheapest option and book me...” or “Pick it up!” or “Narrate these 3 chapters to me!” and have the app read a book, book a flight or answer a call
3. Bottom Navigation: One of the Dominant Mobile UI Design Trends in 2019
Which side are you on?
Are you a top navigation or a bottom navigation “fan”?
Well, you can call yourself a “visionary” if the bottom navigation has been your top choice for some time now. It looks like it's going to be one of the prominent mobile app UX design trends in 2019.
Why? Because:
devices will have even larger screens
the single homepage button “rocks supreme” and app users got so used to the swiping gesture
“extreme” convenience is key: all the major buttons should be displayed within reach on the app's screen
And this type of navigation comes down to:
bottom sheets
swipe-up gestures
3.1. Bottom Sheets
Why will bottom sheets become app developers' top choice when it comes to displaying sub-flows?
Because they're highly flexible!
Users get to scroll both vertically, for unlocking more content, and horizontally (carousel), for swiping through similar content with no need to skip screens.
Pop-up dialogues, overflow drop-downs, hamburger side-drawers will start to fade compared to bottom sheets' “all within a swipe's reach” type of convenience.
3.2. Swipe Up Gestures
You'd swipe up to open an app drawer, then swipe up again to go back or to close the app... It's been a while since in-app swipe up gestures have started to “outshine” buttons/bottom tabs.
And they're perfectly fit for bottom navigation.
They enable you, the mobile app developer, to... keep everything“minimalistic” in your app:
the top area (content)
the bottom area (navigation)
Simple, intuitive, convenient. No wonder that this will be one of the most influential mobile UI design trends in 2019.
4. Mobile App Design for Larger Screens
You'll need to swiftly adapt your mobile UI designs to devices with increasingly large screens. They'll be the ones “dictating” how you'll design your mobile apps' interfaces in 2019.
And there are few challenges to expect, consider, and properly prepare yourself for before this trend becomes... a norm:
How will you seamlessly integrate in-app gestures into your mobile apps? “Fully” integrate them, I mean...
Losing buttons/bottom tabs will automatically enlarge the screens and leave you with more screen real estate; how will you fully leverage those enlarged screens?
How will you optimize your apps' UX and UI so that the user can rely on his/her thumb and thumb only to navigate through and perform actions within the app?
The END!
Let's recap, now! Here's your New Year's resolutions list:
"I'll design buttonless user interfaces in all my mobile apps in 2019"
"I'll somehow make voice and visual interfaces work together"
"I'll design “bottom navigation” and swipe-up gestures navigation in my next year's apps"
"I'll adjust and properly adapt my mobile app designs to fit devices with larger screens"
Photo by Gilles Lambert on Unsplash
Adriana Cacoveanu / Dec 13'2018
What's your favorite tool for creating content layouts in Drupal? Paragraphs, Display Suite, Panelizer or maybe Panels? Or CKEditor styles & templates? How about the much talked about and yet still experimental Drupal 8 Layout Builder module?
Have you "played” with it yet?
As Drupal site builders, we all agree that a good page layout builder should be:
flexible; it should empower you to easily and fully customize every single node/content item on your website (not just blocks)
intuitive, super easy to use (unlike "Paragraphs", for instance, where building a complex "layout", then attempting to move something within it, turns into a major challenge)
And it's precisely these 2 features that stand for the key goals of the Layout Initiative for Drupal:
To turn the resulting module into that user-friendly, powerful and empowering page builder that all Drupal site builders had been expecting.
Now, let's see how the module manages to “check” these must-have strengths off the list. And why it revolutionizes the way we put together pages, how we create, customize and further edit layouts.
How we build websites in Drupal...
1. The Context: A Good Page Builder Was (Desperately) Needed in Drupal
It had been a shared opinion in the open source community:
A good page builder was needed in Drupal.
For, even if we had a toolbox full of content layout creation tools, none of them was “the One”. That flexible, easy to use, “all-features-in-one” website builder that would enable us to:
build complex pages, carrying a lot of mixed content, quick and easy (with no coding expertise)
fully customize every little content item on our websites and not just entire blocks of content site-wide
easily edit each content layout by dragging and dropping images, video content, multiple columns of text and so on, the way we want to
Therefore, the Drupal 8 Layout Builder module was launched! And it's been moved to core upon the release of Drupal 8.6.
Although it still wears its “experimental, do no use on production sites!” type of “warning tag”, the module has already leveled up from an “alpha” to a more “beta” phase.
With a more stable architecture now, in Drupal 8.6, significant improvements and a highly intuitive UI (combined with Drupal's well-known content management features) it stands all the chances to turn into a powerful website builder.
That great page builder that the whole Drupal community had been “craving” for.
2. The Drupal 8 Layout Builder Module: Quick Overview
First of all, we should get one thing straight:
The Drupal 8.6. Layout Builder module is Panelizer in core!
What does it do?
It enables you, the Drupal site builder, to configure layouts on different sections on your website.
From selecting a predefined layout to adding new blocks, managing the display, swapping the content elements and so on, creating content layouts in Drupal is as (fun and) intuitive as putting Lego pieces together.
Also, the “content hierarchy” is more than logical:
you have multiple content sections
you get to choose a predefined layout or a custom-design one for each section
you can place your blocks of choice (field blocks, custom blocks) within that selected layout
Note: moving blocks from one section to another is unexpectedly easy when using Layout Builder!
3. Configuring the Layout of a Content Type on Your Website
Now, let's imagine the Drupal 8 Layout Module “in action”.
But first, I should point out that there are 2 ways that you could use it:
to create and edit a layout for every content type on your Drupal website
to create and edit a layout for specific, individual nodes/ pieces of content
It's the first use case of the module that we'll focus on for the moment.
So, first things first: in order to use it, there are some modules that you should enable — Layout Builder and Layout Discovery. Also, remember to install the Layout Library, as well!
Next, let's delve into the steps required for configuring your content type's (“Article”, let's say) display:
go to Admin > Structure > Content types > Article > Manage Display
hit the “Manage layout” button
… and you'll instantly access the layout page for the content type in question (in our case, “Article”).
It's there that you can configure your content type's layout, which is made of:
sections of content (display in 1,2, 3... columns and other content elements)
display blocks: tabs, page title...
fields: tags, body, title
While you're on that screen... get as creative as you want:
choose a predefined layout for your section — “Add section” — from the Settings tab opening up on the right side of the screen
add some blocks — “Add block”; you'll then notice the “Configure” and “Remove” options “neighboring” each block
drag and drop the layout elements, arranging them to your liking; then you can click on either “Save Layout” or “Cancel Layout” to save or cancel your layout configuration
And since we're highly visual creatures, here, you may want to have a look at this Drupal 8 Layout Builder tutorial made by Lee Rowlands, one of the core contributors.
In short: this page builder tool enables you to customize the layout of your content to your liking. Put together multiple sections — each one with its own different layout — and build website pages, carrying mixed content and multiple layouts, that fit your design requirements exactly.
4. Configuring and Fully Customizing the Layout of a Specific Node...
This second use case of the Drupal 8 Layout Builder module makes it perfect for building landing pages.
Now, here's how you use it for customizing a single content type:
go to Structure>Content types (choose a specific content type)
click “Manage display” on the drop-down menu
then click the “Allow each content item to have its layout customized” checkbox
and hit “Save”
Next, just:
click the “Content” tab in your admin panel
choose that particular article that you'd like to customize
click the “Layout” tab
… and you'll then access the very same layout builder UI.
The only difference is that now you're about to customize the display of one particular article only.
Note: basically, each piece of content has its own “Layout” tab that allows you to add sections, to choose layouts.
Each content item becomes fully customizable when using Drupal 8 Layout Builder.
5. The Drupal 8.6. Layout Builder vs Paragraphs
“Why not do everything in Paragraphs?" has been the shared opinion in the Drupal community for a long time.
And yet, since the Layout Builder tool was launched, the Paragraphs “supremacy” has started to lose ground. Here's why:
the Layout builder enables you to customize every fieldable entity's layout
it makes combining multiple sections of content on a page and moving blocks around as easy as... moving around Lego pieces
By comparison, just try to move... anything within a complex layout using Paragraphs:
you'll either need to keep your fingers crossed so that everything lands in the right place once you've dragged and dropped your blocks
or... rebuild the whole page layout from scratch
The END!
What do you think:
Does Drupal 8 Layout Builder stand the chance to compete with WordPress' popular page builders?
To “dethrone” Paragraphs and become THAT page layout builder that we've all been expected for? Or do you think there's still plenty of work ahead to turn it into that content layout builder we've all been looking forward to?
RADU SIMILEANU / Nov 02'2018
Designing for a global audience should be straightforward simple, right? You'd just translate the written content on your current website into all the different languages of your target audiences and you're good to go...
Well, not even close. Closer maybe, but definitely not close.
For, as the Globalization & Localization Association (GALA) says it, far more accurately than I could:
“The aim of localization is to give a product the look and feel of having been created specifically for a target market, no matter their language, culture, or location.”
And proper localization (or contextualization, if you prefer) is precisely what you should aim for when trying to reach a global audience.
Now, making your website internationally-friendly is subject to a lot of considerations; translating the written content into different languages is but one of the many steps to take.
Let me point out to you just 5 of the essential ones to keep in mind:
1. Can Your Current Web Hosting Solution Handle That Amount of Traffic?
Let's take this hypothetical (yet not impossible) scenario:
You've been selling custom-designed stationary in Canada for a while now. Your eCommerce website's server is in Vancouver. Still, your Canadian customers just don't seem so “mesmerized” with your hand-crafted products as you expected them to be. So, what do you do? You go global! You start selling your stationary in... South Korea, as well, and online orders start to ramp up.
But your web hosting provider doesn't have servers in Asia, as well, to back you up with, and so the page loading speed on your website gets close to... lousy. There are scripts, files, images to be loaded and to all these all too common heavy-weighing factors, now you add the distance factor, as well...
Your server just can't handle it...
In this hypothetical case here, you have 3 viable solutions at hand:
you supercharge your website with a CDN for high speed
you replace your current provider with another one that can provide you web hosting globally
you upgrade your current hosting plan, opting for one that can handle higher volumes of traffic
It's up to you how you'll equip your website to cope with the expected larger-than-normal amount of traffic.
2. Is the Used Imagery Culturally Relevant for Your International Audiences?
And yes, when designing for a global audience you need to consider this aspect, as well:
Will all the international audiences that you're targeting resonate with the images displayed on your website? Do these images convey the same message, irrespective of culture, location, spoken language...? Are there any culture-specific meanings or symbols that you might have overlooked?
Make sure they're not “packed with” references that a global audience wouldn't understand. Or risk misinterpreting...
And, above all:
Take your research seriously when you're planning to reach global audience; ensure your site's imagery can't get interpreted as offensive in some of the cultures that you're targeting.
3. What Do Your Chosen Colors Symbolize in Different Cultures?
Make sure that you base your color choice on an in-depth research on the color symbolism in different cultures. And not solely on aesthetic aspects.
In this respect, the examples of colors having both positive and negative connotations, depending on the cultural area, are numerous:
Take white, for instance, a color that means both cleanliness, innocence or/and... death (in China).
Choose your color palette wisely and do not leave the selection up to your designers entirely.
Designing for a global audience is no more than a compromise, after all:
You trade visually-striking design for a globally-relevant one. One that's both... global and local.
4. Remember to Use Hreflang Tags when Designing for a Global Audience
Why bother?
Well, you could take the hreflang tags as some kind of “traffic signs” indicating to the search engines:
that the content on your website has been translated into multiple languages
precisely which version of that content they should deliver to your site's visitors, depending on their location
As for how you can add them to your site's content, the Moz team has a more than “enlightening” blog post on the topic of hreflang tags, so I'm not going to get into details here.
Now, let's move on to the last point on my list of aspects to pay attention to when designing for a global audience:
5. Is Your Website Optimized for Globally Accepted Keywords?
And “globally accepted” sure doesn't come down to:
Showing the translated version of each one of your target keywords each time it shows up.
Now, let's take this common example:
What if you're optimizing one of your site's pages for the keyword “dinner recipes”, but in some parts of the USA the equivalent “supper” is more frequently used?
Then, you'll need to:
do your own research on all the possible keyword variations
account for them when doing keyword optimization on your website's pages
Et voila: these are just 5 of the essential aspects to consider when designing for a global audience.
As you can see, translating the words on your website is just the very base of the “pyramid” of techniques to apply for avoiding common gaffes when you go global.
That if you want to do it the right, of course...
Photo by Kyle Glenn on Unsplash.
Adriana Cacoveanu / Sep 11'2018
Thinking to convert your website to a progressive web app? And why shouldn't you?
Since the benefits are obvious:
you “end up” with a website behaving like a native web app
… one that works offline (and “offline” is the new black these days, right?), having its own home-screen icon
improved user experience: not only that your site goes mobile, but users don't even need to get your site-turned-into-an-app downloaded from an app store and then installed on their devices
Furthermore:
Putting together a PWA out of a regular website (or blog) is unexpectedly easy! Basically, any site/blog can be turned into a progressive web app...
No need to let yourself discouraged by terms such as:
service workers
web app manifest (or “manifest.json)
… for the whole process is actually far less complex than it sounds.
Here, see for yourself: go through the 3 essential steps it takes to convert your website to a progressive web app:
But First: All You Need to Know About PWAS— Benefits & Common Misconceptions
A succinct and clear enough definition of progressive web apps would be:
A PWA is a website that behaves like a native mobile app once visited on a mobile device.
Whereas a more detailed and comprehensive one would go something like this:
A PWA is a sum of modern web capabilities (and basic mobile capabilities) that enable users to save it on their own mobile devices (thus enjoying a native app-like experience) and access it offline, too.
And now, without getting into the old “native mobile app vs PWAs” debate, let me point out to you some of progressive web apps' most “luring” benefits:
as compared to native apps, the setup process, on users' end, is significantly simplified: PWAs get instantly installed on their home screens, with no need to visit an app store for that
they can get accessed offline, as well, via the home screen icon (a huge step forward from responsive web design)
installation is conveniently lightweight: a few hundred KB
essential files get cached locally (needless to say that this makes them faster than the standard web apps)
they feature modern web capabilities: push notifications, cameras, GPS
updates are run automatically, with no user interaction
not only that they work offline, too, but once the network connection is restored, they synchronize the data
And now, before we virtually convert your website to a progressive web app, let's go, briefly, through some of the most common misconceptions about PWAs:
a. A progressive web app is literally an... “application”.
Not necessarily:
A progressive web app can be a blog, an online shop, a collection of... dog memes, you name it.
Do not take the term “application” too literally when referring to PWAs. It's more of a concept, a code optimization technique which, once leveraged, "turbocharges” your app-like website or blog to deliver content faster.
b. Progressive Web Apps Are Developed Specifically for iOS or Android.
On the contrary! Probably one of PWAs' “hardest to resist to” advantage is that:
They're platform-independent.
So, you don't need to:
develop separate codebases
comply with platform-specific submission guidelines
c. Your Site Has to Be a JS-Based Single Page One So You Can Turn it Into a PWA.
Nothing of that sort!
If you're currently running... something on the web (be it a set of static HTML files), then you can easily make a PWA out of it!
And now, let's go straight to the 3-step set up process of a PWA out of your regular website:
Step 1: Go HTTPS to Convert Your Website to a Progressive Web App
There's no way around it: the HTTPs protocol is the ONLY way to go when it comes to progressive web apps!
All data exchanges need to be served on a secure domain: over an HTTPs connection!
And how do you switch from HTTP to HTTPs? You get yourself an SSL certificate from a trusted authority.
Now, there are 2 ways to get hold of it:
if your site runs on your own server (or at least you have root access to your server), consider setting up the LetsEncrypt certificate.
if your website runs on a shared hosting, then both the process and the cost of your SSL certificate (for yes, there will be a monthly or an annual fee) depends greatly on your provider.
Step 2: Create a Web App Manifest
“But what is a web app manifest?”, you might ask yourself.
A JSON text file that contains all the meta data of your PWA: description, scope, start_url, name, images, display, short_name...
It's this information that will let browsers know how precisely they should display your app once saved as a home-screen icon.
Now, before I go ahead and share a working example with you — one including the must-have entries of any web app manifest — I should also highlight that:
A link to this JSON text file should be placed in the <head> of all your PWA's pages:
<link rel="manifest" href="/manifest.json">
That, of course, after you've:
entered all the information about your PWA
copied the manifest.json
created a new “manifest.json” file in the root directory of your site
and pasted it there
It should be served with:
Content-Type: application/json HTTP header or
a Content-Type: application/manifest+json
And here's a “sample” piece of code:
{
"name": "My PWA Sample App",
"short_name" : "PWA",
"start_url": "index.html?utm_source=homescreen",
"scope" : "./",
"icons": [
{
"src": "./android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffee00",
"background_color": "#ffee00",
"display": "standalone"
}
Once the “Manifest” section of the Chrome's Development Tools Application tab has validated your JSON file, it will generate an “Add to home screen” link to be accessed on all desktop devices.
Tip: as you convert your website to a progressive web app you don't necessarily need to configure the manifest.json file yourself — with all its different images sizes, meta tags etc. Instead, if you want to make it quick, you can just make a 500x500 sized image of your PWA and then rely on Real Favicon Generator to create all the needed icon sizes and a manifest file for you!
And this is just one of the generators you could use!
Step 3: Set Up Your Service Worker
This is where the “true power” of your PWA lies:
A service worker is a JavaScript file, placed in your app's root, that plays the role of a “middleman” between the browser and the host. The one which, once installed in the supported browsers, intercepts and responds to the network request in different ways.
Note: in most cases, it's for caching all the static files, so that our PWAs can function offline, too, that we use service workers.
Now that we've seen what a service worker is, here's how you create one as you convert your website to a progressive web app:
a. You get it registered first things first.
For this, just run this code in the JS file on your site:
if ('serviceWorker' in navigator) { // register service worker navigator.serviceWorker.register('/service-worker.js'); }
Practically, it will check whether the browser does support Service Workers and, if it does, it registers your Service Worker file.
Note: NEVER call this file, inside your website, like this:
<script src="./service-worker.js"></script>
b. If you do not need your PWA to work offline, too, just set up an empty /service-worker.js file.
Users will just be notified to install it on their devices!
c. Once you've registered your Service Worker, generate your Service Worker file, too.
For this, just run this command in your terminal:
$ npm install --global sw-precache
Next, go ahead and run it on your website directory:
$ sw-precache
Et voila! You will have generated a service-worker.js including the service worker contents.
Test It Out!
At this stage of the "convert your website to a progressive web app" process, you should:
check whether your service worker got properly registered and installed on Chrome
run a performance audit on your PWA, using Chrome's Lighthouse Extension
For the first operation, go through these 3 basic steps here:
press F12 to open your Chrome Dev Tools
click on the “Application” tab
next, on the sidebar, select “Service Workers”
Then, check whether your service worker has been properly activated and is running normally:
Just tick the “Offline” checkbox and try reloading. Does your PWA-site still display its content, even when there's no internet connection?
Now let's run an audit using Chrome's dedicated testing tool, Lighthouse:
press F12 again to visualize the Chrome Dev Tools
select the “Audits” tab
then select “Perform an audit”
check all the suggested checkboxes
and finally, run the audit
And here's how the generated report would look like:
The END! This is how you convert your website to a progressive web app in 3 steps:
enabling HTTPS
configuring your web app manifest
creating your service worker
See? Any website can be turned into a PWA and you don't need to be a senior developer to do it.
Check out our development services for Magento websites in Vancouver.
Silviu Serdaru / Jul 24'2018
So, you've installed your version of Drupal and you're now ready to actually start building your website. What essential tools should you keep close at hand, as a site builder? Which are those both flexible and powerful must-have modules to start building your Drupal site from scratch?
The ones guaranteeing you a website that:
integrates easily with all the most popular third-party services and apps
is interactive and visually-appealing, irrespective of the user's device
is a safe place for users to hang on, interact with, shop on, network on...
is conveniently easy for content managers and admins to handle
Luckily, there are plenty of modules, themes and plugins to overload your toolbox with:
Long gone are the code-centric webmaster's “glory days”! Nowadays, as a Drupal site builder, you have a whole array of tools at your disposal to just start building and getting a Drupal site up and running in no time.
Sometimes without the need to write a single line of code!
But, let's not beat around the bush any longer and have a close look at these 10 essential modules that you'll need for your “Drupal 8 site building” project:
1. Password Policy
Definitely a must-have module:
Just consider that Drupal accepts ANY user password, be it a... one-letter password!
So, in order to set up your own stricter and safer password policy, you need to install this module here.
Then, you can easily define:
the minimal (and maximal) no. of characters that any user password on your Drupal site should include
the no. of special characters that it has to include
specific restrictions Like: "one can't use his/her email address as his/her password"
2. Comment Notify
Why should this module, too, be in your essential toolkit of modules to start building your Drupal site with?
Because it implements the functionality to get notified — you, the admin or content manager — as soon as a user posts a comment on the website.
Note: you can get “alerts” about both the logged in and the anonymous visitors' comments.
3. Breakpoints, One of the Must-Have Modules to Start Building Your Drupal Site
It goes without saying that one of the Drupal site building best practices is providing it with a responsive web design.
And this is precisely what this module here facilitates:
Setting the proper media queries, once you've defined your own breakpoints.
4. Simple Hierarchical Select
A module whose functionality bubbles up to the content manager's experience.
Whenever he/she will have to make a selection involving both categories and subcategories, this hierarchical type of selection will prove to be more than useful:
Practically, once you/they select the “main” option, a new drop-down menu/widget including the subcategories to select from, pops up, as well. Like in the image here below:
5. EU Cookie Compliance
And complying with this EU notification is mandatory.
So, this is why EU Cookie Compliance is another one of the essential modules to start building your Drupal site with:
It displays the given notification — providing visitors with the option to agree or/and to read more information about your cookie policy — in the footer of your website.
6. Shield
Any Drupal site building guide would advise you to install a module that shields your website from anonymous users and search engines when running your test environments.
And this is what Shield is built for:
To screen your site from the rest of the world — except for you and the logged in users — when you deploy it in a test environment.
A more than convenient method, as compared to manually setting up a .htpasswd and then integrating it with .htaccess.
7. Beauty Tips
If you're not just another Drupal site builder, but a user experience-centric one, you must consider also those modules to build your Drupal site with that boost the level of user interactivity.
Like Beauty Tips here.
It displays balloon-help style tooltips whenever a user hovers over a certain text or page element on your website.
Pretty much like Bootstrap tooltip does.
8. Secure Login
Another one of the Drupal site building best practices is to turn it into a safe place for your users to be.
In short: to protect their privacy.
And if you're building a website that's available on both HTTP and HTTPS, the Secure Login module comes in handy as it makes sure that:
the user login form
all the other fill-in forms that you'll configure for extra security
… get submitted via HTTPS.
It locks them down, enforcing secure authenticated session cookies, so that user passwords and other critical user data don't get exposed all over the internet.
9. Menu Target
It's another one of those essential modules to start building your Drupal site with if you're determined to provide the best user experience there.
What does it do?
It enables particular visitors on your site — those granted permission to edit and to add new menu items — to choose whether they open menu items in new windows or in the current ones.
10. Persistent Login
A module that makes up for the “Remember me” feature that's missing from the user login screen in Drupal:
It comes to implement this missing option, one independent from the PHP session settings.
So, we're not talking about the conventional, too long “PHP session time” here, but about a more secure and user-friendly “Remember me” feature added to the login form.
Furthermore, the module enables you to define some extra security policies, too:
the no. of persistent sessions that a Drupal user can enjoy at the same time
specific pages where users still have to log in again
after how long the logged-in users will need to re-enter their credentials once again
And 2 “Extra” Modules to Consider When Building Your Drupal Site
By “extra” I mean that they're not really essential modules to start building your Drupal site with. Yet, they're the first 2 ones to consider right after you've put together your “survival” toolkit as a site builder:
1. Site Settings & Labels
Take this common scenario:
You need to display a social network URL on multiples pages on your Drupal site.
What do you do?
you hard coding this single setting in the source
you start building a custom Drupal module for handling this variable
you install the Site Settings & Labels module and thus display a checkbox to render page elements through a template conditional
The “c” variant's undoubtedly the winner here.
A win-win for you, in fact:
you save the time you'd otherwise have spent coding
you improve the user experience on your Drupal site
2. Slick/Slick Views/Slick Media
It's actually a suite of modules to start building your Drupal site with. One “injecting” the needed functionality so that you can easily set up:
carousels
slideshows
… on your freshly built website.
Note!
I won't lie to you: setting up the library dependencies is not exactly a child's play. Yet, once you've succeeded it, configuring the modules in this suite, right in your Drupal admin, is piece of cake.
The END! These are the 10 must-have modules to start building your Drupal site from scratch with. Would you have added some more?
Or maybe you wouldn't have included some of the modules listed here, as you don't consider them “essential”?
A penny for your thoughts!
RADU SIMILEANU / Jul 20'2018
There's no way around it, not anymore: with Google's index now mobile-first, adopting a mobile-first approach when building a new Drupal site (or redesigning a legacy one) is… a must! It no longer depends on a specific project's needs or on the used technology. The need to develop a mobile-first content strategy has gone from particular to universal.
And facing the challenge of:
(re)creating
optimizing
structuring
… content on your Drupal website means conforming to those specific patterns that mobile users have developed for reading content on their smartphones.
In short: developing a fully responsive Drupal site comes down to centering your mobile content strategy around the idea that:
It's for the smallest screen sizes that you should plan your content for, first things first … then scale it up from there.
Now, let's see precisely what it takes to develop a mobile-first content strategy. What focus points and must-have components to include:
1. Take the Smallest Screen Size as the Starting Point
In other words: think mobile-first!
And by “mobile” I do mean “smartphones” — the smaller the screen size, the better.
This way, you'll be adjusting your content so that it makes the most of the smallest interface. Starting “small” is the best way to stick to the “keep it simple” approach:
Thinking through every content-related decision in the light of the viewport size challenge will constrain you to keep the truly essential content elements only.
Hence, this “spartan” way of eliminating the unnecessary will reflect on your site's desktop design, as well:
It will turn out cleaner and lighter.
2. Use Visual Content Wisely: Weigh Your Choices of Images
The golden rule when it comes to the imagery that you'll use on your responsive website is:
If an image doesn't enhance and complement your content, then you're better off without it!
And I know what you must be thinking:
“But people remember what they see far more easily than what they read.”
True, you need to keep in mind that visuals do come at a cost, though:
Those stunning, visually-arresting images on your website risk to divert your users' attention from the message itself.
And still, probably the most heavy-weighing reason why you should use images wisely when you develop a mobile-first content strategy is: weigh.
Visuals risk to take up valuable screen space and thus:
outshine your calls to action themselves
impact your site's overall performance (leading to frustration)
Now that doesn't mean that you should strip your content off ALL the visuals! Absolutely not!
Just to be cautious and weigh your every choice, think through your every decision involving the usage of an image.
Once you've selected the truly essential ones, keep in mind:
not to no resize them (or optimize them in any other way) before uploading them to your CMS: let Drupal do the heavy-lifting here
to leverage the Responsive Image module's (Drupal 8) capabilities for resizing them to fit the given screen sizes
3. Content Before Design
This is the right sequence to follow when you're designing (or re-designing) your Drupal site with mobile users in mind:
First, you create and strategically organize your content and upload it to your Drupal 8 CMS. It's only then that you focus on styling and developing a responsive and visually-striking web design.
If it's legacy content that you're dealing with, trying to convert it to mobile, the very first step to take when you develop a mobile-first content strategy is:
Removing all the design elements from your written content.
4. Create a Hierarchy of Your Calls to Action
Making the most of a small interface means also setting your priorities in terms of calls to action:
Pair each one with a corresponding objective, evaluate them all wisely, then select THE call to action that's most critical for you and place it — and it alone — above the fold.
5. Organize and Optimize Your Content for Mobile Devices
I'll briefly list all the key requirements that mobile-friendly content should meet — aspects to pay attention to when writing content for mobile devices — for I'm sure they're nothing new to you:
the phrases should be kept short and concise, thus eliminating the burden of “never-ending-scrolling”
the content should be sharp, targeted and skimmable, so users can easily “digest” it and modular, so that users can swiftly browse through it
“modular” meaning made either of multiple clear paragraphs — each one standing for one thought — or chunks of 3 paragraphs at most
6. Optimize Media, too, When You Develop a Mobile-First Content Strategy
And there are a couple of essential steps that you mustn't overlook when it comes to mobile-optimizing your media:
always go for thumbnails instead of video players that your users would have to load and thus strain on your site's valuable resources
don't ever use autoplay on your audio and video content
optimize your sound, image and video files both for large and small devices
7. Trim Down Your Navigation Menu
In other words: when you develop a mobile-first content strategy, consider simplifying your navigation to its truly essential links.
No user would gladly scan through a “beefy” navigation menu taking his device's entire screen:
flatten your navigation: stay away from the technique of piling up submenus, layers and navigation points
feel free to place the links that you'll remove on other places on your website (or even to turn them into calls to action)
8. Convert Your Legacy Content to Mobile-Friendly Content
If it's a legacy Drupal website that you need to restructure and to adapt to your mobile users' specific patterns for browsing through and consuming content on their smartphones, then it's time you:
dug into your static HTML
… and cleaned it up
And by “cleaning it up” I do mean:
removing inline media
removing the fixed-width tables
eliminating floats with content
breaking it down into skimmable chunks of content
… that can be easily structured into content fields.
The END! These are the 8 main aspects to focus on when you develop a mobile-first content strategy.
Now time to test the “saying” that:
“Creativity strives under constraints.”
… and to make the most of those small interfaces.
Adriana Cacoveanu / Jun 11'2018
Here you are now: your Angular 4 front-end app ready to... wow its users! “Almost ready” actually! For it still needs styling... And what better HTML and CSS framework to go for than Bootstrap, right? But how to use Bootstrap with Angular 4 more precisely?
How do you properly integrate it into your Angular 4 CLI project?
Great news: you have not just one, but 3 options at hand for adding it!
Let me get into details:
On Using Bootstrap in Your Front-End Development Process
Is there any need to list here the reasons why it's precisely Bootstrap that you're planning to implement into your Angular CLI project? Angular 4, to be more specific.
After all, it's the most popular framework for styling websites built in HTML, CSS and modern web & mobile JavaScript frameworks (like Angular here):
It's an open source, feature-rich framework that turns front-end development into a such a “breeze”. Basically, it empowers you to build responsive layouts without the need to be a CSS “expert”.
And now, let's break down further with the step-by-step “tutorial” on how to use Bootstrap with Angular 4:
Step 1: Create a New Angular Project Using Angular CLI
The very first step to take is obviously setting up a brand new project.
Use the Angular Command Line Interface to generate it.
But first, install it to on your system:
$ npm install -g @angular/cli
It's only then, once you've installed its NPM package, that you can go ahead and... generate your new project.
For doing this, just type the following command in your CLI:
$ ng new myproject
Next, feel free to change into that specific directory and to turn on the web server:
$ cd myproject
$ ng serve
“App works!” This is the message that you should be seeing in your browser right now.
Step 2: Install Bootstrap to Your Project
Now that you've launched your new Angular project, it's time to add your Bootstrap library, as well.
And you sure aren't nickel and dimed in options. There are 4 ways to add Bootstrap to Angular 4.
Step 3: How to Use Bootstrap with Angular 4 — 3 Different Ways to Integrate It
Option 1: Install Bootstrap from CDN
And there are 2 particular files that you'll need to install from CDN into your project:
the Bootstrap CCS file
the Bootstrap JavaScript file
Note: keep in mind to add the jQuery JavaScript library file, as well!
Next, open the src/index.html file and insert the following:
the <link> element to add the Bootstrap CSS file at the end of the head section
a <script> element for adding jQuery at the bottom of the body section
a <script> element for inserting the Bootstrap JS file at the bottom of the body section
Eager to see “Bootstrap in action” in one of your project's component templates? Then give it a try:
open the src/app/app.component.html
enter the following code there:
<div class="container">
<div class="jumbotron">
<h1>Welcome</h1>
<h2>Angular & Bootstrap Demo</h2>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Status</div>
<div class="panel-body">
<h3>{{title}}</h3>
</div>
</div>
</div>
And it's the following message that this HTML template code should trigger in your browser:
“app works!”
Note: go for a Bootstrap theme of your choice; once you've downloaded it (from Bootswatch.com for instance), its bootstrap.min.css file will get instantly opened up in your browser.
Just copy the file's URL and use it to replace the string assigned to the href attribute of the <link> element, in the index.html file.
And voila! It's precisely those colors, defined by your chosen theme, that get displayed in the browser now!
Option 2: Install Bootstrap using NPM
And here's another valid answer to your “How to use Bootstrap with Angular 4” dilemma!
Simply enter:
$ npm install bootstrap@3 jquery –save
It's this command that will integrate Bootstrap and jQuery into the node_modules folder of your Angular 4 project directory.
Moreover, it will include these 2 dependencies in the package.json file, as well.
Once properly installed, you can find both packages at:
node_modules/bootstrap/dist/css/bootstrap.min.css
node_modules/bootstrap/dist/js/bootstrap.min.js
node_modules/jquery/dist/jquery.min.js
Note! You have 2 options for integrating those files into your Angular 4 project:
add the file paths to the script array and to the file path of the angular-cli.json file
add the corresponding <script> and <link> elements to your index.html file
Option 3: Add NG-Bootstrap to Your Project
The great thing about this method is that you'll no longer need to add jQuery and Bootstrap dependencies. Ng-Bootstrap comes packed with a set of built-in native Angular directives which are already CSS and Bootstrap's markup-based.
Now, getting back to our initial “How to use Bootstrap with Angular 4” question, let's see how we install this NPM package.
For this, just enter the following command in your Angular 4 project directory:
npm install --save @ng-bootstrap/ng-bootstrap
Next, make sure you also install Bootstrap 4 to your project:
$ npm install bootstrap@4.0.0-alpha.6
And, the final step is to add the following files:
jquery.min.js
bootstrap.min.js
bootstrap.min.css
… to your .angular-cli.json file
Now you still need to import the Ng-Bootstrap’s core module — NgbModule — from its @ng-bootstrap/ng-bootstrap package.
To do this, just type the following import statement into app.module.ts:
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
All there's left for you to do now is to add the NgbModule to the @NgModuledecorator's imports array.
And since we're here, you'll find some more than “enlightening” info (chunks of code here included!) on the 2 different options at hand for importing the NGBModule:
either in your project's child modules
or in your the root module itself
… in this article here on Using Bootstrap with Angular.
Using The NG-Bootstrap Components: Which Are They?
With the NgbModule installed into your Angular 4 project, you're now able to use the Ng-Bootstrap components.
To leverage them in your app.component.html.
Speaking of which, here are the components at hand:
Accordion
Alert
Rating
Tabs
Carousel
Progressbar
Collapse
Datepicker
Buttons
Pagination
Typeahead
Popover
Timepicker
Dropdown
Modal
Tooltip
The END! Does this answer your “How to Use Bootstrap with Angular 4” question?
Which method of adding this front-end framework to your project is more suitable for you?
Silviu Serdaru / Apr 30'2018
Conveniently customizable, ideally flexible and unexpectedly feature-rich... No wonder that you consider moving your site to Magento 2. Or having your brand new e-commerce site built on the latest version of Magento. And now you must be wondering: which are the best free Magento 2 themes to choose from?
And let me guess, your “feature wishlist” goes something like this:
responsive (it goes without saying)
functionality-rich
visually-appealing
flexible enough
capable to accommodate both medium and large-sized online store (you need to consider your growth plans, too, when choosing your theme, right?)
Oh, and yes: most probably time is not your best ally, am I right?
Therefore, you can't afford to invest too much of it in comparing, weighing pros and cons, setting up a never-ending list, then trimming it down to the very best themes for Magento 2.
Well, no need to, for I've got your back!
Here's a top 10 for you, including only those themes with the best user reviews, themes that strike the perfect balance between great looks and powerful functionality:
1. Ves Yume
Feature-packed, fully responsive and... free of charge. What more could you possibly ask for your theme?
And speaking of its features, although they do come with no price tag on, they're unexpectedly powerful. For example:
gallery image product detail
off-canvas menu & header link
Ajax cart
checkout improvements
font awesome
a handful of static blocks
In short: a full-collection of features and functionalities for providing both rich and convenient online shopping experiences to your customers.
2. F2
If it's a sleek & clean web design, suitable for a professional e-commerce site, that you're aiming at, then F2 is the theme to power your plans with!
One which — although designed by the latest web trends — doesn't trade functionality for visually-striking looks.
And speaking if its features, let me point out to you the most tempting ones:
responsive design
sticky header
drop-down cart
multiple product types
configurable swatches
Moreover, it's one of those best free Magento 2 themes that are surprisingly flexible, as well. You're free to adjust it to perfectly fit your Magento project's type and size.
Tip: where do you add that — although looks play a major role here— F2 is NOT overburdened with visual effects. Effects that would negatively impact your online store's performance!
3. Best Free Magento 2 Themes: Ketty, One of the “Oldest” Ones, too
“Oldies, but goldies!”
For, even if it's one of the “oldest” Magento 2 themes, Ketty's packed with some truly powerful features. And thus capable to “rival” much newer/younger themes.
Now, if I am to highlight some of its attention-worthy features:
Ajax cart
product zoom
user-friendly admin panel with a new design
highly customizable
configurable swatches
improved checkout
cross-browser support
Also, F2 is one of the responsive Magento 2 themes, in case you were wondering...
4. Absolute
One of Magento's “star” themes for 4 years now, Absolute's now available for Magento 2, as well.
A highly professional theme overloaded with options to suit your every feature need. If I were to name just some of these hard-to-resist-to ones:
image slider
theme editor
featured product slider
newsletter subscription
my cart and compare product blocks on the homepage
quick product overview
A responsive theme that has already earned itself a “reputation” among Magento users, conveniently packed with features to answer all your e-commerce requirements.
5. BizKick
BizKick's made it to almost all users' personal lists of best free Magento 2 themes.
And for 3 strong reasons:
it's responsive
it “spoils” them with a whole collection of advanced features
it “tempts” them with a handful of clean and classy layouts
6. Ves Need
Is it health spa services, glasses, beauty products, handbags, shoes or maybe clothes that you'll be selling on your Magento 2 e-commerce site?
Then you might want to consider Ves Need.
It comes with an elegant, neat & clean design that will surely appeal to your (mostly) female audience.
And where do you add that it's free, too!
7. Ves Fasony
Designed with the customer's needs and expectations in mind, Ves Fasony is a responsive theme for Magento 2 built with Bootstrap 3.x.
The key reasons behind its listing on this exclusive top here — featuring the very best free Magento 2 themes — are the following:
it's built with online customers' needs and expectations in mind; it anticipates their requirements and delivers an amazing shopping experience
it's optimized for touch drag and drop
it comes with an owl carousel controlling the image slider
Moreover, Ves Fasony's ideal for women and men fashion, watches and bags stores. So, do keep this aspect in mind when you're evaluating the themes listing in this top, looking for the one that best fits all your e-commerce requirements.
8. FreeGo, One of the Best Free Magento 2 Themes
It has the functionality — since it comes packed with a full set of powerful features — and it sure has the looks: a clean-elegant (almost minimalist) design.
Moreover, FreeGo's fully responsive and puts a powerful back-end panel at your disposal. One that you can use for customizing your theme to suit your Magento 2 project in the slightest detail.
And now, when it comes to its “load” of powerful features:
sold out label extension
touch optimized slideshow
child theme ready
features product list (showcasing featured products)
child theme ready
all browser compatibility
off-canvas menu
9. Ves Kasitoo
A Magento 2 theme with a product-oriented and therefore attention-grabbing design, perfect for the following types of online stores:
glasses
equipment
fashion...
Moreover, it's turbocharged with a plethora of advanced features to power your e-commerce website with:
retina-ready images
featured block on the homepage
touch optimized deal products carousel
off-canvas menu
social media buttons
product tabs carousel
10. Ves Vigoss
If you have a “guilty weakness for cutting-edge, clear design, you'll definitely love this Magento 2 theme!
Apart from its great looks, it comes with a full set of outstanding features to tap into:
brand logo slider
Ajax cart
front interesting
quick view
it's fully responsive
checkout improvements
And to this list of features, I cannot but add the Magento 2.0 UI and the Bootstrap 3.x layout components, as well.
The END! So, now that you've scanned through this list of best free Magento 2 themes, which is the perfect fit for your own e-commerce web project? Which one of them supports all your feature needs?
Silviu Serdaru / Apr 20'2018
Adaptive vs responsive design. Is there really a matter of “better vs worse”? What's the difference anyway?
For the boundaries sure look blurry enough. Especially since both types of web design provide you with a solution to the same challenge. The one you're facing as a web designer:
A design that should cater to all screen sizes.
Now, instead of delving into this confusion even deeper, let's shed some light on:
the responsive design key features
the adaptive design's particularities
each option's advantages and drawbacks
key differences between adaptive and responsive design
1. Responsive Design: What Is It?
Using one single layout when designing a web page, that adjusts itself to fit the given screen size.
This would have to be a concise, yet comprehensive definition.
If I am to add a bit more details to it, I would have to say that:
It's a “fluid” layout, a “fluid” grid that we're talking about here, one using CSS, Content (Based Breakpoint) and media queries
… for setting up different style roles for each device/media type
Long story short: the responsive design approach enables your site's pages to (more or less seamlessly) adapt to various screen resolutions.
Note: implementing a responsive design does call for a website conceptualization phase and a deep understanding of the end user's needs and expectations!
2. Adaptive Design: A Concise Definition
Or “progressive enhancement of a website” if you prefer:
This approach to web design is centered around “multiple fixed layout sizes”. Basically, you'll need to create different layouts, one for each screen size. Once the website “identifies” the type of device the user's accessing it from, it just triggers the appropriate pre-set layout.
A layout that you/your team will need to prepare in advance, needless to add (so, you'll need to plan your time and budget accordingly).
Who's leveraging this approach? Apple, About.com, Amazon are just some of the big names.
It's an alternative to the “one-size-stretches-to-all” option in modern web design.
Note: since we can't be talking about a unique layout being re-sized over and over again, there's no impact on the overall design; no more over-stretching or other inconveniences of the sort.
3. Responsive Design: Why Would You Use It? And What Could Discourage You?
Why and when would/should you be “tempted” to go with this approach to modern web design?
Let's go through some of this type of web design's most “irresistible” strong points, shall we?
it's easier to set up and less time-consuming to implement
since the same design is being used, seamlessly, on all devices, a certain feeling of familiarity is being instilled, enhancing the overall user experience
… we can talk about a unified visual (and operational) end-user experience
the collection of affordable templates at hand, suitable for most CMSs, is ideally rich and particularly “tempting” if it's a brand new website that you need to design
a “one size fits all” type of flexibility
it's SEO-friendly; since we can't be talking about distinct design versions, there's no negative impact on the SEO strategy either
lower maintenance costs
no redirection needed for establishing the connection between mobile and desktop sites
And yet, this approach does come packed with certain disadvantages, as well. Limitations that you need to note and ponder on before you make your adaptive vs responsive design decision:
you'll have less control over the screen size design
expect longer mobile download times
no possibility to fine tune the advertisements showing up on your website
expect to have certain elements scattered, moving around the screen once the design readjusts itself to the given screen's width
4. Adaptive Design: Main Advantages & Drawbacks
Your “adaptive vs responsive design” dilemma becomes even acuter when you realize that you need to choose between:
A seamless design, plus a certain sense of familiarity and a suite of tailor-made design solutions catering to users' specific needs.
And how do you choose, since both familiarity and customization have a huge impact on the user experience?
Now, let's have a look at some of the adaptive design's strong points:
as mentioned: it enables you to deliver custom-made web design; different layouts created for various screen resolutions (instead of one layout “stretched/shrunk to all of them”)
it complies with the requirements of modern user experience: personalization-focused UX and user-centric approach to web design
… meaning you're not creating the best UX, but the best UX for each one of the devices that your users will be accessing your website from
by “tailor-made” I do mean “tailor-made advertisements”, perfectly optimized to your relevant user interface and tailored to the user data collected from smart devices
in an adaptive vs responsive design debate, the first one will always win when it comes to performance: sites using an adaptive design are just faster
… and speed will always be a differentiating factor in Google's eyes
coding an adaptive design is more time-efficient
implementing it is more cost-effective
managing it tends to be easier since you only need to consider few states
testing it is much easier (with more accurate results, as well)
And now, are you ready for a list of drawbacks to balance adaptive design's advantages with? Just so you can gain a more objective understanding, evaluating all the pros and cons in full:
it usually requires more work, and therefore it's used mostly for overhauling existing websites, rather than with new websites (considering that “more work” stands for “more time-consuming”)
the site configuration being either desktop or smartphone-focused, tablets and notebooks users are... left in the middle
it impacts your SEO strategy, since search engines will detect and penalize identical content showing up on different websites (“.com” and “m.com” sites)
5. Adaptive vs Responsive Design: Key Differences to Take Away
The most notable differences for you to keep in mind from this comparative analysis of the 2 popular options at hand are the following:
a responsive design is a consistent one: what you get on desktop, you get on a smaller screen size, as well
a responsive design might turn out to be easier to maintain on the long run: with every new screen size emerging, it will adapt to it, by default
… by comparison, with an adaptive design you'll need to create a brand new layout for every new possible device, with a specific screen width, that might get released
on a long-term, we could say that maintaining a site using adaptive design gets more challenging: it's several fixed layouts that you'll need to manage (instead of just one)
the adaptive screen size (you'll be using static breakpoint for building adaptive design) is less flexible than the responsive screen design: you'll need to design (from scratch) for every display that you target
The END! Are all these strengths and limitations of the two popular approaches to modern web design of any help to you? For solving your “adaptive vs responsive design” dilemma?
Silviu Serdaru / Apr 13'2018