10 Real-World Reasons Designers Should Know SEO

For web designers today, creating a website can mean a whole lot than just functionality, usability and aesthetic appeal. Today, every new-born website requires a thorough integration of Search Engine Optimization (SEO) protocols to become crawlable and get indexed by search engines such as Google.

A good website can attract great amounts of traffic. However, to make sure your traffic is relevant, geo-specific, and hails from the target segment, you must utilize SEO properly. According to one piece of HubSpot research, 77% of people research a brand before getting in touch with it. This means your site design, structure, content, and marketing practices must be spot on if you want spectacular search results!

Both off-page and on-page SEO are imperative to the ranking process for any website on Google. Here, we are going to discuss why web designers should know about on-page SEO well enough to create a website that not only attracts visitors, but also ranks on top of Google search engine result pages (SERPs).

1. Higher Rankings

On-page SEO involves many elements such as HTTP status code, URLs and their friendliness with the search engine. Other aspects include the correct addition of meta tags, descriptions and further heading tags on your search link on Google SERPs. All of these elements make a huge difference in on-page SEO. Therefore, a web designer who knows these details must know when to apply them in the right order so that the website receives higher rankings on Google.

2. Greater Search Accuracy

With the growing number of internet users, the demand of the data has also increased. There are so many brands for a similar product, over hundreds of online stores, and numerous branches of the same brand. Before any potential customer makes an appearance in a store, they are highly likely to search them on the internet. The statistics clearly support this as 18% more shoppers prefer Google over Amazon for searching a product and 136% of times a search engine is preferred over other websites for the same purpose. Similarly, local searches lead 50% of the mobile users to take a tour to the nearby store within 24 hours. This further necessitates web designers to readily know about on-page SEO so that the client’s business page is more visible on web.

3. More Mobile Traffic

The state of inbound reporting suggests that generating traffic is one of the main marketing challenges faced by website designers and marketers. Website designers have the opportunity to integrate SEO metrics from the start and not only make the website more user-friendly, but device responsive as well. According to marketing technology facts by Sweor 57% of the mobile users abandon a brand’s website if it has a poor mobile responsive website. SEO helps you improve these flaws and add in high-quality visual content for better marketing. Designers can use this to their advantage and focus on building an attractive, rankable and responsive website.

4. Higher Engagement

In the present era, every online brand is reflection of how far up it is on Google rankings. On-page SEO helps build a strong network of internal linking that keeps the user engaged on the website by offering them more valuable information on the right time.

It also helps brings exposure to those sectors of the website that need more attention and helps generate a positive user experience from the visitor. This helps the brand focus on its goals and deploy different marketing strategies to boost revenues.

5. Impartial Benefits for SMEs

While large businesses may dominate the small ones in terms of size, operations and employee strength, SEO does not discriminate between SMEs and Large enterprises. SEO does not require a sizeable investment and most entrepreneurs and SMEs can afford hiring a few resources or even build their own department. However, SMEs with constrained budgets may not be able afford a dedicated department for SEO. Therefore, web designers must know SEO beforehand since there is no guarantee they will get any guidance from the company when the website gets live.

6. More Quality Traffic

Designing a website with proper on-page SEO helps Google’s spiders to crawl through your URLs faster and index your pages more relevantly on their SERPs. Research conducted by Moz suggests that 71.33% of clicks made on a website are present on the first page of search results. This means that more and quality traffic would be driven to your website generating more leads, increasing the conversion rates and ROI as well.

7. Using Innovative Technologies

Content has a direct effect on your customers. According MindMeld, 60% of the users have started using voice search features to interact with search engines when making queries. This means that the designers now need to optimize the website and content for voice search as well. According to Backlinko, the average word length that helps rank the website in the first page of Google is 1890 words. Also, the use of most suitable keywords gives your website ranking a boost bringing it on the first result page of the search engine. To get more advanced SEO features, web designers also deploy SEO extensions for more optimized performance and cost effectiveness.

8. Increases Page Loading Speed

Every website designer knows that loading speed plays a deciding role in online rankings as well as user experience. Some of the factors that lower the webpage speed are the large images, bad URLs and coding, and themes with too many widgets. Thus, knowing on-page SEO helps the designer avoid such errors when designing the website, improving its loading speeds far more efficiently as compared to when it is operational.

9. Greater User Experience

You must be wondering how SEO improves the UX, right? Well, good SEO offers informative, readable and highly usable content to the readers. Also, it helps to design a visually attractive website that is nicely navigated and performs well. These features make users happy and enhance their experience on the web page. So if you’re planning to leave a long lasting impression right from the start, you must put in some on-page SEO from the beginning.

10. Cost-Effectiveness

Its irrefutable that SEO has a great cost advantage. A skilled web designer knows how well systematic integration of on-page SEO can save costs that can pile up later if the website starts getting traffic. Everything from page titles, meta descriptions, meta tags, URL structure, body tags, keyword density down to image SEO must be prepared prior to its operation stage. Neglecting these key points can be detrimental to the website’s overall progress and may result on expensive retro-fitting at a later date.

 

Featured image via Unsplash

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2019/02/know-seo-on-page-seo-10-real-world-reasons-designers-should-know-seo/

Dogma Kills Design

It’s all in the title, really.

I am no stranger to dogmatic thinking. I was once a very religious missionary, and currently am an open source enthusiast, a web designer, and a gamer. Of all the dogmatic thinkers I’ve encountered in each of those fields, I’m not actually sure which scare me the most. Some are easily identified from a distance, but you never know who compiles their own UNIX-based OS from scratch until it’s too late.

We want to make amazing things, and/or a lot of money, and we often end up fixating rather rigidly on whatever we believe will achieve those goals

No, it’s not a one-to-one comparison, but bear with me here. I’m not saying anyone is likely to be purged in the name of free software, or because they’re on the wrong side of the Warframe vs. Anthem debate. But… it’s not completely outside the realm of possibility. Human beings in general can get a bit intense on occasion.

That’s what (I believe) dogma is, in our modern context: intense and very rigid thinking. Creative people are people of passion and drive. We want to make amazing things, and/or a lot of money, and we often end up fixating rather rigidly on whatever we believe will achieve those goals. Creative though we may be, we are not immune to the universal laws of irony.

The wonderful world of web design is thus a world of goals. We want people to engage, to interact, to stay, to buy, to tell their friends, and to be our friends if it comes to that. And then we want it to be accessible, and usable, but also based on up-to-date frameworks and it just gets confusing sometimes. To stave off confusion, we fall back on what we are pretty sure actually works. We stand our ground on a foundation of facts, and ideas that look a lot like facts, but are actually opinions.

We stand our ground on a foundation of facts, and ideas that look a lot like facts, but are actually opinions

That would be great if this weren’t an industry where the facts change on a daily basis, and everyone seems to have different facts in any case. Hold on too long to any fact or fact-like idea, and you’ll end up just being wrong.

That’s the irony of dogma. We cling to it to protect ourselves from uncertainty and the unknown. Often people cling to dogma in an attempt to shelter their communities from change. The result, of course, is stagnation. Communities, ideas, and industries that don’t evolve will always eventually die. It can take a while, but it’s inevitable.

Dogma kills thought, and halts the processes of mental evolution. Design is pretty much the visual representation of the designer’s thought process, and requires evolution to stay relevant. And so we come back to the title.

Ground Yourself With Principles, not “Facts”

Take browsers (and software in general) as the most blindingly obvious example of this principle: Internet Explorer 6 used to be nearly synonymous with the Internet as a whole. It was what nearly everyone used, and so it was the one browser you had to support. Now it’s Chrome.

As more and more browsers hit the market (there was a small explosion of them in the early-to-mid 00s), some designers and devs started asking questions like, “Well how many of these things are we actually supposed to support?”

They did not like that the answer was, “All of them, sort of.” Cooler heads then pointed out that there were ways to make sure every site you built functioned at some level in every browser. Nowadays we have names for these principles, names like: progressive enhancement, graceful degradation, and “generally not making your whole site depend on something only one browser supports right now”.

The first approach is based on a perceived fact, such as a short list of the “best” browsers to support. The second is based on the idea—the principle—that every site should work on every platform you can reasonably manage, given your resources.

For another example, remember when we stopped asking what resolutions we should be targeting and switched over to responsive design? Yeah, it’s like that. Imagine if we were still endlessly chasing “the ideal resolution”.

What about “big images sell more”? It’s a trend, certainly, but it is not a fact you can always depend on. It might be better to say, “visually arresting design sells more”. In this way, you do not limit yourself to using big images everywhere.

Accept the Fact That Facts Change, and Constantly Double-Check Your Assumptions

With your principles in place as a foundation for your design process, you’re free to follow the facts wherever they might lead you, without fear. However, that freedom comes with a responsibility: you pretty much have to be constantly double checking your information and your assumptions. That doesn’t mean you have to constantly change how you do things, just that you need to keep double checking.

Assumptions, I have found, go hand in hand with dogma as people tend to cling to things that sound true as tightly as they do to anything that actually is true. I’ve done it myself, and it’s always embarrassing when you figure that out later. Check your data, check your facts (there’s a difference, these days), and double-check your assumptions.

The First Changes I’d Make

If you ever find yourself saying anything like, “X framework/CMS/whatever is the best one out there.”, that’s it. Those are the first things I’d check. You may even be right, but you likely won’t be right forever. And even then, whatever you think is “the best thing” may not be “the best thing for the job”.

Check your data, check your facts (there’s a difference, these days), and double-check your assumptions

Then I’d double check any deeply held beliefs you might have about “Users”. Oh, Psychology 101 isn’t going anywhere, but the way we interpret our knowledge of human nature changes over time. Again, check your data, do your research. See what users really do.

Lastly—and I know this isn’t about web design as such—this assumption that logos are better if you drain all personality from them. Plainer is not necessarily better. (Look, I know there were problems with the old Slack logo mark, but this swastika-made-of-phalli thing they have now is not the answer.)

 

Featured image via Unsplash

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2019/02/dogma-kills-design/

3 Essential Design Trends, March 2019

Typography, color and distinct layouts are all elements that contribute to any design project. They are also elements of design that can trend over time.

That’s exactly what we are seeing this month as bold design elements are just the things that are making certain website designs come to the forefront. Here’s what’s trending in design in this month.

Bold Serifs

Big, thick lettering can draw attention and tell a story. And that’s just what designers are doing with the use of more bold, thick serifs in projects.

Thicker letterforms are a good choice for reverse typography or in situations where there is a lot going on to compete with the words. The challenge is that bold typography can be a little overwhelming when there’s a lot of it to read.

So, you have to balance viewability with readability.

When picking a bold serif, look for something that’s a mid-range weight and not overly thick. Look for letters with a more round shape; not too tall or condensed either, to encourage reading.

While many the examples below are focused on bold serifs only, the best advice is to pair them with a less heavy option as well. (Maybe mix and match the bold and regular weights of a typeface.)

Some users will equate bold type in the same manner as all caps, assuming that it is screaming at them. You can avoid this by using bold serifs with purpose for just a few key words or phrases and balance other screen elements so that it’s not a weighty aesthetic.

While this can be a somewhat tricky trend to use, you can see from the examples below that it can work rather nicely. There’s nothing wrong with going bold when it contributes to the overall meaning and content in the rest of the design.

Red Text and Accents

It’s like I blinked and red text and accents were suddenly everywhere.

This is an accent color choice that was wildly popular at one time and quickly faded out of fashion about the time flat and material colors emerged. (Brighter reds clashed with all the other bright color options.)

But red is back.

This color choice is interesting because it is so attention-grabbing. It can also create quite an emotional bond with users. Just be aware that people can really like red or really hate it; there’s not a lot of middle ground when it comes to a color that’s connected to passion, love, anger and fear.

In each of the examples below, red is the thing that draws you into the design.

With the interactive Adidas website for Footlocker, red elements tell you where to click and engage with the game. The colors seem to “lift” right off of the movie-style video playing in the background.

Branu uses red lettering to draw you in. On a stark white background with a simple video element, it’s just sharp enough to make you stop and look.

Finally, the conference website uses red to give you the information you need over a loop of b-roll in the background. The color helps you find the event dates quickly and pinpoints a key element in the main navigation.

While all three shades of red are a bit different, they aren’t that far apart on the color spectrum. Use of red is bright and saturated. It’s the hue you think of first and that toddlers first learn to color with. (There’s no softening this color trend right now.)

More Split Screens

At a glance split screens aren’t new. We’ve been talking about – and loving on – this website design trend for a while now. And this is one concept that seems to keep getting better with time.

The latest iterations of split screen designs are more aesthetic than stacked for responsive functionality (although that’s a distinct bonus).

Split screens aren’t stuck in perfectly symmetrical patterns either. None of the examples below features a perfect split – unless it is part of another element. Both ATB and Yusuf Ozturk’s sites feature animations within the split screen so that the screen elements actually shift to highlight content or interactivity.

ATB use hover action to move the screen left and right as users choose which path to take with the design. It’s a clever way to connect the human or machine learning experience.

Ozturk’s site opens with a center split screen with a brain in the middle; hover actions revel design on one side of the brain and development on the other to showcase what’s you’ll find in the portfolio site. The animation is clean and sharp, and you can actually get caught playing with it for a while.

VM Consulting has a more traditionally designed split screen but uses the right side as a giant navigation menu. The heavy blue side paired with the lighter navigation is brilliantly balanced and easy to understand. (The color palette helps make this design shine as well.)

Conclusion

Are these design trends just right or too bold for your projects? While I love everything about split screen designs, I’m not 100 percent convinced when it comes to thick serifs and red accents. (These just seem to need more sparing use to me.) What do you think? Let’s start a conversation.

What trends are you loving (or hating) right now? I’d love to see some of the websites that you are fascinated with. Drop me a link on Twitter; I’d love to hear from you.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2019/02/3-essential-design-trends-march-2019/

Popular Design News of the Week: February 18, 2019 – February 24, 2019

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.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Visualize a Website

 

How I Got Banned for Life from AirBnB

 

Why Parallax Scrolling Needs to Die

 

I Redesigned the Website Startmunich.de – The Conversion Rate Went up by 1.400%

 

What Defines Good UI Design?

 

5 Alternatives to Material Design

 

Spoofing Google Search Results

 

To Grid or to Flex?

 

Amino: Live CSS Editor for Chrome

 

First .dev Domains Go Live

 

Site Design: Peak

 

A Few Tips for Crafting your URLs for Improved SEO and UX

 

I Built a Physical Sketch Panel

 

I Made a Tool to Customise & Generate Common SVG Icons

 

Actiondesk: Workflow Automation

 

Web Usability: Importance of Fold in Web Design

 

Don’t Burn my Eyes. Mysterious Experiences. Dark Mode UI

 

The 5 Principles of Good Experience Design

 

A Designer’s Little Helpers

 

Browser-specific Hacks for Frontend Developers

 

The First Five Years: How to Stop Feeling like a Failure

 

Building the Wrong Product — 9 Antipatterns You Should Avoid

 

An Illustrated Avatar Collection for Developers and Designers

 

Museum of Failure

 

Frontiers of Design

 

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

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2019/02/popular-design-news-of-the-week-february-18-2019-february-24-2019/

15 Critical Website Fixes to Make Before Launching a Mobile App

Your target market has gone mobile. Mobile users spend up to 12% of their time browsing on their device, which works out to 87 hours a month or 1,044 hours a year spent on their phone; 90% of that time is spent using mobile apps.

Which is why having a mobile app can be so valuable for your business. No wonder everyone seems to be jumping on the bandwagon. Even 67% of small businesses now have a mobile app.

The problem is, many apps are just awful extensions of already bad websites. While you might feel the urge to dive straight into developing your own and racing it to the market, it’s a huge mistake. Mobile apps are a gateway to your site. So trying to implement them without some critical website optimization can directly impact the amount of time and money it takes to create the app.

Here are 15 website tweaks you should make before considering a mobile app.

Speed Optimization

Speed is critical to the user experience. Which means that if you want your website and your mobile app to provide a great user experience, the first thing you need to do is optimize your site speed.

Here are the tweaks you need to make, to do so:

1. Minify

Minification reduces the size of your website CSS, JavaScript, and HTML content. It works by removing any unnecessary website code, such as:

• Unnecessary code in your JavaScript;
• Unused spaces in your CSS;
• Unnecessary line-breaks in your HTML.

If you use WordPress, there are plenty of plugins available that will take care of this process for you, including Fast Velocity Minify and Autoptimize.

2. Compress

Text compression can also boost speed, especially on text-heavy websites such as blogs. Most Content Delivery Networks support the sending of compressed files so you can set up default compression through a tool such as Gzip.

If you don’t host your own website, you can use Check GZIP Compression to see if compression is already set up. If it’s not, the easiest way to install it is through a plugin such as W3 Total Cache, WP Super Cache or WP Rocket.

3. Maximize Caching

HTTP caching is when a browser stores copies of resources so that they can be re-accessed faster. Using an HTTP cache header, you can define when, how, and how long a response should be cached.

You can configure your server to attach the HTTP Cache-Control header and modify it for how long you want data cached. One way to do this is to add the header directly into your code.

Here is an example of a PHP header with a Cache-Control setting of max-age equal to 84,600 seconds (1 day):

header('Cache-Control: max-age=84600')

By setting a max-age expiration header, you will ensure repeat visitors are not slowed down accessing resources they downloaded before. Aim for caching as many resources for the longest period of time as securely possible. Then provide validation tokens for efficient revalidation of the resources that got updated.

4. Reduce JavaScript Load Time

JavaScript can cause delays, especially if you have large bundles of it. On an average mobile phone, processing these bundles can take 5–10x longer than on a desktop. You can combat this with code splitting.

Code splitting breaks your JavaScript bundles into pieces to deliver them faster and only as users need it. It can be applied at a route level or component level with tools such as React, Parcel, and Webpack.

5. Optimize Images

Visuals are important for user engagement, but the last thing you want is for them to slow down the user experience. Thankfully, there are plenty of tools on the market that will help you compress and optimize your images.

Here are a number of options to choose from:

One-off optimization tools:

• ImageOptim
• XNConvert

Automated optimization:

• Imageflow
• Imagemin
• Thumbor

Hosting and optimization:

• Akamai
• Cloudinary
• Fastly

6. Format Animated Content

The GIF format is popular for animations, but it was actually never intended as an animation platform. By switching to a more suitable video format, you can greatly reduce file size and speed up page times.

You can use the FFmpeg tool to convert animation GIFs into mp4 files. You can also use the Effective Type API tool to identify slow bandwidths, and automatically convert from delivering your animated images to much smaller JPEGs. While it does remove some of the user experience, it’s better than the site failing to load or operating unreasonably slowly.

7. Reduce Plugins

WordPress has over 54,000 plugins. While it is the largest platform on the market, even competing options still offer plugins in the thousands. There are plugins for practically anything you can dream up these days — ecommerce plugins like BigCommerce for WordPress, email marketing plugins like Mailchimp, and conversion rate optimization plugins like OptinMonster. Many of them add valuable functionality.

The problem is, too many plugins can slow down your site speed. First, make sure you don’t have anything installed that you’re not using. Next, uninstall any plugins for services that you can integrate with your website through other means. Google Analytics is a prime example. There is no reason to use a plugin for this integration when you can do it with an API key.

Finally, if you still have a lot of plugins look for some all-in-one solutions that can replace handfuls of niche ones. For instance, don’t use separate plugins for minification, compression, and caching when there is one solution for all three. However, perform your due diligence as some all-in-one plugins like Jetpack slow down your site more than any others.

How many plugins are too many? Here’s a general rule of thumb:

• No more than five if you have shared or budget cloud hosting;
• No more than 20 if you use cloud hosting, VPS hosting, or a dedicated server.

8. Use AMP

Accelerated Mobile Pages (AMP) refers to an open-source web programming language that delivers static content instantly to mobile devices. It’s basically a lean, stripped down version of HTML built specifically for speeding up non-interactive web pages on mobile devices.

Because it’s a stripped down version, you do trade-off some functionality for this rapid speed. Here are two potential drawbacks to be aware of:

• JavaScript is limited to an off-the-shelf AMP library;
• Lazy load functionality is enabled (images load as you scroll down to them);
• Lead generation may be impacted, as AMP often removes opt-in forms.

On the other hand, one of the biggest advantages (other than the improved speed) is that Google’s mobile-first indexing tends to promote AMP pages in search results. There are plenty of plugins to choose from for enabling AMP, including AMP, AMP for WP – Accelerated Mobile Pages, and AMP WP – Google AMP For WordPress.

9. Address Redirects and Broken Links

Redirects and broken links can kill your user experience as well as slow down your site speed.

Redirects

You’ll want to minimize redirects as much as possible, as they impact page speed and even the overall load time of your site. The delay tends to become even more noticeable when users are on mobile devices.

You can use a free tool such as Screaming Frog to check your website for any redirects. Once you’ve found some, remove any that aren’t needed and make changes to any that need to be updated.

If you have a secure site, you can also use HSTS to remove the SSL redirect.

Broken Links

Thankfully, there are also free tools you can use to find and fix broken links across your website. Two examples are:

• Broken Link Checker
• Xenu

Once you identify the broken links, you can either update them with the right URL or remove the linkage.

Both of these checks should be a routine part of your website management as redirects and broken links can crop up again over time.

10. Continually Test

We’ve covered nine significant methods for optimizing your page speed before introducing a mobile app. While this should significantly increase your site performance, you could still have more opportunities for improvement.

There are hundreds of tools for testing your website page speed and mobile readiness, but the best place to start is with Google’s PageSpeed Insights tool.

It will give you a current page speed score for both your desktop and mobile versions of your site and make specific suggestions on how you can improve.

The next step is to use Test My Site to further analyze mobile page speed and friendliness.

All you need to do is enter your website URL, and it will scan your site and evaluate. You can also get a free report containing optimization advice in exchange for submitting your email.

Site speed also provides huge SEO benefits. In addition to writing high-quality, long-form content and getting backlinks, site speed has a major impact on increasing website traffic.

In early 2019, I conducted a personal case study where I wrote as many guest posts as I could in 15 days. In that timeframe, I received 247 backlinks and a 372% increase in organic traffic.

However, this pales in comparison to the impact site speed has had on my mobile traffic. By boosting my mobile speed from 33 to 75+ over the same time period, I saw my mobile rankings increase 1,775% according to Google Analytics data.

UI Optimization

Speed may be at the top of the UX hierarchy, but it’s not the only factor. There are other components to consider, such as:

1. How easy it is to find what you’re looking for;
2. How well the site fits your mobile screen;
3. How simple it is to use;
4. How attractive it looks.

You can use the following site tweaks to streamline and maximize the user interface.

11. Simplify Your Structure

Your website needs to be intuitive and easy for users to navigate, especially when they’re trying to do so on the small screen of a mobile device.

Make sure your hierarchies are streamlined and that you have no more than one nested content level. Your ideal site structure should look like this:

1. Homepage
2. Categories (or sections)
3. Sub categories (only for larger sites)
4. Individual pages and posts

Focus on what your users are typically looking for and map out the common paths they will take. Then you can arrange categories in a hierarchy that will make the most sense to your audience.

You should also use knowledge base software to create a central resource or knowledge base for any users seeking answers to common questions.

This is about the simplest design tweak you can do that makes a lasting impact for both desktop and mobile usage.

12. Focus on Content Design

Designing your content around mobile can be a bit trickier, but it’s crucial for a successful mobile experience. A bad website design can kill your content on your app.

The bottom line is that you need your content to shine through with as few distractions as possible. To do this, you may need to remove elements such as tables, graphs, and other clunky elements that don’t translate well to the small screen.

You also need to strip down features such as headers, footers, menus, and sidebars so that they can be hidden or collapsed on smaller screens. Disable any hover-effects for your content as many mobile devices don’t have this functionality.

You don’t want to use too much text either. You can cut down on text by using tools such as Grammarly’s goals and audiences to help you create more concise copy that’s on point. Or, even better, focus on replacing text with more video content to maximize your mobile experience.

13. Reduce Banners and Sliders

Sliders have been popular for a while, but people typically add 5-6 high-quality images to a slider, which increases the overall load time of your website. Plus, studies show sliders annoy users and reduce visibility, especially on mobile.

Banners can result in similar problems, especially if they have any embedded text within the image. If you currently have any banners with text you should render the text with HTML & CSS instead of embedding it into the image. This will make it more flexible and easier to see on a smaller screen.

14. Optimize Forms and Touch Points

If your website has forms on it, pay attention to the field types, lengths, and labels. Everything should be clearly visible on any device. Enable functionality so that if a user taps on a field to enter information, the view zooms-in to the correct spot.

Check to see if you have field types that require a different keypad or touchscreen, such as a ZIP code, phone number, or electronic signature. If so, you should set the field to trigger the correct keyboard when tapped on, so users don’t have to switch manually.

Make sure all touch points and buttons will be visible and large enough to easily tap with a finger on a small screen. The standard recommendation is that they should be roughly 48 x 48 dp in size. Place text inside of the buttons rather than above or below it for easy identification.

15. Streamline Checkout

If you run an ecommerce website, this final tweak is for you.

About half of all ecommerce traffic comes from mobile devices, but when it comes to buying more people still do it on their desktops. This is likely because the entire flow of ordering, checking out, and paying is not properly optimized for mobile devices.

To identify where your process needs improvement, go through all of the steps across multiple devices and screen sizes and identify any pain points. The issue may be something we’ve already covered such as difficult form navigation or too small touch points.

However, even with these optimized, if you require a lot of data, it can still be painful to enter it all from a mobile device.

You can remedy this in one of the following ways:

1. Allow users to create profiles that will save and pre-populate their checkout information including shipping address and credit card number
2. Integrate with other payment gateways, such as PayPal that won’t require them to re-type their information.

Conclusion

Phone screens are getting larger, and tablets are getting more sophisticated, so it’s no wonder more of your audience is logging on and interacting through a mobile device.

A mobile app can be a great way to further engage with your users. But only if you optimize your website first to ensure a smooth user experience.

 

Featured image via Unsplash

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2019/02/15-critical-website-fixes-to-make-before-launching-a-mobile-app/

19 Contemporary Font Pairings for 2019

Typography is a fundamental part of design, it enables the designer to create a variety of moods and effects by using various font styles.

There are thousands of different styles available, so the task of finding the correct one to suit your project can often appear very difficult.

There are numerous tools online that offer assistance in selecting the correct font pairings. Here’s one we built ourselves. Using this handy font combination tool we have compiled a list of 19 contemporary font pairings for 2019. All of these fonts can be downloaded for free from Google Fonts.

1. Playfair Display with Source Sans Pro

This would have to be our top font combination for 2019. With it’s more traditional style, Playfair Display is both elegant and unique; it was designed by Claus Eggers Sorense, and can be paired with a variety of simple fonts, however, we think that Source Sans Pro is a perfect match, its thin lines and simple text make it a perfect combination for the more stylish Playfair Display.

Mount Barker By Callum Jackson

2. Merriweather with Oswald

A very versatile font, Merriweather can be adjusted both width and height, which always makes for a popular style. A sans-serif font, like Oswald, with its simple lines, assists in highlighting the detailed serif of Merriweather.

Remarkable Rocks by Ben Goode

3. Montserrat with Merriweather

Streamlined, simple fonts are always top of the list, because they work well in just about any design style. Montserrat was designed by Julieta Ulanovsky, and can be highlighted with a serif font such as Merriweather.

Uraidla By Ben Goode

4. Raleway with Lato

A stylish font that gives a modern twist, Raleway, can be complimented with another sans-serif font, like Lato. It has thin, simple lines and does not detract away from the more interesting shapes of Raleway.

Dolphin Beach by Ben Goode

5. Elsie with Roboto

A lovely feminine font, originally designed to celebrate the world of women. Elsie, is an adorable font style, with its gentle serifs and flowing lettering.  With such an interesting font, a subtle font needs to be paired with it, like for example Roboto, because it doesn’t detract from the seed font.

Two Hands Wines by South Australian Tourism Commission

6. Dancing Script with Josefin Sans

A very memorable font that creates a feeling of movement and intrigue, Dancing Script should be paired with a sans-serif font like Josefin Sans. This font is also very elegant and it’s very thin lettering brings the perfect balance between the two font styles.

Pennington Bay By Isaac Forman

7. Abril Fatface with Roboto

What a fabulous font style, Abril Fatface, has combined the use of serifs with beautiful simplicity. It’s bold and ambitious and really jumps out of the page, because it’s such a wow font, a very subtle light weight font is best paired with it.

Bunyeroo Valley By Ben Goode

8. Corben with Nobile

There’s something about this font that makes me think of bubbles and happy days. The unique use of rounded serifs, really makes this font different from others. A simple, slim font, like Nobile, makes the detail of Corben even more fascinating.

Wilpena Pound Resort – Old Wilpena Station By Tourism Australia

9. Spirax with Open Sans

This style of font lends itself to being used for a storybook or some fairytale movie, and was designed by Branda Gallo. It creates such interesting aspects with its unique swirls, that turn this otherwise simple font into one of mystery and complexity. It is beautifully paired with Open Sans, because it’s very simple.

Vivonne Bay By Raphael Alu

10. Wendy One with Lato

Designed by Alejandro Inler, Wendy One, is a very bold, fun font style, that gives a youthful feeling. A bold font such as this should be paired with something thin and streamlined like Lato.

Flinders Ranges By Jake Wundersitz

11. Baloo with Montserrat

Round and thick, Baloo was designed by Ek Type, and is a versatile font style, because it can be used in many different font weights and heights. Such a bold font like this, should be paired with a very simple style like Montserrat.

Grazing Land near Baroota Reservoir By Isaac Forman/Serio

12. Cherry Cream Soda with Josefin Sans

Happy times and good memories, Cherry Cream Soda makes you feel like you’ve stepped back in time to the 1950’s. It was designed by Font Diner, and is a fun and creative font. Due to its interesting design, it should be paired with a gentle font style, like Josefin Sans, as its subtle lines compliment the bold, unique text.

Para Wirra By Ben Goode

13. Amaranth with Open Sans

A font of many surprises, at first glance you think it’s a simple font, but take another look and you realize the slight curves that make this font something different. It can be used for many different design styles, because of its versatility in weight and size, and is best paired with a font like Open Sans.

Kati Thanda-Lake Eyre National Park – Wrightsair Scenic Flight by South Australian Tourism Commission

14. Palanquin with Roboto

A gentle, and extremely usable font, Palanquin was designed by Pria Ravichandran, and can be used in many different design styles. It looks amazing bold or thin, and has many different options for pairing fonts, however we think that Roboto is perfect, because it too is a very simple font.

Steingarten, Rowland Flat by Olivia Reynolds

15. Sansita with Open Sans

Created by Omnibus-Type, this font remind me of summer days and eating mexican food. With its twist on the serif it creates such an interesting font style, that needs a light weight, gentle font to compliment it, like Open Sans.

The Lane Vineyard

16. Waiting for the Sunrise with Rock Salt

Designed by Kimberly Geswein, a beautiful handwritten font, inspired by the writing style of a high school student. Waiting for the Sunrise, would be a perfect choice for a fun, youthful website, and can be used with another handwritten font like Rock Salt.

Cape Willoughby Lighthouse by Ben Goode

17. Eczar with Work Sans

Designed by Valibhav Singh, this font is one of excitement and intrigue. The features of Eczar are designed to intensify as it increases in weight. With all the details of this font, it should be paired with a gentle sans-serif font like Work Sans.

Skye Lookout By Callum Jackson

18. Catamaran with Montserrat

A stylish, simple font that can be used in many different weights and sizes. The slight angles on the stems of the letters, create a unique, interesting feature to this font. It should be paired with a thin font, like Montserrat.

Dolphin Beach by Ben Goode

19. Fascinate with Open Sans

Based on the styles of the Art Deco era, this font is sure to create interest, with its unique lines within the type.

Due to its interesting features, it should be complemented with a simple sans-serif font like Open Sans.

Mount Lofty Botanic Garden By Jonty Paterson

 

Featured image via Unsplash

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2019/02/19-contemporary-font-pairings-for-2019/