How precisely does a user journey map help you improve the user experience on your website/app?
What are the benefits of customer journey mapping?
Should you expect a direct impact on your conversion rate?
In other words, why would you bother creating one?
In this post, I've listed the 7 best answers (or “benefits”, if you wish) to your legitimate question:
“Why use customer journey mapping?”
1. But First: What Is a User Journey Map?
What exactly is a customer journey?
And why should you bother... mapping it?
It's a timeline that shows all the touch points between the user and your website or application, along with the emotions, motivations, and thoughts that he/she experiences at each step of the process.
A shorter “definition” would be:
A user journey map is the visualization of an individual's relationship/experience with your website/app across different channels that he uses to interact with it, over time.
Does this answer your question:
“What is user journey mapping in design thinking?”
With this map at hand, it becomes easier for you to... locate the weak spots, where you need to improve the user experience...
Too many teams focus almost exclusively on the user experience at the top and on the bottom of the sales funnel and underestimate the steps in the middle.
So, they ignore precisely those touchpoints that drive conversions...
2. Why Use User Journey Mapping? Top 7 Benefits
What's the purpose?
Why and when to use a user journey map? What design problems does it help you solve?
Here are 7 strong reasons why you'd want to bother mapping users' journey on your website:
2.1. It urges you to adopt a more user-centric approach to web design
In short, you get to see your website/app through the user's eyes.
From his/her point of view.
You step into the user's shoes, see how the user interacts with your site, and detect those areas of the user experience that... could be better.
2.2. It helps you answer your “What if...?” questions
In other words, with all the valuable information of a customer journey map at hand, you're free to brainstorm ideas.
To plan new features, ambitious updates for your website that would:
improve the user experience
increase engagement with your website
and eventually... boost conversions
2.3. It enables you to make strategic recommendations backed up by UX data
Are you monitoring quantitative KPI metrics in your company?
If so, then a user journey map will help you back all your future recommendations for improving your site's performance with user experience data.
2.4. It helps you see where exactly your website doesn't meet the user's expectations
By mapping the customer journey, you get to detect those specific systems and processes — part of the user's journey on your website — that are not aligned with his/her expectations.
And to address these inconveniences that are costing you sales.
2.5. It helps you identify opportunities and pain points in the user experience
Opportunities that, otherwise, you might just... overlook.
And which you can now tap into for... further research (the “what if” question, remember?)
A customer journey map helps you visualize both successes — where your website performs best from a UX standpoint — and areas where you could make an impact.
2.6. It gives you a realistic picture of the user experience on your website
Maybe you're convinced that you're doing a great job, yet users are having a really bad experience.
Mapping the user journey will provide you a realistic evaluation of the situation from the user's perspective.
2.7. It helps you evaluate the impact of the changes that you make to your website
A user journey map makes a great tool for measuring the impact of the updates that you make.
Updates that you'll decide to implement based on the information that such a map will provide you with.
To sum up, here's a short inventory of the benefits that you get from mapping the user journey:
you improve your website's/app's design
you improve conversion funnels
you can compare the experiences of different audience segments
you get to “fuel” your user research
you get to measure the impact of touchpoints
3. How to Create a User Journey Map: 8 Steps
Now that you know why you'd want to map your user's journey on your website, let's see how you do that.
What key stages should your user journey map template include?
And I've broken the whole process down into 8 simple steps:
Step 1: Set a scope for your customer journey map
Which could go from a high-level map — the end-to-end user experience — to a more elaborated map, that focuses on one specific user interaction (i.e. filling in the check out form).
Step 2: Create your user persona
To put together an accurate persona profile, you need to do some user research.
Collect as much relevant information about your target audience as possible before putting together the user persona's profile.
Step 3: Determine the scenario and the user expectations
For instance, a scenario could be: buying an item from your store using your eCommerce app.
Whereas the user expectation, in this case, could be: having that item delivered in 2 days at most.
Step 4: List the touchpoints
It's that step in creating your user journey map where you make a list of all the user actions and interactions with your website/app, as well as of all the channels associated with them.
Step 5: Define the problem that the user's trying to solve
What's the user's motivation/intention?
What drives him/her to interact with your website?
Is he/she looking for more information on your products/services?
Or has he accessed your website to buy a specific product?
Step 6: Make a Sketch of the User Journey
With all the information you've collected up to this point, put together a step-by-step interaction map.
Where each “step” stands for a specific experience that the user persona has when interacting with your website.
Step 7: Pinpoint the user's emotional state at each step in the journey
What does the user feel at each step of interaction with your website/app?
This empathy map will help up visualize the “ups” and “downs” in the user experience, so you should know where to... intervene.
Step 8: Validate and adjust the user journey accordingly
Rely on the information you will have collected during your usability testing sessions and from your app analytics to put your user journey map against a real use case.
No matter how truthful your map might look to you (since you know it's based on intensive user research), it's crucial to validate it and to... adjust it, if needed.
4. User Journey Mapping vs User Story Mapping
“Is a user journey like a user story?”
Well, there are some key differences to be aware of.
What's a user story?
user stories describe small, specific tasks
a group of user stories forms an “epic”
they're essential for user acceptance testing and agile development
The standard formula for creating a user story statement if the following:
As a..., I want to..., so that I...”
For instance:
As an SEO specialist, I want to keyword-optimize this text, so that the website ranks higher in Google search results.
And how is a user journey map different from a user story?
When you map a customer journey you start with post-in notes on a whiteboard.
You:
determine who your website/app addresses to
sketch the big picture
detail each “epic”
define a release strategy
define a learning strategy (small experiments to minimize risks)
define a development strategy
Is it much clearer to you now why you need a user journey map for improving the UX on your website, but the process seems too... time-consuming to you?
Just shift the burden to us then...
Drop us a line and let's identify all those opportunities for improving the experiences your users have when interacting with your site/app.
Silviu Serdaru / Aug 26'2020
The road to cluttered website design is paved with good intentions.
For you want to make users' visits on your site as visually-pleasing as possible. So, you start adding lots of illustrated graphics and embellished fonts and... till it turns into a "carnival" of colors and styles.
You also want to impress them with loads of features. And to give them the freedom to choose from (so) many options.
The result? A confusing mess that sends visitors away in seconds.
So, how do you simplify design?
How do you set up a powerful, simple website design that converts?
Here are 10 handy techniques that you can implement:
1. Make Every Design Decision with the CTA in Mind
What do you want users to do on your website?
to download an app or maybe a free eBook?
to sign up for your newsletter?
to request a quote?
to leave a comment?
to share your blog post on social media?
Got your answer?
Great! Now make sure that all the design elements on your site collaborate to help the user carry out that specific goal.
See that your call to action's visible enough and present enough times on your web pages, even if that means getting rid of elements that are purely decorative.
2. Use the 80/20 Rule to Prioritize Effectively
Applying the "law of the vital few" is a great way to simplify design.
Here's how it works:
since 80% of results (i.e. more clicks, more conversions, etc.) come from only 20% of the design elements on your website (buttons, CTAs, traffic funnels, specific UI elements, even white space)
... you need to focus on that 20% of the content
Keep this criterion in mind whenever you need to prioritize certain design elements over others.
Whenever you need to get strategic about distributing your design efforts.
3. Start Questioning the Necessity of a Sidebar
As Neil Patel dared to put it into words:
"Do you really need a sidebar?"
To be sure, just run some tests (a tool like Crazy Egg comes in handy here).
You'll then know for sure:
how many visitors actually click on your website's sidebar
if it's a design element that converts or... just a distraction
4. Stick to 3 Color Options at Most
Sticking to a color palette is another effective and handy technique to achieve simplicity in website design.
Choose your 2-3 colors and... stick to them.
Go with that cohesive color scheme to create a sense of harmony with all the elements of your website's design.
5. Trim Down Your Menu to Maximum 7 Items to Simplify Design
The short term memory is no myth.
Nor is the "paradox of choice".
With that in mind, you'll want to have up to 7 (preferably less) items on your menu.
6. Use Standard Navigation
Why not get "daring" and surprise your website visitors with alternative navigation? Or maybe a hidden one?
Why should you stick to the same ol', same ol' style of navigation menu?
Because it's familiar. And "familiar" means less effort from the user.
Because it's straightforward. And "straightforward" means "more usable"
In short, you'll want to:
stick to the top or pop-out navigation menus
do your best to avoid mega-style navigation menus that end up overwhelming the users
7. Increase the Text Size
"But doesn't this technique to simplify design contradict other web page design rules?", you might ask yourself.
And I know which "rules" you must be thinking of:
the one that says that larger lettering is counter-intuitive on small-sized screens
the one that says that all key elements should be above the scroll
The truth is that mobile users are already used to scrolling and larger text size is easier to read.
So, why no make their task easier?
8. Keep Options to a Minimum
How can you simplify a design?
By limiting the number of options.
This way, you take a "saboteur" like choice overload out of the picture.
In other words, present users with fewer choices and they'll be more likely to choose... something.
9. Break Up Complex Tasks into Smaller, Manageable Steps
And this is a straight path to creating a simple website design. Where "simple" stands for "better user experience".
Let's say you go to a website and at some point, you need to fill in a super long form, with lots of fields and multiple-choice questions.
And they're all there, squeezed on the same screen: a discouraging network of columns with fields, and subfields, and...
Pretty daunting, isn't it?
But what if you:
rearranged everything on the screen into a single column?
broke up that "wall" of tasks into several little steps to take one at a time?
sequenced all the info across multiple screens?
In other words:
What if you hid your form's complexity using progressive disclosure?
Users could fill in some fields on the first screen, then a few more on the next screen...
This way, they don't get overwhelmed thinking about what to fill out next. They can distribute their efforts more easily by taking one page at a time.
You'd then increase your chances of having users take some minutes of their time to fill in your form.
10. Stick to the "One Page, One Goal" Rule
How do you simplify a website?
You first answer this question:
"What is the one thing I want the user to do when they are on this page?" (Neil Patel)
Then, you implement that answer.
So, what is it that you expect your website visitors to do on a given page of your website?
to read that blog post?
to start a free trial?
to sign up for your newsletter?
to... click the "products" menu?
What is it?
Find out, then design your web page around this primary action.
Don't try to "juggle with" too many options, to ask the user to carry out several actions on the same page for... you'll only overwhelm him/her and send him away.
Choose one clear primary action for each page instead of placing your bet on multiple, equally important actions.
The END!
These are our 10 handy tips for you on how to simplify design and make it clean and easy to use.
Too many projects on your plate right now? Don't have the time and the team available to declutter your website's design and make it more usable, more... efficient?
Just shift the burden to us!
Drop us a line and let's simplify your site.
Image by Roland Steinmann from Pixabay
Silviu Serdaru / Aug 19'2020
You're about to start working on a new app project and you're confused: Create React App vs Next.js - what's the difference?
Which option's best for you? Considering your SEO, SSR, API, and performance needs.
And they're frustratingly similar:
they both enable you to build React apps without the need to use Webpack for bundling it (or the need to do any code splitting)
they both make it possible for you to have your React app up and running in no time
Still, each framework comes with its own pros and cons and specific use cases.
So, in this post, you'll find your answers to the following questions:
What are the key differences between CRA and Next.js?
What are the main benefits of using Next.js?
What are the main benefits of using Create React App?
What are the downsides of Next.js?
What are the downsides of Create React App?
When would you want to use one over the other?
1. What's the Key Difference Between CRA and Next.js?
SSR vs CSR...
It's where all their differences stem from.
Next.js apps are rendered on the client-side (CSR), but the framework supports server-side rendering (SSR), as well. By comparison, Create React App apps are rendered only on the client-side.
In other words:
CRA generates HTML code in the client browser, whereas Next.js generates it in the server, based on the URL.
So, your "Create react App vs Next.js" dilemma comes down to whether a static page meets your needs or not entirely.
2. What Are the Main Benefits of Using Next.js?
Now that you know what's the fundamental difference between the 2 systems for building React apps, let's put the spotlight on Next.js.
Why would you choose it?
because it's so simple to set up, build, and even host a Next.js app: you have packages for almost all the key additions that call for Webpack configuration (SaSS, CSS, TS...)
because rendering React apps becomes much easier, regardless of where the data comes from
because you can benefit from automatic server rendering and code splitting (that will increase performance)
because SSR (server-side rendering) will give your app a major performance boost
because it's a lightweight framework for both static and server-rendered universal JS apps
because it's good for SEO (with everything being generated from the server...)
3. Create React App vs Next.js: What Are the Main Benefits of Using CRA?
In a "Next.js vs create-react-app" debate, what are the strongest reasons for opting for CRA to build your React app?
it's easier to deploy
you get to build a single page React app with... zero configuration (no time-consuming setup needed)
you don't need to deal with Webpack or Babel
it's plain simple (an empty div and just a few js files) and provides all the needed HTML code to render your app on the client-side
the development process is much smoother
better developer experience
In short, with Create React App you basically run just one command and the framework sets up all the tools you need to start developing your app on the spot.
4. What Are the Downsides of Next.js?
What could make you think twice before choosing Next.js for building your next app?
the fact that it's opinionated: there's a Next.js way of doing things and you're constrained to... adjust to it
if you later want to use a router different from its own filled-based one (or add Redux maybe), you'll discover that it's not that flexible
5. What Are the Downsides of Create React App?
In a "Create React App vs Next.js" debate, why would you rule out CRA?
because it only supports client-side rendering, which is not enough if it's a high-performing app that you want to build
because no code splitting translates into lower performance
because it's not good for SEO (since it doesn't render pages on the server)
6. When Would You Want to Use Next.js?
As a rule of thumb, use Next.js:
if you need to build a fast, production-ready app (SSR injects top speed into your React application)
if public SEO is a crucial factor for your app project
if it's a dynamic page that you need to create (wihout having to write your own bundling)
if it's an eCommerce app that you're building (Next.js is more suited for the cart, the stock inventory, and other highly dynamic pages)
7. When Would You Want to Use Create React App?
When would you choose it over Next.js?
when you need to build a React app really fast; with CRA you can skip the configuration and the setting up part
when you need to create a landing page for a product: Create React App makes it so much simpler to put it together
when it's a SPA that you need to build
8. In Conclusion...
CRA is easy, while Next.js "seduces" you with better performance and SEO.
Is it a single page React app that you need to get up and running fast and you don't need SSR? Create React App might just be the best choice for you.
Is it a fast-loading app that you're building? Is performance business-critical for you and SEO much more than just a nice-to-have?
You might want to consider Next.js then for your next app.
Need a team of experienced app developers to build it for you?
Just send us your feature list and... let's build it!
Image by Pexels from Pixabay
Silviu Serdaru / Aug 07'2020
Why would you want to build your next app with Flutter?
Instead of... React Native? Or maybe Swift?
What are the key advantages of using Flutter?
Here are the best reasons why you'd want to give it a go for your next app project:
But What Is Flutter Used For Anyway?
... for building native-looking Android and iOS apps using a single codebase.
"But how is it any different from other cross-platform frameworks?" you might ask yourself.
Widgets...
That's right, they're Flutter's equivalent of the React Native components. Or of the native UI components, if you wish.
You get to put together a fully customed UI for your app by choosing, then mixing and matching several ready-made widgets.
They look either iOS-native or Android-native and... you can even create your own widgets, from the ground up.
A widget could stand for a menu or a button, a slider, text, toggle...
Reason #1: You Get to Share Both the UI Code and the UI Itself Between Multiple Platforms
In short: you can make the most of having a common UI and business logic for all your target platforms.
And this is where Flutter manages to stand out from the crowd of cross-platform frameworks:
It doesn't just have a unique codebase for all platforms: it also shares both the UI and the UI code globally, across iOS and Android.
In other words, one language, one UI, same business logic translates into UI consistency across platforms.
Reason #2: You Reduce Maintenance Costs, One of the Main Advantages of Using Flutter
And that's pretty obvious since you only have one codebase to maintain.
Reason #3: You Save Time and Money (And Get to Be More Productive)
Just imagine:
You will use the same codebase for both the Android and iOS versions of your app.
So, this can only bubble up to your... overall costs.
You:
build one app and run it on multiple platforms (saving time and resources)
get to build more apps... faster
reach a wider audience with a single investment
Reason #4: You Get to Inject Native-Level of Performance into Your App
"Why choose Flutter in 2020?"
Because it powers your app with close-to-native performance.
With Dart (Flutter's programming language) compiling everything into native code, and the need of accessing OEM widgets, out of the equation, you get better app startup times.
Reason #5: You'll Develop Your App Much Faster
The Flutter development experience is one of the best. And the main reason why developing a Flutter app is so much simpler and, therefore, faster.
Here's why:
The "hot reload" feature allows your developers to view the changes made in code on simulators, hardware, and emulators in... real-time. With no need to restart.
This speeds up processes like adding new features, building your app's UI, and even testing it. One of the main advantages of using Flutter...
And, where do you add that you have a huge collection of ready-to-use-widgets at hand, which speeds up your app's development process.
Reason #6: You Speed Up Time to Market for Your New App
Since you don't need to develop separate apps anymore, one for iOS and one for Android, you get to launch your app much faster.
And to reduce your time to market.
Reason #7: You Get to Fully Customize the UI
Another one of the strongest Flutter app development advantages is the huge customization potential.
You get to customize your app's UI in the slightest detail.
And here are 2 ways that you can do that:
browse through its impressive collection of prepackaged, core layout widgets, pick the ones that fit your needs, customize them to your liking and... create a fully customed UI
go for some of the pre-built widgets that mimic the behavior of the iOS and the Android design languages: Cupertino and Material
You're free to customize every aspect of your UI, no matter how complex, thanks to Flutter's ready-to-use widgets.
... and to save lots of time while doing it.
Reason #8: You Spend Less Time Testing Your Application
Just think about it:
The widgets making up your UI are part of the app itself and not part of the iOS or the Android platform. So, you're less likely to face incompatibility issues.
Which translates into less time invested in testing your app...
Reason #9: You Can Learn It in Just About... 2 Weeks
You/your development team will spend less time learning it. And this is one of the key advantages of using Flutter.
Here's why:
The UI in Flutter is code, basically. So, you can just put logic on the UI code to create, use, and... reuse components.
Reason #10: You Get to Build a UI-Heavy App in No Time
"Is Flutter a good choice?"
It is if it's a UI-heavy application that you need to build. And you need it built really fast.
The END!
Now, whether these 10 reasons are strong enough for you to give Flutter a go or... not quite, one thing's for sure:
You need a fast, great-looking app, that should incorporate all those powerful features on your wishlist.
Nothing easier.
Just drop us a line with that wishlist of yours and let's get it built!
Image by RSunset from Pixabay
Silviu Serdaru / Jul 31'2020
Images can make or... break the user experience. Especially if we're talking about large amounts of images.
So, what are your best options to reduce image size on a large-scale Drupal 8 site?
And, most importantly:
How do you strike a balance between the smallest file size and the best possible image quality?
Well, just keep on reading...
Here are 7 ways that you can manage image compression on your image-heavy Drupal site without affecting their quality:
1. Use a PNG Optimizer to Reduce Image File Size
Let's say that you have a lot of PNG images on your Drupal website. How do you reduce the image file size?
Simple: you use TinyPNG to... squeeze them.
Expect to reduce them somewhere around 60% (while keeping the lossless image quality).
2. Use a JPEG Compressor to... Compress Your Images Server-Side
"How to make images load faster on my website?"
Just use a compressor to reduce image size for your JPG and JPEG files:
TinyJPG
CompressJPEG
Compress Now
JPEGOptim
It will take... a while, especially since we're talking about an image-heavy Drupal site.
Different JPG files mean different settings for you to... play with till you've balanced out size and quality.
3. How to Improve Image Load Times: Use Drupal 8 Image Styles
It's a tool that you get... out of the box.
And what you gain is more control over the size of the images on your website:
Set several image styles, of different sizes, that will go on various areas of a page.
Good to know! Configure your image styles just once: from then on, they'll resize all your new images by default.
Here's how you do it:
Go to "Manage display", in the content type setup section
Click the gear wheel icon next to the image field to open the settings tab and choose an image style
There, you can either choose one of the previously configured image styles or... create a new one, by selecting the "Configure Image Style" option from the dropdown menu
Source: Drupal.org
Good to know! Once you've set your image style, the module updates all the created images... automatically.
4. Use Drupal 8 Image Toolkit to Adjust Their Quality (And Their Size)
It's the best way to resize images in Drupal 8.
And the easiest way, as well:
Go to Admin > Configuration > Media > Image Toolkit
Choose the setting that allows you to compress your images (the JPEG quality field)
Play with it till your strike the perfect size-quality balance
Save the new settings
Note! The new setting will apply to all your images; there's no way for you to adjust the quality for each image, one by one.
Tip! Stick to somewhere between 60% and 80% when setting the image quality.
5. Use the Responsive Images Module to Resize Your Images
"Which module is used for image optimization?"
Which is the best Drupal 8 module to reduce image size on pages that contain lots of images...
Responsive Images is (but) one of them.
Here's how it works:
Its image formatter maps the breakpoint of the original image and renders a responsive image instead. All that by using an HTML5 picture tag (that has sizes and srcset attributes).
It basically enables browsers to select the image to display according to the image style selections.
And here's how you set up responsive images on your Drupal 8 website:
Enable the module (for, even if it's a core module, it's not enabled by default) in Admin > Configuration
Select "Responsive Image"
Hit "Install"
What about breakpoints? How do you set them up?
Go to your editor (if it's a custom theme that you're using)
Create a file named "yourthemename.breakpoints.yml" in your theme directory ("/themes/custom/yourthemename")
Now, its time to configure the image styles for your responsive images:
Different breakpoints call for... different image sizes.
Go ahead and pair each breakpoint that you set up at your_theme_name.breakpoints.yml with an image style and create your responsive image styles.
6. Use the ImageMagick Module to Reduce Image Size
"How do I manage compression on my image-heavy Drupal site?"
You use ImageMagick.
It's another one of your best options for Drupal 8 image resize.
Here's why:
Drupal might provide the GD2 image manipulation toolkit out of the box and enable you to set multiple alternatives, of different sizes, for the same image. Yet, it lacks some key features, such as... TIFF format support or GIF support with an image style.
And this is where the ImageMagick module comes in handy.
To install it, just run this command: Composer require 'drupal/imagemagick'
And here's how you use it to reduce image size:
enable it via ‘yoursite/ path
set the quality for your image to 100% in the ImageMagick image toolkit
The results?
you've just enabled the GIT format support with image style
you've reduced your image size by 20-40%
Mission accomplished...
7. If It's Still Not Enough, Lazy Load Your Images
"How to load images faster?"
Use the Lazy Loader, the ultimate Drupal 8 image optimization solution.
Have you tried them all — all the dedicated modules and Drupal core features available — and you're still not satisfied with how fast your image-heavy pages load?
Then go even further and incorporate a lazy loading functionality into your website.
The END!
But maybe you have better things to do — a business strategy to improve, urgent projects to work on — than finding and implementing the best solution to reduce image size on your Drupal website.
Yet, you still want to make your pages load faster...
So, just pass on the "burden" to us!
We'll identify the best solution for speeding things up on your image-heavy web pages and... implement it for you sitewide.
Image by Alexandra_Koch from Pixabay
Silviu Serdaru / Jul 23'2020
"How can I make my Drupal 8 website faster?" Are you still struggling with this? Still striving to figure out which are the best (and most straightforward) Drupal performance optimization techniques for your website?
Well, here I am today with a handful of 9 more ways that you can speed up your Drupal site.
In addition to the 8 ones that I covered in the first part of this post.
And yes: it's another round of Drupal caching best practices that'll help you boost your page load time.
So, let's dive right into it:
Tip #9: Use the Dynamic Page Cache Module
... to cache for both authenticated and anonymous users.
Unlike the Internal Page Cache module, that I mentioned in Part 1, which only caches pages for anonymous users.
Tip #10: Use Distributed Cache, A Highly Effective Drupal Performance Optimization Technique
But how does it work, more precisely?
Once you've installed a distributed cache, it'll store your database's cache tables (Drupal's "cache_" tables) either in:
file
or memory
Tip #11: Enable Drupal Cache for Anonymous Users
Another one of those quick, yet powerful Drupal performance tuning steps that you can take.
Tip #12: Use Squid to Cache Images and Static Content on Your Website
"How to optimize Drupal for better performance?"
You could go for Squid, an open-source caching proxy server.
Now, since Drupal's already famed for its particularly dynamic content, the only cases where Squid does make a great performance booster are those where you need to cache static content.
Tip #13: Add a Front-End Cache (i.e.Varnish Cache)
Here's another handy Drupal performance optimization method for you:
Use Varnish Cache to reduce the load on your server.
How does it do it?
It stores the HTML response, so that next time that the same page is requested, it serves it from memory.
The result?
Bypassed PHP and web server and... improved page load time.
Tip #14: Use the Advanced CSS/JS Aggregation Module to Improve the Front-End Performance of Your Website
Combining your assets together is one of the most straightforward and effective ways to address those Drupal performance issues on your website.
From:
file grouping
to caching
to compressing
... the AdvAgg module handles all the steps that you need to take to aggregate your CSS and JS files.
Tip #15: Install Memcache to Reduce Your Database Load
You know how you're often struggling with keeping your database load to a minimum by caching database objects in RAM?
In this respect, Memcache makes a great Drupal 8 performance optimization technique. It helps you reduce that load on the database and boost your page loading time.
How? By taking standard caches out of the database.
And by caching the results of resource-intensive database operations...
Tip #16: Use the Entity Cache Module to Cache... Entities
Another caching best practice to boost Drupal 8 with is installing the Entity Cache module.
And its name says it all: it helps you cache entities.
Tip #17: Cache Views
Here's the situation:
Page requests made by registered users on your website lead to loads of queries to your database. Which impact the page load time.
Now, to query the database, views are being used.
And this is where this views caching module comes in handy to... boost things in there.
The END!
These are our 17 recommendations for you on the best Drupal performance optimization methods for boosting your page load time.
Not thrilled about the idea of having to go through the... Memcache installation process or to configure Varnish for Drupal?
Or to put your current projects on hold so that your team can set up a... distributed cache?
Maybe you don't have a professional Drupal maintenance team that could handle all these caching settings?
We're here to help!
Just drop us a line and let's figure out which of these 17 techniques are best suited for your website and the specific performance issues that it's struggling with.
Let's speed things up in there!
Image by Izwar Muis from Pixabay
Silviu Serdaru / Jun 23'2020
"Why is my Drupal site so slow?" "How do I speed up my Drupal website performance?" In other words, what Drupal performance optimization techniques should you use?
Which is the:
most budget-friendly
quickest
most straightforward
most effective
... solution to those Drupal performance issues that are slowing down your website?
Caching...
And luckily, Drupal 8 (it is a Drupal 8 website that you have, isn't it?) "spoils" you with one of the most advanced caching systems out there.
The trick is that you follow the Drupal caching best practices and use it to its full potential.
Speaking of which, here's a list of 17 such best practices:
* I'll be covering 8 of them in this post, leaving the 9 remaining ones for the next blog post.
But First: What Is Caching?
"What is the purpose of caching?"
"How does caching improve performance?"
2 legitimate questions that you might be yourself right now.
Let me start by defining the Drupal caching process:
Once a user accesses a page on your website, content elements and web data from that specific page (images, HTML, CSS, etc.) get stored in an accessible space. When that user visits the same web page again, your website will serve him/her the cached version of the content.
That if you haven't updated it since his/her last visit, of course...
And this translates into:
reduced bandwidth
faster page loads
Tip #1: Use the Internal Page Cache Module to Cache Pages for Anonymous Users
Say you have an "Add to cart" functionality for anonymous users on your eCommerce website.
You can use this module to cache precisely this functionality.
A Drupal performance optimization tweak that'll take you less than a minute to set up.
Tip #2: Go for the Best Suited Tools for Heavy Traffic Drupal Sites
Say you have a fairly busy Drupal 8 website.
You've turned on caching in your performance settings, but... you haven't noticed any significant impact on your site's loading speed.
So, you need to bring in the heavy artillery.
To use powerful caching tools designed for high traffic websites.
Here are some of the best tools and optimization techniques to try:
switch to a Drupal-specialized hosting provider like Pantheon or Acquia
move your database to its own VM/container (that if you still have it running locally, on your Drupal web server)
upgrade to PHP 7.1.0
Enable OPcache via php.ini.
Put a proxy (i.e. Nginx) in front of your server
Tip #3: Enable Block Cache - A Quick and Easy Drupal Performance Optimization Solution
How to increase Drupal 8 performance?
You cache those blocks that don't get updated frequently (like from one user to another).
Tip #4: Use Views Content Cache to Update Upon Content Changes Only
How does this Drupal module help you optimize your website for better performance?
It allows you to expire views caches every time you update or remove content.
The great thing about this caching method is that you get to cache blocks that appear on thousands of pages.
Tip #5: Use a Content Delivery Network
By far the most powerful Drupal performance optimization solution for your website.
Why?
Here are the 2 strongest reasons why you'd want to use a CDN to cache the static content (files, CSS, images, JS, fonts...) on your website:
you keep the network delay to a minimum since your CDN has endpoints across the globe
you get a better page loading time: your CDN has a domain different from your website's, so web browsers load content requests to your domain in parallel with the content coming from the CDN
Tip #6: Set a Far Future Expiration Date for Your Static Assets
Set up a "Newer expire" policy for your static components (e.g. use a far future Expires header)
Tip #7: Use Redis as a Drupal Performance Optimization Technique to Store Large Amounts of Data
Data that wouldn't fit into your server.
"But what is Redis?" you ask?
An in-memory store optimized for high-performance.
Tip #8: Set the Maximum Time that Your Pages Can Remain Cached
Another one of the Drupal caching best practices is setting the maximum amount of time that browsers should keep your cached data.
The END of Part 1!
And these are but 8 Drupal performance optimization solutions focused on caching. I have a whole list of 17 tips ready to share with you...
So, stay tuned for another round of simple and effective caching techniques that'll help you speed up your website...
But what if you don't have the time or the people in your team that you could assign tasks like:
enable a block cache
set up Redis
install the... views_content_cache module
...?
What if you could have a dedicated Drupal maintenance team implement all these performance optimization techniques on your website for you?
We're ready to help you speed things up on your website.
Drop us a line and let's set up the best caching strategy for your Drupal website.
Image by mohamed Hassan from Pixabay
Silviu Serdaru / Jun 19'2020
Quick and easy access to the content they're after is more important for your website users than a... visually-stunning design. Simple, straightforward navigation is what they expect to find. But what makes a website easy to navigate?
What are some good practices to follow to make your website easier to navigate?
Here's a top 11:
1. Put Your Navigation Right Where Users Expect to Find It
Don't compromise good user experience for the sake of "wowing" visitors with your innovative navigation system.
Do users expect to see a navigation bar at the top of the page? Or a navigation menu in the top right corner? Give them that.
This way, they get faster access to the information on your website that they're interested in.
Tip! Do you feel particularly creative and you want to add multimedia content to your navigation? Make it obvious to your site visitors that those are clickable elements.
2. Tailor the Navigation Bar To Your Own Audience and Business
A navigation bar optimized to meet the needs of a particular audience is what makes a website easy to navigate.
So, ask yourself this:
What do visitors do on your website? What are they're looking for?
More information on some of the services that you provide? Or maybe they want to have a look at the projects in your portfolio and at your previous clients' testimonials?
Are they on your website for your blog posts?
Once you're done with this empathy exercise and you have all the data, you'll know how many links are "too many" or "too few" for your navigation menu.
Source: Clutch.co
3. Make Your Sidebars Stand Out from the Rest of the Page
"How do I organize my website navigation?"
You make sure your sidebars don't blend in with the content on the page.
And there are many simple and effective ways that you can set it apart from the body copy. Here are just 2 of them:
use a different background color for your sidebars
use white space strategically to make it stand out from the other elements on the page
4. Make It Legible and Easy to Read on Any Screen
How easy is your website to navigate?
Before you rush in to answer that, make sure you test it for legibility on smaller screen devices, as well.
Here 2 of the best practices to follow for legible navigation in all usage contexts:
use a font that's at least 12 pixels
avoid narrow scripts and fonts
break out your navigation into clear categories with up to 7 items
use main menu, second, and third-level dropdown menu, as well, to organize your navigation if your website holds a lot of pages
5. What Makes a Website Easy to Navigate? A Fairly Straightforward Navigation Menu
Keep your navigation titles clear, accurate, and easily recognizable: stay away from witty or riddle-like titles.
Why would you want to change already familiar title phrases like "About Us" or "Contact Us" and risk to confuse the user? To make him/her lose valuable time trying to figure out "what the poet meant by..."?
Just keep it simple and predictable.
6. Make Your Hypertext Stand Out from the Body Copy
"How do I make my website easier to navigate?"
You make sure that users can tell hyperlinks from the rest of the page content.
How?
make them bold
use another color
underline them
...
Just make sure your navigation links are 100% usable.
Make it obvious to the users that that is a hypertext and they can click on it.
Source: Clutch.co
7. Make Sure Your Navigation Is Fully Responsive
This is, by far, one of the website navigation best practices.
And the adjustments to consider for your mobile navigation menu range from:
making the links large enough for mobile phone users to tap on with no effort
to tightening the menu so that it fits smaller screen sizes
to using a hamburger menu on mobile devices
8. Mind the Footer
Too often overlooked, the footer navigation has a big impact on the user experience (positive or negative, depending on whether you "forget" about it or not).
Just put yourself into the shoes of a user who's just landed on your website:
You've scrolled all the way to the bottom of the homepage and you now want to go to a specific service page or product page. Wouldn't it be great if you could access it via a hyperlink placed right there, in the footer? That, instead of going back to the header menu...
"But what should I put in my footer?" you ask yourself.
You can either:
mirror the links included in your header navigation menu
or put links to other key pages on your website: contact page, target blog posts, email newsletter sign up, etc.
9. Include Internal Search Functionality
What makes a website easy to navigate? Effective on-site search functionality...
Especially if you have an eCommerce website, where users look for specific products/services.
Once you've implemented it, follow these tips for making your search bar stand out:
use an icon of a magnifying glass
insert a "Search Here" text inside the search box
use a different color to make it pop out
And don't stop there:
Merely adding internal search functionality is just the first step. Make sure that the entire search experience meets the user's expectations.
And in 2020 users expect much more than just the basic product filters like color, size, and style.
They want to narrow down their selection to products that are on sale or to products that have been recently added to the website or...
10. Use Text Links Instead of Buttons for Your CTAs
Here's why you don't want to use buttons in your header navigation:
it's bad for your SEO: search rankings can't read buttons (but they can read text)
they make your navigation look clunky
you can't make a specific link stand out from the rest
buttons load slower, affecting the overall page loading speed
In short, use text for your menu items for both usability and SEO. It's one of the website navigation best practices in 2020.
11. Create a Sitemap for Your Website's Visitors
Provide them with a map before you expect them to explore your website.
This way, you:
make your website more usable for its visitors
help search engines crawl in and index your web pages
A win-win.
The END!
With these best practices on what makes a website easy to navigate at hand... what next?
How do you implement them on your own website?
We're ready to help you create that intuitive and effective navigation system. Just drop us a line.
Image by OpenClipart-Vectors from Pixabay
Silviu Serdaru / Jun 10'2020
You've decided to jump on the cross-platform app development “bandwagon” and to build an app that targets both Android and iOS users.
An app that works on multiple frameworks and caters to multiple audiences... at the same time.
Now, the question that arises is:
Why would you go for React Native? Over any other cross-platform app development framework?
Why not... Flutter or Xamarin? Or maybe Ionic?
What are the key benefits that, as a business owner, you'd reap from going for this particular framework?
I've piled together all the reasons why you'd want to use React Native to build your cross-platform app with, then I've narrowed down the long list to... 5 reasons.
The strongest ones.
Here they are:
But First: What Is Cross-Platform App Development More Precisely?
Compared to native app development, cross-platform mobile development refers to:
Building a custom app meant to work on several platforms. And to be compatible to multiple software environments.
In short: a versatile mobile app that works on both iOS and Android.
Having one codebase, one development team and just one app to test (and to maintain) translates into lower costs.
And it bubbles up to the user experience, as well.
Now, getting back to the best possible answers to your legitimate question:
“What are the advantages of React Native for cross-platform app development?”
… here are 5 key reasons why you'd lean towards this framework:
Reason #1: It's Cost-Effective
Why? It's pretty obvious:
React Native allows you to code once and use the same codebase for any operating system; you get to (re)use the same code for both Android and iOS development
it provides you with platform-specific UI elements
there's only one JavaScript codebase to... test; fewer test cases for you to “juggle with” since you only need to fix all bugs and errors once
Reason #2: You Can Quickly Prototype an App
React Native accelerates your prototyping process, so you can:
get a functional cross-platform app up and running in no time
collect valuable user feedback much quicker
If you run a startup betting on a highly innovative app idea or a product company, the speed at which you manage to turn your idea into a prototype and to release it to the market is crucial.
Reason #3: Brand-Aligned and Consistent User Experience
“Why would I choose React Native as my cross-platform app development solution?”
Because it helps you keep consistency in your app's UI design.
Users get to interact with the same UI elements, irrespective of the platform that they use your mobile app on. Which instills a sense of familiarity and delivers them a uniform user experience...
Reason #4: You Expand Your Audience
And this is the first reason that you'd get in any “native app development vs cross-platform” debate.
As a cross-platform mobile app development framework, React Native enables you to widen your app's reach:
You build one app for both Android and iOS users.
Reason #5: You Build Your Mobile App Faster
Why go for React Native over other cross-platform app development frameworks?
Because it speeds up the development process:
Your development team can put together a mobile app faster thanks to the pre-built components that React Native provides them with.
Do they need to implement certain functionality into your cross-platform app? They stand high chances to find it, already coded by other React Native developers, and free to be deployed in your own app.
Reason #6: You'll Only Need One Development Team
A single team, that has hands-on experience working with a set of technologies.
Speaking of cost-effectiveness, right?
Moreover, by having a unique team handling all the stages of your project you avoid a scenario where too many teams risk to... sabotage one another. And to compromise the app project itself.
Final Word: React Native's the Right Cross-Platform App Development Solution for You If...
you're a startup
you're a small-medium company
the time factor is critical for you and you need to prototype a mobile app in no time
... with as little resources as possible
Don't have a React developer in your team?
We've got you covered. There's a whole team of React Native developers here, at OPTASY, ready to help you.
Just drop us a line.
Tell us about that innovative mobile app idea of yours, the functionalities that it should incorporate, and... we'll get back to you with a draft plan.
Image by ijmaki from Pixabay
Silviu Serdaru / May 19'2020