Tag Archives: fonts

The Top Mobile-Friendly WordPress Themes—and What Makes Them So Good

The post The Top Mobile-Friendly WordPress Themes—and What Makes Them So Good appeared first on HostGator Blog . When it comes to getting traffic, building an audience, and making sales, mobile is basically everything now. More than half the traffic on the web comes from mobile devices, Google now uses mobile-first search indexing, and the value of purchases made on smartphones and tablets this year will total $117 billion. If you plan to build a website , you need to choose a mobile-friendly WordPress theme from the thousands available. That can be a bit overwhelming. To narrow the field and get a better understanding of what makes a great mobile-friendly WordPress website theme, we looked at a few of the most popular ones— Astra ,  GeneratePress ,  Hestia , and  Sydney —to see why so many WordPress users choose them. What to Look for in a Mobile-Friendly WordPress Theme As you shop for a mobile-friendly theme for your WordPress website, keep an eye out for these key features.     1. Responsiveness is a must Whatever theme you choose must be responsive in order to display properly on mobile devices. That’s because a responsive template adjusts to the visitor’s device type by, for instance, changing from a two-column desktop layout to a single-column format for smartphones and resizing page elements to make them fit. This is a basic requirement for any mobile-friendly website . You can see how the Sydney theme adjusts from desktop to tablet to smartphone by reducing margins and, on phones, moving from three columns to one. However, responsiveness alone isn’t the only thing to look for in a mobile-friendly theme. Many other elements go into a truly mobile-friendly site design, and a good theme will support most or all of them.   2. Appearance matters for usability The best mobile site designs keep smartphone and tablet use conditions in mind. Think about how many times you’ve had to find a patch of shade to read something on your phone’s screen while you’re outdoors, or maybe you’ve had to adjust your device brightness or zoom in because the text was hard to read. Readable mobile design is clean web design , with uncluttered backgrounds, enough contrast between background and text for easy reading, and fonts that are large enough and simple enough (think sans serif, not script) for users to scan on a phone, even outdoors on a sunny day. Look for a customizer tool that will show you what your changes look like as you make the edits. Each of the themes mentioned in this post has a customizer utility and/or is compatible with Elementor, a popular free front-end page-builder plugin for WordPress that includes tools specifically for mobile design editing.   3. Google Fonts compatibility helps in several ways Astra and Sydney both support Google Fonts. This matters for typography options, because there are more than 800 font families in the Google Fonts directory. It also matters for your budget, because Google Fonts are free. And it matters for that all-important mobile page speed . Google uses caching and compression to deliver its fonts fast in the smallest files it can , so your typography won’t slow down your site and cause visitors to get impatient and leave.   4. Navigation is key to a good mobile user experience Good themes make it easy to get around your site on a mobile device with taps and touches, instead of relying on mouse and keyboard input. They also have a relatively flat site architecture with as few sub-levels as possible so visitors can go from your homepage to whatever product or post they’re looking for in as few taps as possible. Hestia and Sydney offer the simplest design approach, with a single-page site layout for mobile. That means visitors can find what they want without having to navigate between pages. Great mobile-friendly themes also include features that encourage visitors to stick around and interact more with your site. For example, Astra’s Pro version makes it easy for shoppers to find what they want in a WooCommerce store —sales bubbles, dropdown cart, and quickview tools all reduce your visitors’ need to move from one screen to another as they gather information and shop.   5. Performance is critical for search results and user experience Google says 53% of mobile users will bounce if a site takes longer than three seconds to load, but the a  average mobile site load time is an agonizingly long 15 seconds. So even the most elegant, simple mobile theme has to be fast and lean to be worth using. Bigger files take longer to load, which is why the best themes proudly proclaim how few resources they need. GeneratePress takes up less than 30KB with a default WordPress installation, while Astra uses less than 50KB and loads in half of one second. Both of these themes use Vanilla Javascript rather than jQuery to avoid render-blocking issues that slow down load times.   6. SEO friendliness helps your site get found Google’s moving to a mobile-first index for search results, but having any old mobile site isn’t good enough. The best themes for mobile are designed with SEO in mind and make it as easy as possible for search engine crawlers to find their way around. Hestia has an SEO-friendly structure, while GeneratePress and Astra have built in the schema.org structure that’s required for rich snippets to display in search results . All three of these themes as well as Sydney follow best practices for coding, which also helps with SEO.   7. WooCommerce compatibility helps you optimize your store WooCommerce is one of the most popular plugins for WordPress , and most popular themes are designed to be WooCommerce0compatible. Mobile-friendliness is crucial for online stores now because, by the end of 2018, half of all online orders will come from mobile devices , and more than 60% of all e-commerce traffic already comes from phones and tablets. Creating a mobile-friendly shopping experience for your customers can reduce cart abandonment , increase revenue, and encourage customers to keep coming back to your store. The Pro version of the Astra theme includes a WooCommerce module with grid view, gallery, and infinite scrolling options for your product catalog. Hestia and GeneratePress are also WooCommerce compatible.   Choosing Your Mobile-Friendly WordPress Theme As you’re searching for your ideal mobile-optimized WordPress theme, ask yourself how each one you look at stacks up in each of these areas. Take your time, read user reviews, explore each theme’s demos, and download a few and try them out before you make your decision. Find the post on the HostGator Blog Continue reading

Posted in HostGator, Hosting, VodaHost | Tagged , , , , , , , , | Comments Off on The Top Mobile-Friendly WordPress Themes—and What Makes Them So Good

How to Add Google Fonts to Your WordPress Website

The post How to Add Google Fonts to Your WordPress Website appeared first on HostGator Blog . Is Your Site Using the Right Font? Thanks to the growing number of mobile internet users, finding the right font has become a big project for site designers, publishers, and retailers. The BBC and the Guardian have recently debuted new bespoke fonts designed to be easier to read on phones—and save the companies money on licenses for commercial fonts. Even if you don’t have a flagship-media budget, there are ways you can update your site fonts for better readability, a more consistent appearance across browsers and devices, and faster page-load times to help your SEO. What Fonts Are Best for Your Site? Whether you’re a design fan or someone who likes to consider all the options, it’s really easy to fall down a rabbit hole of fonts. There are thousands of open-source fonts that anyone can download and use, and thousands more available for purchase. Because you want fonts that make your website easier to use and faster, it’s probably best to limit yourself to Google Fonts , a repository of open-source fonts that are easy to read on small screens and which cache quickly to speed up page load times. At this writing, Google Fonts offers a mere 848 font families, 823 of which work for English-language copy. To narrow down your 800-plus choices, you’ll need to apply some basic font choice principles , like those described by Janie Kliever at Canva. Two to three fonts is the ideal number for most sites. If you stick with only one, your site may look sterile and visitors may have a hard time figuring out which text is a headline and which is your main copy. More than two or three fonts can make the site look chaotic and amateurish. Choose fonts that have some contrast so that they create a visual hierarchy. For example, you could use a bold or serif font for your headlines so they stand out and a simple sans serif font for body copy so it’s easy to scan, even on a smartphone. Google Design gives a broader overview of typography, fonts, and how to find the best fonts for your site in their Choosing Web Fonts: A Beginner’s Guide . Among the things the authors say you should consider are: Are you designing your site for the long-term or short-term? Long-term projects often need font families with many style options. How long will your text blocks be? Even on-screen, serif fonts are a good idea if you’ll feature five or more paragraphs at a time. What size will your type be? Simpler fonts are easier to read at small sizes, but they may not stand out enough in headlines. Will your visitors translate your site into other languages? If so, you’ll need to choose a font family that supports multiscript characters so those translations display properly. The guide recommends a few fonts for specific situations to help you get started. You can also browse the entire Google Fonts library here .   Finding Google Fonts for Your Site When you’re ready to explore Google Fonts, it can be a bit of a challenge to navigate the somewhat clunky directory to find the right typefaces. As an example, let’s walk through looking for a serif font to use for headlines on a site for a petsitting business—something bold and businesslike but a bit playful. In the Google Fonts search filter sidebar, you can select the serif category and decide how you want the results presented—by age, popularity, or alphabetized by name. Under languages, you can narrow your results to typefaces that support English by selecting ‘Latin’ (confusing, but we do use the Latin alphabet). Next, you can check the boxes to open slider menus and fine-tune your options for number of styles (variations on the font, like lighter, bolder, or italic), thickness, slant, and width. By choosing ‘serif’ and ‘Latin,’ you get 174 options for your petsitting website headline font. Bree Serif looks like it could work. To see how your copy will look, you can replace the dummy copy with your text by inserting the cursor, clearing out the dummy text, and entering ‘Our Petsitting Service Menu.’ (You can also click ‘apply to all fonts’ so we don’t have to retype it.) You can use the slider menu to resize the text anywhere from 8 to 112 points. You can also use the dropdown menu on the left to see how your copy looks in a sentence or paragraph or the alphabet and numerals in that font. Clicking the + button adds Bree Serif to a tray at the bottom, where you can collect all the fonts you want to use. When you’re ready to install them, click the black tray bar and you’ll see HTML and CSS code to embed the font in your site. (More on this below.) You can download as many fonts as you like, but Google recommends that you don’t download everything “just in case,” because of the time and space it would take. How Can You Use Google Fonts On Your Site? If you’re comfortable adding code to your site, you can use the Get Started with Google Fonts API guide to using stylesheets to specify the font families and styles you want on your site. You’ll also find out how to drastically reduce the font file size for headings and logos by optimizing font requests. For anyone who’s not comfortable editing their own site code, there are several plugins for WordPress that can install and manage Google Fonts for you. One of the most popular options, with more than 300,000 installations, is Easy Google Fonts . With this plugin, you can avoid editing the code for your site’s theme and you get a menu of all Google Fonts without having to manually select and download any of them. The plugin adds a typography menu in the WordPress Customize section of the dashboard, where you can select font families, styles, color, and other text elements for each type of header and text in your site theme. You can see a realtime preview of what each change you make will look like; visitors to your site will only see your changes if you save and publish them. To change text elements that aren’t part of your theme’s default controls, Easy Google Fonts allows you to create your own font controls that will show up in the Typography menu. After you choose the Google Fonts you want to use and make sure they look right in the preview, you’re ready to save and publish to update your site.   Update Your Fonts, Upgrade Your Site By updating your site’s fonts, you’re not only giving it an updated look, you’re also building a better user experience. Faster-loading fonts that are designed for on-screen readability are the key to keeping visitors coming back, especially as more people do their browsing on their phones. Find the post on the HostGator Blog Continue reading

Posted in HostGator, Hosting, VodaHost | Tagged , , , , , , , , , , | Comments Off on How to Add Google Fonts to Your WordPress Website

Pros and Cons of Free Website Builders

The post Pros and Cons of Free Website Builders appeared first on HostGator Blog . So you’re finally ready to start building a website for your business! There is a plethora of website builders available on the web that you can use. Like most, you’re searching around for the best deal and are starting to notice ones that are offering free services. You’re intrigued! They look simple enough—and if you’re […] Find the post on the HostGator Blog Continue reading

Posted in HostGator, Hosting, php, VodaHost, vps | Tagged , , , , , , , , , | Comments Off on Pros and Cons of Free Website Builders

JQuery Slider in BV?

I am trying to create a slider in BlueVoda, like the Jquery Sliders. I have tried using layers, but I can’t seem to get them to automatically slide or fade between layers at all! I then saw the Jquery option in the install menu. I can’t seem to find any sort of tutorial or video that can go through the basics of doing the more advanced things, like creating a slider using this option in BV12! Can any one offer any advice or guidance on how to create slider in BV please? Continue reading

Posted in BlueVoda, Hosting, php, VodaHost | Tagged , , , , , , , , , , | Leave a comment

preview problem?

I am new at this,so please overlook my ignorance but i have tried several times to create a new website, and everything goes just fine to a certain point. I begin with a few pics and html codes and everything looks good in preview.However it appears to stop there. Continue reading

Posted in BlueVoda, Hosting, php, VodaHost | Tagged , , , , , , , , | Leave a comment