Articles

What Are Micro-apps and Why Businesses Need Them?

,

The idea behind building a mobile app has been to offer a faster, easier, and innovative experience on various devices to users, doing away with their need to browse websites. However, in a bid to stay relevant to consumers amidst competition, companies try to bundle up a million features together rather than offer a full-proof and specific solution for a certain user need. Being overwhelmed with numerous unnecessary features and functionalities, an app poses various inhibitions to a great user experience. In this blog, we will take a look at how a micro-app can help enterprises solve this issue.

What is a Micro-App?

It is a web/mobile-based, a customized app built to enable end-users to perform a certain, narrowed-down function. Unlike a conventional mobile app, which is bundled with multiple features and pages, the micro-app is smaller in size, more consumer-oriented, and built to offer certain functionality, has an easy user interface, with a dynamic loading that bypasses the app store. For instance, a Personal Banking app has several functions, such as viewing the balance, getting mini statements, changing the ATM password, money transfers, etc. However, if you build a micro-app for this, it will accomplish only that specific task, such as getting transaction history. 

Source de l’article sur DZONE

/par

Create Beautiful WordPress Pages with Optimized Images Using Elementor and ImageEngine

,

WordPress powers nearly 40% of all websites, thanks to its commitment to making publication possible for everyone, for free. Combined with premium plugins and themes, it’s possibly the ultimate tool for building attractive, unique, and feature-rich websites without any coding or design experience.

However, you do pay the price for this experience, with WordPress and its third-party products not always being built for performance – whether it’s page loading times or SEO.

Image optimization is a particularly big concern. Images are one, if not the largest, contributors to page weight, and it’s growing significantly by the year. So, while images are crucial for beautifying your website pages, they are also one of the biggest factors slowing it down.

In terms of image optimization, WordPress+Elementor brings very little to the table. WordPress core now comes with both responsive syntax and lazy-loading. Elementor itself also only comes with responsive syntax out-of-the-box. However, these are baseline techniques for image optimization that will deliver the bare minimum of improvements.

This means that, while Elementor makes it easy to design sweet-looking WordPress pages (with tonnes of creatively utilized images), you will probably pay the price when it comes to performance. But don’t worry. We will show you how to dramatically improve web performance by over 30 points on scoring tools like Google’s PageSpeed Insight. 

Why Optimize Your Elementor Images with ImageEngine?

In general, image CDNs use various techniques to get image payloads as small as possible and deliver image content faster, all while minimizing the visual impact. ImageEngine is no different in that regard.

Firstly, ImageEngine, when used in auto mode, will apply all of the following optimizations that web performance tools like Google’s PageSpeed Insight recommend. For example:

  • Properly size images – ImageEngine automatically resizes images for optimal size-to-quality ratios depending on the screen size of the user device. ImageEngine supports Retina devices.
  • Efficiently encode images – Applies different rates of compression depending on the PPI of the user devices. For example, ImageEngine adapts and more aggressively compresses on higher PPI devices without losing visual quality.
  • Next-gen format conversion – Automatically converts images to the optimal next-gen format according to the browser, device, or OS. ImageEngine can convert images to WebP or JPEG-2000 as well as GIFs to MP4 or WebP.  AVIF is also available in a manual directive mode.
  • Strip unnecessary metadata

While these features are standard for most image CDNs, ImageEngine is unique for its use of WURFL device detection. This gives ImageEngine much deeper insight into the user device accessing a website page and, by extension, its images. Using the screen size, resolution, PPI, etc., ImageEngine can make more intelligent decisions regarding how to reduce image payloads while maintaining visual quality.

This is why ImageEngine brands itself as an “intelligent, device-aware” image CDN and why it can reduce image payloads by as much as 80% (if not more).

ImageEngine also provides a proprietary CDN service to accelerate image delivery. The CDN consists of 20 globally positioned PoPs with the device-aware logic built-in. This allows you to deliver image content faster in different regions while also serving images straight from the cache with a ~98% hit ratio.

ImageEngine also supports Chrome’s save data setting. If someone has a slow connection or has activated this setting, ImageEngine will automatically compress image payloads even more, to provide a better user experience on slower connections.

How to Use ImageEngine with WordPress and Elementor

If you’re using WordPress and Elementor, then chances are you want to spend as little time on development and other technicalities as possible. Luckily, ImageEngine is a highly streamlined tool that requires little to no effort to integrate or maintain with a WordPress site.

Assuming you already have a WordPress website with Elementor, here are the step-by-step instructions to use ImageEngine:

  1. Go to ImageEngine.io and sign up for a 30-day free trial.
  2. Provide ImageEngine with the URL of the website you want to optimize.
  3. Create an account (or sign up with your existing Google, GitHub, or ScientiaMobile account).
  4. Provide ImageEngine with the current origin where your images are served from. If you upload images to your WordPress website as usual, then that means providing your WordPress website address again.
  5. Finally, ImageEngine will generate an ImageEngine delivery address for you from where your optimized images will be served. This typically takes the form of: {randomstring}.cdn.imgeng.in. You can change the delivery address to something more meaningful from the dashboard, such as myimages.cdn.imgeng.in.

Now, to set up ImageEngine on your WordPress website:

  1. Go to the WordPress dashboard and head to Plugins -> Add New.
  2. Search for the “Image CDN” plugin by ImageEngine. When you find it, install and activate the plugin.

  1. Go to Settings -> Image CDN. OK, so this is the ImageEngine plugin dashboard. To configure it, all you need to do is:

a. Copy the delivery address you got from ImageEngine above and paste it in the “Delivery Address” field.

b. Tick the “Enable ImageEngine” box.

That’s literally it. All images that you use on your WordPress/Elementor pages should now be served via the ImageEngine CDN already optimized. 

ImageEngine is largely a “set-it-and-forget-it” tool. It will provide the best results in auto mode with no user input. However, you can override some of ImageEngine’s settings from the dashboard or by using URL directives to manipulate images.

For example, you can resize an image to 300 px width and convert it to WebP by changing the src attribute like this:

<img src="https://myimages.cdn.imgeng.in/wp-content/uploads/2021/03/banner-logo.png?imgeng=/w_300/f_webp">

However, use this only when necessary, as doing so will limit ImageEngine’s adaptability under different conditions.

What Improvement Can You Expect?

Let’s see what results you can expect from using an image CDN to improve your page loading times.

For this, I created two identical WordPress pages using the Elementor theme. The one page purely relied on WordPress and Elementor, while I installed and set up ImageEngine for the other. The page had some galleries as well as full-size images:

The pages used many high-quality images, as you might expect to find on a professional photography gallery, photography blog, stock photo website, large e-commerce site, etc. I then ran page performance tests using Chrome’s built-in Lighthouse audit tool, choosing scores representing the average results I got for each page.

For thoroughness, I tested both the mobile and desktop performance. However, I focused on the mobile results as these showcase more of the image CDN’s responsive capabilities. Mobile traffic also accounts for the majority share of internet traffic and seems to be the focus for search engines going forward.

So, first of all, let’s see the mobile score for the page without ImageEngine:

As you can see, there was definitely a struggle to deliver the huge amount of image content. Google has shown that 53% of mobile users abandon a page that takes more than 3s to load. So, clearly, this page has major concerns when it comes to user experience and retaining traffic.

The desktop version fared much better, although it still left much to be desired:

When digging into the reasons behind the slowdown, we can identify the following problems:

Most of the issues related somehow to the size and weight of the images. As you can see, Lighthouse identified a 3.8 MB payload while the total image payload of the entire page was close to 40 MB.

Now, let’s see what kind of improvement ImageEngine can make to these issues by looking at the mobile score first:

So, as you can see, a major improvement of 30 points over the standard WordPress/Elementor page. The time to load images was cut down by roughly 80% across the key core web vital metrics, such as FCP, LCP, and the overall Speed Index.

In fact, we just reached that critical 3s milestone for the FCP (the largest element on the visible area of the page when it initially loads), which creates the impression that the page has finished loading and will help you retain a lot of mobile traffic.

The desktop score was also much higher, and there was further improvement across the key performance metrics.

If we look at the performance problems still present, we see that images are almost completely removed as a concern. We also managed to bring down the initial 3.8 MB payload to around 1.46 MB, which is a ~62% reduction:

An unfortunate side effect of using WordPress and WordPress plugins is that you will almost inevitably face a performance hit due to all the additional JavaScript and CSS. This is part of the reason why we didn’t see even larger improvements. That’s the price you pay for the convenience of using these tools.

That being said, the more images you have on your pages, and the larger their sizes, the more significant the improvement will be.

It’s also worth noting that lazy-loaded images were loaded markedly faster with ImageEngine if you quickly scroll down the page, again making for an improved user experience.

Thanks to its intelligent image compression, there was also no visible loss in image quality, as you can see from this comparison:

Conclusion

So, as you can see, we can achieve significant performance improvements on image-heavy websites by using the ImageEngine image CDN, despite inherent performance issues using a CMS. This will translate to happier users, better search engine rankings, and an overall more successful website.

The best part is that ImageEngine stays true to the key principles of WordPress. You don’t have to worry about any of the nuts and bolts on the inside. And, ImageEngine will automatically adjust automation strategies as needed, future-proofing you against having to occasionally rework images for optimization.

Source

The post Create Beautiful WordPress Pages with Optimized Images Using Elementor and ImageEngine first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

/par

3 Effective Ways To Improve Your Site’s Carbon Footprint

,

At the dawn of the web-era, there was much focus on how environmentally friendly websites were: we’d chop down fewer trees, ship fewer products, and travel less for business.

And because the web was small, any negative impact it had was relatively small. But the Internet’s no longer small, and neither is the impact it has on the environment. The average website uses 211,000g of CO2 per year, watching a video online outputs an estimated 0.2g of CO2 per second, and a single email can cost 50g of CO2.

In the next four years, the tech industry as a whole may use up to 20% of the world’s electricity and be responsible for 5.5% of global CO2 emissions.

The good news is that because websites are viewed many times, even small improvements can multiply into real change.

1. Reduce Energy Consumption

Through electricity use, the Internet generates around the same CO2 as most major countries. That carbon comes from two sources: the devices we use to access the Internet and the servers that host our data.

Computers heat up, and when they heat up, they slow down. Servers are especially vulnerable and use extraordinary amounts of energy to keep cool and functional, which is why Microsoft keeps throwing servers into the sea.

Make It Faster

The faster your site, the less data is used to serve it, and the less carbon it’s outputting; it’s that simple.

Reduce the Number of Resources Used

Everything you load on your site has an impact. You might think that a tiny PNG is too small to really impact your carbon footprint, but over thousands of page loads, its impact is multiplied. Anything you can do to reduce the number of actual files requested will reduce your carbon output. You can use sites like Ecograder to estimate your own site’s CO2 output.

Optimize Images

If there’s one thing you can do to reduce the size of your site, the amount of data that needs to be sent over the Internet to serve your site, and the resulting speed, it’s optimizing your images.

Nothing reduces a site’s footprint like optimizing images. It’s easy and free to reduce the size of JPGs and PNGs with a service like TinyPNG. Offer WebP to any browser that will accept them; it will boost your Lighthouse score and improve your CO2 usage.

Lazy Load Images

Lazy loading images means images are loaded as they are required; images at the top of a page always load, images further down only load when the user scrolls to them; if the user doesn’t scroll to the bottom of the page, they don’t load, saving you CO2.

Reduce The Amount Of JavaScript You Use

Yes, JavaScript is awesome. Yes, it can be hugely beneficial to UX. And yes, it munches on energy like it’s candy.

When a web page loads, it’s done, the total cost is in. If JavaScript keeps running in the background, redrawing the screen based on user interaction — as is the case with a parallax site — the web page keeps using up energy on the device.

Choose a Sustainable Hosting Company

You can reduce the power needs of a site, but you can’t eliminate them. One simple step is to opt for a hosting company that gets its electricity from sustainable sources such as wind power or solar.

Low←Tech Magazine is powered by a server that runs on solar energy and carries a warning that it may go offline. But it’s possible to host both reliably and sustainably. Many web hosts outsource their actual server management, so they have no control over how those servers are powered, but there are plenty of exceptions that guarantee green web hosting. Google Cloud aims to be the cleanest in the cloud industry. For green web hosting, I always recommend the all-round superb Kualo.

2. Be Inclusive

One of the biggest issues with the EV (Electric Vehicle) movement is that we’re replacing cars earlier than we normally would in a rush to move to “clean” driving.

A new EV certainly outputs less than a gas-powered vehicle when driven the same distance. Combine increased use — because owners think they are driving cleanly — with the fact that a new EV has to be manufactured, the minerals for batteries have to be mined (in horrific conditions), and it then needs to be shipped to you, and EVs are not as friendly as they appear — so go ahead, buy that vintage Porsche it’s probably better for the environment than a Tesla.

Support Legacy Devices

The same issue that applies to cars applies to devices. Every time we rush ahead to support the latest iPhone, we leave older generations behind. A device can and should last longer than two years.

This is not to say that you shouldn’t embrace modern web standards. Technologies like CSS Grid are excellent at reducing markup size and speeding up sites. CSS Grid has been well supported for over four years, and even “legacy” devices can handle it. If you can keep a phone for an extra six months, the environmental cost of that phone is reduced by 20%.

3. Help Users Make Good Choices

More and more people are trying to make good choices. We’re eating a healthier, balanced diet. We’re recycling clothes. We’re traveling by bike, and on foot, instead of by car. People want to do the right thing, and they seek out companies that aid them.

Improve Navigation

Anything that you can do to make your content more findable will mean fewer page loads and therefore consume fewer resources.

By improving your information architecture, improving your search accuracy, and improving on-page signposts like bread crumbs and link text, you help users find content faster.

Feelgood Feedback

When the environmental impact of a user’s actions are quantifiable, let them know. Users who care will appreciate it, and users who don’t will ignore it.

Raileurope.com adds a note to any quotation letting you know how much carbon you’ve saved by traveling by train instead of flying.

Don’t Remove the Shipping Rate

Many ecommerce sites offer free shipping, especially above a certain order value; it’s a good way to encourage higher sales. But absorbing the shipping cost implies that there is no shipping. By highlighting the shipping costs, even if they’re not passed on to the customer, you remind them that there is an environmental cost and a financial cost.

You can absorb the shipping rate without implying there is no cost by adding the shipping and then explicitly deducting it as a discount.

Sustainable Web Design Is Good For Business

The fundamentals of good web design are the fundamentals of sustainable web design.

Make it fast and usable, and you’ll also be making it energy efficient. Make it inclusive, and you’ll help the industry slow the ever-growing tendency to consume. Make it transparent, and you’ll help your users make good choices of their own. All of these things are not only good for the environment, but they also result in improved UX and SEO.

 

Featured image via Pexels.

Source

The post 3 Effective Ways To Improve Your Site’s Carbon Footprint first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

/par

Get Ready For Next Month’s Google Shakeup

, ,

Google has been talking about the Core Web Vitals tool and the Page Experience Update for about a year now.

With the update scheduled to roll out in May 2021, now is the time to make sure your websites are prepared for it. It’s taking a lot of the best practices Google has recommended over the years and making them an official part of the search algorithm, so not taking this seriously could negatively impact your sites’ rankings.

Today, we’re going to look at everything Google has told us about the update and how to use the Core Web Vitals tool to ensure your site rankings don’t drop once it rolls out.

What We Know About the Google Page Experience Update

Google first told us about the page experience update back in May 2020. Here’s what we know about the upcoming update:

Google’s Search Algorithm Will Change in May 2021

Although there’s no specific day given, we do know that the page experience update will go live sometime in May 2021.

The Goal is to Reduce Friction on the Web

It’s not as though user experience is something that designers and developers overlook when building websites. Heck, there’s an entire disciple of UX design dedicated to it.

That said, Google hasn’t taken too hard line of an approach in enforcing its page experience suggestions, like mobile-first design, removing intrusive pop-ups, or improving page speed. With this update, though, Google is now telling every site owner that performance, accessibility, technical best practices, and SEO must be built into their websites.

Of course, the goal isn’t to create more work on your side of things. Google believes that by encouraging developers to build better web experiences that consumers will experience less friction and businesses will be more profitable as a result.

The Update Will Include Older Signals

According to Google, the page experience update is going to combine a bunch of older signals with the new Core Web Vitals:

The Core Web Vitals tool will now merge all of that data we once had to gather from various Google apps. That’ll make it more convenient for designers and developers to improve the on-page experience across a variety of areas.

The Page Experience Algorithm Will Change Over Time

Per Google:

Because we continue to work on identifying and measuring aspects of page experience, we plan to incorporate more page experience signals on a yearly basis to both further align with evolving user expectations and increase the aspects of user experience that we can measure.

So, don’t expect this to be a one-and-done thing. You’ll have to rely on the Core Web Vitals tool, and pay close attention to updates out of Google, to ensure your sites are keeping up with Google’s page experience standards.

Your Other Google Apps Have Already Been Updated with Core Web Vitals

If you hadn’t noticed, Google has already updated its other apps in anticipation of the page experience update.

Google PageSpeed Insights, Search Console, and Lighthouse all have Core Web Vitals data in them.

Here’s an example of how Lighthouse’s report on the Amazon website now looks:

By including these metrics within the tools you’re already using, you don’t necessarily have to add the Core Web Vitals tool to your growing toolbox. That said, there are some really valuable reports in there, so I’ll show you why you may want to add it anyway.

Google’s Top Stories Will Be Affected

In the past when someone did a news-related search on Google, they’d see “Top Stories” results like this one:

Until now, the only pages shown here were AMP-enabled ones. 

Once the page experience update goes live, though, the AMP requirement is going away. So long as a page meets the page experience criteria along with Google News content policies, it can now rank in this section.

Google Search Results May Show a Page Experience Indicator

In the Top Stories example above, notice the AMP indicator I highlighted in yellow. Google is thinking about adding something similar to any search result that fulfills its page experience criteria.

While I think a small, eye-catching icon might draw a little more attention from Google users, I’m not sure if it’ll be that big of a deal to them. People working in this industry certainly know what that lightning bolt means, and we’ll also be the ones who recognize the page experience indicator, but I’m not convinced it’ll matter to users. 

That said, this is something Google is thinking about rolling about, so it’s something to be aware of. At the very least, you can consider it a badge of honor when showing your websites to clients and prospects who want to see what you can do for them.

Content Is Still More Important Than Page Experience

Even if a website checks off all the page experience boxes, there’s no guarantee that it’ll start to rank better than websites that haven’t. The quality and value of the content on the page still matters greatly.

Using Core Web Vitals to Measure Page Experience

Alright, so let’s take a look at this Core Web Vitals tool. Here’s what the tool looks like when you enter the “Measure” tab:

It’s like most other Google analyzer tools. You enter the URL you want to audit and let the tool run. The results then spit out something that looks like this:

Core Web Vitals are graded on four categories:

  1. Performance measures the loading speed, interactivity, and stability of the page.
  2. Best Practices focus on the technical aspects of the page, including things like having an SSL certificate and making sure images fit within the parameters of the mobile screen.
  3. SEO checks on the typical SEO signals like metadata, structured data, and so on.
  4. Accessibility reports any issues with visitors not being able to see or access parts of the page.

If you scroll down just a little bit on the page, there’s more data available. It mainly has to deal with the technical stuff, like page speeds and unoptimized code:

Now, this isn’t really anything new. We can get this data about load time, interactivity, and content stability from Google’s other apps.

The real value is in the report, which you can access up top next to the date of your audit.

Open the report and you’ll find specific suggestions and pro tips to optimize each part of the page experience, like this SEO report:

Just like other Google tools, this one can teach you a lot about what makes one site more rankable than another. So, make sure you update your web design strategy going forward to integrate all of these ranking signals.

While you’ll have to do annual audits on your sites to see how much Google has changed the page experience signals, you’ll create less work for yourself if this baseline set of criteria are met with every site you build.

Source

The post Get Ready For Next Month’s Google Shakeup first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

/par

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.

Source


Source de l’article sur Webdesignerdepot

/par

How to Optimize a PDF in Java

,

As we have discussed before, the PDF is the ideal file format for saving, sharing, and protecting documents, both small and large. Its high compatibility with most Operating Systems makes it popular amongst most users for sharing information with different parties. Furthermore, it provides a more static platform for working with important documents like contracts and manuals, as steps can be taken to prevent any unwanted access or editing to the file. 

With large and highly complex files like this, however, different systems may have difficulty uploading, downloading, and reading the formatting for your document. This can lead to file corruption or increased loading times that can halt productivity. Thus, streamlining large PDF files can greatly benefit organizations that regularly use this format in day-to-day operations. 

Source de l’article sur DZONE

/par

9 Ways To Boost Your Domain Authority

,

Domain Authority (DA) is a ranking metric that predicts how well a site will rank online. It goes by a scale of 1 to 100 — the closer you are to 100, the better your odds of ranking in search engine result pages (SERPs), thus giving you more clicks.

To see how your site currently ranks, visit Moz’s free Link Explorer to test your DA. Just type your website URL in the search bar and click “Analyze”. Just remember: don’t kick yourself if your DA is smaller than 30 to 50. If you follow these 9 tips today, you’ll most definitely see your DA score improve.

1. Domain Name Age

You know that old saying, right? Wisdom comes with age. Well, guess what? The same is true for your domain name. If your domain name doesn’t have an ‘old’ age, then it’ll rank lower, and users online might not see your site as legitimate.

But with an older domain name, not only will users see your site as more legitimate, but it’ll also have a much higher DA score than younger domain names. In other words, every time you change your domain, you might be doing more harm than good to it, since you’re actually knocking down the credibility you’ve built up over the years by starting from scratch.

Therefore, pick an easy-to-remember domain name that’s not only relevant to your niche, but it’s also something that you’re willing to keep for a very long time.

2. On-Page Optimization

Then, it’s time to optimize all the following on your pages:

  • Code;
  • Content;
  • Site structure;
  • Metatags;
  • Other on-page elements (H1, Title tags, Image alt tag, Site architecture, etc.).

Improving your DA with optimization can make your site be more search-engine-friendly.

3. Create Great Content

Want to attract high-quality links from multiple domains in your niche? Good news! More attraction to your site comes from creating high-quality content that appeals to your target audience. Otherwise, poor-quality content will only scare people away.

So, in providing the best content possible, that will definitely help you improve your DA score (and even give you many additional SEO benefits).

4. Internal Link Improvement

Why worry about earning external links when your internal links need the most attention? Yes, focusing too much on external links can make you lose sight of linking internally.

So, why internal links? These links help nudge visitors to what they’re trying to look for on your website. In that way, visitors are getting the best user experience, while you reap the rewards of having an increased DA score.

5. Link Profile Clean-Up

Having a clean link profile is essential, since it helps you obtain and maintain a great DA score. So, to clean up your link profile, you must remove the bad links from it.

In this process, you can use tools like:

These tools help you figure out any inappropriate or unwanted links.

After the link audit is complete, contact the website owners to have them either delete the link or add the “nofollow tag” (devalues the link). If this doesn’t work, use the Google Disavow tool to remove said links from your profile.

6. Know Your Niche

When running a site, it’s important for you to be the expert in what you have to offer online – and your DA is no exception to this. Becoming an authoritative figure in your niche allows you to gain the confidence of readers, while providing expert advice to the community.

If you have amazing content (i.e. guest blogs on industry-related forums) and clever ways to engage your target audience, then people will see you as an authority to your niche. This not only enhances your brand, but also increases your DA score.

7. Be Mobile-Friendly

Nowadays, people are on their phones, tablets, etc. Whatever device that they can use on the go, they’ll use. In other words, mobile isn’t just the way of the future – it’s happening right now, outpacing laptops since 2014. So, if your website isn’t mobile-friendly yet, then now is the time to fix that!

If your website hasn’t been optimized for mobile use yet, not only will it hurt your search rankings (since Google favors mobile-friendly sites), but you’ll also lose out on users visiting your site to begin with.

So, go to Google’s Mobile-Friendly Test, and then run a test for your domain. Afterwards, Google will give you a detailed report of how mobile-friendly your site is, and what you can do to improve it.

8. Improve Page Speed

Let’s face it: No one likes to wait for a webpage to load; they want quick results. So, if your site isn’t loading fast enough, then users will get frustrated and most likely go to another site. So, why not improve your page speed?

First, find the cause of your website running slower than it should. You can do this by running your website through Google’s PageSpeed Insights; it’ll analyze the speed of your site. And then, it will identify some effective ways for you to make your site faster and consequently improve your DA score.

9. Utilize Social Media

Finally, it’s important to increase your social signals, when it comes to gaining more authority with your domain. While search engines like Google won’t insist that sites make social signals a priority to increase their rankings, site runners must still take advantage of social media to do the following:

  • Promote their sites;
  • Promote their products and services;
  • Tell people about any events and contests.

As a result, sites are more likely to get likes, shares, and tweets through social media, versus going solo in search engines.

Conclusion

Domain authority is extremely important for your site. First, DA allows you to analyze how well your website does in the search space. Plus, it allows you to compare the performance of your website with that of your rival sites, thus showing you where you stand in search engine results.

So, why not get your site thriving today by improving and maintaining your DA score today? Your site will thank you for it!

 

Featured image via Unsplash.

Source


Source de l’article sur Webdesignerdepot

/par