-
Recent Posts
Recent Comments
Archives
- September 2019
- August 2019
- July 2019
- June 2019
- May 2019
- April 2019
- March 2019
- February 2019
- January 2019
- December 2018
- November 2018
- October 2018
- September 2018
- August 2018
- July 2018
- June 2018
- May 2018
- April 2018
- March 2018
- February 2018
- January 2018
- December 2017
- November 2017
- October 2017
- September 2017
- August 2017
- July 2017
- June 2017
- May 2017
- April 2017
- March 2017
- February 2017
- January 2017
- December 2016
- November 2016
- October 2016
- September 2016
- August 2016
- July 2016
- June 2016
- May 2016
- April 2016
- March 2016
- February 2016
- January 2016
- December 2015
- November 2015
- October 2015
- September 2015
- August 2015
- July 2015
- June 2015
- May 2015
- April 2015
- March 2015
- February 2015
- January 2015
- December 2014
- November 2014
- October 2014
- September 2014
- August 2014
- July 2014
- June 2014
- May 2014
- April 2014
- March 2014
- February 2014
- January 2014
- December 2013
- November 2013
- October 2013
- September 2013
- August 2013
- July 2013
- June 2013
- May 2013
- April 2013
- March 2013
- February 2013
- January 2013
- December 2012
- November 2012
- October 2012
- September 2012
- August 2012
- July 2012
- June 2012
- May 2012
- April 2012
- March 2012
- February 2012
- January 2012
- December 2011
- November 2011
- October 2011
- September 2011
- August 2011
- July 2011
- March 2011
- November 2010
Categories
Meta
Tag Archives: usability
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 coding, design, hostgator, hosting, screen, screenshots, search-engine, usability, vodahost, web hosting tips, web-design
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
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 networking-point, php, read-the-rest, rest, seo / sem discussions, the-rest, usability, view, vodahost, your-view
Comments Off on About G+