Gradient Shaded Boxes in CSS

Posted on April 19th, 2014 by John Giaccotto

Screen shot 2014-04-21 at 10.53.55 PMGradient shaded boxes are an effective way to add visual interest and depth to your website. You can call attention to important page elements with a beautiful gradient shaded box. It’s fairly easy to make gradient shaded boxes in CSS.  All you need to do is adapt the following code to create a stunning gradient in the DIV box and a shadow around the outside:

.gradientBoxesWithOuterShadows {
height: 200px;
width: 400px;
padding: 20px;
background-color: white;

/* outer shadows  (note the rgba is red, green, blue, alpha) */
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);

/* rounded corners */
-webkit-border-radius: 12px;
-moz-border-radius: 7px;
border-radius: 7px;

/* gradients */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5));
background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%);
}

By following this basic example, you’ll be able to create gradient shaded boxes in CSS to highlight important page elements or simply add more visual style and depth to your overall web design. Gradient shaded boxes can be a useful way to break up the content on a web page into more digestible sections for a user.

While CSS is fairly straightforward, you’ll most likely want to work with your web designer to implement these changes to your website. Your web designer will be able to advise you on how to best implement gradient shaded boxes in CSS to maximize your site’s readability and usability.

How do you currently implement gradient shaded boxes on your website?

What is native advertising?

Posted on April 18th, 2014 by John Giaccotto

Native advertising is a term you may have come across when looking at marketing strategies for your business. It has become somewhat of a buzz word in the Internet marketing world to explain the characteristics of certain types of advertising on the web. But just what is native advertising?

Let’s first turn to Wikipedia for a quick definition: Native advertising is an online advertising method in which the advertiser attempts to gain attention by providing content in the context of the user’s experience. Native ad formats match both the form and the function of the user experience in which it is placed.

Simply put, ads are part of the content in native advertising. As you can imagine, the term is rather subjective and its application is far from uniform among marketing gurus. Everyone seems to have their own unique perspective and approach to native advertising.

The goal of native advertising is to saturate users with strong marketing message without being obnoxious or annoying. Users should be able to consume native ads as they would any other part of the content. Achieving this goal is easier said than done.

Both advertorials and content marketing can be considered a form of native advertising. Ultimately, native advertising describes a marketing strategy that creates a compelling format for users. In order to use native advertising effectively, you’ll need to develop a strategy across your online presence from your website to your social media accounts.

L.L. Bean effectively uses native advertising on Instagram.

An example of native advertising on L.L. Bean’s Instragram feed.

While native advertising has become a buzz word, it can be easily understood when you look at each facet of your marketing strategy. On your website, you’ll be focused on content marketing. Across your social media accounts, you’ll be focused more on native advertising specific to each site’s format, be it pictures or videos or memes. In print, you may fall back on the tried and true advertorial as part of your overall native advertising strategy.

As long as you are integrating your advertising into your content in an unobtrusive way, you’re safe. Careful integration comes from planning. Work with your web designer to help you craft a cohesive marketing message for your business through native advertising.

How do you employ native advertising in your marketing collateral?

How often should you refresh your web design?

Posted on April 17th, 2014 by John Giaccotto

1281977_32925696With web standards in a state of constant change, you might be wondering how often you should refresh your web design. This is a common dilemma for business owners since updates can be costly and chasing trends doesn’t always prove to be a sound business decision.

Many business owners find that they must make frequent updates just to stay current with their competition. Still others are resistant to change and hold out as long as they can to update their sites. The key to determining when to update your business website is going to be somewhat subjective. There are no set rules as to when you should refresh your web design.

While there are no hard and fast rules, business websites benefit from an update at least once a year. Best practices in web design can change quite rapidly, so at a minimum, you’ll want to review your site on a yearly basis. You may not make large changes from year to year, but sitting down with your web design firm to discuss shifts in design standards, updates your competitors have made and what changes you might most benefit from is never a bad idea.

In addition to a yearly review of your website, you’re going to want to refresh your web design any time your business makes any significant changes. For example, any time you launch new products, enter a new market or target new customers, you’re going to want to update your website. These changes may be subtle, but they need to reflect the new direction your business is taking. You never want your website to be out of alignment with your current business model. So, if you’ve made any changes to your business recently, it’s time to sit down with your web design pro.

You need to pay attention to your competition. Review of your competition’s websites needs to be an ongoing part of your overall web strategy. If your competitors are frequently refreshing their websites, then chances are you should be too. After all, you don’t want to fall behind your competition. Perhaps you’re serving a trend conscious demographic who are perceptive to web design trends. You need to stay at the cutting edge of design in order to stay competitive.

Is your web traffic or engagement stagnant? If so, then you know it’s time to refresh your web design. You need to be monitoring key metrics for your website on an ongoing basis. If things seem to have leveled off, then you can really give your website’s traffic and engagement a boost with a design refresh.

How often do you refresh your web design?

Simple Form Validation

Posted on April 16th, 2014 by John Giaccotto

Screen shot 2014-04-21 at 10.30.38 PMWebsite forms offer users with a convenient way to communicate with you as a business owner. You can offer forms a wide variety of purposes throughout your web pages. Common forms include contact forms, sign-up forms and order forms. While adding forms to your website isn’t overly difficult, you should always work with your web development professional to ensure that simple form validation is implemented.

Simple form validation is used to validate data in HTML forms before sending the content to a server. JavaScript is commonly used for form validation. Form data is generally checked by JavaScript for the following:

  • Did the user leave any required fields empty?
  • Did the user enter a valid email address?
  • Did the user enter a valid date?
  • Did the user enter text in a numeric field?

While the above examples are not exhaustive by any means, they provide an idea of why simple form validation is important. Here is an example of Javascript form validation for required fields:

function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==”")
{
alert(“First name must be filled out”);
return false;
}
}

This function checks to see if a field has been left empty. If the field is left empty, an alert box comes up with a message, the function will return as false and the form will not be submitted to the server. If you want to add forms to your website, you’ll need to implement simple form validation to ensure that your forms are completed correctly by users prior to their submission. Remember to contact your web development professional for assistance in setting up your forms on your website.

Do you use forms on your website?

Make Sure All Your Pages Have a Strong Call to Action

Posted on April 15th, 2014 by John Giaccotto

1108003_58231673Every business with a website needs to focus on page content. Page content needs to be updated frequently to make the website engaging. Also, search engines rank websites based partially on how often the content is updated. In addition to continually updated your website’s page content, you need to make sure all your pages have a strong call to action.

What is a call to action? A call to action is simply an invitation for your website’s users to take action. “call us today for your free consultation” or “join the conversation on our social media sites” or “sign up for our mailing list for exclusive deals” are all examples of calls to action. If you don’t invite your users to take action, chances are they won’t. Do the pages of your website have a strong call to action?

In order to craft a strong call to action for each of your web pages, you’ll need to determine the overall purpose of your website as well as each of its pages. To be effective, a call to action needs to be concise and to the point. Without a clear idea of your website’s purpose, you won’t be able to craft a strong call to action on each page of your site.

Do you want to improve social media engagement? Do you want to compile a large mailing list? Do you want to generate new leads? Whatever your goal, you need to cohesively work it into every page on your website with a strong call to action. Work with your web design firm to carefully evaluate your goals and develop a plan to strengthen your page content over time.

Won’t people simple like your Facebook page or follow you on Twitter or call you for more information about your business? Why do you need a call to action on every page? The truth is, people are more likely to take action when you ask them. A friendly invitation on each page to either like you on Facebook or subscribe to your mailing list will go a long way toward helping you achieve your longterm goals for your website.

So what exactly is a strong call to action? There’s no formula for you to follow when it comes to crafting a call to action, but you do need to make sure it is concise and specific. Users need to be able to quickly and clearly understand what it is you want them to do after reading your call to action in your page content. Ultimately each page’s call to action should further your overall goal for your website. If you’re struggling to develop a strong call to action on your website, contact your web designer for assistance.

What is keyword density?

Posted on April 14th, 2014 by John Giaccotto

Keyword density is the percentage of times a keyword appears on a web page compared to the total number of words on the page. It is one factor used by search engines to determine the relevance of a web page for specific keywords or keyword phrases. Therefore, it is an important aspect to consider when you are working to improve your website’s search engine optimization.
What’s the ideal keyword density for your web pages? There’s no good answer to this question. Unfortunately, search engine algorithms remain a mystery. However, there does appear to be a law of diminishing returns with keyword density. While you don’t want to use your keywords and keyword phrases too little, overusing them will work to your detriment. The trick to striking the right balance is to work your keywords and keyword phrases into your content in a natural way.

You know you’ve achieved an effective keyword density when you have included keywords and keyword phrases throughout your content without it sounding stilted or artificial. You should be able to read it aloud and it should sound natural to readers. A final key to keyword density is to make sure that your keywords and keyword phrases are relevant because if you get the density right and the keywords are not relevant, it won’t matter and your rankings will suffer.

In order to achieve the ideal keyword density for your web content, work closely with your web design and marketing pro. You’ll need to make sure you’re generating useful relevant content with a good mix of keywords and keyword phrases in order to get the kind of results you need for success in today’s competitive market.

What do you consider to be the ideal keyword density for your website content?

5 Beautiful eCommerce Websites

Posted on April 13th, 2014 by John Giaccotto

An ecommerce website should provide the same experience for the shopper as a brick and mortar store. You need to present your products online just like you would in a physical storefront. The best ecommerce websites provide a seamless shopping experience from start to finish.

Does your current ecommerce website create a memorable experience for your online shoppers? What do you want your customers to feel when they arrive at your online storefront? Here are 5 examples of beautiful ecommerce website designs to give you some inspiration for your next website launch or update:

1.Stormy Mountain Candle
Stormy Mountain Candle sells premium hand poured candles in stores and online. This beautiful ecommerce website design transports shoppers from their computers into the stores with its cohesive color scheme and subtle background pattern.

Screen shot 2014-04-21 at 11.20.47 PM

2.JM&Sons
JM&Sons are furniture makers in Toronto. This ecommerce website design draws shoppers into the lifestyle surrounding the company’s furniture and accessories. The design uses white space and beautiful pictures of the products to showcase the high quality craftsmanship.

Screen shot 2014-04-21 at 11.25.39 PM

3.DODOCASE
DODOCASE is a beautiful online shop showcasing American made iPad and iPhone cases, laptop sleeves, wallets, folios and paper notebooks. The website makes use of a tasteful background texture, vibrant pictures as page elements and a clean layout to provide shoppers with an elegant shopping experience.

Screen shot 2014-04-21 at 11.33.26 PM

4.Leather Head
Leather Head’s ecommerce website makes smart use of white space to showcase its high quality leather sports products. You can almost feel and smell the leather gloves showcased on the home page. The white space on the page gives shoppers room to let their mind wander to fond memories of baseball as a child.

Screen shot 2014-04-21 at 11.34.05 PM

5.Helm
Helm sells classic American boots for men. These boots are made in the USA, handcrafted in Maine from domestic leathers and materials. The stunning ecommerce website showcase the lifestyle with its use of a patterned background and textured header. The graphics on the home page are strong images where shoppers will feel as though they are peering into a high end boutique or people watching on the street.

Screen shot 2014-04-21 at 11.38.41 PM

How to Redirect Using PHP

Posted on April 12th, 2014 by John Giaccotto

1083328_41541641A redirect is quick and easy with PHP. When you want to redirect a user from the page they entered to a different page, all you need to do is use a simple PHP script. Simple PHP redirects are useful for instances where the page the users are trying to access no longer exist.

With this simple method, you can seamlessly redirect users to the new page without requiring to click on a link in order to proceed. Redirects using PHP work on all browsers, so they’re an ideal solution for web development.

Here’s how a simple redirect should look:

<?php

header( ‘Location: http://www.examplesite.com/new_page.html’ ) ;

?>

First, change the code on the redirect page following the above example. Then, replace the URL in the example with the URL you want your page to redirect to. Make sure there is no text sent to the browser before the redirect or it will not work. Finally, you may want to remind users to update their links or bookmarks.

Making the Best Use of Space on a Web Page

Posted on April 11th, 2014 by John Giaccotto

1418124_25366521Some websites are just too busy. Have you ever left a website because it was overwhelming? Page layout is one of the biggest challenges you will need to address if your web pages have lots of content and design elements. Making the best use of space on a web page isn’t ever easy, but it’s even more difficult if you have a lot to fit onto your pages. How can you make the best use of space on your web pages?

Work with a web designer. This may seem obvious, but too many business owners try to go it alone. Your web designer will be able to help you create a user-friendly page layout  for your site’s pages. When you meet with your designer have an open mind. You might be surprised at how different, but effective your site’s pages can be laid out.

Create a separate space for separate pieces of content and design elements. You will improve the usability, readability and overall aesthetics of your web pages simply by defining their layout. Lumping all of your text content, graphics and videos all into one solid block may allow you to pack your pages with information, but nobody will every be able to find it.

Be consistent in your layout. When you have a lot of content and design elements on your web pages, you can really make the most of your space by having a consistent layout. Plus, your regular users will appreciate consistency you’ve established on your pages. You’ll save space in the long run because you will be able to tailor your content and design elements to fit into your existing layout.

White space is an important, but often overlooked design element. Sometimes the best use of space on a web page is its white space. White space gives your page content room to breath and allows users to focus in on important parts of your site. When laying out your pages, be sure to include plenty of white space in your design. Working closely with your web design pro will help you refine the white space on your pages into a work of beauty.

Plan ahead. One of the easiest ways to make the best use of space on a web page is to carefully plan it out ahead of time. Designing a page on the fly is a sure way to end up with a cluttered mess. Invest the time upfront on your page layout and you’ll have a spacious, content rich website.

Where to Place Social Sharing Buttons on Your Pages

Posted on April 10th, 2014 by John Giaccotto

abstract-shape-1178168-mPlacement of social sharing buttons on your website’s pages is very important because it can have a significant impact on user behavior. In general, most users expect to find social sharing buttons at the top or bottom of content. However, sometimes social sharing buttons are placed in the middle of pages with lots of content. So where should you place social sharing buttons on your pages?

Social sharing buttons are used for two specific purposes:
1.Encourage users to follow you
2.Encourage users to share your content

The purpose of the social sharing button will largely determine its ideal placement on your pages. In general, you’ll want to place your sharing buttons with the purpose of gaining more followers on either the top or bottom of your pages. This is where users are used to finding these sharing buttons, so why complicate it for them?

Social sharing buttons for encouraging users to share your content can be placed on the top of the article page, bottom of the article page or both. For longer article pages, you can include sharing buttons at a logical midpoint in the page. While button placement is important, keeping your placement consistent is critical.

Unfortunately, there’s no hard and fast rule for placement. You’ll have to work with your web designer to determine the most effective placement on your pages. For encouraging users to follow you, be sure to place the buttons in a prominent spot in either your header or footer area. For encouraging users to share content, you can’t go wrong with placing buttons at the bottom, but the top and bottom can both be effective. Again, the key is consistency.

Where do you place social sharing buttons on your pages for increased engagement?

Website Design

We create custom high quality designs targeted to your brand which convert traffic and engage your prospects or stakeholders.

Learn more >

Custom Web Applications

We have built hundreds of custom web site applications and can make your vision a reality.  Let us show you our unique process.

Learn more >

Content Management

Pain free web site updates are possible!  We have an array of solutions to make updating your website easy.

Learn more >

e-Commerce Websites

Want to sell your product or service online?  Let us show you some sites we've built that do millions per year.

Learn more >

Search Engine Optimization

You're in business to make money and simply having a web site isn't enough.  You have to be found and your traffic has to convert.

Learn more >

Website Hosting

Looking for fanatical support, expert technicians and a local hosting provider?  We’ve got you covered.

Learn more >