Articles

Exciting New Tools for Designers, December 2020

,

Jumpstart your next design project or speed up a workflow with some of these new tools and resources. With so many new tools being developed all the time, you are almost certain to find something that can help you with projects.

Here’s what new for designers this month.

Everypixel Patterns

Everypixel Patterns solves a common design problem: Creating seamless patterns with graphic editors is such a long and exhausting process. That’s why some people choose to get patterns from stock websites but that can be a challenge too (and difficult to search). This tool makes getting patterns less time-consuming. It includes a gallery of well-designed content, which you can customize and edit as needed.

Multiavatar

Multiavatar is a free and open-source multicultural avatar maker. Type something in the input field and generate one of 12 billion avatars. (Everything is randomly generated and free to use.)

Lobe

Lobe is a machine learning app from Microsoft that helps you create and train models. Start by showing the app examples of what you want it to learn and it will train a model for you. The tool is pretty easy to understand and you don’t need or experience or code knowledge to use it and you can train an app for free on your computer.

Laser Cat

Laser Cat is a silly and fun Google Chrome extension that adds a cartoon cat to your browser that allows you to zap away anything you want to remove in the browser window. It’s light and fun. Go play!

Pattern Collect

Pattern Collect is a curated gallery of patterns by various designs and illustrators. You can download patterns for use in projects or submit your own to share with the design community. The library is searchable and you can get new patterns via email if you subscribe.

FarbVelo

FarbVelo is a color palette generator that shows a new and random scheme with every refresh. The color choices are fresh and could work for a variety of projects, too.

CSS Clip Path Editor

CSS Clip Path Editor is a cool little pen by Mads Stoumann that puts an image inside of almost any clip path you can imagine. There are presets to choose from or you can adjust the settings and paths to create your own image shape.

Responsive & Configurable SVG Waves

Responsive & Configurable SVG Waves is a soothing pen by Jhey. Change the background and wave elements for a simple and cool animation in SVG.

Veed

Veed lets you host, edit, and deliver videos in the cloud using a REST API. It works on any browser, device, and bandwidth, and keeps your website light, even when delivering heavy video content.

Overlay

Overlay is a plugin for Figma or Sketch that transforms components and symbols into clean and reusable React, Vue, or HTML code. The benefit? Use it to create more consistent websites and design systems more quickly and in a pixel-perfect manner.

List.js

List.js is a library for adding search, sort, filters, and flexibility to tables, lists, and other HTML elements. It is built so that it will work on existing HTML and be invisible. Plus, it is simple to install and use.

What Are Design Tokens?

Design tokens are a “hot term” says Andy Bell. So, he wrote an explainer that breaks down what they are and how they might look in a standard data format like JSON. Read the explainer and you’ll be able to identify design tokens and understand them.

SVG Path Editor

SVG Path Editor makes it easy to manipulate paths for any SVG element. The grid – if you choose to use it – helps edits stay symmetrical and easy to manage.

Operator Lookup

Operator Lookup is a practical and fun tool. Enter a JavaScript operator in the search box to learn more about what it does. (You can also choose from a “keyboard” of options.) Thanks for the tutorial, Josh W. Comeau.

Beacon

Beacon is a tool designed to help you write, run, and share SQL in Slack. It makes collaboration easy so you can work on and run queries, debug, and resolve issues all in a single platform.

Plaiceholder

Plaiceholder transforms your images into lightweight placeholders using pure CSS or SVG.

Machine Translation

Machine Translation is available as Cloud API, on-premise translation server, and SDK that can be easily integrated into lots of business cases. Both solutions work with 110 languages.

Draggable Blend Generator

Draggable Blend Generator does just what the name implies. Change the blend mode of a background and foreground using a draggable tool so that you can see the changes in real time. Just enter the URL of a background image or pattern and color swatch and you are ready to go.

Jam Wand

Jam Wand is a “magic wand” for making changes on your website, starting with copy. Click on any text, edit it, and submit the change to GitHub to be merged into the code. Copy changes as easy as click, type, and click again. (This tool is still in beta.)

Boost UI Kit

Boost UI Kit is a collection of elements and components that will help you finish website design projects using a bright and airy style. It works with Figma for easy integration.

Romanizer

Romanizer is a fun game that tests your knowledge of Roman numerals. With two modes – a randomizer and a challenge you can participate in – you’ll learn to convert numbers visually in minutes.

Itmeo Market

Itmeo Market is a new online graphics marketplace with exclusive and ready-to-use templates for a variety of projects. Templates include elements for logos, UI kits, graphic elements, Instagram templates, landing pages, and more. (This is a paid/subscription-based resource.)

Bellmoco Handcola

Bellmoco Handcola is a beautiful decorative typeface with fun swashes and serifs. The free version is for personal use only.

Bondie

Bondie is a handmade brush typeface with fills in many of the letterforms. It contains 106 characters and is free for personal use.

Bovino

Bovino has multiple weights that can work for display or body text. The modern serif is free for personal use.

Estilistica

Estilistica is a thin modern style sans serif with smooth lines and a vertical profile. It is best suited for display use and is free for personal use.

Source


Source de l’article sur Webdesignerdepot

/par

How to Prioritize Speed with a Mobile-First Design

,

By the end of the year, the number of global smartphone users is expected to reach 3.5 billion. That’s a significant 9.3% increase over the last 12 months.

In a world where everyone is constantly connected to their mobile devices, it makes sense that web developers and designers would need to consider new rules for how they create engaging experiences. After all, most of us find browsing from our smartphones to be much more convenient than sitting down at a laptop each day.

With a little luck, you’re already taking steps to mobile optimize your website but standards are changing all the time. To make sure your website is up to scratch, here’s your guide to prioritizing your site for mobile, ready for the new year.

Understanding Mobile-First Design

The first step in updating your web design and development principles, is understanding the concept of mobile first design, and how it’s changed.

With a responsive website, you create something that adjusts to the screen size of any device; with a mobile-first site, you’re focusing first-and-foremost on the user experience that people get when they’re on mobile, taking that as your starting point, and building from there. Instead of building your website for the desktop and using mobile as an afterthought, you start with a consideration of mobile.

Even Google is highlighting the demand for this process lately, with the mobile-first indexing algorithm. If you can’t design for mobile-first, then you could risk your clients being unable to rise up the search engine ranks.

So, how do you get started?

1. Start With the Right Tools

Web developers and designers are nothing without a great toolkit.

The good news is that there are solutions out there that can help you to master the right skills for a mobile-focused user experience. For instance, Skeleton is excellent for small-scale projects that require fluid grids and minimal compiling.

Alternatively, Bootstrap can offer a one-size-fits-all solution for the front-end development for mobile devices. There’s a default grid system available, plenty of components, and JavaScript plugins to work with.

With the right tools, you can minimize and prioritize the content that’s most valuable for your website projects. This is crucial for maximizing website speed and creating clarity when it comes to content and imagery.

For instance, check out the ESPN website; it’s split into very easy-to-follow categories of content that are perfect for scrolling on a smartphone. The grid of videos makes it feel like you’re using a tool like YouTube.

2. Prioritize Mobile-First Elements

Once you have the right tools to assist you, it’s time to begin building your mobile-first website from the ground up. Rather than jumping straight into considerations of the latest design trends, it’s important to start with the foundations.

For instance, navigation within a mobile page is usually hidden under a hamburger button. However, you can take this concept to the next level too. For example, the Shojin mobile website only demonstrates the most important website options within the navigation bar to avoid overwhelming users.

The key here is to keep things as simple as possible, without restricting what your audience can do when they visit your website. Although you want to keep the number of interactive elements on your site small, you also need to ensure that those elements are easy to find and use.

All buttons and CTAs should be clear and tappable. Fonts need to be large enough to read from any screen, and your navigation system needs to be 100% simple, without slowing anything down.

On average, we recommend making all clickable elements at least 48 pixels in height.

3. Use Responsive Imagery and SVGs

Images are a crucial part of any website. They add context and appeal to your design. However, they can also seriously slow down your website if you’re not careful.

Remember, different devices have different demands when it comes to imagery. A desktop page may need a 1200px wide image, while a mobile-only needs the image to be 400px wide at most. The old way of making your images work was to load a large resolution image and use the same file on every platform. Unfortunately, this slows downloading time significantly.

Instead, it’s better to have at least two different versions of the same image for your mobile and desktop solutions. You can also consider SVG.

SVGs are incredibly scalable – more so than bitmaps. With SVG, you can ensure any icon or graphic continues to look sharp and clickable across all devices. Because these files are often smaller, your site loads quicker too! Hubspot is great at using SVGs.

Intricate illustrations are a massive component of HubSpot’s brand. If those images were saved as PNGs or other alternative files, then they would take forever to load. Because they’re all SVGs, you can enjoy the same consistent experience across desktop and mobile.

4. Get the Typography Right

It’s not just the big graphics and images that make a huge difference to your website when it comes to mobile-first design. You also need to think about the legibility and clarity of your website across all devices and platforms. If people can’t read the value proposition of the company that you’re designing for, you’re going to have a major problem.

Focus on making your content as easy to read as possible. Look into the typefaces that seem most appealing on a range of devices.

Remember to balance the body and heading font sizes for the device size too. You’ll need to ensure that the experience feels consistent and smooth as your users scroll through each page. Just take a look at the mobile version of the IMPACT website, for instance.

The headings aren’t as huge as they are on the desktop version of the website, and they’re displayed below, rather than above the featured image. However, this helps to give a more immediately eye-catching and structured experience to mobile users.

There’s even a handy “Search Engine Optimization” tag included, that users can click on if they want to find more related articles.

When it comes to typography, remember that it’s not just size and clarity that matter, but how things are structured throughout your website too. Your type should naturally guide your visitors along the page.

5. Master Available Device Features

Finally, on smartphones, you can accomplish a range of amazing things that you might not be able to do when using a desktop device. Your users can make calls, open apps, send messages, and more, all from within their mobile browser. They can also move their smartphone around a room, taking advantage of concepts like AR and VR.

Taking advantage of the unique capabilities that smartphone design can offer gives you a chance to get unique with your user experience.

Making the most of the mobile experience can be much simpler than you’d think. For instance, on a desktop site, you could list your phone number on a contact page. On a mobile site, the number can begin a call when clicked. You can also take the same approach with email addresses, and social media icons too.

Depending on how experimental you feel, there’s also plenty of opportunities to go above and beyond with your mobile features. You may decide to create a mobile app version of a website that your customers can download onto their phones.

Alternatively, you can look into things like AR technology. This could allow your users to practice placing items of furniture that they may be thinking of buying from an online retailer into their house, so they can see how well they work with their other interior design choices.

Making the Most of Mobile-First Design

Ultimately, having a responsive website that works on both mobile and desktop devices is mandatory in the modern world. However, going above and beyond with mobile-first design is a great way to get ahead of the game.

If you can focus on building a website that puts the experiences of mobile users first, then you can create something that’s much more likely to grab audience attention and deliver amazing experiences.

If nothing else, showing your clients that you have what it takes to design for mobile is an excellent way to ensure that you can gain as many new project opportunities as possible.

Source


Source de l’article sur Webdesignerdepot

/par

Popular Design News of the Week: November 30, 2020 – December 6, 2020

, ,

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Sidekick Browser – The Fastest Browser Built for Work

 

Why is Apple’s M1 Chip so Fast?

 

Two Color Combinations – A Curated Collection of 164 Two-color Palette Combinations

 

5 Tips to Build a Stunning Website that Stands Out from the Crowd

 

10+ Bootstrap Newsletters

 

Text Fish – Get Just Text

 

Ecommerce Website Designs: 27 Best Online Shops and Why They Work

 

SpaceHey – MySpace Reborn

 

State of CSS – 2020

 

5 Overlooked Mobile Experience Design Best Practices

 

Modern Blackletter Inspired Fonts and their Use in Web Design

 

Internxt Drive – Secure & Private Cloud Storage Service

 

Spline – 3D for the Web (Preview Release)

 

Nots – A Free Beautifully Designed Note-taking App for your Desktop

 

Google Play’s Best of 2020

 

Beacon – Run SQL Commands in Slack

 

Designing for the New Reality: Getting Rid of Pre-COVID Assumptions

 

Undoing the Toxic Dogmatism of Digital Design

 

Color Theory: A Beginner’s Guide for Designers

 

Atkinson Hyperlegible Font

 

11 Tips for Creating a Usable Website Contact Page

 

The 7 Secrets to a Great Conversation

 

Checklist Generator – Create Checklists for Free and Host Them Wherever You Want

 

Empathetic Design: The First Stage of Design Thinking

 

Handy Guide to Networking for UX Designers

 

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Source


Source de l’article sur Webdesignerdepot

/par

Exciting New Tools for Designers, November 2020

,

In the spirit of fall feasts, this month’s collection of tools and resources is a smorgasbord of sorts. You’ll find everything from web tools to icon libraries to animation tools to great free fonts. Let’s dig in.

Here’s what new for designers this month.

The Good Line-Height

The Good Line-Height is the tool you won’t be able to live without after using it a few times. The tool calculates the ideal line-height for every text size in a typographic scale so that everything always fits the baseline grid. Set the font size, multiplier, and grid row height to get started.

Link-to-QR

Link-to-QR makes creating quick codes a breeze. Paste in your link and the tool creates an immediate QR code that you can download or share. Pick a color and transparency, plus size, and you are done.

Quarkly

Quarkly allows you to create websites and web apps both using a mouse and typing code – you get all the pros of responsive editing, but can also open the code editor at any time and manually edit anything and it all synchronizes. The tool is built for design control and is in beta.

UnSpam.email

Unspam.email is an online spam tester tool for emails. Improve deliverability with the free email tester. The service analyzes the main aspects of an email and returns a spam score and predicts results with a heat map of your email newsletter.

Filmstrip

Filmstrip allows you to create or import keyframe animations, make adjustments, and export them for web playback. It’s a quick and easy tool for modern web animation.

CSS Background Patterns

CSS Background Patterns is packed with groovy designs that you can adjust and turn into just the right background for your web project. Set the colors, opacity, and spacing; then pick a pattern; preview it right on the screen; and then snag the CSS. You can also submit your own patterns.

Neonpad

Neonpad is a simple – but fun – plain text editor in neon colors. Switch hues for a different writing experience. Use it small or expand to full browser size.

Link Hover Animation

Link Hover Animation is a nifty twist on a hover state. The animation draws a circle around the link!

Tint and Shade Generator

Tint and Shade Generator helps you make the most of any hex color. Start with a base color palette and use it to generate complementary colors for gradients, borders, backgrounds, or shadows.

Pure CSS Product Card

Pure CSS Product Card by Adam Kuhn is a lovely example of an e-commerce design that you can learn from. The card is appealing and functional.

Free Favicon Maker

Free Favicon Maker allows you to create a simple SVG or PNG favicon in a few clicks. You can set a style that includes a letter or emoji, font and size, color, and edge type and you are ready to snag the HTML or download the SVG or PNG file.

Ultimate Free iOS Icon Pack

The Ultimate Free iOS Icon Pack is a collection of 100 minimal icons in an Apple style. With black and white version of each icon and original PSD files, you can create sleek icons for your iPhone screen in minutes. And it’s completely free! No email address or registration required.

Phosphor Icon Family

Phosphor is a flexible icon family for all the things you need icons for including diagrams and presentations. There are plenty of arrows, chats, circles, clocks, office elements, lists, business logos, and more. Everything is in a line style, filled, or with duotone color. Everything is free but donations are accepted.

3,000 Hands

3,000 Hands is a kit of hands that includes plenty of gestures and style in six skin tones and with 10 angles of every gesture. They have a 3D-ish shape and are in an easy to use PNG format. This kit has everything you need from a set of hand icons.

Radix Icons

Radix Icons is a set of 15px by 15px icons for tiny spaces. They are in a line style and are available in a variety of formats including Figma, Sketch, iconJar, SVG, npm installation, or GitHub.

Deepnote

Deepnote is a new kind of data science notebook. It is Jupyter-compatible with real-time collaboration and running in the cloud and designed for data science teams.

ZzFXM Tiny JavaScript Music Generator

ZzFXM is a tiny JavaScript function that generates stereo music tracks from patterns of note and instrument data. Instrument samples are created using a modified version of the super-tiny ZzFX sound generator by Frank Force. It is designed for size-limited productions.

Image Tiles Scroll Animation

Image Tiles Scroll Animation is a different type of scrolling pattern using Locomotive Scroll. The grid creates a smooth animation in a fun and modern style.

Bubbles

Bubbles is a Chrome extension that allows you to collaborate by clicking anywhere on your screen and then dropping a comment to start a conversation with anyone. This is a nice option for work from home teams.

Tyrus

Tyrus is a toolkit from the design team at Airbnb to help illustrators make the most out of their design businesses. It is broken into sections to help you with design briefs, originality, deadlines, and feedback.

PatchGirl

PatchGirl is an automated QA tool for developers. You can combine SQL and HTTP queries to build any possible state of your database.

Apparel

Apparel is a beautiful premium typeface family with plenty of versatility in a modern serif style. It is a contemporary, classy, and fresh serif typeface with a laid-back. Its medium-large x-height makes it ideal for headlines and brand identity design.

Christmas Story

Christmas Story is a nice solution if you are already starting to think ahead to holiday projects or cards. The long swashes and tails are elaborate and fun.

Nafta

Nafta is a fun handwriting style font that has a marker-style stroke. It’s a modern take on the popular Sharpie font. It includes all uppercase letters.

Safira

Safira is a wide and modern sans with ligatures and a stylish feel. The rounded ball terminals are especially elegant.

Shine Brighter Sans

Shine Brighter Sans is a super-thin sans-serif with a light attitude. The limited character set combined with its light weight is best for display use.

Source


Source de l’article sur Webdesignerdepot

/par

10 Reasons Your WordPress Site Will Get Hacked (and How to Stop It)

,

A hacked WordPress site is as damaging as having your home burgled. It can completely shatter your peace of mind and adversely impact your online business. 

Why do hackers target WordPress sites? The answer is relatively simple: WordPress is the single biggest platform for website creation these days, so there’s a larger base to attack; this attracts the attention of online criminals. 

So, how can a hack impact your website? 

Depending on the type of attack, your website could suffer any of the following:

  • It could be defaced completely;
  • It could load or operate very slowly on any device;
  • It could completely crash and malfunction;
  • It could display the dreadful “White Screen of Death”;
  • Its incoming visitors could be redirected to other suspicious websites;
  • It could lose all your valuable customer data.

This list is not exhaustive but you get the idea.

Now that we know how a successful hack can impact your website and online business, let us look at the top 10 reasons behind WP hacks and prevent them.

1. An Insecure Web Host 

Like any website, WordPress is hosted on a web host or server. Unfortunately, most site owners do not pay much attention to the web host they select and choose the cheapest they can find. For example, it is more affordable to host a website on a shared hosting plan — one that shares its server resources with many other websites like yours.

This can make your site vulnerable to hackers as a successful hack into any website on the shared server. A single hacked site can consume the overall server bandwidth and impact all the other sites’ performance.

The only way to fix this problem is to opt for a reliable host and a virtual or dedicated server.

Pro tip: If you’re already using a shared hosting plan, check with your hosts if they offer VPS hosting and make the switch.

2. Use of Weak Passwords

Weak passwords are the main reason behind successful brute force attacks that target your account. Even to this day, users continue to use weak and common passwords like “password” or “123456”; if you’re one of them, your website could land in trouble!

Guessing weak passwords allows hackers to enter the admin accounts where they can inflict the maximum damage.

How do you fix this problem? Simple, ensure all your account users (including admin users) configure strong passwords for their login credentials. With at least 8 characters, passwords must be a mix of upper- and lower-case alphabets, numbers, and symbols. 

For added safety, install a password management tool that can automatically generate and store strong passwords.

Pro tip: You can use a plugin to reset passwords for all your users.

3. An Outdated WP Version

Outdated software is among the most common reasons why websites get hacked. Despite being free to download, most site users defer updating their site to the latest version, for fears of updates causing their site to crash.

Hackers take advantage of any vulnerability or bug in an older version and cause issues like SQL Injections, WP-VCD Malware, SEO Spam & other major issues like website redirecting to another site.

How do you solve this problem? When you see a notification about an update on your dashboard, update your site as soon as possible.

Pro tip: If you are worried about updates crashing your live website, you can first test the updates on a staging site.

4. Outdated WP Plugins and Themes

Similar to the previous point, hackers also take advantage of outdated, unused, or abandoned plugins and themes installed on websites. With over 55,000 plugins and themes that are available, it is easy to install a plugin or theme, even from unsafe or untrusted websites. 

Plus, many users do not update their installed plugins/themes to the latest version or do not find the updated version. This makes it easier for hackers to do their job & infect sites.

How do you avoid this problem? As with the core WP version, update each of your installed plugins/themes on your site regularly. Take stock of all the unused ones and remove them or replace them with better alternatives.

You can update your plugins/themes from your hosting account.

Pro tip: We suggest setting aside time every week to run updates. Test them on a staging site and then update your site.

5. Common Admin Usernames 

In addition to weak passwords, users also create common usernames that are easy to guess. 

This includes common usernames for admin users like – “admin”, “admin1”, or “admin123”. Common admin usernames make it easier for hackers to get into admin accounts and control backend files in your WP installation.

How do you avoid this problem? If you are using any such usernames that are easy to guess, change them immediately to a unique username. The easiest way of doing it is through your hosting account’s user management tool, by deleting the previous admin user and creating a new admin user with a unique username.

As the first step, change the default username of your admin user and limit users who have administrator privileges.

Pro tip: WordPress has 6 different user roles with limited permissions. Only grant admin access to users who really need it.

6. Use of Nulled Plugins/Themes 

Coming back to the importance of plugins/themes, users have access to many websites that sell nulled or pirated copies of popular and paid plugins and themes. While these are free to use, they are often riddled with malware. They can compromise your website’s overall security and make it easier for hackers to exploit. 

Being a pirated copy, nulled plugins/themes do not have any available updates from its development team, hence will not have any security fixes.

How do you fix this problem? Simple, for a start, only download original plugins and themes from trusted websites and marketplaces.

Pro tip: If you don’t wish to pay for paid or premium plugins and themes, opt for a free version of the same tools that will have limited features but are still safer to use than the nulled version. 

7. Unprotected Access to wp-admin Folder

To take control of your site, hackers often try to break into and control your wp-admin folder in your installation. As the website owner, you must take measures to protect your wp-admin directory.

How can you protect your wp-admin folder? First, restrict the number of users having access to this critical folder. Additionally, apply for password protection as an added layer of security for access to the wp-admin folder. You can do this using the “Password Protection Directories” feature of the cPanel in your web host account.

Pro tip: Besides these fixes, you can also implement Two Factor Authentication (or 2FA) protection for all your admin accounts.

8. Non-SSL Website

You can easily migrate your HTTP website to HTTPS by installing an SSL certificate on your site. SSL (or Secure Socket Layer) is a secure mode of encrypting any data transmission between your web server and the client browser.

Without this encryption, hackers can intercept the data and steal it. Plus, a non-secure website can have many negative implications for your business – lower SEO ranking, loss of customer trust, or a drop in incoming traffic.

How do you fix this problem? You can quickly obtain an SSL certificate from your hosting company or SSL providers. It encrypts all data that is sent from and received by your website. 

Pro tip: You can get a free SSL certificate from places like Let’s Encrypt, but these provide limit protection that will only be sufficient for a starter site or small site.

9. No Firewall Protection

Lack of firewall protection is another common reason why hackers can bypass website security measures and infiltrate the backend resources. Firewalls are the last line of defence against hackers and work like the security alarm installed on your house. Firewalls monitor web requests coming from various IP addresses, including the suspicious (or bad) ones. 

They can identify and block requests that are known to be malicious in the past, thus preventing easy access for hackers to your website domain. Web application firewalls can thwart various attacks, including brute force attacks, XSS, and SQL injections.

Pro tip: A firewall provides much-needed security and is  your first line of defence. But it’s important to also have a malware scanner installed.

10. Lack of WordPress Hardening Measures

Typically, hackers target the most vulnerable areas or weaknesses within a WP installation, to illegally access or damage the website. The WordPress team has identified these vulnerable areas and has devised a list of 12 hardening measures recommended for every website.

A few of these include:

  • Disabling the File Editor;
  • Preventing PHP execution in untrusted folders;
  • Changing the security keys;
  • Disallowing plugin installations;
  • Automatic logout of inactive users;

How do you implement these hardening measures? While some steps are easy to understand, others require the technical expertise of how WordPress works. 

Pro tip: You can implement hardening measures on your own. However, some measures require technical expertise so in these cases, it’s much easier and safer to use a plugin.

 

Featured image via Pexels.

Source


Source de l’article sur Webdesignerdepot

/par

7 All-Too-Common Landing Page Errors You Must Avoid

,

And it does this 24 hours a day, 7 days a week, 52 weeks a year without ever asking for a pay raise.

But this is true only if your website landing page is designed well, maintained, and optimized to the gills. The art and science of a flawless landing page is beyond the scope of a single article, but we can start with helping you spot seven of the most common – and damaging – trouble spots.

1. Unclear Value Statement

Typically, new visitors to your page will only stay on it 3 to 15 seconds before they get distracted. In that span of time, you must offer a clear and visible reason to stick around and interact with the page.

That reason is your value statement. What value do your readers get in exchange for the time you ask them to spend? High-quality content is a must (and hopefully a given), but you also need to pull them in so they experience that content.

Does your landing page do that? If yes, great! If no, you should fix that. If you’re not sure, ask yourself:

  • Is there a compelling, visible headline that expresses the end benefits clearly and succinctly?
  • Is there a subheadline explaining your offering in more detail?
  • Are there supporting graphics that pull the eye toward your headline and subheadline?

If there aren’t, add them now.

2. Poor Signposting

Your landing page isn’t just there to be pretty. It’s meant to convince people to take action. If you don’t make it easy to find your call to action, most viewers won’t look for it.

deliver enough value to make it worth the hassle

You must make it clear — in as succinct and efficient terms as possible — why the action you want a reader to take will deliver enough value to make it worth the hassle. Tell them, in words that stand out from the rest of the page, what you want them to do next and what they’ll receive for doing so.

Improving your signposting stats by asking yourself the following questions:

  • Do you have a clear understanding of what the next step in a visitor’s customer journey should be?
  • Is it easy to find and take that step on your website?
  • Does your copy make a clear and compelling argument in favor of taking that step?

If you can answer yes to all three questions, your signposting is likely good (or at least good enough for now). If not, now you know what you have to do to improve it.

3. Slow Loading Time

Remember that 3 to 15-second maximum time limit we mentioned earlier? That span includes time spent waiting for your landing page to load, and every microsecond of that wait increases a reader’s likelihood of bailing on the whole thing. You must get your loading time to be as quick as possible.

Viewers who exit your landing page early – including while still waiting for it to load – increase your site’s bounce rate. Higher bounce rates reduce your rankings on Google and other search engines, meaning a page that loads too slowly not only impresses fewer viewers, but it also gets fewer viewers overall.

Improving your loading time is usually a job for your tech team or whoever in the office is responsible for overseeing your hosting service. That said, here are a few of the most important ways to optimize this important factor:

  • Optimize image size, file format, and compression;
  • Clean up your database by deleting saved drafts, old revisions, unused plugins, and similar virtual detritus;
  • Confirm that your WordPress theme (if applicable) is optimized for quick loading;
  • Use a content distribution network for file storage;
  • Analyze server response time with your hosting service, and work with them to reduce it;
  • Install tools that leverage browser caching;
  • Fix all your broken links;
  • Remove all render-blocking from JavaScript;
  • Reduce the number of redirects necessary to reach your page;
  • Optimize your code, especially in CSS, JavaScript, and HTML;
  • Enable file compression — except for on images;
  • Replace all PHP content with HTML wherever possible.

This is technical, detailed work, but it’s important. If you don’t have team members up to these tasks, it can be worth hiring an outside consulting company to do it for you.

4. Only One Landing Page

You have a good idea of your ideal customer’s hopes, fears, pain points, demographics, likes and dislikes, and other important information. If you have several different types of customers, you can’t use the same landing page for each of your customer groups. Each group has different characteristics that will prompt them to follow your call to action, so you don’t want to offer just one landing page.

Similarly, you also probably have more than one product or set of content and offerings to generate sales. Having only one landing page can lose leads because the page is only optimized for one of those products or content sets.

Ideally, you should have a unique landing page with a tailored offer for each of your customer models that would send those individuals to each of the products and content sets. An ad for professionals in their 30s making over $50,000 a year would lead to a landing page built for them, while an ad for heads of households working from home would lead to a landing page built for them.

Yes, that means a company with three profiles and four content sets would need 12 landing pages. And yes, it’s worth that kind of effort.

5. Insufficient Visuals

“A picture is worth 1,000 words” is ancient wisdom, but it’s far from true in the internet world – it’s actually worth more. A quick look at social media and blog performance will tell you many people will look at, enjoy, and share a photo or video, but not many will read an entire 1,000-word post on the same topic.

How well your landing page performs depends on the images you use and how you present them. Does your page’s layout conform to the best practices of visual web design:

  • Including images that emotionally reinforce the value expressions of your product’s core benefits;
  • Containing sufficient white space to not be intimidating;
  • Providing data images to indicate the worth of what you do;
  • Using visual design cues to lead the eye toward your conversion points;
  • Applying color gradients to highlight offers and your call to action;
  • Using infographics to replace the dreaded “wall of text”.

If you can say yes for half of these things, carry on. If not, this point may be among the better places to start with a landing page redesign.

6. Asking For Too Much, Too Soon

Craft a custom calls to action that meet all levels of interest, need, and desire

Not every landing page visitor is created equal. Some are hardcore fans and experts in what you do, ready for a 10,000-word white paper that dives deeply into the research supporting your use case. Others might have heard about your industry on an Instagram page and want to know the basics of what you do.

There’s nothing worse than going to a website and being asked for all of your personal information right away. If your call to action requires too much knowledge, too deep a commitment, or even too much personal information, consider scaling back. Otherwise, you risk turning away potential customers.

Better yet, go back to No. 5 above and build a new landing page for beginners and early-stage leads. Craft a custom calls to action that meet all levels of interest, need, and desire.

7. No Trust Elements

Offering some type of authentic customer referral or testimonial is important. It all boils down to the same thing: telling those who read your landing page that other people already like what you do and how you do it.

Examples of effective modern trust elements include:

  • Quotes from positive reviews next to a photo of the reviewer;
  • Screenshots of social media posts praising your company or product;
  • Short video interviews of happy clients;
  • Blurbs for industry thought leaders approving of you;
  • Images portraying business credentials and certifications;
  • Links to positive press coverage;
  • Logos of known business customers who buy and trust your brand.

Final Thought: What’s Next?

There isn’t one guaranteed way to turn a landing page from something full of holes into something perfect. But first, run an audit of your landing page using this list as a guide. Note which errors are there. Next, sort them in order of what takes the least time to fix to what takes the most time to fix.

Then, fix them in that order. We find that getting the quick fixes done builds excitement and momentum, whereas starting with a harder fix can mire down the whole process.

If none of these errors exist on your landing page, congratulations. There’s still lots of work to do on your website and content marketing, but it’s not among these rookie mistakes.

 

Featured image via Pexels.

Source


Source de l’article sur Webdesignerdepot

/par

12 Best Google Design & Development Tools

,

Google resembles an iceberg: there’s the part above the water we can see and use everyday; there’s also the part beneath the water, that we don’t see and know little about.

While many of us are concerned about the aspects of Google we don’t see — the parts that threaten our privacy, or monopolize the web — there’s no denying that Google offers some amazing products and tools, many of them free, all from the convenience of a single login.

Today we’re going to take a look at 12 tools from Google that really do bring something positive to the table.

1. Polymer

Polymer is an open-source JavaScript library from Google for building web applications using Web Components. The platform comes with a ton of libraries and tools to help designers and developers unlock the web’s potential by taking advantage of features like HTTP/2, Web Components, and Service Workers. 

The main feature of Polymer is Web Components. With Web Components, you can share custom elements to any site, work seamlessly with any browser’s built-in elements, and effectively use frameworks of all kinds. Products like LitElement (a simple base class for creating fast, lightweight web components) and PWA Starter Kit make Polymer easy to use. If you like, you can build your app entirely out of Web Components.

2. Lighthouse

Google Lighthouse is an open-source, automated tool for improving the quality of web pages. The software allows you to audit web pages for performance, SEO, accessibility, and more. You can run Lighthouse using ChromeDevTools, directly from the command line, or as a Node module. 

To use Lighthouse in Google Chrome, just go to the URL you want to audit (you can audit any URL on the web), open ChromeDevTools, and click the Audits tab. After you have run the audit, Lighthouse will give you an in-depth report on the web page. 

With these reports, you will see which parts of your web page you need to optimize. Each report has a reference doc that explains why that audit is important and also shows you the steps you can take to fix it. 

You can also use Lighthouse CL to prevent regression on your sites. Using Lighthouse Viewer, you can view and share reports online. You can also share reports as JSON or GitHub Gists. 

Lighthouse also comes with a feature called Stack Packs that allows Lighthouse to detect what platform a site is built on. It also displays specific stack-based recommendations.

3. Google Analytics

Google Analytics is the gold standard of analytics services. Google analytics can be installed on your site for free with a small amount of JavaScript and allows you to see all kinds of details about your site visitors, like what browser they’re using, and where they’re from.

By using Google Analytics you can make decisions about your site based on science, and therefore be somewhat confident that the decisions you make will result in the outcome you are expecting.

4. Flutter

Flutter is Google’s UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase. The toolkit is open source and free to use. The best part of Flutter is that it works with existing code. 

The toolkit has a layered architecture that allows for full customization, which results in fast rendering and flexible designs. It also comes with fully-customizable widgets that allow you to build native interfaces in minutes. With these widgets, you will be able to add platform features such as scrolling, navigation, icons, and fonts to provide a full native performance on both iOS and Android.

Flutter also has a feature called hot reload that allows you to easily build UIs, add new features, and fix bugs faster. You can also compile Flutter code to native ARM machine code using Dart native compilers. 

5. Google API Explorer

Google has a huge library of APIs that are available to developers but finding these APIs can be difficult. Google API Explorer makes it easy for developers to locate any API. On the Google API Explorer web page, you will see a complete list of the entire API library. You can easily scroll through the list or use the search box to filter through the API list. 

The best part of Google API Explorer is that each link to a reference page comes with more details on how to use the API. API Explorer is an excellent way to try out methods in the Monitoring API without having to write any code.

6. Puppeteer

Puppeteer is a project from the Google Chrome team. The platform enables web developers to control a Chrome (or any other Chrome DevTools Protocol based browser) and execute common actions, much like in a real browser. Puppeteer is also a Node library and it provides a high-level API for working with headless Chrome. It is also a useful tool for scraping, testing, and automating web pages. 

Here are some things you can do with Puppeteer: generate screenshots and PDFs of pages, UI testing, test Chrome Extensions, automate form submission, generate pre-rendered content, and crawl Single-Page Applications. 

7. Codelabs

Google Developer Codelabs is a handy tool for beginner developers and even advanced developers who want to improve their knowledge. Codelabs provide a guided, tutorial, hands-on coding experience. Codelabs’ site is broken down into several tutorial sessions on different topics. 

With the tutorials on Codelabs, you can learn how to build applications from scratch. Some of the tutorial categories include Augmented reality, TensorFlow, Analytics, Virtual Analytics, G Suite, Search, Google Compute Engine, and Google APIs on iOS. 

8. Color Tool

Color Tool makes it easy for web designers to create, share, and apply colors to their UI. It also measures the accessibility level for any color combination before exporting to the palette. The tool comes with 6 user interfaces and offers over 250 colors to choose from. 

The tool is also very easy to use. All you need to do is pick a color and apply it to the primary color scheme; switch to the secondary color scheme, and pick another color. You can also switch to Custom to pick your own colors. After you have selected all your colors, use the Accessibility feature to check if all is good before exporting it to your palette. 

9. Workbox

Workbox is a set of JavaScript libraries and Node modules. The JavaScript libraries make it easy to add offline support to web apps. The Node modules make it easy to cache assets and offer other features to help users build Progressive Web Apps. Some of these features include pre-caching, runtime caching, request routing, background sync, debugging, and greater flexibility than sw-precache and sw-toolbox. 

With Workbox, you can add a quick rule that enables you to cache Google fonts, images, JavaScript, and CSS files. Caching these files will make your web page to run faster and also consume less storage. You can also pre-cache your files in your web app using their CLI, Node module, or webpack plugin. 

10. PageSpeed Insights

PageSpeed Insights is a handy tool from Google Developers that analyzes the content of a web page, then generates suggestions on how to make the page faster. It gives reports on the performance of a web page on both desktop and mobile devices. At the top of the report, PageSpeed Insights provides a score that summarizes the page’s performance. 

11. AMP on Google

AMP pages load faster and also look better than standard HTML pages on mobile devices. AMP on Google allows you to enhance your AMP pages across Google. It is a web component framework that allows you to create user-first websites, ads, emails, and stories. One benefit of AMP is that it allows your web pages to load almost instantly across all devices and platforms hence improving the user’s experience. 

12. Window Resizer

When creating websites, it is important that developers test them for responsive design – this is where Window Resizer comes in. Window Resizer is a Chrome extension that resizes the browser window so that you can test your responsive design on different screen resolutions. The common screen sizes offered are desktop, laptop, and mobile, but you can also add custom screen sizes. 

 

Featured image via Unsplash.

Source


Source de l’article sur Webdesignerdepot

/par

Finding Your Way With Domain Mapping

,

It’s no secret that having a custom domain name is an essential piece of any company’s branding strategy. While there are a myriad of hosting plans available that offer domains like your company.webhost.com, making the shift from one of those to simply yourcompany.com is an important step.

However, your domain branding strategy need not end there. Domain mapping offers an opportunity for web developers and online business owners the ability to improve their marketing campaigns, protect their brands from competitors, cut down on costs, and develop a more efficient workflow.

What is Domain Mapping?

Domain mapping refers to how visitors to your website are directed to different domains and subdomains and what URLs will be displayed in the visitors’ browsers.

When you first set up your online business, one of the very first things that you do is register a domain name for your company website. But depending on the business, it could be wiser to actually register multiple domain names at once. This is because you will want to lease the primary domain name you plan on using in addition to all related TLDs. This way, cybersquatters will not be able to hold your domain name hostage, especially once you have grown into a more established brand.

For example, if you register the name yourcompany.com, you might also want to register yourcompany.net and yourcompany.org. Then you might set up a URL redirect so that visitors to the latter two sites will be redirected to yourcompany.com. However, with a domain redirect, visitors to yourcompany.net and yourcompany.org will be redirected to yourcompany.com, meaning the URL in their browser will appear as yourcompany.com no matter what they typed.

With domain mapping, this isn’t the case. A visitor to yourcompany.net will still see that URL in their browser even if the content is actually being hosted on yourcompany.com.

Benefits of Domain Mapping

Although domain mapping may seem a bit esoteric and complex at first, it serves several purposes and offers many benefits:

1. Make Web Addresses Easier to Remember

Imagine that your restaurant chain, Larry’s Lunches, just opened a new chain on 116th Street in New York City. Your first instinct may be to direct customers to larryslunches.com/116thstnyc, but that domain is a bit long and hard to remember. Instead, you might want to register the domain larrys116th.com for customers for that specific store.

With domain mapping, you can serve up the content from your main domain, larryslunches.com, while still having your visitors see larrys116th.com. This makes it easier to brand your sites without having to manage several different sites.

2. Boost Your Web Development Career

If you are a web developer yourself but are not admittedly well-acquainted with domain mapping already, you would do well to change that.

One of the easiest ways would be to look at online web development programs that one can take to read through documentation to get caught up to speed on how domain mapping can help their efforts and how to implement it. These kinds of programs can be more comprehensive than university courses and offer an impressive 88% job success rate for those who successfully complete the programs.

3. Shield Your Brand from Competitors

Remember, it’s a good idea to purchase several different related domains in anticipation of competitors snatching them up from you. Choosing the right domain names is essential to protecting your brand.

For example, Larry’s Lunches might want to snag larrysnyclunches.com and larrysfamouslunches.com as well. However, simply leaving those domains parked can be a bit of a waste, and managing multiple domains can be a pain in and of itself.

But with domain mapping, you can manage those domains just as easily as if they were your primary site, so you no longer need to leave them empty.

4. Save Time and Lower Development Expenses

Development isn’t cheap, and time is money. While the maintenance costs for a website are already high enough, adding in separate domains can sometimes break the bank due to the increased complexity of managing so many different moving pieces.

Domain mapping can lower expenses and save time by keeping everything tidy and in one place. By managing everything from a single WordPress installation, for example, you can push updates to all your subdomains at once, saving you from the tedium of going through each domain and making the same updates.

5. Manage Client Sites from One Place

If you’re a freelance developer or run an agency, using domain mapping for some of your clients’ sites can save you time as well. For example, if several clients want blogs, and you use the same infrastructure for them, you can easily push updates and changes to all of them at the same time. In short, domain mapping can make maintaining sites much easier and quicker.

How to Implement Domain Mapping

If you’re sold on the benefits of domain mapping, here’s a quick primer on the steps you’ll need to take to get started:

  1. Choose a domain registrar: The ideal registrar you choose should come with a number of important features including adequate hosting for keeping your website visitor friendly, SSL certification to ensure security, 24/7 customer support, comprehensive packages that make it easy to operate your online business.
  2. Register the domains you’re interested in: These can either be domain misspells (otherwise known as typosquatting), like youcompany.com, yourcmpany.com, etc, or related domains like yournewproduct.com, yournewlocation.com, etc. Whatever you decide to go with, you’ll need to have it registered before you can get started.
  3. Install WordPress Multisite: WordPress is one of the easiest ways to develop websites, and that holds true for domain mapped sites as well. Plus, considering WordPress sites account for over a third of the entire internet, you can’t go wrong with the famed CMS. All you need to do is install WordPress and, once that’s installed, open wp-config.php and add define(‘WP_ALLOW_MULTISITE’, true) above the /*.
  4. Configure your DNS settings: Next, you’ll need to point all your name servers to your hosting account. These changes can take up to 72 hours to go into effect.
  5. Add domains to your hosting plan: From your hosting platform, you’ll need to link your custom domains. You can usually do this from your cPanel.
  6. Map subsites to your custom domains: Once you have your domains set up, you’ll need to link them through WordPress. To do so, simply login and navigate to Sites -> Add New. After you assign them a subdomain or subdirectory name, you can click Edit and add your custom domain. Then just hit Save Changes, and you’re good to go.

Take note that domain mapping is not necessary for transferring a domain name. When you map a domain, you’re simply telling your domain where it can find your website on the internet through having your name servers updated. When you change your name, it only affects where the domain has been resolved.

The Bottom Line

While domain mapping isn’t necessary for all websites, it can still be a major timesaver. By utilizing it properly, you can greatly improve the standing of your online business by saving time and money, making website management easier, and improving the branding of your sites.

 

Featured image via Unsplash.

Source


Source de l’article sur Webdesignerdepot

/par