Tag Archives: usability

What Are “Sticky” Sidebar Widgets in WordPress

The post What Are “Sticky” Sidebar Widgets in WordPress appeared first on HostGator Blog . A sticky, floating, or fixed, sidebar widget in WordPress is a widget that’s locked into place , so when a user scrolls down the page, it doesn’t disappear. In other words, the information found in the sticky sidebar is accessible at any time . And it’s something all site owners should strongly consider using if they want to direct users to other content, build a bigger email list , and so much more. The sidebar is an important part of any WordPress website . It’s a place for displaying extra information for site visitors, without overwhelming them or disrupting the user experience. Plus, the sidebar gives people an easy way to navigate your site , which boosts engagement and helps increase conversion rates . The problem is, many people don’t take advantage of their WordPress site’s sidebars , especially when it comes to sticky sidebar widgets. That’s why today I’m going to share with you what a sticky sidebar widget is, why it’s beneficial, and how to add one to your WordPress website. So, let’s get started. Why Use a Sticky Sidebar Widget? A sticky sidebar widget is a great way to grab and keep people’s attention once they land on your website. Here are just some of the reasons why sticky sidebar widgets are so helpful: Increased Visibility: since sticky sidebar widgets never disappear, they are always visible. This is great for times you want to ensure site visitors see certain content. Higher Conversions: since floating sidebars are so visible, the chances of people converting are higher. Create calls to action asking people to sign up or make a purchase, and watch your conversion rates increase. More Subscribers: adding a sticky sidebar widget to your WordPress site that lets people subscribe to your email list is a great strategy. After all, email campaigning is the most cost-effective way to market your brand, and is just one of the reasons you should build a bigger email list. Improved User Experience: sticky sidebars give your users a chance to navigate your site with ease. Additional Revenue Streams: whether you sell ad space on your site or are an affiliate marketer, a sticky sidebar used correctly can increase the chances people will see your ad and click on it. According to Smashing Magazine , sticky menus are 22% easier to navigate and 100% of people preferred sticky menus without even knowing why . It’s because of stats like this, as well as the benefits mentioned-above, you should learn how to add a sticky sidebar widget to your site. But first, let’s take a look at some good examples before you get started. Sticky Sidebar Examples Knowing why a sticky sidebar is a good idea and seeing one in action are two totally different things. That’s why we’ve rounded up some of the best sticky sidebar examples around. 1. “Sticky” opt-in form example If you’re looking for a sticky sidebar in action that offers site visitors a simple way to subscribe to a newsletter, hop on over to Young Digital Lab’s guide to starting a blog . Not only does the email opt-in form follow users as they scroll through the post, there’s some very convincing social proof, and a content upgrade up for grabs for anyone that subscribes. 2. “Sticky” navigation example Quora does a great job of improving the usability of their website by adding a sticky sidebar with related questions to their website. Sometimes people need to dig deeper into an issue after seeing some of the answers Quora presents. So, rather than have rephrase their question and hope for better results, Quora provides a list of sticky questions that are sure to relate to the present topic. 3. “Sticky” call-to-action example Website Hosting Rating knows the power a sticky sidebar has on users looking for a great deal. That’s why on the web hosting review pages there is a sticky sidebar that includes a clear CTA button that invites users to click and sign up for hosting. Making the CTA sticky increases the chances people will see the button and click on it. Now, let’s see how to create a sticky sidebar in WordPress using the free Q2W3 Fixed Widget plugin. How to Create a Sticky Sidebar in WordPress Step 1: Install and Activate Q2W3 Fixed Widget Plugin The first thing you’ll need to do is install and activate the free Q2W3 Fixed Widget plugin on your WordPress website. You can do this by going to Plugins > Add New in your WordPress dashboard and searching for “Q2W3 Fixed Widget.” Click Install Now and then Activate . Step 2: Configure Plugin Settings To configure the sticky sidebar widget plugins, go to Appearance > Fixed Widget Options in your WordPress dashboard. Here, you’ll see 3 sections: General Options , Compatibility , and Custom IDs . In these sections, you can configure setting such as: Margins Stop ID Refresh interval Disable width/height You’ll also be able to enable/disable things like: Auto fix widget ID MutationObserver Sticky widget for logged in users only Widget width inheritance jQuery(window).load() hook You can leave the default settings as-is. After you save your changes, be sure to clear your site’s cache, especially if you use a caching plugin ( which you should! ). Step 3: Turn a Widget Sticky To turn any of your current sidebar widgets sticky, start by going to Appearance > Widgets in your WordPress dashboard. Find the widgets you currently have in your site’s sidebars and check the box labeled Fixed Widget on widgets you want to turn sticky. In our example, we’ll turn the search bar and recent posts widgets sticky so people can easily navigate our site without having to scroll away. Click Save Changes and check out a preview of your website. Summary Remember, the easier it is to navigate your website, the bigger your email list, and the more action you can convince people to take on your site, the better. So, leverage the power a sticky sidebar offers and reap the benefits so many website owners are after. Find the post on the HostGator Blog Continue reading

Posted in HostGator, Hosting, VodaHost | Tagged , , , , , , , , , | Comments Off on What Are “Sticky” Sidebar Widgets in WordPress

Responsive Web Design Examples

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

How to Choose a Website Design That Best Represents Your Business

The post How to Choose a Website Design That Best Represents Your Business appeared first on HostGator Blog . Websites are online storefronts to showcase your products and services. When choosing a website design, you want it to satisfy customers and represent your business. Your brand values will serve as a starting point when building your site. You’ll also need to consider the visitor’s experience. Every design feature should achieve a component of your overall website goal . With more ownership over your design, you can illustrate your business in a unique way. Here are 5 fundamentals to analyze when choosing a website design for your eCommerce site . 1. Design for Emotion Every single day, humans experience multiple emotions. External factors can influence customers, sparking feelings of happiness, sadness, or anger. When they visit your site, it’s your chance to direct them to a positive emotion. Effective emotional design will ignite a sense of pleasure and security for your visitors. It draws you in like a child in a candy store. Alan Smith , a contributing writer at Usability Geek, adds more context: “Understand the emotional purpose and utility of every design choice you make, or a bad choice may come back to haunt you. Choose fonts that feel like your corporate image, not ones that conflict with it. When pulling the website together, verify that all the individual pieces fit with each other as well as your message.” TOMS illustrates emotion in its website with a header design focused on a community initiative. The brand wants to bring people together to end gun violence and uses the peace sign as a cohesive gesture. Website design centers around sparking interest in potential consumers. By appealing to their emotions, you give them an opportunity to experience your brand’s personality.   2. Design for Storytelling One Spot reports that “messages delivered as stories can be up to 22X more memorable than just facts .” This research is a compelling opportunity for your brand to focus on storytelling. When designing for storytelling, the aim is to capture your audience’s attention and persuade them to view more pages with the promise of value. Enticing visitors along the way means they spend more time on your site than your competitors. Think of your homepage as the appetizer where potential customers can immediately see your brand values. The main course is the additional pages of your site, like the blog or product pages. Beardbrand highlights its Instagram feed as a storytelling feature. Each image offers an inside peek at the brand lifestyle and what customers should expect. It’s not necessary to tell a grandiose story on every inch of your site. Storytelling can take shape in your choice of fonts, icons, and buttons. Word choice matters, too. For instance, will you use the word “shopping bag” or “shopping cart”? Be bold. Use your website design to bring your brand story to life.   3. Design for Navigation Navigation helps visitors explore your online brand. When done right, it will lead your audience to what counts most to the customer. So, how important is navigation design? David Hoos , head of marketing at The Good, offers his perspective: “Website navigation can make or break your visitors’ experience. After all, navigating a site without a logical, well-defined structure is like being dropped in the middle of a complex maze with no map and no frame of reference. It’s overwhelming, frustrating, and all-around unpleasant — not exactly the effect you’re hoping for.” Heatmap and usability recording tools are helpful with understanding visitors’ behaviors on your site. Then, you can use that insight to improve how you organize your content. KitchenAid takes navigation to a whole new level. Rather than use just text, the company adds images to direct visitors to their desired paths. It’s very convenient for a busy online shopper. Navigation plays a critical role in your website design. Represent your business well with an easy-to-use menu and well-organized layout. Your customers will love you for it.   4. Design for Accessibility Accessibility gets overlooked in website design. Brands desire to attract as many people to their site, but they often forget the different needs of their consumers. In a broad sense, accessibility is all about designing your products, services, and brand experiences to cater to everyone, including different abilities. For example, if you had a physical store, you would build a ramp for individuals who use wheelchairs. The same principle holds true for online shoppers. You can add alt text to all your images ; that way, screen readers can speak the text to visually impaired individuals. To accommodate people with color blindness, you can use symbols along with colors to convey a message. You might add an exclamation point to signify importance. Nike understands the significance of accessibility. You can navigate its website using your keyboard. With the tab key, a consumer can move through the different sections within a webpage. Accessibility is more than another add-on to your website. It’s your gateway to catering to all consumers and introducing them to your brand.   5. Design for Shopping Shopping should be an enjoyable experience. You want consumers to feel comfortable browsing the latest products and adding items to their carts. The brand-consumer relationship relies on trust. People want to patronize credible businesses. No one likes returning defective products or writing a negative Yelp review. With design, you can exude trustworthiness with testimonials from real customers, an honest pricing page (no hidden fees), and any recent brand achievements. These elements add to your brand’s integrity. Susan Ward , a s mall business expert and writer, agrees: “Successful e-commerce websites also provide information about customer service and contact information that is clear and accessible. Having to drill down through 50 pages to find an email address printed in a tiny font on the bottom of a page will give your potential customer queasy feelings, not good feelings.” Moreover, good design makes it effortless to shop. Fenty Beauty spotlights its featured products using categories and images. This design expedites the shopping experience. Move your brand forward with a design that emits trust. Your mission is to give customers a reason to come back to your site.   Represent Your Business Your website design is a reflection of your business. Take the time to decide how you want customers to perceive your online presence. To manage your website more efficiently, check out HostGator’s web design   services. Find the post on the HostGator Blog Continue reading

Posted in HostGator, Hosting, VodaHost | Tagged , , , , , , , , | Comments Off on How to Choose a Website Design That Best Represents Your Business

About G+

What do you think About G+ Usability nowadays, If we are talking about social networking point of view, please share your view ?… | Read the rest of http://www.webhostingtalk.com/showthread.php?t=1746255&goto=newpost Continue reading

Posted in HostGator, Hosting, php, VodaHost | Tagged , , , , , , , , , | Comments Off on About G+