Tag Archives: coding

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 Best Practices: A Helpful Guide

Posted on October 26, 2018 by Hosting

The post Web Design Best Practices: A Helpful Guide appeared first on HostGator Blog . Your website is the main face of your brand online. And building your website with best practices in mind will ensure your brand is putting its best foot forward. What people see when they visit it influences how they see your brand – online and off. And your web design largely defines how people experience your website. In short, web design is important. A bad web design can make your website layout look unprofessional, lose visitors’ trust, or make it difficult for them to find what they’re looking for (and therefore increasing instead of reducing your bounce rates ). A good website design shows your visitors you know what you’re doing and that it’s worth sticking around and interacting with your brand. Whether you’re working on a building new website or launching a re-design for the one you already have, there are a few important web design best practices you should honor. 1. Make Your Site Navigation Intuitive. Part of the design process is figuring out how to organize all the pages and what to include in your website menus . Getting your site organization right is both important for your website architecture and because it determines how easy navigating your website is for visitors. When deciding what pages, categories, and subcategories to include in your website’s menus, think first about your visitors. What will make it easier for the average visitor to find what they’re looking for? But also decide what the most important pages you want them to find are. Strive to organize your website in a way that will make it just as intuitive to a first-time visitor as it is to someone who knows it well.   2. Maintain a Consistent Style. If you visited a website that had a specific style on the home page but changed to something completely different on the next page you linked on, you’d find the change confusing. You might wonder if you were in the right place at all or had somehow navigated away from the site you thought you were on. You don’t want your site visitors to deal with that kind of confusion. Early on in the design process, sit down to develop a web design style guide . A style guide is a useful web design tool that will help you make sure all the pages on your website visually match well enough to let visitors know they’re all related to each other as well as to your brand. Make sure it includes: The website’s color scheme The logo design to use (and any variations on it in terms of size and shape you’ll use throughout the site) The font(s) The visual style (for example, do you want a minimalist feel? A playful one?) As you move into the particulars of designing the site, your style guide will be a helpful resource to keep you on track.   3. Design Each Page With a Goal in Mind. You’re not just designing a website for fun, you want it to accomplish something. And even if you have one overarching goal for the whole website, different web pages will need to have more specific goals. For example, an eCommerce website will primarily be designed to get people to make purchases. But in order to do that, some pages will be focused on getting people to visit the website to begin with, so they’ll have the primary goal of improving search engine optimization  or encouraging social shares. Other pages will more directly try to get people to click that “Buy” button. Clearly define the specific goal you want and  to accomplish this and make sure your design for it centers the goal.   4. Keep Each Page Focused. Another good web design tip that goes hand in hand with having a specific goal for each web page is to make sure your pages have a clear focus. Don’t try to do too much on any one webpage. You don’t want your web pages to look cluttered – that not only makes it look bad (which makes visitors more likely to click away), but it also presents too many distractions. How will people know the next best step to take, if your page is filled with so many links and images and text that they can’t figure out what to focus on? If you realize a particular web page has too much going on, split it up into multiple pages. Having separate pages that each has a more clear focus will be good for user experience and improve your opportunities to optimize for SEO.   5. Make Your Website Responsive. Mobile use now surpasses computer use ,  and every year the amount of time people spend on the web on mobile devices only grows. For website owners, that means your web design has to prioritize the mobile friendly experience . In most cases, the best option for creating a website that works well both on desktop and mobile devices is to build a responsive website. Responsive web design involves identifying breakpoints on the page where the page can be cut off and everything to the side moved below the breakpoint without the experience losing anything. That’s why mobile devices often display the same images and text, but with all elements of the page that appear alongside each other on the desktop showing up as stacked above and below each other. When designing each page on your website, you need to define at least three breakpoints to ensure your pages work well on each of the three main device sizes (although many designers prefer to use more). To a large degree, responsive websites have become common enough that most web design tools or designers you turn to will automatically employ best practices for responsive web design. As just one example, all of the templates offered with HostGator’s website builder are responsive, so even newbie website owners that don’t know anything about HTML or other coding languages can easily create a website that’s responsive. No matter what web design tools you use though, make sure you design your website with mobile in mind and use responsive design best practices.   6. Use Fluid Images. Fluid images  can aid in responsive web design and improve user experience on your website. You can make any of the images you use fluid with the right HTML code. If you add “max-width: 100%” to the source code for the image, you’re letting browsers know to resize the image to fit the page on every device. As an example, the full code would look like: This will keep your images from blocking text or other parts of the page on devices where they outgrow the section of the page you want them to stay contained within.   7. Make Clickable Elements Large Enough for Mobile. Another important component of good mobile-friendly website design is thinking about how people use their mobile devices. Clicking a small button on a computer is easy with the pointer that you have total control over and that can get very specific in what it points to. On a mobile device though, you have to be able to “click” that same button by touching it with your finger. If a link or button is too small, or worse, if you have different links located too close together, your users will struggle to get the links to work. When designing your web pages, make sure you test each one out on a small mobile device to confirm that all the links and buttons are easy to use.   8. Use Visual Hierarchies. This relates back to the goals you developed for each page of your website. Every page will include the most important information that you want people to notice, as well as additional information and design elements that matter, but aren’t of the same level of importance. In order to make sure that every visitor on every device sees the most important parts of the page before moving on, develop a visual hierarchy for each web page. The most important elements need to go at the top so they show up for everybody, and the other parts of the page can fall further down for the people interested enough to keep scrolling to see the whole page.   9. Make Your Site Accessible. Your visitors don’t all interact with the web in the same way. While that’s useful to consider in general, it’s an even more important point to remember when designing for people with different types of disabilities. An important web design tip to keep in mind during the design process is, therefore, to aim for inclusivity and accessibility. The Web Accessibility Initiative has outlined a number of Accessibility Principles for web designers to honor when creating their websites. The people who benefit most from accessible web design may be in the minority, but some are very likely in your target audience. By building an accessible website, you open your brand up to a wider audience and can build goodwill with a community that’s often underserved.   10. Stick to Design Standards. Have you ever been confused by a website that has its menu in a different spot than you’re used to? Or had a hard time closing a pop up that had the X in a weird spot? While web designers can often benefit from finding ways to be creative or unique, there are certain  web design standards that  define how people interact with websites and what they expect to find. When you move away from these norms, you risk creating confusion and a negative experience for your customers. A few of the main standards it’s a best practice to stick with include:     Putting your logo in the top left     Putting contact information in the top right     Having your main menu stretch across the top of the screen     Putting your value proposition high up on the home page     Including a CTA high up on the home page     Adding a search feature to the header When you think about it, everything on that list is probably exactly what you expect to see when you visit a website. If you’re going to venture away from these standards, make sure you think thoughtfully about why and make sure you’re not creating unnecessary confusion in the process.   A Good Design Makes for a Good Website Your web design determines how your website will look and feel to the people that visit it. Getting it right is paramount to the success of your website . Take some time to understand the main web design best practices and create a website that people will find useful and intuitive. Find the post on the HostGator Blog Continue reading →

Posted in HostGator, Hosting, VodaHost | Tagged , , , , , , , , , | Comments Off on Web Design Best Practices: A Helpful Guide

Learn to Code from These 10 Places

Posted on August 1, 2018 by Hosting

The post Learn to Code from These 10 Places appeared first on HostGator Blog . 10 Places That Teach You How to Code Someone building a website today is lucky that it’s much easier to put together something that looks good and professional than it was in the early days of the web. You no longer have to become fluent in html or CSS in order to launch a website. Instead, you can lean on website builders and templates. But while becoming a coding expert is no longer required, learning to code –at least the basics– is still a useful skill for any website owner to have. Why You Should Learn to Code Even if you hire a programmer for the heavy lifting or use a website builder , understanding the basics of how to code can make you better at maintaining your website and doing a lot of the smaller tasks that will come up over time. In particular, learning to code will: Make you better at hiring people for positions that require coding because you’ll know the right questions to ask and be able to understand their answers. Ensure you understand the backend of your website so you’ll know how to add code for things like Google Analytics tracking or schema markup . Teach you how to recognize and update the different parts of the web page that are most important for on-site SEO . In short, it can help you do a lot of things on your website better and save you from having to call in (and pay) a programmer for smaller tasks you can manage yourself. The good news is that basic coding isn’t even all that hard. It definitely looks intimidating at first, but as with any new skill, learning it is just a matter of taking some time and finding the right resources. We can’t help you with time, but we can point you in the right direction for coding resources.   10 Places Where You Can Learn To Code 1. Code Academy Price: Free Code Academy offers free online courses that cover the basics of HTML, CSS, Javascript, Python, CMD Line, and SQL. Most of their classes take less than 11 hours and include quizzes that help you test out your knowledge as you go. If you’re good at self-directed education, then their free courses will probably be a good fit. If you could use more direct help, they also offer a paid option that includes a personalized learning plan and live help from advisors.   2. W3 Schools Price: Free W3 Schools bills itself as the “world’s largest web developer site.” They offer comprehensive, well-organized text tutorials on how to do all the main things you’d need to know when using html, CSS, Javascript, SQP, PHP, and Bootstrap. They’re a good resource for learning the basics if you learn well by reading, and they’re a good go-to resource to bookmark for when you need examples or a refresher on how to do something down the line.   3. FreeCodeCamp Price: Free (it’s right there in the name!) FreeCodeCamp has thousands of free lessons that cover html, CSS, Javascript, Github, and more. You can choose to follow individual lessons based on the specific knowledge you need, or take all the lessons in a particular course in order to earn a free certification. In addition to the lessons themselves, FreeCodeCamp also has an active forum with millions of community members who help each other out, so you can ask questions as you go and learn from others’ experiences.   4. GA Dash Price: Free GA Dash offers a course that covers html, CSS, and Javascript training. The course is project-based, giving you specific assignments that offer hands-on experience that allows you to put learning to action. It’s good for beginners that learn better by doing rather than reading or watching.   5. The Odin Project Price: Free The Odin Project provides free courses that cover html, CSS, Javascript, Git, databases, Ruby, and Ruby on Rails. The courses include a mix of learning by reading and by doing by having you complete several hands-on projects along the way. The Odin Project also offers a forum with an active community of people who can help each other through the learning process.   6. Code Conquest Price: Free The Code Conquest website offers free coding tutorials, programming language cheat sheets, and quizzes to help you test your knowledge. In addition to all of the education resources they offer, they also provide reviews on other coding training resources (including some on this list) and coding-related deals.   7. Lynda Price: Free trial, then $9.99 a month Lynda is a subscription service that provides access to a large number of online courses on various subjects, including coding and web design. In addition to courses on coding and specific programming languages, you can also find courses that get into topics like UX design and SEO.   8. Udemy Price: Varies per course Udemy’s another site that offers web courses in a wide variety of topics. Unlike Lynda though, you pay by the course rather than a flat subscription rate. The site has many courses on coding and programming languages, most of which cost around $10 a piece.   9. Envato Tuts + Price: $19 a month Envato Tuts+ provides a number of how-to tutorials, courses, and ebooks that cover an array of coding subjects, as well as other web design topics. Their pricing covers both all the courses and a number of resources like templates and fonts you can use in your web design projects as well.   10. Local Coding Bootcamps Price: Varies Some people are simply better at learning from a teacher who will work with them in person. If you’re worried online courses and resources won’t match your learning style, do some research into local coding bootcamps being offered in your area. Most cities will have one or more option and you can get the in-person treatment that works best for you.   Ready to Start Learning? You could probably get by as a website owner without learning to code, but devoting a few hours to learning the basics will absolutely make your life easier and make tasks accessible to you that would otherwise feel out of reach. Take advantage of the many helpful resources available to learn the basics and take more control over your website. For professional help building your website, contact HostGator’s Design Services Team . Find the post on the HostGator Blog Continue reading →

Posted in HostGator, Hosting, php, VodaHost | Tagged , , , , , , , , , , | Comments Off on Learn to Code from These 10 Places

Validation Errors

Posted on July 13, 2018 by Hosting

When checking my pages validator (w3. org) it gives me several warnings on each page in the coding of my Paypal cart button. I do not unders… | Read the rest of http://www.webhostingtalk.com/showthread.php?t=1720348&goto=newpost Continue reading →

Posted in HostGator, Hosting, php, VodaHost | Tagged , , , , , , , , , | Comments Off on Validation Errors

Sitemaps: XML, HTML, etc.

Posted on September 10, 2012 by Hosting

I am currently reading “The secrets to promoting your website online” and it makes sure to make a distinction between the XML and HTML site map. What I understand is that the HTML is what I have typed on the bottom of each page in my website, for example: www.difesacanecorso.com/thestud.html Also, is it better to have an HTML site map at the bottom of each page or a separate page of site map where it is listed out in outline form? Continue reading →

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