Website Design Features & Prices

What Is Responsive Design?

Responsive design means that your website will automatically adjust to any screen size.

When your website is viewed on a phone or small tablet, it reorganizes (restacks) the various page elements and resizes various page content to fit properly on the smaller screen. When you view the same site on a desktop computer with a large screen, then the design returns to its normal layout.

As an example, a web page on a full-size screen might have 3 content blocks side by side. On a small screen, that same page might show those 3 content blocks stacked on top of each other, 3 high in the more narrow width of a smartphone.

Basic Responsive Design for the “Website Basic” plan uses the default, built-in responsive design code that is part of the WordPress Theme. The default method can be described as adequate for rearranging the layout from a big screen to a small screen, but it sometimes does not achieve an ideal mobile layout.

Custom Responsive Design for the “Website Pro” plan goes beyond the default responsiveness to include extra, custom programming needed if the default responsive layout method does not adequately change the mobile screen layout. The advanced method can be described as superior for rearranging the layout from a big screen to a small screen; The kinks and quirks of a layout change will be fixed.

This might include using different sizes of the same pictures on desktop and mobile screens. It could include using different pictures on mobile and desktop devices or scrapping an image on the mobile layout. It could include different headings on mobile and desktop screen sizes to make them fit well on large and small screens. Sometimes bullet points on a desktop screen do not display well on a mobile device and need to be adjusted for the mobile device. Sometimes the stacking order of items on a mobile device is not ideal and custom responsive design can reorder the stack. Sometimes contact forms don't fit well on a mobile device and must be rejiggered. Custom responsive design helps your website look its best on all sizes of screens!

What Is A Multi-Header Slider?

A multi-header slider is a series of large, often full-width images (Hero images) that are seen at the top of the home page of many websites. The hero images often have a text overlay that explains the product or service depicted in the image and links to the corresponding page for that product or service. The series of images usually scroll automatically from one to the next and the images alone should give a good idea of what the website is about. The multi-header should also allow the site visitor to manually move forward or backward through the images. They can be used on any page of the website but are most common on the home page.

Short video clips and other features can also be used in a frame of the multi-header. But regardless of what the multi-header might contain, we make sure that the file sizes are as small as possible so that the page loads quickly for your site visitors. The page load time is important both to your site visitors and as a ranking signal for SEO so we'll make the multi-header enticing, functional, and SEO-optimized for you!

For smaller screens on mobile devices, however, we will likely exclude the multi-header and replace it with either a single image or perhaps an animated GIF image that rotates through a few different images. Either way, we need to ensure that the web pages load fast on smaller mobile devices by using a representative image that has a much smaller file size than the multi-header.

What Is On-Page SEO?

On-page SEO refers to the inclusion, on every page of your website, of certain page elements that are known to be positive ranking factors for Google and other search engines. However, there is so much to explain about On-Page SEO that we created an entire page about it. Please go to...

On-page SEO (opens in new tab)

What Is An Advanced Custom Smart Form?

Basic forms are what you see on most small business websites. They ask for the site visitor's name and contact information and they usually have a larger field (box) to allow the user to write some kind of note to you. That's about all there is to a basic form.

An Advanced Custom Smart Form generally collects a lot more information. They can use conditional logic to determine the next questions to ask based on previous responses. Some people want to be done with a form quickly. Others are more interested in giving more information up-front. So, for example, if you will eventually need design drawings for a project, your form might ask if the visitor has documents to upload today. If they answer "yes", then upload fields will appear. If they answer "no", then the upload fields will not appear. The video on the right shows an example of this; just be sure to click on the full-screen option at the bottom-right of the video so that you can see it better. When you're done watching it, click on the "Esc" key which is usually at the top left of your keyboard, or click at the bottom right of the video again on "Exit full screen".

Smart forms can also process form submissions to go to specific people in your company. This is especially great for B2B companies. In the example on the right, the conditional logic settings will assure that if they select accounting, then only accounting will be notified of the form submission. And based on their selection of "Accounting", additional questions might pop up like whether this is for accounts payable or accounts receivable, what is their invoice # or customer #, etc. There is no reason to bother the folks in the other departments. Similarly, there is no reason for anyone in accounting to spend time on someone who needs technical support. Customers and employees are much happier when site visitors can get the specific help they need directly from the appropriate department. Nobody likes getting passed around endlessly before getting to the right person.

Another great feature of smart forms is that they integrate with many other services that you might use. For example, if your company uses a Customer Relationship Management (CRM) system like Agile CRM, Highrise, or Zoho CRM, then form responses can automatically be added to your CRM database. If you use email marketing software like iContact, Mailchimp, Emma, Aweber, etc., information from form submissions can automatically be uploaded to many email marketing services. You can integrate your form with accounting systems, payment systems, cloud-based storage like Dropbox for uploading attachments, collaborative platforms like Slack and Trello, and much more. We can even integrate your form with the catch-all integration service Zapier which exponentially increases the reach of possible integrations for your form.

And last, but not least, every form submission is not only sent to you by email. It is also stored in a database in your WordPress admin panel. It's a great backup to the form submissions by email. You can look up previous form submissions. You can export form submissions individually, in groups, or all form submissions. The export is in CSV (generic spreadsheet/database) file format so it can be imported into any kind of database. It can also be imported into MS Excel or Google Sheets and then sliced and diced to your heart's content for data mining. It makes a great list to use for ongoing marketing contact with people who have inquired about your company before.

Article: Smart Contact Forms – Supercharge Your B2B Business

What Is A Favicon?

A favicon is a small icon based on your company logo. It is associated with your website and is displayed in a few places, such as in a browser tab where your website is open or next to the site name in a bookmark list.

A favicon helps your site stand out and helps people quickly associate an open tab or bookmark with your company.  Favicons are one of those small touches that make a website experience much better and one of those often-overlooked features that make your website look more professional!

What Is Email Cloaking?

The internet is full of automated "bots" that scour websites for all kinds of reasons. One of the reasons is to gather email addresses for spammers. But the email addresses listed on your website don't have to be vulnerable. We can make them invisible to the "bots" while leaving them visible to actual humans looking at your website. So when you're considering the services of any website designer, check to see if they are "cloaking" (hiding) the website's email address from spambots. If a website designer doesn't know this basic trick to hide your email address from bots, then your spam will probably increase. And if they don't know this simple solution, you might wonder what else they don't know.

So here is how you can test for email cloaking.

1. Go to a website built by the website designer that you're checking out. Go to a page that has at least one email address listed visibly on the page.
2. With your cursor anywhere on that page, right-click on your mouse and select "View Page Source". Some web browsers might phrase a bit differently, but you should be able to figure out which option it is. (Cmd + U on macOS)
3. When you click on "View Page Source", a new browser tab or window will open up. Go to that tab or window. You'll see a bunch of computer code on the page instead of the website you were looking at.
4. While holding down your "Ctrl" key, press the "F" key... This is "Ctrl+F" and it will open up a page search box at either the top left or top right of your browser window. (Command-F on macOS)
5. Type "mailto" into that box and press your enter key.

In case you're wondering why you should type in "mailto", it's because the code containing the email link uses those words at the beginning. The full code shows the email address to the bots and is usually...

A more advanced bot can figure it out, but the vast majority of bots are simple and they're looking for easy targets. When we build websites, we cloak your email to help protect you from spam. And we often used even more advanced cloaking where, when you hover over the email link, the bottom left of your screen will just show "javascript;" instead of  "mailto:somebody@somecompany.com." So give us a call to discuss your website upgrade.

What Is An XML Sitemap vs An HTML Sitemap?

Most people, including a lot of website designers, think that a sitemap is a page on a website where you go for an alternative navigation route to help you, perhaps more easily, find the page you are looking for. Well, they're all correct. That's an HTML sitemap and all large websites should have those for an alternate navigation method for site visitors.

But there is another kind of sitemap called an XML sitemap. This is the one that search engines use to help navigate and index a website. It is not available for the average site visitor to see. It is structured differently so that it speaks directly to the search engines and helps inform them about site structure and the relative importance of the pages on the website. Without an XML sitemap properly uploaded to, for example, Google Search Console (Google Webmaster Tools), your site will not rank as well on the search engines. The XML sitemap is an important part of telling the search engines exactly what you want them to index and, for example, how often they should come back to re-index a page.

So whenever you're looking to have a new website built for your company, you ask potential website designers to explain XML sitemaps, ask if they use them, and have them show you examples of the XML sitemaps of their past clients. Your company deserves a great website so you need a knowledgeable website designer who knows these kinds of things. Call us, we know.

Or, you can check other sites they have built. Just ask for a few website examples they have done, or find examples on their website and go to those websites. When you get there, you need to do one simple thing. In the address bar of your browse near the top of your screen, you will see the address of the site you're checking out. It will say something like "http://www.OtherCompanyWebsite.com". All you have to do is add "/sitemap.xml" to the end of that, so it will be "http://www.OtherCompanyWebsite.com/sitemap.xml". You'll either get an error page or their XML sitemap. It doesn't really matter (to you) what that page says... you just want to make sure that other websites done by the site designer that you're checking out, actually use XML sitemaps. If they don't have an XML sitemap, that's a big strike against that web design company. When that happens, call us. Actually, just contact us anyway!

What are SCHEMA, Rich Snippets, and Semantic Markup?

Schema tells the search engines what your data means, not just what it says. Schema code was jointly developed by Google, Bing, and Yahoo search engines to help web designers give more meaning and context to website content so that search engines know exactly what certain words mean rather than just guessing. So SCHEMA helps with your search results ranking by making your page content more understandable to search engines.

But Schema can also do cool things like help your website take up more space on a search results page, even if it doesn't increase your search rank. For example, you might notice on some search results pages that FAQs / Q&A's show up in the search results. These are not organic rank results. They are part of the "knowledge graph" about a particular topic that a search engine creates on a search results page. If your Q&A section is properly formatted with correct Schema markup and your website and web page have enough authority to get noticed by the search engine, then it might be your Q&A that shows up above the actual organic search results. In fact, if you click through some of the Q&A's on a Google search results page, you'll notice that many of the Q&A's come from different websites. And the more Q&A's you click, the more Q&A's appear on the search results page, meaning that you'll have even more opportunity to show up on the search results page (and the standard organic search results get pushed farther and farther down the page). Other items that can show up on a search results page include "rich snippets" of events, facts, and social media snippets like tweets from Twitter, videos, etc. And, of course, your Google My Business profile can show up above search results when the search results page includes a map of nearby businesses related to the search.

Surprisingly, Schema rich snippets, and even Google My Business, are still not used by many website designers. But at Baer Web Design, we use them as much as possible. It only makes sense that we want to communicate with search engines exactly how they have told us to do so. At a minimum, every website should have the company name, address, and phone information encoded in Schema markup, a full Google My Business profile, and as many rich snippets as possible.

For local companies, Schema markup is especially useful for local SEO. Schema can identify dozens of specific types of companies like electricians, plumbers, accounting services, insurance agencies, bakeries, hair salons, bed & breakfasts, florists, and dozens more. Specific products and prices can be perfectly identified by search engines.

So what does all of this really mean? Well, you don't have to understand the details. But...

before you hire a website designer, go to this google testing tool...

and test some of the websites that they have created. You'll be able to see if those sites are using Schema code markup or not. And our recommendation is to hire a design partner that understands and uses Schema.

What Are 301 Redirects?

A 301 Redirect tells a search engine that a page is permanently redirected to a new page. When you build a new website for your company many, and possibly all of your pages will change. Ideally, we try not to change page names. But if your old site has pages like "services.html" or "services.aspx", and we upgrade your website to a WordPress site, then your new page would be "yoursite.com/services".  And, we want to make sure that anyone looking for services.html will be forwarded to the equivalent new page.

It's crazy to not use 301 permanent redirects to forward your old pages to their corresponding new pages. Why?

1. Link Juice - Your old website has, over many years, likely built up a certain level of search engine ranking based, in part, upon other sites linking to specific pages on your old site. Why give up that ranking if you don't have to?
2. More Potential Sales - Many of your current and past customers, and past prospects might have bookmarked your website. What happens if they try to find you again but your web page locations have changed?  Do you really want to hide from new or repeat business? Do you want them to think you are no longer in business?
3. Search engines will likely index your old pages. So if you don't tell the search engines that a page is permanently forwarded, anyone who finds that page on Google and clicks on it will not be taken to your new page. They'll get an ugly 404 error page and wonder what happened to your company.

When you build a new website, you shouldn't let all of your old website links die. You have to keep them alive with 301 permanent redirects. When you're looking for a new website designer, ask them to explain 301 redirects to you. A surprisingly large number of website designers don't know that they should do 301 redirects. Run from them. Call us.

What Is A Custom 404 Error Page?

Have you ever run into one of these "404 Error - Page Not Found" notices? They're kind of annoying. A lot of site visitors simply go away when they run into this. Many don't even try to find the error in the address bar so that they can find your real website. And if they leave, they're probably not coming back.

Why not give the site visitor something better to help them find what they want on your website? Sadly, a lot of website designers don't implement a very simple fix. A lot don't even know you can make Custom 404 Error pages.

A Custom 404 Error page looks just like the rest of your website. Visitors looking for a non-existent page won't find an ugly message making them think that they messed up. They'll find an actual page on your website that explains the problem and offers suggestions on how they can find what they're seeking. They'll find your website, your menu, a search box, etc. so that they can find what they're looking for.

Additionally, Custom 404 Error Pages also help your website with the search engines. 404 Errors normally count against you in the search engine ranking algorithms. But when 404 Errors are redirected to a page that we create on your website, it's not counted as an error anymore because it's actually going to a real web page.

When you're choosing a new website designer, ask them what they do about 404 errors. Then call us.