The Benefits of Experimenting with AR

5 janvier 2021/par Service comm.

The Potential of AR in Web Design

Over the years, experts have repeatedly discussed the possible impact of mixed realities on web design. Concepts like AR and VR are expected to have the potential to change the way that we interact with websites on a fundamental level.

Now that we’re in the year 2021, however, discussions about AR aren’t just observational anymore. The age of mixed-reality interfaces is here, in everything from Pokémon Go, to Snapchat filters.

The question is, how do web designers create incredible user experiences in a world where there are now multiple digital realities to consider?

The Benefits of Experimenting with AR

Before we look at some of the steps that web designers can take to enhance their projects with AR, it’s worth examining the benefits of interacting with augmented reality in the first place.

While virtual reality replaces the typical world around us completely with digital components, AR augments it. This means that developers and designers need to learn how to thrive in an environment where the real world and the digital one work together.

The most common AR application for website owners is to provide a solution for real-time and remote product visualization. Imagine being able to try on a pair of shoes before you buy them online. That’s a service that the Vyking brand can deliver by creating technology that “reinvents” the digital shopping experience.

This test functionality plays a massive role in purchasing decisions. In a world where people can’t see a shade of make-up in person when they’re shopping online, or check how an item of furniture looks in their home, AR has a crucial role to play.

In simple terms, AR helps shoppers to make more informed purchases.

Here’s how you can use augmented reality to deliver incredible UX.

1. Focus on Real-Time Feedback

Augmented reality is all about connecting the real world to the virtual world.

Doing this provides users a unique experience – one that’s filled with real-time feedback that can deliver crucial and insightful information. For instance, an augmented reality system in a GPS app can calculate the average time before reaching a destination based on previous trips.

Another option is for an augmented reality to use solutions like face-mapping to help customers determine how a certain makeup product will look before they buy it. For instance, that’s the case for the Mary Kay Mirror Me app, which simplifies the process of shopping for make-up.

When designing for AR, experts need to consider how they can provide customers with real-time information that they can use to make better purchasing decisions.

2. Define input and output

Although you’ve probably performed similar exercises when designing for traditional websites and applications in the past, defining inputs and outputs of UX in AR environments can be tough.

Defining inputs and outputs allows you to determine which elements of an interface your user can actually interact with, in your interface. This gives you a better idea of what to “augment.” For instance, you might decide that physical gestures like a swipe of the hand will be essential for AR inputs. However, you’ll also need to consider how each mobile device offers different input possibilities.

Outputs are a little simpler. For instance, you could offer a three-dimensional model of a product that your customers are interested in. Once you have that output, you can think about how the customer will interact with it by changing colors or position.

3. Embrace Customer-Friendly Performance

Another feature at the heart of AR applications is interactivity.

Good designs in the augmented reality world need to be simple to access and use, otherwise customers will end up avoiding them. For instance, 60% of customers say they want to use AR when they’re shopping for furniture. However, they’re only going to use your app if it actually works.

The Décor Matters website and app mix gamification with home decorating features that help customers get a better view of the home goods they’re planning on buying. The website even has inspiration pages available to help users find and try new design options with their AR technology.

When designing for AR, think about how you can make your applications or technology as simple to use as possible, so customers actually want to interact with it.

4. Address the Environment

In augmented and virtual reality applications, it’s important to remember that interfaces aren’t bound by physical screens. The viewport will move with the user, shifting perspectives in response. Most AR designers will use four different signifiers to describe AR environments:

Public environment: The entire body of the user is involved as a controller, like with the Xbox Kinect or Nintendo Wii;
Intimate environment: Where a user can be seated – often in a desktop environment;
Personal environment: AR on smartphones, mobile devices, and tablets, like Pokémon Go;
Private environments: Completely private spaces, such as with wearable technology like the Google Glass solution.

The environment that you’re designing for will be crucial for your project outcomes. Remember, spatial considerations need to be carefully considered when accounting for how users will interact with objects in a frame.

5. Remember User Fatigue

Another thing to keep in mind when designing for AR technology is that user fatigue is likely to be a much more significant consideration. After all, people interact with websites and applications in a much more intimate and in-depth way when AR is involved.

AR applications can often use the entire body of a customer as a controller. Because of this, designers need to be careful about exhausting interactions. High-effort and repetitive interactions could tire the user out mentally and physically, causing them to give up on the interaction.

When designing, you’ll need to consider how you might over-stimulate the user with too many interaction-focused elements at once. Keep it simple.

6. Remember the Essential Principles of UX Design

Remember, just because you’re tapping into a relatively new technology doesn’t mean that you should abandon all the basic tenets of user experience design that you’ve come to understand over the years. Although UX is constantly evolving and changing, it’s always going to keep a few fundamental principles in mind.

For instance, you’ll always strive to give users the best digital experience in exchange for the lowest amount of effort on their part. Additionally, you’ll need to think about how you can make end-users as comfortable as possible when they’re interacting with new types of technology on websites and apps.

For instance, since AR is most commonly associated with gaming in the current environment, it might be a good idea to implement gamification concepts into your AR design. What can you do to make sure your customers are having fun?

For instance, Inkhunter is an app that allows users to try on tattoos just like using a filter on Snapchat. The experience feels familiar, comfortable, and exciting.

Unlocking the Potential of AR Web Design

Augmented Reality technology has come a long way over the years. Today, developers and designers can access simple plug-in tools like WordPress VR, allowing designers to upload 360-degree videos into WordPress sites and other unique web extensions.

Augmented reality is becoming much more readily available on sites and apps of all shapes and sizes. Additionally, customers are accessing more ways to unlock AR’s power through everything from headsets to mobile interfaces.

However, just like any new technology in the web design world, designers need to think carefully about how they will overcome the challenges in user experience that AR can present. For instance, though AR can offer more information for a customer and help them make purchasing decisions faster, there are also risks. For instance, add too many interactive features to a single website or application, and you could scare users off with too much information.

In the short-term, web designers need to explore the new tools that are available to them and think about the customers they’re designing for. Only this way will we be able to make any considerable advances in the possibilities of AR.

Are You Ready to Embrace AR?

Designing for augmented reality applications and websites can be an intimidating concept – even for seasoned designers. However, this is just another technology that creatives can use to drive better experiences for end-users.

Learn how the latest technology works and get an insight into your customers’ needs, and you’ll be amazed at what you can accomplish in the AR world.

31 décembre 2020/par Service comm.

7 UX Principles to Apply to Your SEO

User experience is one of the most important aspects of web design, but many experts overlook that UX doesn’t just apply to web pages. User experience as a concept encompasses all aspects of end-user interaction with a company.

That means you need to discover the right UX strategies for everything from your homepage to your email marketing and even your listings on Google.

Today, we’re going to explore some of how you can apply UX principles to your client’s image on search engines.

Why Your Search Engine Listing Matters

Let’s start with the basics: 89% of customers start their purchasing process with a search engine. That means that whether you’re creating a portfolio to sell your services or building a website for a client, the first connection a customer has with your design isn’t on the homepage.

Most of the time, you’re driving a specific experience for an end-user before you even realize it. Before you can wow an audience with a beautiful site design or an amazing CTA offer, you need to convince them to click on your Google link.

When you invest in user experience, you think carefully about the journey that an end-user goes through when interacting with a brand. This often means considering things like the user’s intent, their needs, and their pain points.

Those same principles apply to create an impressive search engine listing.

UX on a website is all about giving your audience what they need in an informed, and strategic manner; UX in the search engine results works the same way.

How to Make Your Search Listing Stand Out with UX

So, how do you begin to apply the principles of UX to your Google Search results?

It’s much easier than you’d think.

Step 1: Show Immediate Value

Delivering an excellent experience on a website often means providing end-users with the information they need as quickly as possible. Imagine designing a landing page; you wouldn’t want your audience to scroll forever to find what they need. Instead, you’d make sure that the value of the page was immediately obvious.

When creating an image for your search engine listing, you’ll need to take the same approach. This often means thinking carefully about two things: your headline and your meta description.

Around 8 out of 10 users say that they’ll click a title if it’s compelling. That means that before you do anything else to improve your SEO strategy, you need to make sure that your web page’s title is going to grab your audience’s attention.

The best titles deliver instant value. These titles tell the audience exactly what they’re going to get when they click onto the page. The promise drives action, while clarity highlights the informed nature of the brand.

The great thing about using an excellent title for a page is that it doesn’t matter where you’re ranked on the search results. Whether you’re number 2 or number 5, your customers will click if they find something they want.

It’s just like using a CTA on a landing page. Make sure your titles are:

Informative — show your audience value immediately;
Optimized for mobile — remember, your audience might not see your full title on some screens; this means that you need to make the initial words count;
Easy to read — keep it short, simple, and clear, speak the end-users’ language.

Step 2: Build Trust with Your URLs

Trust factors are another essential part of good UX.

When you’re designing a website for a new brand, you know that it’s your job to make visitors feel at ease. Even in today’s digital world, many customers won’t feel comfortable giving their money or details to a new company.

Within the website that you design, you can implement trust symbols, reviews, and testimonials to enhance brand credibility. On search engines, it all starts with your URL.

Search-friendly URLs that highlight the nature of the page will put your audience’s mind at ease. When they click on a page about “What is SEO” in the SERPs, they want to see an URL that matches, not a bunch of numbers and symbols

Use search-friendly permalink structures to make your listing seem more authoritative. This will increase the chances of your customer clicking through to a page and make them more likely to share the link with friends.

Once you decide on a link structure, make sure that it stays consistent throughout the entire site. If a link doesn’t appear to match the rest of the URLs that your audience sees for your website, they may think they’re on the wrong page. That increases your bounce rate.

Step 3: Be Informative with Your Meta Description

To deliver excellent UX on a website, you ensure that your visitor can find all of the answers to their most pressing questions as quickly as possible. This includes providing the right information on each page and using the correct navigational structure to support a visitor’s journey.

In the SERPs, you can deliver that same informative experience with a meta description. Although meta descriptions often get ignored, they can provide a lot of value and help you or your client make the right first impression.

To master your meta descriptions:

Use the full 160 characters — make the most of your meta description by providing as much useful information as you can within that small space;
Include a CTA — just as CTAs help to guide customers through the pages on a website, they can assist with pulling in clicks on the SERPS; a call to action like “read about the” or “click here” makes sense when you’re boosting your search image;
Focus on value — concentrate on providing your customers with an insight into what’s in it for them if they click on your listing.

Don’t forget that adding keywords to your meta description is often helpful too. Keywords will boost your chances of a higher ranking, but they’ll also show your audience that they’re looking at the right result.

Step 4: Draw the Eye with Rich Snippets

You’ve probably noticed that the search engine result pages have changed quite a bit in the last couple of years. As Google strives to make results more relevant and informative, we’ve seen the rise of things like rich snippets. Rich snippets are excellent for telling your audience where to look.

On a website, you would use design elements, like contrasting colors and animation, to pull your audience’s attention to a specific space. On search engines, rich snippets can drive the same outcomes. The difference is that instead of telling a visitor what to do next on a page, you’re telling them to click on your site, not a competitor’s.

When Google introduced rich snippets, it wanted to provide administrators with a way of showcasing their best content. Rich snippets are most commonly used today on product pages and contact pages because they can show off reviews.

Install a rich snippet plugin into your site if you’re a WordPress user or your client is. When you enter the content that you need into the website, use the drop-down menu in your Rich snippet tool to configure the snippet.

Ideally, you’ll want to aim for the full, rich snippet if you want to stand out at the top of the search results. Most featured snippets have both text and an image. It would help if you aimed to access both of these by writing great content and combining it with a relevant image.

Step 5: Provide Diversity (Take Up More of the Results)

As a website designer or developer, you’ll know that different people on a website will often be drawn to different things. Some of your visitors might immediately see a set of bullet-points and use them to search for the answer to their question. Other visitors will want pictures or videos to guide them. So, how do you deliver that kind of diversity in the SERPS?

The easiest option is to aim to take up more of the search result pages. Google now delivers a bunch of different ways for customers to get the answers they crave. When you search for “How to use Google my Business” on Google, you’ll see links to blogs, as well as a list of YouTube Videos and the “People Also Ask” section.

Making sure that you or a client has different content ranking pieces for the same keywords can significantly improve the experience any customer has on the search engines. Often, the process of spreading your image out across the SERPs is as simple as creating some different kinds of content.

To access the video’s benefits, ask your client to create YouTube videos for some of their most commonly asked questions or most covered topics. If you’re helping with SEO marketing for your client, then make sure they have an FAQ page or a way of answering questions quickly and concisely on articles, so they’re more likely to appear in “People Also Ask”:

Step 6: Add Authority with Google My Business

Speaking of Google My Business, that’s another excellent tool that’s perfect for improving UX in the search results. GMB is a free tool provided by Google. It allows business owners to manage how information appears in the search results.

With this service, you can manage a company’s position on Google maps, the Knowledge Graph, and online reviews. Establishing a company’s location is one of the most important things you can do to help audiences quickly find a business. Remember, half of the customers that do a local search on a smartphone end up visiting the store within the same day.

Start by setting up the Google Business listing for yourself or your client. All you need to do is hit the “Start Now” button and fill out every relevant field offered by Google. The more information you can add to Google My Business, the more your listing will stand out. Make sure you:

Choose a category for a business, like “Grocery store”;
Load up high-quality and high-resolution images;
Ensure your information matches on every platform;
Use a local number for contact;
Encourage reviews to give your listing a five-star rating.

Taking advantage of a Google My Business listing will ensure that your audience has all the information they need to make an informed decision about your company before they click through to the site. This means that you or your client get more warm leads and fewer people stumbling onto your website that might not want to buy from you.

Step 7: Use Structured Data Markup to Answer Questions

If you’re already using things like rich snippets in your Google listings, you should also have a structured schema markup plan. Schema markup on Google tells the search engines what your data means. This means that you can add extra information to your listings that will guide your customers more accurately to the support they need.

Providing additional schema markup information to your listings gives them an extra finishing touch to ensure that they stand out from the competition. You might add something like a “product price” to a product page or information about the product’s availability.

Alternatively, you could provide the people who see a search result with other options. This could be an excellent option if you’re concerned that some of the people who might come across your listing might need slightly different information. For instance, you can ask Google to list other pages along with your search results that customers can “jump to” if they need additional insights.

Baking structured data into your design process when you’re working on a website does several positive things. It makes the search engine’s job easier so that you can ensure that you or your client ranks higher. Additionally, it means that your web listings will be more thorough and useful.

Since UX is all about giving your audience the best possible experience with a brand, that starts with making sure they get the information they need in the search results.

Constantly Improve and Experiment

Remember, as you begin to embed UX elements into your search engine listings, it’s important to be aware of relevant evolutions. Ultimately, the needs of any audience can change very rapidly. Paying attention to your customers and what kind of links they click on the most will provide you with lots of valuable data. You can use things like Google analytics to A/B test things like titles, pictures, featured snippets, and other things that may affect UX.

At the same time, it’s worth noting that the Google search algorithms are always changing. Running split tests on different pages will give you an insight into what your customers want. However, you’ll need to keep an eye on the latest documentation about Google Search if you want to avoid falling behind the competition.

Like most exceptional UX aspects, mastering your SERP position isn’t a set it and forget it strategy. You’ll need to constantly expand your knowledge if you want to show clients that you can combine UX and SEO effectively.

It’s easy to forget that there’s more to UX than making your buttons clickable on mobile devices or ensuring that scrolling feels smooth. For a designer or developer to deliver wonderful UX for a brand, they need to consider every interaction that a company and customer have. Most of the time, this means starting with the way a website appears when it’s listed on the search engines. Getting your SEO listing right doesn’t just boost your chances of a good ranking. This strategy also improves your reputation with your audience and delivers more meaningful moments in the buyer journey.

Featured image via Unsplash.

23 décembre 2020/par Service comm.

Top New CMS Plugins, December 2020

Looking for the best new CMS plugins to take your website to the next level? Well look no further.

In this post, we’ll cover a list of the best new CMS plugins for December 2020. This article will include useful plugins for WordPress, Shopify, Craft, and Joomla. Let’s get started…

WordPress

OptiPic images optimization

OptiPic is a simple WordPress plugin that allows users to easily optimize and compress images.

The plugin also returns the WebP versions of images if the web browser supports it; if the web browser does not support WebP images, OptiPic will return a compressed version of the image. It also returns responsive images on mobile screens when the website is opened on a smaller device.

The image compression and WebP conversions occur in the background, so images load fast. The plugin takes advantage of caching to speed up load times.

Haglit for WooCommerce

Haglit is an AI-powered sales chatbot plugin for WooCommerce stores. The plugin allows customers to negotiate the price of products on your online store.

Haglit enables customers to haggle with a chatbot to get a personalized discount directly on the product page. In physical brick and mortar stores, conversation and haggling help to increase conversion rates and sales. Haglit allows you to bring that same interaction to your WooCommerce store. Customers can negotiate discounts and sellers can increase sales using Haglit’s discount algorithm.

The plugin is very easy to set up. All you need to do is sync Haglit to your WooCommerce store and set the maximum discount that will be allowed for a particular product. After publishing your settings, Haglit will take care of turning visitors into customers.

Brosix Live Chat

Brosix Live Chat plugin allows you to easily add live chat support to your WordPress site. It provides instant communication with your site’s visitors.

The plugin is easy to set up and use. All messages between customers and customer agents are encrypted. There is also a dedicated chat room on Brosix for your agents. Brosix has a mobile application for phones/tablets, a web application that works on all web browsers, and desktop applications for computers. The plugin comes in three availability options for agents and several color icon options.

Brosix offers two plans; a free plan that allows only one agent and a premium plan with more collaboration and administrative features.

Rankchecker.io

Rankchecker.io is a free tool from Google that allows you to monitor your website’s ranking on search engines. The plugin allows you to check search engine rankings for multiple keywords on Google’s SERPs. Rankchecker.io can check keyword rankings for any country or language.

Bitcoin Widgets

Bitcoin Widgets is a payment gateway plugin for WordPress users. It allows your customers to pay for goods using bitcoin.

You can receive the bitcoin payments directly to your crypto-wallet. Customers can also pay for goods with a bank card. These are the currencies that are supported: USD, RUR, EUR, UAH, INR. KRW, TRY, GBP, BRL, AUD, HKD, and TWD.

To collect bitcoin payments, just add your wallet address for payout. The payment transfers usually happen within 30 – 60 minutes depending on the network. There is also no processing fee.

Remove Emoji CSS and JS

Remove Emoji CSS and JS is a simple plugin that allows you to remove emoji CSS and JS from your WordPress website. Removing these CSS and JS scripts will help improve the performance and speed of your website.

Using the plugin is straight forward. Just install and activate the plugin to remove emoji CSS and JS from your website.

GuardGiant

GuardGiant is a security plugin that stops hackers from logging into a WordPress website. The plugin uses a modern approach to make sure that genuine users are not locked away from their website. When a genuine user successfully logs into a device for the first time, the plugin treats the device as trusted. So if a user has failed login attempts on a trusted device, they are directed to ‘Lost Password’ forms instead of being completely locked out of their account.

Users will receive alerts when someone logs into their account from an unrecognized browser or device. Some of its features include brute force protection and detailed logging of all login attempts. The plugin also obscures login errors so that hackers cannot detect valid account names.

The plugin is easy to use and the default settings are already optimized to keep hackers away.

Schema Integration

Schema Integration is a lightweight plugin that makes it easy to add schema markup to WordPress websites.

The plugin will automatically add the structured schema.org data markup in the recommended JSON-LD format to your website in seconds. The plugin supports multiple schema.org types. You can add the schema types anywhere on your site. All the schema types in the plugin are valid when tested on Google Structured Data Testing Tool.

Setting up schema using the plugin is easy. All you need to do is select the schema type you want and fill in the desired fields. The plugin will take care of the rest.

Promo Video Maker

Promo Video Maker is an effective WordPress plugin for creating professionally designed videos for your business. The plugin allows you to turn static images into videos.

Some of the features in the plugin include free video templates, licensed audio tracks, and a free library with over 1.4M assets. The plugin comes with an easy to use editor. It easily integrates with Facebook, Instagram, Twitter, and YouTube. You can also manually embed the videos on any web page. With Promo Video Maker, you can easily create advertisements and testimonial videos to promote your products and services.

Backup Migration

Backup Migration is a WordPress plugin for creating a backup of your site. All you need to do is install the plugin and click on “Create backup now”. The plugin allows you to schedule backups. You can also determine which exact files or databases you want to backup. The plugin is free to use.

Joli FAQ SEO

Joli FAQ SEO is an easy-to-use plugin for creating multiple FAQs pages.

The plugin comes with a one-page drag-and-drop FAQ builder for creating fully responsive and mobile-friendly FAQ pages. The plugin is very great for SEO. It does not use jQuery in the front end. The plugin’s JavaScript file size is 4kb minified and the CSS file size is 6kb minified. You can customize the FAQ page to fit your website’s theme. The pro version integrates with WooCommerce and has an instant search bar.

Shopify

QuizToAction

QuizToAction is a simple Shopify plugin that allows you to catch the attention of your store visitors using interactive quizzes. At the end of each quiz, you can add a call to action. Currently, the plugin only allows email subscriptions as the call to action.

UGC Shoppable Customer Content

UGC Shoppable Customer Content plugin makes it easy to get user-generated content from your customers. With the plugin, you can invite your customers to share photos of their purchases through an on-site upload or email submissions.

The plugin comes with a widget so that you can display the UGC on your store. You can review the photos before they are uploaded. During the uploading process, the customer is asked if their photo can be shared on social media. If their answer is “Yes”, you can share the photo on social media through a shareable icon on the platform.

Checkify

Checkify is a simple Shopify plugin that makes it easy to add a terms and conditions checkbox to your cart page. You can also add age verification and any customer agreements required by your store. No code is required to install the plugin. It uses a one-click install and will appear immediately after installation.

It is compatible with all browsers and Shopify themes. Checkify will show a warning if a customer tries to check out without checking the checkbox.

Craft CMS

Hop Reveal

Hop Reveal plugin gives Craft site editors a quick visual cue on which server-side they are working on, development, staging, or production. You can choose what to name or color the labels. The plugin also allows you to view key environment variables that will be useful during development.

Donkeytail

Donkeytail is a field type in Craft that allows you to quickly and easily content manage points on images.

Donkeytail is compatible with GraphQL. It also works with all content types including entries, categories, assets, users, variants, and products. You can use Donkeytail to showcase multiple products within an image.

Joomla

Ol Content Modal

Ol Content Modal is a Joomla module that allows users to display articles, K2, or custom items on a popup modal. The extension also allows users to show full articles in a popup window; use a navigation arrow to move from one article to the next.

Mx contact

Mx contact is a responsive Joomla module that allows you to add a custom contact form to any page on your website. The extension is great for collecting customer feedback and contact details. The contact form can either appear on a wall or as a popup.

Ruxin QR Code

Ruxin QR Code allows you to add QR codes to your Joomla website. The extension allows you to set your QR size, display custom links, set the background color and put a footer label. You can also show your logo or label in the center of the QR code.

Featured image via Unsplash.

21 décembre 2020/par Service comm.

SAP SuccessFactors Time Tracking : une nouvelle solution cloud pour simplifier les processus RH et améliorer l’expérience des salariés

Actualités, ERP & Applications, Ressources Humaines, SAP

WALLDORF, Allemagne – 18 décembre 2020 – SAP SE (NYSE : SAP) a dévoilé la solution SAP® SuccessFactors® Time Tracking. Cette nouvelle solution cloud offre aux entreprises des outils simples et innovants pour enregistrer, approuver et contrôler le temps de travail de leurs collaborateurs. Dotée d’une interface utilisateur intuitive, la solution SAP SuccessFactors Time Tracking améliore l’expérience des collaborateurs et permet de s’assurer que les salariés sont payées avec précision, dans les délais et conformément aux réglementations locales.

Grâce à des fonctionnalités avancées de gestion du temps et des présences, SAP SuccessFactors Time Tracking offre une vue en temps réel de la saisie des temps du personnel, ce qui permet une plus grande transparence des rémunérations et un meilleur contrôle des horaires et des heures supplémentaires. Les dirigeants peuvent suivre et minimiser les coûts de main-d’œuvre grâce à des informations et des tableaux de bord intégrés, ce qui contribue à améliorer la productivité de l’ensemble du personnel. La solution s’intègre aux solutions SAP SuccessFactors Employee Central, SAP SuccessFactors Employee Central Payroll ainsi qu’aux solutions de paie SAP classiques. La solution s’intègre également avec les badgeuses du marché. Les entreprises peuvent ainsi partager des données pertinentes entre plusieurs systèmes afin de garantir l’exactitude des paiements. En outre, la solution SAP SuccessFactors Time Tracking est une solution internationale conçue pour prendre en charge les spécificités locales notamment les fuseaux horaires, les langues, les calendriers de vacances, les règlementaires de paie spécifiques à chaque pays.

« La solution SAP SuccessFactors Time Tracking offre aux employés la personnalisation et la simplicité qu’ils sont en droit d’attendre d’une expérience de site internet grand public », a déclaré Amy Wilson, vice-présidente senior, HXM Product & Design, SAP SuccessFactors. « En même temps, elle apporte l’innovation dont nos clients ont besoin pour gérer des effectifs diversifiés et mondiaux et leur offre une plus grande flexibilité dans leur démarche vers le cloud ».

Les principaux avantages et caractéristiques prévus pour la solution SAP SuccessFactors sont les suivants :

Une plus grande flexibilité pour les employés : Pour aider les employés à gérer leur équilibre entre vie professionnelle et vie privée, les salariés éligibles peuvent choisir soit d’être payés pour leurs heures supplémentaires, soit de les utiliser pour prendre des congés supplémentaires. La gestion des horaires flexibles permet aux employés de déterminer le rythme de travail qui leur conviennent le mieux dans le respect des règles imposées par l’employeur.
Gestion simplifiée des horaires de travail : Le suivi intelligent des horaires permet aux collaborateurs de pointer à l’entrée et à la sortie et de suivre leur temps de travail au cours de la journée. Il permet aux RH de définir des alertes automatiques pour rappeler aux employés et aux responsables de remplir les feuilles de présence et les pointages de sortie. Les alertes de temps fournissent des avertissements et des messages d’erreur qui permettent aux administrateurs d’examiner et de corriger les problèmes de gestion et de pointage, tels que les heures supplémentaires excessives. En outre, la fonction de suivi de la valorisation des temps fournit des informations détaillées sur chaque étape de valorisation pour un employé, en montrant comment les saisies de temps spécifiques sont calculées. Cela permet aux RH de répondre rapidement et facilement aux questions des collaborateurs concernant leur rémunération.
Amélioration de la transparence des processus de rémunération : Grâce à des flux d’approbation intelligents, les RH peuvent définir des règles pour automatiser l’approbation des feuilles de temps par lots. Grâce à l’approbation d’un seul enregistrement, les gestionnaires peuvent pré-approuver des demandes spécifiques, telles que le temps de déplacement associé au temps de travail effectif.
Une visibilité accrue sur l’ensemble des effectifs : Les responsables disposent d’une parfaite visibilité sur les coûts salariaux, y compris les feuilles de temps planifiées et enregistrées, sur les heures de travail et les coûts associés. Cela permet de connaître les coûts de main-d’œuvre, le suivi des congés et de la productivité, et ainsi de prendre de meilleures décisions.

« La nouvelle solution SAP SuccessFactors Time Tracking est un ajout important à la suite SAP SuccessFactors Human Experience Management« , a déclaré Steve Goldberg, vice-président et directeur de recherche de Ventana Research Inc. « L’automatisation et l’activation de ces processus peuvent être ardues, voire complexes, et les limites des solutions existantes sur le terrain n’ont pas aidé. Cette solution de gestion du temps basée sur le cloud offre un large éventail de fonctionnalités essentielles et innovantes, associées au type d’interface utilisateur moderne que les clients attendent des solutions SAP SuccessFactors ».

La disponibilité de la solution SAP SuccessFactors Time Tracking est prévue pour janvier 2021. Pour en savoir plus sur la solution, consultez le site sap.com/time-tracking.

Visitez le SAP News Center. Suivez SAP sur Twitter @SAPNews.

The post SAP SuccessFactors Time Tracking : une nouvelle solution cloud pour simplifier les processus RH et améliorer l’expérience des salariés appeared first on SAP France News.

18 décembre 2020/par Service comm.

5 Ways to Boost Engagement With Animation

Animation is a fun and interesting way to bring life to a website. Used correctly, it can capture audience attention, make your website more engaging, and even improve your chances of delivering conversions for your clients.

Unfortunately, like many things in the web design world, it’s also easy to get too carried away with animation. As professional designers and developers, it’s up to us to find the line between making the most of animation on our website projects and creating a site that’s overwhelmed with too much activity.

Fortunately, by the time you’ve finished reading this article, you’ll have a deeper insight into how you can use animation in web design, without going too over the top.

Introducing Animation in Web Design

Animations are virtually everywhere on the web today.

In the past, when designers first discovered that they could embed movement into their websites, the amount of animation we saw was often higher than it needed to be. It wasn’t uncommon to find some websites running entirely on Flash, where every element could be animated.

Fortunately, the trends of modern web design have left those practices behind. These days, it’s a lot more common to make animation a part of the overall user experience, rather than focusing on them as a centerpiece attraction. For instance, you’ve probably noticed plenty of animated sliders showing off pictures in a gallery, or transition animations when people hover over a button.

Since it’s entirely possible to construct an entire website with no animations at all, the key to creating an engaging website today is making sure that every animation you use serves a specific purpose. Your animations should make a website more attractive, easier to use, and better for navigation. Add too many, and you could even risk slowing down a site.

So, where does it make sense to use animation for web design?

1. Loading Animations

One of the best ways to use animations in a website is to distract and delight users as a page loads. You can use the animation to deliver a unique experience, or even just highlight the playful nature of your brand. For instance, just check out this classic load animation called “Tightrope.”

You can also use things like particle animations to capture a customer’s attention and help your visitors relax when they visit a website. Particle animations can be interactive or non-interactive, and they’re a great way to stop visitors from feeling frustrated when a page takes too long to load.

A website by Edan Kwan called “Particle Love” shows you exactly what kind of experience you can create with real-time animations.

The more you can delight visitors with experiences that keep them engaged while the information they need is loading, the less likely people will be to hit the “back” button.

2. Microinteraction Animations

Microinteractions are quick and simple animations that come with specific use cases. Usually, this animation works to provide visual feedback and information when you interact with a specific element.

For instance, this microinteraction design from Colin Garven encourages users to enter their email address and password into a login field:

Ideally, the best way to use microinteractions is to make them as subtle as possible. These tools aren’t here to steal the spotlight from other information on the page. However, they can sometimes encourage your viewers to take the next stage in their conversion journey.

Animated microinteractions can be as complex or as basic as you choose. For instance, you could use them when:

Highlighting if a feature is switched on or off;
Letting users know when actions were successful (like sending a message in a contact form);
Showcasing important information, like prices on a table;
Animating icons on your site to encourage action;
Depending on your experience with animations, you can even find themes and plugins that come with options already built-in.

3. Dynamic Backgrounds

An animated background can be an excellent way to make your website stand out from the crowd. However, it’s important to remember that excessive animation has a habit of making your site slower and more clunky than it needs to be.

The animated background on the mystaticself.com website is fantastic for introducing customers to new information with a handy dynamic menu.

Often, the only reason that you should create your own dynamic background for a website, is if it’s going to improve your customer’s experience in some way.

Remember, ensure that the animations that you’re using on your website aren’t going to make any aspect of your site more difficult to use. Animated backgrounds need to offer a compliment to your existing website, rather than distracting customers from what they want to do.

Before you go all-in with your background animations, focus on animating small sections of an image, one piece at a time. You can also animate components with very small motions too.

4. Reveal Hidden Messages

Another excellent way to use animation in web design is to harness it for showcasing important information. For instance, a navigation menu is an important component in your website design, but it can also take up a lot of valuable space.

In some cases, a hidden menu that appears when a customer scrolls over a small box or icon could make a lot of sense. You can also think about animated drop-down menus if you’re working with a website that has a large number of pages.

Check out this fun example of an animated CSS3 menu:

The sections change color and move as you hover over them, making it easier to see exactly where you’re clicking.

It’s up to you exactly how creative you want to be when you’re playing with animated menus. The easiest option is often just to have a component that changes color or shape with a hover effect. However, you can also expose hidden menus and extra information too.

For instance, with some websites, you can create pictures that turn over to show information on the other side. That means that you could create an about page with pictures of team members, which flip to show biography information.

Just make sure that everything works smoothly, both on desktop and mobile.

5. Try Carousels

Finally, we come to perhaps the simplest and most popular way of using animation in web design. Carousels are a common component of almost every theme on the web today. They’re great for showing off useful information, such as what a website has to offer, or which deals are available.

When creating a carousel, you can either give your users control over how quickly an image transitions, or you can implement automatic movement. On the heathfield.co.uk website, the designer has added buttons to let you flip backwards and forwards between photos, while also ensuring that the animation is automatic.

Without the animation to show you the pictures sliding into space, the transitions between each picture would be instant – which is a little more jarring for viewers.

Sliders are such a common component of web design today that customers almost expect to see them on many websites. That means that you can enjoy a very effective experience if you want to avoid doing anything too dramatic with your websites.

You can use sliders for everything from showing off products, to displaying testimonials from customers and more. It’s a great way to compress a lot of useful information into one small space on a site.

Use Website Animation Carefully

The most important thing for most designers to remember with animation and web design is that it’s entirely possible to have too much of a good thing. When it comes to creating amazing designs for your clients, you can take advantage of animation to encourage more engagement and a unique experience. However, you shouldn’t allow yourself to go too over the top.

Rather than animating every aspect of a page to constantly grab visitor attention, think about how you can make the visitor experience more compelling with the right animation choices. If an entire page of animation on the background isn’t right for your target audience, perhaps custom animations on a navigation bar or a slider would be a good option instead.

At the same time, remember to make the most of the latest technologies on the market for adding animation to web design. A good combination of CSS3, JavaScript, and HTML5 often makes it easier to create more immersive, high-quality animations that users can interact with on desktop and mobile alike.

18 décembre 2020/par Service comm.

Display the Latest News on Your Site With Mediastack

What an extraordinary year 2020 has been for the news! From the ongoing coronavirus crisis, to a turbulent US election, to the unrelenting march of Bitcoin, this year like no other we’ve been glued to our phones micro-analyzing every tidbit of news.

Which makes this the perfect time for mediastack, an awesome REST API that allows you to embed a customizable news feed, sourced from the world’s top news agencies, and updated by the minute, right on your site.

Integrating Global News with Your Site

News is the beating pulse of so many global industries. From political decisions that affect stock prices, to natural disasters that interrupt goods and services, to the whims of celebrities who overnight transform brands from unknown to must-have.

Whether you’re building a site for a non-profit in Louisiana that cares deeply about both Washington politics, and hurricanes in the Caribbean; or you’re building an app for a golf course in Halkidiki that’s focused on both local news, and golf around the world; delivering real-time news content to those users elevates UX.

Tightly integrating the news with your site makes it a hub for users hungry for that very news. The only limit is your creativity.

Display Up-to-Date News on Your Site

When news breaks around the world the top networks scramble to catch up; they simply can’t maintain correspondents in every town and city in the world, and so they rely on affiliates. mediastack pulls in news from over 7,500 different sources in over 50 countries worldwide, giving you access to exactly the same affiliates frequently used by big news organizations like CNN, MSNBC, BBC, or ABC.

When it’s one of the big players in news that breaks a story first, mediastack still has you covered because as will as covering smaller, lesser-known sources mediastack delivers real-time news from CBS, Sky News, The Guardian, Al Jazeera, USA Today, and a host of trusted names across the industry.

If your site targets users that are only interested in certain types of story — like sports, or Hollywood celebrities — then you can even pull in stories from ESPN, TMZ, or Fox News.

Get Started Quickly with mediastack

Getting started with mediastack couldn’t be simpler, and there’s a free plan that’s more than enough to prototype your project.

Full documentation is provided with code examples for PHP, Python, jQuery, Go, and Ruby. To start integrating all you need to do is register for a free access key.

Once you have your free access key, you connect to the API, then customize the results you receive with simple parameters. You can specify the types of news, the precise sources (including omitting sources), languages, countries, and most importantly your keywords.

For example here’s how you’d request science news from CNN, but not TMZ:

https://api.mediastack.com/v1/news
?access_key=[ INSERT YOUR ACCESS KEY HERE ]
&categories=science
&sources=cnn,-tmz

Let’s say you want to display Spanish language crypto news on your site, it couldn’t be easier:

https://api.mediastack.com/v1/news
?access_key=[ INSERT YOUR ACCESS KEY HERE ]
&categories=business,technology
&languages=es
&search=crypto,bitcoin,btc,xrp,ripple,etherium,altcoin

The API sends back simple JSON data that’s easy to run through. Each news item includes the author, title, description, url, source, image, category, language, country, and a published_at timestamp that records when the story was posted.

Once the feed is setup, sit back and relax. It’s all automated from now on.

The Best Source of News for Your Website

mediastack is delivered by apilayer, quite rightly one of the most trusted names in APIs, and is capable of handling millions of requests simultaneously.

Fast, updated by the minute, highly customizable, reliable, and sourced from the biggest names in the news industry, mediastack is an amazing API.

There’s a free-forever plan that allows you to use the API without charge, for up to 500 API calls per month, that’s perfect for trying it out.

For commercial use, plans start at just $19.99/month, and can handle up to 250,000 calls per month. Commercial plans also include HTTPS encryption, live news delivery, access to historical data, and — should you ever need it — technical support.

Head over to mediastack today, to prepare your site for whatever events 2021 throws at us.

[– This is a sponsored post on behalf of mediastack –]

En savoir plus sur les solutions SAP pour l’industrie 4.0

16 décembre 2020/par Service comm.

Le jumeau numérique, facteur d’optimisation du cycle de vie des produits

Actualités, ERP & Applications, SAP

De la conception à l’utilisation, le numérique permet de suivre l’ensemble du cycle de vie d’un produit. Mais aussi de transformer la relation entre le fournisseur et ses clients, en proposant des innovations comme le Product as a Service.

Le jumeau numérique est une réplique numérique d’un objet, processus ou système. Alimenté en temps réel par des données venant de son jumeau physique, le jumeau numérique permet de disposer d’informations clés sur le dispositif ou service simulé. L’apport de techniques de Machine Learning ouvre même les portes du prédictif.

De la simulation classique au jumeau numérique

L’utilisation de la simulation numérique et de modèles 3D n’est pas nouvelle, mais cet usage était auparavant limité aux bureaux d’études.

« Le jumeau numérique existe dans l’ingénierie depuis une bonne vingtaine d’années », confirme Denis Goudstikker, en charge du Business Development du PLM et du SLM chez Siemens Digital Industries Software. « Dans l’industrie automobile, la simulation numérique a permis de raccourcir le temps de mise sur le marché d’un nouveau véhicule. Il y a trente ans, on jetait 100 véhicules contre un mur pour pouvoir assurer un certain niveau de sécurité. Il y a vingt ans, on n’en jetait plus que 5, après en avoir jeté 5000 dans un autre mur… virtuel. » Une avancée qui s’est traduite par un meilleur niveau de sécurité et une accélération du processus de conception des voitures.

Avec le jumeau numérique, les barrières sont éliminées entre l’ingénierie, la production et la maintenance. Et même au-delà, puisque cette continuité numérique peut se prolonger hors des murs de l’entreprise.

« Le constructeur nous fournit des définitions numériques de son produit », témoigne Eric Miralles, CIO de SNOP, équipementier automobile de premier plan. « À partir de cette définition, nous fabriquons les outils qui vont nous permettre d’emboutir les tôles suivant ce cahier des charges. Il faut pour cela que la chaîne allant de la conception à la production soit numérisée. La modélisation numérique de l’ensemble de la chaîne permet d’avoir une maîtrise globale des processus. »

Le jumeau numérique offre également des opportunités après la phase de fabrication.

« Si le jumeau numérique est né dans le milieu industriel, la capacité de connecter de façon massive des objets distribués aux clients, au travers de l’IoT, permet de développer de nouveaux services, mais aussi de redéfinir la relation entre client et fournisseur », analyse Luca Ammassari, Group Deputy Chief Information Officer in charge of Applications chez Engie.

Quels usages clés pour les jumeaux numériques ?

De la conception d’un produit à son utilisation, en passant par la production, le jumeau numérique permet de suivre l’ensemble du cycle de vie d’un produit. Mais également de réduire le time to market de nouvelles offres, la simulation numérique permettant d’accélérer la conception, le test et l’industrialisation des produits.

« Le jumeau numérique permet de répondre à des enjeux économiques et de recherche d’efficacité dans la production, analyse Eric Miralles. Sa mise en place nécessite toutefois une transformation numérique, mais aussi une transformation des organisations et des hommes. Il faut savoir saisir cette nouvelle opportunité par étapes et accompagner les équipes dans ce changement. »

« Le jumeau numérique est également important pour identifier et comprendre le comportement du matériel, poursuit Denis Goudstikker. Et ainsi optimiser son design et sa maintenance. Analyser le comportement acoustique d’une turbine permet par exemple de détecter tout changement dans son fonctionnement. Des modèles prédictifs vont alors déterminer si et quand elle tombera en panne. »

Les usages dans le secteur de la maintenance commencent à devenir communs, « mais il y a une chose à laquelle on s’attendait moins : le packaging d’objets et de services, explique Luca Ammassari. Le constructeur d’une turbine va proposer avec son équipement des services prédictifs basés sur l’utilisation d’un jumeau numérique. Il va s’appuyer sur les informations issues de turbines installées dans le monde entier qui seront comparées en temps réel au comportement de votre turbine, pour vous donner des probabilités de défaillance ou de perte de performance. »

Oser le passage au jumeau numérique

Construire le jumeau numérique de l’ensemble d’une ligne de production n’est pas toujours possible. Certains équipements anciens, amortis sur des dizaines d’années, ne sont en effet pas équipés de capteurs et ne peuvent parfois pas l’être.

La bonne pratique consiste à avancer par étapes, sur des projets ciblés, au fort ROI. « Il faut mener ses projets selon une approche agile, par petits pas et construire ainsi progressivement de la compétence en interne, explique Luca Ammassari. Certains projets auront des résultats décevants, mais cela ne doit pas remettre en cause la démarche. »

Difficile de savoir de quoi demain sera fait en matière d’innovation, constate Luca Ammassari, « c’est pourquoi notre objectif est d’accompagner les entreprises en leur fournissant des fondations capables d’intégrer ces innovations. Notre but n’est pas de proposer des offres clé en mains, mais une plate-forme permettant de sortir de la supply chain classique pour créer un nouvel écosystème. »

Une logique de partenaires qui est essentielle pour Eric Miralles. « C’est cet assemblage de partenaires qui nous permettra de digitaliser l’ensemble de notre supply chain », confirme-t-il. Et de conclure : « La crise que nous traversons aujourd’hui est un accélérateur et il y a beaucoup d’opportunités, très positives, qui nous permettent d’accéder à ces innovations. »

The post Le jumeau numérique, facteur d’optimisation du cycle de vie des produits appeared first on SAP France News.

16 décembre 2020/par Service comm.

5 ans après la COP21 : 87% des Français se disent concernés par l’avenir de la planète

Actualités, ERP & Applications, Non classé, SAP

SAP, société du logiciel la plus durable et partenaire des organisations pour atteindre leurs objectifs climatiques, dévoile les résultats du Baromètre* du développement durable SAP/Odoxa. Un nouvel indicateur visant à mesurer l’intérêt des Français pour l’environnement et l’avenir de la planète. Cinq ans après l’adoption des accords de Paris pour le climat, les résultats révèlent que l’action environnementale est au cœur des préoccupations des Français, qu’elle agit sur leurs comportements de consommation mais aussi sur leurs perceptions des entreprises. Le Baromètre SAP/Odoxa décode l’état d’esprit des Français vis-à-vis des progrès réalisés en matière d’environnement par les gouvernements, les entreprises ou encore par eux-mêmes dans leurs quotidiens.

L’action environnementale est au centre des préoccupations des Français depuis la COP21.

Cinq ans après la COP21, l’action environnementale apparaît plus centrale pour les Français. En effet, 60% des Français ont le sentiment que l’action environnementale n’est pas incompatible avec la croissance et l’emploi. Ils ont cependant le sentiment, depuis 2015, que l’action menée contre le réchauffement climatique par la communauté internationale est un échec (78%) et attendent beaucoup de l’engagement de Joe Biden sur ce sujet. En effet, 77% d’entre eux pensent que le retour des Etats-Unis dans l’accord de Paris permettra à la communauté internationale de lutter plus efficacement contre le réchauffement climatique.

Les Français sont de plus en plus vigilants sur leur mode de consommation pour limiter leur impact environnemental au quotidien.

Les Français sont préoccupés par l’avenir de la planète puisque 9 répondants sur 10 (87%) se disent concernés par l’avenir de la planète. Cependant, 66% d’entre eux sont pessimistes sur le sujet et l’inquiétude domine. Dans la pratique, les Français sont assez vigilants au quotidien pour limiter l’impact de leur mode de vie puisqu’ils sont 86% à limiter leur impact environnemental ou sociétal de leur mode de vie au quotidien mais seuls 21% le font systématiquement.

Bien ancré dans les mentalités, 8 Français sur 10 (82%) pratiquent le tri sélectif systématique. Ils confirment leur intérêt pour la question des déchets, puisque 51% des répondants disent acheter des produits sans emballage ou avec moins d’emballages, et 35% disent vouloir adopter ce comportement. Le deuxième éco-comportement familier des Français est la consommation de produits de saison, adopté par 77% des répondants. Par ailleurs, 51% des répondants disent déjà privilégier les petits distributeurs et les circuits courts, et 35% disent avoir l’intention de le faire. Les investissements énergétiques restent quant à eux en retrait puisque 65% des Français ne semblent pas prêts à installer des panneaux solaires ou une éolienne chez eux, et 61% ne souhaitent pas remplacer leur voiture à essence par une voiture électrique.

Le baromètre révèle également que les Français sont très critiques à l’égard de leurs concitoyens : seuls 47% estiment que les habitants de leur région ont cette préoccupation, les habitants de PACA se montrant les plus critiques sur ce point (35%). Pour agir en faveur de la protection de la planète, si les Français ont fortement confiance dans les associations (77%), leurs communes (67%) et leurs régions (67%), ils sont plus réservés envers les citoyens (56%)et les entreprises (53%) et ont très peu confiance dans l’Etat (40%) et le Gouvernement (37%).

Les Français plébiscitent davantage les entreprises engagées en faveur du développement durable et cela se reflète sur leurs achats.

Les Français sont de plus en plus sensibles à l’engagement des entreprises pour le développement durable. Ainsi, 6 salariés sur 10 considèrent que leur entreprise investit pour protéger la planète et 8 Français sur 10 peuvent être séduits par les entreprises engagées en faveur du développement durable, cet engagement leur donnant envie d’acheter leurs produits (83%) ou d’y travailler (80%).

Les Français sont également de plus en plus attentifs aux actions des entreprises sur l’environnement lors de leurs achats. 72% des répondants privilégient les entreprises engagées en matière de réduction des emballages et 58% celles qui veillent à limiter les déplacements pour les livraisons d’achats en ligne. 62% des salariés estiment que leur entreprise veille à limiter l’impact environnemental ou sociétal de son activité, un sentiment encore plus présent dans les secteurs les plus exposés que sont les transports (70%) et l’industrie (62%). L’énergie (45%), l’agroalimentaire (37%) et les transports (23%) sont les secteurs d’activité considérés comme les plus engagés en faveur du développement durable. Quelle que soit leur taille et leur statut, les Français souhaitent voir l’ensemble des organisations (collectivités, administrations publiques) et des entreprises (PME, grands groupes, startups…) se mobiliser en faveur du développement durable.

SAP est un acteur exemplaire de la transition écologique et moteur de la transformation des organisations pour lutter contre le changement climatique.

SAP entend montrer l’exemple en se fixant pour objectif d’atteindre la neutralité climatique d’ici 2025 et s’engage à atteindre des objectifs de réduction des émissions de 1,5 °C fondés sur des données scientifiques en adéquation avec l’objectif à long terme de neutralité carbone. 100% d’énergies renouvelables alimentent le cloud de SAP et 94 % des employés de l’entreprise sont engagés en faveur du développement durable. L’entreprise est également signataire du Pacte mondial de l’ONU et membre d’associations partageant des valeurs communes, dont le CDP, la Value Balancing Alliance et la Fondation Ellen MacArthur. Par ailleurs, SAP est le premier éditeur de logiciels figurant en tête des indices Durabilité Dow Jones (DJSI).

SAP accompagne les organisations à atteindre leurs objectifs climatiques notamment via le programme Climate 21 et l’application SAP Product Carbon Footprint Analytics qui permet à aux entreprises utilisatrices d’analyser leurs émissions de gaz à effet de serre afin de réduire leur empreinte carbone et de contribuer au 13^ème objectif des Nations Unies pour le développement durable : la lutte contre le changement climatique.

Retrouvez l’intégralité de l’étude :

*Baromètre réalisé par Odoxa sur un échantillon de 3 003 personnes représentatif de la population française âgée de 18 ans et plus entre le 13 et le 19 novembre 2020.

The post 5 ans après la COP21 : 87% des Français se disent concernés par l’avenir de la planète appeared first on SAP France News.

12 décembre 2020/par Service comm.

2 Smartest Ways to Structure Sass

Sass – the extended arm of CSS; the power factor that brings elegance to your code.

With Sass, it is all about variables, nesting, mixins, functions, partials, imports, inheritance, and control directives. Sass makes your code more maintainable and reusable.

And now, I will show you how to make your code more structured and organized.

The organization of files and folders is crucial when projects expand. Modularizing the directory is necessary as the file structure increases significantly. This means structuring is in order. Here is a way to do it.

Divide the stylesheets into separate files by using Partials
Import the partials into the master stylesheet – which is typically the main.sass file.
Create a layout folder for the layout specific files

Types of Sass Structures

There are a few different structures you can use. I prefer using two structures — a simple one and a more complex one. Let’s have a look.

Simple Structure

The simple structure is convenient for a small project like a single web page. For that purpose, you need to create a very minimal structure. Here is an example:

_base.sass — contains all the resets, variables, mixins, and utility classes
_layout.sass — all the Sass code handling the layout, which is the container and grid systems
_components.sass — everything that is reusable – buttons, navbars, cards, and so on
_main.sass — the main partial should contain only the imports of the already mentioned files

Another example of the same simple structure is the following:

_core.sass — contains variables, resets, mixins, and other similar styles
_layout.sass — there are the styles for the header, footer, the grid system, etc
_components.sass — styles for every component necessary for that project, including buttons, modals, etc.
_app.sass — imports

This is the one I usually use for smaller projects. And when it comes to making a decision of what kind of structure to be used, the size of the project is often the deciding factor.

Why Use This Structure?

There are several advantages why you should use this organisational structure. First of all, the CSS files cache and in doing so, the need to download a new file for every new page visit is decreased. In this way, the HTTP requests decrease as well.

Secondly, this structure is much easier to maintain since there is only one file.

Thirdly, the CSS files can be compressed and thus decrease their size. For a better outcome, it is recommended to use Sass/Less and then do concatenation and minification of the files.

In case files become disorganized, you would need to expand the structure. In such a case, you can add a folder for the components and break it further into individual files. If the project broadens and there is a need for restructuring the whole Sass structure, consider the next, more complex pattern.

The 7-1 Patterned Structure

The name of this structure comes from 7 folders, 1 file. This structure is used by many, as it is considered to be a good basis for projects of larger sizes. All you need to do is organize the partials in 7 different folders, and one single file (app.sass) should sit at the root level handling the imports. Here is an example:

sass/
|
|- abstracts/
| |- _mixins // Sass Mixins Folder
| |- _variables.scss // Sass Variables
|
|- core/
| |- _reset.scss // Reset
| |- _typography.scss // Typography Rules
|
|- components/
| |- _buttons.scss // Buttons
| |- _carousel.scss // Carousel
| |- _slider.scss // Slider
|
|- layout/
| |- _navigation.scss // Navigation
| |- _header.scss // Header
| |- _footer.scss // Footer
| |- _sidebar.scss // Sidebar
| |- _grid.scss // Grid
|
|- pages/
| |- _home.scss // Home styles
| |- _about.scss // About styles
|
|- sections/ (or blocks/)
| |- _hero.scss // Hero section
| |- _cta.scss // CTA section
|
|- vendors/ (if needed)
| |- _bootstrap.scss // Bootstrap
|
- app.scss // Main Sass file

In the Abstract partial, there is a file with all the variables, mixins, and similar components.

The Core partial contains files like typography, resets, and boilerplate code, used across the whole website. Once you write this code, there is no further overwriting.

The Components partial contains styles for all components that are to be created for one website, including buttons, carousels, tabs, modals, and the like.

The Layout partial has all styles necessary for the layout of the site, i.e., header, footer.

The Pages partial contains the styles for every individual page. Almost every page needs to have specific styles that are to be used only for that particular page.

For every section to be reusable and the sass code to be easily accessible, there is the Section/Blocks partial. Also, it is important to have this partial so that you don’t need to search whether particular code is in the home.sass or about.sass files in the Pages partial.

It is a good idea to put each section in a separate .sass file. Thus, if you have two different hero sections, put the code in the same file to know that there you can find the code for the two sections. And if you follow this pattern, you will have the majority of files in this folder.

The Vendors partial is intended for bootstrap frameworks so, if you use one in your project, create this partial.

I recommend you use app.sass as the main folder. Here is how it should look:

// Abstract files
@import "abscracts/all"; // Vendor Files
@import "vendor/bootstrap.scss"; // Core files
@import "core/all"; // Components
@import "components/all"; // Layout
@import "layout/all"; // Sections
@import "sections/all"; // Pages
@import "pages/all";

Instead of having a lot of imports in the file, create an all.sass file in every folder. Each all.sass file should contain all the imports for that folder — and to make it more visible and understandable, create a main file.

Organisation

The biggest benefit of this structure is organisation.You always know where to check if you need to change something specific. For example, if you want to change the spacing on a Section/Block you go directly to the Sections/Blocks folder. That way, you don’t need to search in the folder to find the class in a file.

Facilitation

When the code is structured, the processes are promptly facilitated. They are streamlined and every segment of the code has their own place.

Final Words

Organizing code is essential for developers and together with all other skills, it is the most effective way to improve the functioning of the site. And even though there are multiple ways of organisation and different strategies, opting for simplicity helps you avoid the dangerous pitfalls. And finally, there is no right or wrong choice since everything depends on the developer’s work strategies.

Featured image via Reshot.