Tag Archives: web-design

How to Find an Affordable Website Builder

Posted on April 9, 2019 by Hosting

The post How to Find an Affordable Website Builder appeared first on HostGator Blog . You’ve had a great idea for a website for a while and you’re finally ready to take the first steps to getting it built. Congratulations! But you’re a little worried about figuring out how to get started and, even more importantly, how to pay for building a new website. The good news is that you no longer have to choose between spending a lot of money on a professional website designer or learning how to code to do it yourself. You can build a website all on your own with limited to no web design skills by using a website builder. Even if your budget is especially limited, you can still find an inexpensive website builder that’s within your price range. Should I Use a Free Website Builder? Before we get into how to find a good affordable website builder, you may notice in your early research that there are actually some free website builders on the market. Even better than cheap ones, right? Not necessarily. Any company that offers a website builder has to make money in some way, so free website builders usually have trade offs or limitations that make them less useful than paying for an affordable website builder. There are a few common forms this takes: Ads – If they’re not making money from you directly, a website builder company may make their money by serving ads on your site. That could make your site look more cluttered and tacky, and distract your visitors from the messaging you want them paying attention to. Shared branding – In addition to serving ads, some website builders treat your website as a way to promote their brand. That could mean their logo somewhere on your page, or even right there in your URL, which would look something like yourname.theirname.com. This sets your own branding back by making it hard for visitors to differentiate you from the website builder’s brand and see your website as having a memorable, unique identity. Limited pages – This is a common limitation with free plans. In some cases, the most you can build on a free plan is a one-page website. That doesn’t give you much room to work with. Limited bandwidth – This is another big one. The amount of bandwidth you have affects how long your site takes to load and is especially an issue on sites that have media elements like audio, video, social media displays, or animation, which require more bandwidth to load. Visitors won’t wait around for a slow site to load, so if your website builder doesn’t offer enough or unlimited bandwidth, you’ll lose visitors because of it. Important features require a paid upgrade – For a lot of the companies that offer a free website builder plan, it’s a way to get your foot through the door so they can, eventually, convince you to upgrade to one of their paid plans. They do this by limiting the features in the free plan so that you’re likely to realize over time that actually you do need one of the paid plans. If none of that sounds like an issue for you, keep in mind that there’s still a catch: for most of these free website builders, if you create a website and decide down the line you want to switch to a different website builder, you can’t take what you’ve already built with you. You’ll have to start from scratch. If your website’s URL is a subdomain of the website builder’s URL (e.g. the yoursite.theirsite.com situation we described earlier), any visibility you’ve built for your initial website will be lost as well in the move to a new URL. In other words, if your website is a personal passion project and you’re sure you won’t ever care about personal branding, ecommerce website options, or other brands’ ads on your site, then a free website builder could make sense. For everyone else, you’ll be better off starting with the right affordable website builder so you can stick with it as you grow.   How Much Do Affordable Website Builders Actually Cost? Paying for a good website builder doesn’t have to break your budget. The most affordable website builders cost in the range of $4-$25 a month . Most companies offer several web builder packages , so pay attention to how the costs and features compare for the different plans. If there are any features you’re okay without now, but you may want in coming years, be aware now what the cost of an upgrade will be. You don’t want to pick the option that seems the cheapest now, only to pay more over the long-term when you need to upgrade to a business website and switch out your basic plan. Also pay attention to the deals you sign. In many cases, a lower cost comes with a longer-term commitment. That could be fine if you do enough research going in to be sure of your choice, but you don’t want to feel stuck with a website builder you don’t like because you agreed to a three-year commitment to save a couple of bucks a month. What Features Should I Look for in an Inexpensive Website Builder? When you’re weighing your options, be sure to consider the features each website builder has to offer, not just the cost. The cheapest plans may be missing key features you need, especially if you run a business website, and paying just a little bit more could get a website builder with all the functional benefits you need both now and in the long term. While there are many benefits of using a simple website builder, it’s still important that you outline your future site goals so you choose the best website builder plan for your future. Here are some of the top features to consider when browsing different website builders. Necessary Features To start, there are a few features you definitely don’t want to skimp on. Consider these a necessity when perusing your options. A website builder that doesn’t offer them won’t provide what you need for a successful website. Ease of use – If you have to spend hours learning how to use a new website builder, then it’s not providing a great value—even if it didn’t cost much. Your time is worth something too. Look for a website builder that boasts drag-and-drop functionality and intuitive editing tools. Ideally, you should be able to jump right in and start building your website the same day you purchase. Educational resources – While a good website builder shouldn’t require you to spend much time learning the ropes, a good library of educational resources (tutorials and articles) will ensure that you know all the different features available, are able to make the most of them, and have access to easy answers whenever you have a question. Customer Support – Just as importantly, any time you run into confusion and need assistance from an actual human being, you should be able to trust someone will be available and helpful at the moment you need them. Check that your website builder offers customer service and has a good reputation for it. Website Templates – Building a website with a website builder usually starts with design templates. By having a well designed starting point, all the other changes you make come much easier. And having a good looking template to start with really makes a difference in the quality of the end result. Look for a website builder that offers multiple templates for you to choose from, and you’ll have no problem creating a beautiful site . Mobile-friendly compatibility – People now do more of their browsing on mobile devices than on their computers, which is exactly why you need a mobile responsive website. If your website does not have a responsive design, you’ll lose visitors. Plain and simple. For a website that all your visitors can interact with, go with a website builder that makes it easy to make your website mobile friendly. Nice-to-Have Features Along with the essentials, there’s a good chance you’ll want your website builder to offer some useful additional options. These won’t necessarily be required for all websites, but they’ll be important for some to have and useful for others. Multiple pages – Before you choose a website builder, consider how many pages you’ll want your website to have. And not just right now, will you need room for it to grow in the months and years to come? Some of the most affordable website builder plans put a limit on the number of pages you can create. That will be fine for some sites, but become a big problem for others. Custom domain – Most website builders that you pay for will offer the option of having a custom domain. With many, you’ll need to pay separately for the domain name, but some will include it in the cost. Confirm if you’ll be able to use a custom domain at all, and whether or not you should anticipate it costing extra. SEO (search engine optimization) features – Creating a website is one thing, getting people to see and interact with it is another. If you care about people finding your website, then you should start thinking about SEO now. Check for helpful SEO features that make it easy to perform on-site optimization for your pages (customizing the fields that matter to Google, such as your URL, title, and image tags). Media features – Will your website ever include media like audio or video? If so, make sure the website builder you choose is set up for the bandwidth those feature require and make it easy to load them to your site. Security features – Hackers abound, which is why you must protect your website from hackers at all costs. If your website isn’t secure, you risk hackers taking it over or stealing sensitive information your customers provide you. Security features like an SSL certificate or compatibility with security hardware are crucial if you’ll be accepting payment information through your ecommerce store, and are still useful to have if you’re not. E-commerce functionality – Will you be using your website to sell items on an online store? If so, a website builder that allows you to add a shopping cart and secure checkout process is a must.   Your costs when investing in a website builder will have a lot to do with which of these features you need, and which you can easily live without. Even if you need some advanced features though, you can still save money when looking for an inexpensive website builder. 4 Ways to Save Money When Investing in a Website Builder If looking at your options still has you worried about the costs of getting the website builder you need, there are some potential ways to make the money you spend go further. 1. Only pay for what you need. If your website will be fairly simple and you don’t expect much traffic from day one (most people won’t get a lot of traffic right away), then you don’t need to invest in a high-level website builder plan with lots of different features. Figure out what features you actually need now, and find the most affordable website builder that offers those. But do also consider the features you anticipate needing in the coming years as you grow, and consider the cost of future upgrades when making your decision. The most affordable option for the long term may be different than the one that’s cheapest for right now, and you may be better off spending a little more now to save later. 2. Look for bundles or packages. Some website builders include other services you’ll need in the price. For example, HostGator’s website builder comes with free web hosting —something every website requires to go live on the web. Web hosting is another monthly cost, so saving that money pays off for you in the long term. Similarly, if a website builder package allows you to register a domain name for free or includes free ecommerce features, that could save you money on services you’d be paying extra for anyways. Pay attention to what’s included in the website builder packages you consider before making a final decision. 3. Wait for specials. Like any other type of business, the companies that provide website builders often offer specials and sales. Making your purchase at the right time could earn you a discount. Often these fall at the times of year that sales are common for other companies, like Black Friday, Labor Day, or  Memorial Day. If you have your eye on a particular website builder, or a few, sign up for the company’s email list so you’ll be alerted if the company’s plans go on sale. Many website builders offer referral or affiliate programs , so you may be able to score a discount at any time of year if you have a friend that’s a current customer or you learn about the website builder from an affiliate who provides a discount code. And you can save money on your renewals over time by taking advantage of those programs yourself and sharing your discount code with others. 4. Pay for a couple of years upfront. Many website builders offer a different monthly price to customers that sign up for a long-term commitment. If you’re not entirely sure about the website builder you choose, this option could be risky. But if you’re confident you’ll be sticking with your website builder for years to come, then agreeing to be a customer for one, two, or three years and paying upfront can save you a considerable percentage versus paying month to month and reserving the right to cancel at any time. Get Started with an Affordable Website Builder You could easily spend weeks studying up on all the different features and options available in different website builders. Or you can cut the process short by checking out HostGator’s website builder to see if it matches everything you need. If you have any questions about how it all works and what’s included, our support team is available 24/7 to provide answers. And you won’t have to worry about finding and buying web hosting separately, as it comes included (and from one of the most well respected web hosting companies out there). Find the post on the HostGator Blog Continue reading →

Posted in HostGator, Hosting, VodaHost | Tagged , , , , , , , , , | Comments Off on How to Find an Affordable Website Builder

Responsive Web Design Examples

Posted on April 5, 2019 by Hosting

The post Responsive Web Design Examples appeared first on HostGator Blog . When building a new website or considering a new design for a site you already have, one of the best ways to clarify what you want and get some inspiration is to spend time looking at examples of other websites. For web designers, looking at the layout or design of other websites can spark ideas for how to approach the website you’re working on. And for business owners or amateur website owners who struggle to communicate what they want visually, it’s much easier to analyze what you like and don’t like about another website than it is to figure out what you want from scratch. For modern website design projects, it’s not enough to spend time perusing website examples on desktop alone. A majority of web users today do their searching, browsing, and shopping on mobile devices. When you’re building your website, you have to think about mobile. And that means when you’re searching for inspiration you should as well. What you need is to look for responsive web design examples. What is Responsive Web Design? Responsive web design is the dominant trend in web design today. Responsive websites are designed to look good on all possible screen sizes, while still providing the same information and page elements no matter the device. Designers pull this off by changing the way page layout elements are organized on the website, rather than changing what elements are included. For a simple example, a website that has text and and an image show up side by side on a desktop screen could have the text move below the image when the same page loads on a mobile device. In the coding, designers tell websites how to recognize the type of device or screen size the site is loading on, and change how it appears accordingly. Hence the name “responsive website design”—the website responds to the screen size it’s being viewed on. Responsive website design has become the norm because it’s Google’s preference, which makes it good for search engine optimization (SEO), and because it provides a straightforward way to ensure your mobile visitors get a good experience without having to design a separate mobile website. Having one responsive website versus different websites for different devices saves you the trouble of having to do twice as much work during the initial design phase and for ongoing maintenance. And it means your website will work on the growing range of device types and screen sizes that have now come onto the scene.   In short, whatever type of website you’re looking to build, responsive web design is widely considered the best choice. Why Look at Responsive Web Design Examples? Looking at examples of responsive web design with a flexible layout is a valuable way to come to your own website design project with clearer idea of how you want your website to look. In particular, reviewing examples will help you do a few things. 1. You can see different organization styles. One of the challenges of responsive web design is figuring out how to organize both your website in general and each individual page in particular in a way that remains intuitive and useful no matter the device type. You shouldn’t assume your own experiences and preferences are good enough for this. By looking at the choices other skilled designers have made, you’ll gain an understanding of the overall best practices in responsive website organization. 2. You’ll see how different types of websites approach responsive web design. Different types of websites have different goals. An eCommerce website has the goal of driving sales, while an entertainment site wants to you spend time on the site consuming content. When you view a lot of different responsive websites, you’ll start to see how the different design choices are influenced by a website’s particular goals. That’s good information to bring into your own website’s design. 3. You’ll get a feel for how a good website hierarchy works. Designing your website with a visual hierarchy means thinking through which parts of each page are most important and making sure the design centers them. A common website building mistake is not creating a mobile-responsive web design. It’s especially important for responsive web design, where many of the visitors viewing your website on smaller devices will see less of the page they’re on at a given time. You want to make sure that the most important parts of the page are placed higher up in the design, and that key features and links like your main menu and call to action (CTA) are easy to find. 4. You’ll gain insights into why designers organize things the way they did. As you browse different websites, think about why pages are organized the way they are. Analyze the design choices made in each case: consider how images are used, and where different links, buttons, and other features are placed. Think about the usability of the site and how the overall viewing experience is compared to others. Don’t just take in how the website looks on different devices, think about why. Asking those questions will reveal insights that help you make better design decisions for your own website. 5. You may see examples of design choices to avoid. You can learn a lot from good responsive web design examples, but you can learn just as much from those that don’t work for you. As you browse a website and click around to see different pages or take different actions, pay attention to anything that’s harder to do on a small screen than a desktop. Consider any page elements that don’t look quite right on some screen sizes, because they were clearly designed for others. Those insights will help you determine what not to do. How to Look at Responsive Web Design Examples You don’t have to go out and buy a multitude of device types to see how responsive websites look on all of them. A number of handy responsive design testing tools will let you see how websites look on different screen sizes all from the same device. If you have a computer, tablet, and smartphone you can use to supplement your research, it’s always good to get that more direct experience as well. But to see a larger number of examples in a more efficient way, a tool like Resizer (which we used for all the screenshots below) will make the process more efficient. 15 Responsive Web Design Examples Now that we’ve laid out a convincing argument for why you should pay attention to a variety of responsive web design examples, we’ll help you get right to it. We’ve compiled a list of responsive websites with a variety of website types and subjects covered. Business Responsive Design Examples Every business needs a website these days, and every business website should be responsive in order to reach prospective customers no matter how they come to your site. Here are a few examples of businesses that got the message and created responsive business websites. 1. CliftonLarsonAllen LLP Finance, outsourcing, and tax firm CliftonLarsonAllen is a good example of visual hierarchy in a website. You’ll notice all three of the main versions of their responsive website center the same image, message, and call to action (CTA) button. Can you tell what action they want visitors to take? Each website version also provides a number of clear links to learn more based the types of services the visitor is interested in, all of which are easy to spot as you scroll (or right there on the first screen in some cases). 2. The Living Well Women’s health and wellness company, The Living Well , has a simple image-focused website that provides the same information across device types. The initial logo, tagline, and menu items are visible on all versions and communicate what the business is all about. And prospective customers can learn more about the women behind the business and the specific services available by scrolling down, clicking on the relevant links obvious on the page, or following the social buttons that are visible on all screen sizes. 3. Yard Bar The dog park bar and restaurant Yard Bar also has a responsive website that centers images. The sliding images prominently feature the main things you need to know about the business: it’s all about food, drinks, and dogs. Across devices, scrolling down provides more information about those three main categories, plus happy hour times. Anyone visiting the site from any device can quickly learn what the business is about and the main information they need to know before heading over. 4. Bonsai Freelance business software company Bonsai has a clean and clear responsive website. Like CliftonLarsonAllen, they make the main message and CTA clear on the site across devices. The website offers a good example of moving or removing certain elements that are less important on the smaller screen. While for the most part, the page is the same across the devices, the larger screens have a form for providing your email right there on the page. To save space, the mobile version moves the form off the home page, but keeps the CTA there (once you click, you get to a form field). It makes the space look cleaner, while still providing the same basic information and options. 5. Salt Lick Cellars The winery Salt Lick Cellars is another business website that centers images, which makes sense for a business in an industry that often draws customers in with beautiful views. While the cut of the main image on the smartphone screen is smaller—you don’t see as expansive a view of the photo, you still get the main idea of it, along with intuitive access to the menu (a hamburger menu in the top right), and an image directing you to scroll down for more information. eCommerce Responsive Design Examples While business websites have an ultimate goal of trying to sell a product or service, eCommerce websites are trying to make the sale in a more direct fashion—right there on the website itself. It’s worth seeing some examples of how different eCommerce sites use their responsive design to do that across devices. When designing an eCommerce website , it’s especially important that you make your site mobile responsive and easy to use. 6. Paper & Ink Arts Paper & Ink Arts has all the same elements on its mobile homepage as on the desktop and tablet versions, but because of the way the same elements take up different amounts of space, the homepage has a bit of a different feel between devices. The image slideshow that dominates the screen on the larger devices, becomes a smaller banner on mobile in order to make room for other promotions. And the menu is squished into a hamburger menu in order to make space at the top for easy access to search, contact information, and the shopping cart. The choices make clear the company’s priority to make sales, and make it easy for visitors to get in touch. 7. Penzeys Penzeys looks like they designed their main menu with the mobile experience in mind. With four simple categories that take up a narrow amount of space on the larger screens, the menu fits perfectly on the smartphone-sized screen. All three screens make the checkout button in orange and free shipping offer in red in the top right corner obvious. While all versions let the central image that dominates the screen be the tasty-looking images of recipes you can make using the company’s spices (a compelling reason to buy). 8. Bon Bon Bon Like many of the business websites, chocolate shop Bon Bon Bon puts an image with an obvious CTA front and center. It has an image slider, so the image and CTA change, but the CTA is always in a bright red button. As with Paper & Ink though, Bon Bon Bon lets the main image get smaller so it’s more like a banner ad, in order to let some of the other page elements onto the screen on mobile. And the shopping cart and Information link to find contact information remain clear at the top on the mobile screen. 9. Chewy.com The online pet supply store Chewy.com looks very similar across the three devices, with the main difference being the common responsive choice to make the menu into a compressed hamburger menu. This is a rare example of a responsive website where the main image on mobile doesn’t load to fit the screen—you notice it’s cut off, but visitors have the option to scroll left to right to see the parts of the photo you can’t see here. All three versions prominently feature the search bar, to make it easy for visitors to find specific products. And all have the obvious 30% off offer in orange. 10. Pacha Soaps Pacha Soaps has a pretty similar look across devices. As is common in the other websites we’ve seen, they have sliding images that dominate the screen in all three versions. Unlike some of the other examples, the image takes up more screen real estate rather than less on the smartphone screen. While small, they keep the brown menu with their free shipping and social handle information present throughout screen sizes, while switching to a hamburger menu for their main menu on the smaller screen. Personal Website Responsive Design Examples Even if you’re building a personal website to share your passion, rather than sell products or promote a business, it’s worth making your website responsive. Here are a few responsive web design examples from personal websites people have built around their passions. 11. The April Blake April Blake’s blog is primarily focused on sharing recipes she cooks and occasional musings. Her website looks very similar across screen sizes, with just a couple of small differences. The social icons at the very top of the page on desktop are removed on the smaller screens, and the main menu is compressed to a hamburger menu. Otherwise it’s simply a matter of re-arranging the elements on the page to better fit the screen. 12. House of Hipsters Kyla Herbes home design blog, House of Hipsters , changes little between device types. The menu switches to a drop-down menu, the title banner at the top becomes smaller, and the right-side menu moves down the page on the smaller devices. But otherwise, the site’s essentially the same no matter where you’re coming from. 13. I Am Aileen Lifestyle and travel blogger I Am Aileen ’s responsive website centers a image slideshow on all device sizes, with an obvious search bar and social icons above it. The main menu becomes a hamburger menu on mobile, and the boxes of content and images below the main image become stacked on the smaller screen. 14. The Frugal Girl The Frugal Girl blog keeps the logo and tagline visible at the top across website types, and centers the top blog post in all three versions. The main menu becomes a hamburger menu on the smallest screen, and the information and images in the right-side menu get pushed to the bottom. 15. Budget Bytes Finally, the recipe site Budget Bytes centers the image and details of the most recent recipe on all device sizes, but moves the details and name below the image on the mobile device. The logo and website name show up at the top in all three versions. And, as is common in our examples, the main menu is replaced with a hamburger menu in the mobile version, along with a search icon to make more space at the top of the screen. While the images and names of additional recipes show up side by side below the main image on the two larger screens, they become stacked on the mobile device. Ready to Create a Responsive Website? As all these examples demonstrate, there are a number of ways to organize a responsive website that works equally well on all device types. And you don’t have to be a big business with a large budget to create a responsive website—many of these examples are of small businesses or individuals. If you want a simple, affordable way to create a responsive website, the Gator Website Builder has over 100 responsive templates that provide a headstart to putting together a website that looks good and works across device types. To get started with building your website, give our professionals a call at HostGator to find the right web hosting option for you. Find the post on the HostGator Blog Continue reading →

Posted in HostGator, Hosting, VodaHost | Tagged , , , , , , , , , , | Comments Off on Responsive Web Design Examples

Web Design Trends 2019

Posted on March 29, 2019 by Hosting

The post Web Design Trends 2019 appeared first on HostGator Blog . Looking at the latest web design trends will allow us to peer into the future of where the web is headed. This doesn’t mean you need to fully switch up your current design to adhere to the latest trends, but they’re good to keep an eye on nonetheless. If your website has been in need of a makeover, then maybe this will be the year you finally switch things up. If you want to learn how to create a beautiful website that follows the latest web design trends, HostGator can help. If anything this year bodes well for web experimentation. It seems that people are bored with the same old same old and want a new and exciting take on classic design. This doesn’t mean making sites so experimental that they’re hard to use, but instead more interesting, engaging, and unique. Learn about the biggest web design trends in 2019 and what they mean for the future of your website. Then, we’ll include a website builder comparison to help you decide on the best option for you and your needs. find the best website builder to bring these to life on your website. 1. A Focus on User Experience Offering your visitors a solid user experience should be at the top of your list. Today’s web users demand an enjoyable user experience above all else. If your website is confusing and hard to use you’re not only going to be annoying your visitors, but you’re going to cost your business a lot of money. This is doubly true if you’re directly selling anything through your website. The act of finding a product, adding it to the cart, and completing the purchase should be entirely seamless. In the past it seemed like web design trends and most websites would neglect the journey of the user and instead placed a focus on having a trendy design. No matter how “cool” your website looks, there’s really no point unless it’s converting your visitors and they’re actually enjoying their experience. As competition online continues to grow more fierce, expect those websites that place a focus on user experience first to have long and successful futures. 2. Clean and Clear Design Having plenty of whitespace has been an important web design trend for years. However, recently it’s grown in its importance and application. The biggest reason whitespace continues to be a dominating trend is because it makes your website much easier to use. By incorporating a lot of whitespace into your design you’re not bombarding your visitors with too much information. It also gives you the room to focus on important areas of your site. Or, direct your visitor’s attention to areas that are the most beneficial to them. Having plenty of whitespace is a central tenet of minimalist design. Minimalism will continue to be a dominating trend well into the future. By having a minimalist design you make it easier for your users to find what they’re looking for. As you’ll soon learn below other trends like increased use of video and scrolling-based websites both enhance this minimalism trend. 3. A Large Focus on Mobile Today more people access the internet from their mobile devices than they do from a laptop or standard computers. This means that your design must offer a stellar mobile experience. Offer a poor mobile experience or a site that doesn’t function properly on a mobile device, and you’re going to lose a lot of your users. If you haven’t gone responsive yet, here’s another thing to consider. Most users will start their search journey on their mobile devices. Plus, sites that aren’t mobile-friendly won’t rank as well in the search engines . So, not only will your site receive less traffic from the search engines, but any traffic that you will receive will have a difficult time actually using your site. Making your website mobile-friendly isn’t so much a “trend” as it is an essential web design best practice . The most effective way to embrace mobile devices is to upgrade your site to a responsive web design . With a responsive web layout your site will automatically adjust to the screen size it’s being viewed upon. 4. Embedded and Integrated Video Video is exploding in popularity online. All signs suggest that video is the future. Even social media networks like Facebook and Instagram are doubling down on video content. Plus, YouTube is already the second largest search engine in the world . If you haven’t embraced video, it’s not too late. In fact, one of the emerging web design trends is embedding video into your website . Video is an incredibly engaging medium. How many times have you continued to watch a video, just because it started playing on the site you’re on? And we’re not talking about annoying video pop-ups either that you can’t seem to turn off, no matter how hard you try. Instead, we’re talking about creating intentionally engaging videos that act as an actual part of the design of your site. Instead of standing out they play an integral role in keeping users on your site and informing them about your products and services. These don’t have to be incredibly long videos either. Think of them as moving design elements whose goal is to intrigue and capture the attention of your visitors. Adding videos to your website and content can also have the added effect of improving your site’s search engine rankings. Google has user engagement metrics which act as indicators of a quality site. Sites where users spend more time will be given a higher ranking, as these metrics suggests a site is very high quality. 5. Broken Grid Layouts You might already be familiar with grid layouts. A grid is essentially a hidden series of horizontal and vertical lines that your website’s elements will adhere to. You can see the classic grid at work on most existing websites. You have the logo in the upper left-hand corner, and the navigation menu extending across the top of the screen, along with any other elements arranged below it in an orderly manner. But, with a broken grid layout , you’ll see elements that make the grid seem broken. There will be overlap of design elements, along with text and photos that don’t adhere to the traditional grid. Usually, this is done to give emphasis to certain elements of your website. However, to be effective with a broken grid layout it needs to be done intentionally. Otherwise, you run the risk of having a website that simply looks confusing or jumbled. The worst is a website that ever-so-slightly breaks the grid. Upon first glance, it might not look like something is wrong, but you and your visitors will get the feeling that there’s something off about the website. Beyond the broken grid there’s also been an increase in the use of fluid and more comfort inducing shapes. With more natural and free form shapes you can induce a different feeling in your users when they land on your site. Instead of the purely rigid and geometric designs of days past, those pushing the edge of web design are introducing more natural shapes. 6. Nostalgic Design Elements The 80s and 90s are back in full force, and we’re not just talking about shows like Stranger Things and books like Ready Player One. A previous web design trend that’s been in place for years has put an emphasis on flat and modern design, creating minimalist websites that look like they were born in the future. But, just like fashion moves in a circular fashion, so do our web design trends. This doesn’t mean you should create a 90’s site that looks like the first rendition of a Geocities page. Instead, you should take design cues from previous generations as a whole. This means embracing color schemes and taking typography cues from generation’s past. By embracing the past you can create a new and wholly unique design. Since the web didn’t really exist back then in the state it does now, you can create designs that haven’t been seen on the web before. If this web design trend speaks to you, consider implementing color schemes from times past. Or keep an eye out for a cool old-school font you can use for your headers or your logo. 7. Sites that Encourage Scrolling If you’ve had your website online for any time at all, then you’re probably aware of the term “above the fold”. This means that all of your important graphic design and branding elements should be above the fold of your site, so it’s the first thing your website visitors will see without having to scroll. It seems that web users of the past used to hate scrolling down the page with their mouse, trackpad, or thumb. But, today’s web users are much different. Most website visitors don’t mind scrolling in the slightest. This trend could be rising due to apps like Instagram, which actively encourage scrolling down the app. Combine this with the preference to access the web via mobile devices, and you’ve got a scrolling match made in heaven. As a result, this gives you more real estate to work with when designing the style and layout of your website. Instead of trying to cram everything into the space above the fold, you can utilize your entire screen. This allows you to create more logical and enticing pages that hook your visitor’s attention as they scroll further down your screen. In accordance with making sites more scrollable, you’ll also want to think about implementing thumb-friendly navigation. When people are using their mobile phones to navigate a website they take many different actions and interact with the website in a different manner. One of the easiest ways to ensure your site is in alignment with this growing trend is to include a hamburger navigation menu. This allows users to more easily select the page they want to visit. 8. Intentional Data Collection Most websites will collect some form of data. Today, with the recently introduced General Data Protection Regulation (GDPR) , the collection and storage of data have become even more important. This has led website owners to evaluate how they go about collecting data and being more intentional with the kind of data they’re collecting. For example, if you have an intake form on your website do you really need their location data or even their phone number? Or, maybe you currently integrate with Facebook as a login alternative. Although this saves you time, it might not lead to the best impression for your company. No matter if it’s a contact form, email signup form, or even having tracking cookies on your site, you’ll need to be very transparent about the data you’re collecting, why you’re collecting it, and what you’re doing with it. When thinking about any forms you have on your site think about what’s the minimum amount of necessary information you can collect. Sites that place an importance on user privacy will not only ensure their sites stay compliant with the latest privacy guidelines, but will also be the sites that create a strong and trusting visitor relationship. What These Trends Mean for Your Website By keeping up with the latest web design trends you can help predict where the online world is going. If your website is a crucial part of your business, then it’s important to stay up to date with what’s currently going on online. Today’s web users are savvier than ever, and spend more time online than ever before, with the advent of smartphones and the advancement of the mobile web. Spend some time analyzing the trends above to see how you can apply any of them to your website, or where you can enhance your existing design. The quickest way to lose your visitors’ trust is to have a website that looks old and out of date. That doesn’t mean you need to adopt every single trend above, but instead see how you can bring your website into the future and in tune with the kind of website your users expect to see. Hopefully, you have a better idea of the trends you’ll start to see across the web this year. Whether you’re going to undergo a redesign or not, these trends are important to think about now and into the future. Ready to put these trends in web design into action? Get started with Gator Website Builder . It includes over a hundred mobile-friendly design styles and templates that were built with today and tomorrow’s graphic design trends in mind. Find the post on the HostGator Blog Continue reading →

Posted in HostGator, Hosting, VodaHost | Tagged , , , , , , , , | Comments Off on Web Design Trends 2019

Creating a Website: How To Create a Beautiful Site

Posted on March 19, 2019 by Hosting

The post Creating a Website: How To Create a Beautiful Site appeared first on HostGator Blog . When creating a website, aesthetics aren’t everything – but they definitely matter. Have you ever visited a website that was cluttered, had colors that clashed, or a design that made it hard to read and navigate? Your response was probably to click away and go looking for another website to visit in its place. If you don’t know anything about web design, but you know it’s time to start that website you keep thinking about, you’re probably wondering to how to make a website that will both look good and accomplish your goals. For aspiring website owners that don’t know how to code and don’t have the budget to hire a designer (or would simply rather not spend that money), the best answer is to use an online website builder . Why Create a Website with a Website Builder? Website builders are a fast and easy way to get started with a new website or blog. And this is one case where taking the easy route doesn’t mean sacrificing quality. You can create a truly beautiful and effective website with the right website builder. Here are three benefits to using a website builder . 1. You can use website templates designed by professional designers. Any good website builder you consider will include a number of attractive templates that have been designed by skilled web designers. That means you get to take advantage of their skills without paying top dollar, like you would if you hired them on your own. In most cases, the designers that create templates for website builders will have knowledge of web design best practices and incorporate them into the templates they create. Even if you don’t have a good eye for visuals or website UX (user experience), you can trust that the people who created the template you start with do. By starting with a good template, it’s easy to build a website that looks beautiful and makes a good impression on your visitors. 2. You don’t have to learn how to code. Coding languages are complicated and intimidating to anyone that doesn’t already know them. And even some people who know how to code find it challenging. But you can skip over dealing with all that completely.   Choosing the best website builder for your business or site saves you from having to learn to code . And notably, it means you’ll also never have to deal with coding when making later updates. People that hire a designer to build their website will still have to struggle with HTML down the line when they need to make additions and changes. With a website builder, every future update will be simple.   3. You can make the website your own. The templates are a good starting point, but you don’t want your website to look just like all the other websites created from the template you chose. Don’t worry. You still have room to add your own style and make sure the end results look beautiful to you, while still being intuitive for your visitors. You can change out colors, add and remove different elements of the page, and move things around with simple drag-and-drop website builder functionality. Starting with a template provides a good shortcut, but from there it’s entirely up to you what you choose to do with it. How to Create a Website with a Website Builder If you’re sold on the idea of using a website builder, then it’s time to get started. These are the steps to building a beautiful website using a website builder. 1. Choose your website builder. First things first, you need to choose which website builder to go with. You have a number of options to choose from, and making the right choice now matters. Many website builders make it hard to keep your website if you move to a new product down the line. When looking for the best website builder for you, consider: Ease of use – You don’t want to spend hours learning how to use your new website builder, and you shouldn’t have to. Many website builders provide intuitive editing tools and resources to help you get familiar with the product right away. In particular, look for drag-and-drop functionality which makes editing easy for anyone, no matter the level of skill. Cost – Some drag-and-drop website builder options are free, but most that offer the kind of functionality you’ll need will cost somewhere in the range of $5 to $40 a month—and that’s an ongoing cost, you’ll be paying for as long as you keep your website up. Make sure you choose an affordable website builder you can pay for now and in the months and years to come. Mobile compatibility – Many of your visitors will be coming from mobile devices, so your website needs to look as good on a small screen as it does on a computer. Make sure your website builder provides easy options for making your website mobile friendly, such as responsive templates. Number of templates –  When you start from a template that comes pretty close to what you want your website to look like, the job of customizing it will be easier. The more options you have, the easier picking the right template will be. Media features – If you ever hope to include video or audio on your website, consider what options a website builder offers for adding them. SEO features – Search engine optimization (SEO) is an important tactic for making sure people are able to find your site. While there’s a lot to doing SEO effectively, a good starting point is having a website builder that offers SEO features that make on-site optimization easier. Image library – Finding good images is a big part of creating a website that looks great. A website builder that provides an image library can make the process much faster and easier whether that be for your small business or personal blog. Analytics – Easy access to website analytics will help you track the success of your website over time. Consider what analytics options your website builder offers. Figure out what your main priorities are in a website builder and find one that provides everything you need. 2. Select your favorite template. Creating a website with a website builder starts with a template. Look through the different options available to find one that’s a close match to what you have in mind for your site. Don’t just think about the one you like the look of the best—you can easily change a lot of the visual elements of the template you choose. Think about which one has the closest structure  and layout to the website you want to create. That will make bringing it in line with your unique vision easier. 3. Choose your color scheme. So much of creating a beautiful website as a business owner or blogger will depend on the colors you choose. You want to be consistent with the colors you use across the website—if someone clicks from a page that’s green and blue to one that’s red and black, it creates a confusing experience. And you want to make sure you stick with colors that look good together. Creating a color scheme as one of your first steps will help you achieve both those goals. You’ll know which colors to stick with for your backgrounds, fonts, images, and various page elements. If you don’t really know how to select colors that look good together, you can find a number of free resources online to help. Browse sites like Design Seeds and Color Hunt for inspiration. And the tool Coolers lets you pick a color you like, and see a wide variety of automatically generated color schemes that include it until you find one you like. All of these resources helpfully provide the color codes for each number, so you can easily find them in the editing tools of your website builder as you work. 4. Create a style guide for your site. As with your color scheme, creating a style guide for your website early on will help you make sure your style is consistent across the site and everything looks the way you want it to. This doesn’t have to be anything too long or complicated. It can be a basic list of notes on the stylistic choices you want to use on your site. Consider things like whether you want your elements and buttons to have rounded corners or sharp ones. Do you want all the pages on your website to maintain the same basic layout? What coloring do you want to use for backgrounds, text, links, and buttons? What font do you want to use, and if you want to use more than one, what contexts should you use each in? You can get some inspiration by looking at examples of other style guides , but yours can be much simpler than anything the big brands put together. It should simply serve as a guide you can revisit anytime you’re working on a new page and need a reminder of how to keep it stylistically in line with the rest of the site. 5. Define your website’s goals. While this part doesn’t have to do with making your website beautiful, it’s an important step in creating a website that’s effective. Everyone that creates a website has something they want to accomplish. In order to do so, you need to be strategic in creating a website designed to meet your goals. Spend some time clearly defining what those goals are. You’ll definitely have one overarching goal—for a business owner, that will be making new sales, for a personal website it could be connecting with people through blog posts ho care about the same things you do. In addition to that, you’ll likely have a number of smaller goals that contribute to your primary one: getting noticed by the right people, gaining traffic, and building an email list are a few possible examples. When you approach your website design with clear goals in mind, you’ll do a better job of making a website that’s in line with what you want it to be and do. And you’ll know how to track its success after it goes live. 6. Clarify your messaging. We’ve talked a lot about visual design so far, but the wording you choose will be just as important to accomplishing your goals as the visual aesthetic. The written content you include on your website (called copy in marketing parlance) has to do the heavy lifting of telling your visitors what the website is about and why they should care. You may find this easier if you take a little time to look at similar websites and see how they describe themselves. They can serve as inspiration to help you clarify your own messaging, while also making clear what’s already being done. Ideally, you want to differentiate yourself from other websites and communicate to visitors what makes yours unique. Write out your unique value proposition (UVP), a line or two that describes what your website has to offer and how it’s different from any other site. You can put the UVP directly on your website’s homepage, and it will also help guide you in the copy you create for the rest of the site. 7. Decide on your website’s pages and organization. Another important factor in keeping your website effective is making sure it’s intuitive. You don’t want to overload your visitors with too much information on one page—that’s both confusing and bad for SEO. So figure out how to divide everything you want to share into a number of pages that are each devoted to a manageable amount of information. When you have an idea of the different pages you’ll create, think about how to best organize them in a way that will make it easy for your visitors to find what they’re interested in. Figure out a few main categories your different pages fit into. These will probably be your main menu items. If your website will be fairly simple and only have a few pages, this step shouldn’t be too complicated. If you expect your website to grow into something much larger that has dozens or hundreds of pages, then it’s even more important to define a clear website architecture now that you’ll stick with moving forward.   8. Get to work creating your site. Now that you’ve done all the advance prep to figure out what you want your website to look like and say, pull up your template and start making the necessary changes. Make sure you stick with your style guide, color scheme, messaging, and organization plan as you work. It can be easy to get carried away with making changes that look good in isolation, especially when a personal or business website builder makes each little tweak so easy. But you did all the work in those steps for a reason and your website will be more user friendly, beautiful, and effective if you follow the guidelines you created for yourself. 9. Run it by someone else to get a second opinion. When you spend time working on a website, you get too close to it to see it the way someone else will. Before you push it out into the larger world, find a friend you trust to be a set of fresh eyes for you. They may be able to spot minor errors or let you know if the navigation is a little confusing. Listen to their feedback and make any changes they recommend that you trust will make the website better. Unleash Your Beautiful Website After all that work, your website is ready for a larger audience. Secure website hosting (if you haven’t already) and publish it to the web. Creating a website is exciting. Seeing something beautiful you created yourself (even if with the help of a solid template to start) is certain to instill pride and give you a sense of accomplishment. Now you can start reaching people with your message and working toward your goals. If you’re ready to sign up for a hosting service and create your own website, please contact HostGator today. Find the post on the HostGator Blog Continue reading →

Posted in HostGator, Hosting, VodaHost | Tagged , , , , , , , , , , | Comments Off on Creating a Website: How To Create a Beautiful Site

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

Posted on March 14, 2019 by Hosting

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