Tag Archives: brent-oxley

A Guide to Using Google Web Fonts

Not so long ago, standard monospaced fonts were the norm in computers. Then, a young Steve Jobs took a calligraphy class in college and eventually built a computer capable of housing endless font options. The Internet was slower to catch-on with the digital font revolution. When was the last time you took notice of a font on a website? We’ve been staring at the same old standard fonts for so long that we neglect customizing how our content looks from the first typed letter. If you’re ready to take the next step in customizing your web fonts, there are a few things to consider before taking the plunge. First of all, just because web fonts can be creatively customized doesn’t always mean they should. Your body copy should be easily readable, which is what makes fonts like Helvetica or Arial so popular. Instead, employ creative and innovative fonts in your titles or headers to bring some personality to your copy. Using a new web font also requires a little coding before you’re up and running. But don’t let digging into the backend of your site intimidate you. A tool like Google Fonts holds your hand throughout the process from font selection to instructions on inserting the code into your website. And best of all, it’s free to use!  Here’s how to get started:   Step #1 – Back-Up Your Website Before you touch your current fonts, back-up a copy of your website according to your local hosting provider’s instructions. You never know when you might hit a bump or a wrong key and need that latest version.   Step #2 – Getting Started To choose the font that’s right for your site, visit Google.com/fonts for a collection of 629 (and counting) font families. Look at the top of the screen and locate the tabs reading “Word, Sentence, Paragraph and Poster.” Pick the option you want to see and type the text you the “Preview Text” field. Next, pick a font size and start scrolling down to view your text in a wide variety of fonts. Each cell of text features a different font option ranging from Meriweather Sans to Caudex, making it easy to compare and choose your favorite.     Step #3 – Filter Your Results The left-hand side of Google Fonts offers a “Filters” section. Click on the “All Categories” drop-down and choose between serif, sans serif, display or handwriting and hit “Okay” to see your new preview. You can also select your font thickness, slant, width and script to customize your results to find the exact kind of typeface you’re looking for.   Step #4 – Build Your Google Web Font Collection Once you find the perfect font style, hit the blue “Add to Collection” button. You can also customize more font options and build up a collection of different options that are ready for use. Just be careful about the number you select. Google will end up taking all the font collections you choose and giving you a code to insert into your site. Stick with one or two fonts or risk dragging down the speed of your site.   Step #5 – Review Now, look at the bottom of your screen. There, you’ll see your Font Collection on the lower left-hand side. Highlight the collection you want to see and click “Review” to see your font in action.   Step #6 – Use Your New Font Once you’re ready to go, select your Font Collection and click on “Use” in the lower right-hand corner of your screen to read through the available options. Be sure to check out Google’s handy icon that displays your new font’s estimated impact on page load times and the tip, “Using many font styles can slow down your webpage, so only select the font styles that you actually need on your webpage.”   Step #7 – Add to Website Ready to integrate your new Google Web Font into your website? Scroll about halfway down the page until you see the option for, “Add this code to your website.” Stick to the standard option to copy and paste the code into the header of your site. Google Fonts will give you instructions to paste the code as the first element in the of your HTML document. You’ll also find instructions on how to import the code into your stylesheet or use JavaScript.     Step #8 – Integrate the Fonts into Your CSS Don’t worry about how the fonts will look in different browsers. Google Fonts’ API will go ahead and generate browser-specific CSS to use your new fonts. That said, you still need to add the font name to your CSS styles to make it all work. Here’s an example CSS style that Google Fonts gives to keep you on track: h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }   Step #9 – Test Your Site Hit “Save” and preview your site. If you’re not seeing anything different, try opening a different browser or clearing your cookies first. You might be staring at a cached copy of your site.   Step #10 – Take a Short Cut If you’re using a WordPress template for your website, consider taking a quick and easy short cut. Download the Google Web Fonts plugin and directly customize your font options from within your WordPress dashboard. Google Fonts regularly adds new options to its library, so keep checking back if you’re looking for a specific style. But don’t worry about missing out if you’re using the WordPress plugin. It will tell you when an update is available, unleashing a whole new world of fonts at your fingertips. Continue reading

Posted in HostGator, Hosting, php, VodaHost, vps | Tagged , , , , , , , , , , , | Leave a comment

10 Sources For Web Design Freebies

While “Content is King” still rings true on  many levels, it no longer tells the entire story of digital marketing. Content might prove the foundation for your kingdom, but it doesn’t exist in a vacuum. Web design, SEO, user navigation and social media strategy are just a few of the other key players required for long-term success. Chuck Longanecker of Digital-Telepathy , a user-experience design firm, knows the importance of good web design in internet marketing. In a post at Mashable, he wrote, “the ‘beautification of the web’ is upon us.” But don’t confuse the idea of web beautification with fancy graphics and expensive landing pages. Just look at Pinterest and Tumblr to see how simple, clean design can attract an enormous following. Fortunately, enhancing your web design doesn’t have to cost a small fortune or take a lot of time. Here are ten design freebies that can help enhance your web presence today:   Premium Pixels Find handcrafted micro icons, textures, brushes, iPhone chat bubbles, textures and more at Premium Pixels . Unlike many free web design collections, these can be used for both personal and commercial use. BittBox BittBox offers design tutorials, along with vectors, high-resolution Photoshop brushes and textures. Look for posts in the series Freebie Fridays and Free Texture Tuesdays for fun giveaways, featuring everything from weathered wood designs to grunge splatter brushes. These freebies are yours to use as tools during the design process – even if you’re planning to sell your creations. Just be aware that users can’t redistribute or post them for download in their original state. Open Source Web Design Download and share your own free web design templates at Open Source Web Design . If you’re not sure where to start, look through the OSWD’s collection of Favorite Designers or share an idea through their Suggestion tab. There’s plenty of great stuff to be found! Design Moo Dubbed, “The world’s greatest source of free and commercial design resources,” Design Moo features free PSDs, vectors, textures, patterns and fonts, among other design goodies. Become a Design Moo member for quick access to a robust collection of design elements. Or, upgrade to a paid membership with access to exclusive design resources, perks and the ability to sell your own creations. Best PSD Freebies Best PSD Freebies offers icons, sliders, buttons, banners, ribbons, web themes, Photoshop files and more. The site has earned its bragging rights with over 200,000 downloads to date and no signs of slowing down. Flickr Creative Commons Don’t forget the photos and other images when it comes to web design. Flickr offers photographers and artists the option to offer their work through the Creative Commons license at Flickr.com/CreativeCommons . Flickr uses ridiculously easy license icons to show how each image can be used. Some allow you to use the image in any way you see fit, but only if credit is given. Other artists choose the option, “No Derivative Works” – meaning that others can copy, distribute and display verbatim copies of the work. Icon Finder Hunting down just the right icon can be a taxing and time-consuming chore. Save yourself some time and head to Icon Finder and do a quick search for anything from “mobile icon” to “social media icon” and find a comprehensive list. Not all icons are free, but clicking on the “Free” tab will help narrow down your results significantly. Pixeden Download free design templates, tab bar icons, iPhone mock-ups, PSD frames texts effect and other web sources at Pixeden . The site was designed as a one-stop shop for developers and designers in need of free elements to get their projects in gear. A premium membership grants you access to support services and the ability to make further modifications to their design elements in your projects. Smashing Magazine Though Smashing Magazine is an online publication for design pros – not a design element repository – it also offers a freebie category . Past freebies included “Typeplate: A Starter Kit for Beautiful Web Type,” free WordPress themes, icon sets and templates for mobile projects. Best of all, Smashing Magazine’s target audience of designers, meaning that all the freebies that are up for grabs have been looked with a discerning eye. Da Font Where would your content be without a good font? Da Font hosts an archive of free downloadable fonts organized by style, author, popularity or alphabetically. There’s not much you won’t find here. The site’s font collection is vast, ranging from groovy to “foreign look” and plenty of scripts.   With so many freebies readily available for use, there’s really no excuse to neglect your web design. But there’s also no shame in asking for help and tapping a professional to usher in the next stage of your design strategy. That step might mean a complete design overhaul or a simple logo update to better align with your brand and overall messaging. Remember there’s no magic formula to web design. Start by integrating a few key elements, from icons to a new web template, to refine your site’s style and usability. Keep making adjustments until you find the right combination for your growing online presence. Continue reading

Posted in HostGator, Hosting, php, VodaHost, vps | Tagged , , , , , , , , , , , | Leave a comment

33 Killer Resources for Getting More Out of Your Website

If you run a website, you know how important it is to get the most out of it. To improve your skills as a webmaster, check out any of the following 33 resources:   Website Reference Sites Mashable – Mashable is a site that focuses on the online world. With segments for business, technology and social media, it is one of the web’s leading sources of information on online marketing and a great way to stay up-to-date. Social Fresh – Social Fresh is a leader is social media marketing and technology, making it a great resource for best practices in online marketing. Copyblogger – Copyblogger focuses on content, from landing pages to newsletters to sales pieces. If you’re looking for tips on writing copy that will help you soft sell your products and services, check out this great resource.   Website Optimization Tools XML Sitemap – An XML sitemap (like the one created by this plugin) helps search engines to more easily read your site, which is crucial for ranking high in search engine results. ClickTale – Clicktale is designed to track user behavior on your site and produces professional-looking reports on visitor movement throughout your pages. CrazyEgg – This tool provides website analytics through heat mapping and scroll reports. It also offers a feature called Confetti, which allows you to segment all the clicks on your site by referral source. ClickDensity – This analytics tool is free, self-hosted and simple to use. ClickDensity provides heat mapping that you can manage completely behind the scenes, free of charge. Zentester – Zentester offers A/B testing, scroll and heat mapping, and an analytics feature as well. It’s a simple tool that helps small business owners create great landing pages for their websites. Webpagetest – Webpagetest allows you to test your web page’s load time on multiple browsers in real time, giving you a quick way to understand if your site is optimized for load time. Google Page Speed – Be sure to check out Google’s own tool for determining the load time of your website.   Website Tracking Tools Google Analytics – Google Analytics is Google’s tool for determining what your users are doing on your site. It offers some basic analytics like demographics, bounce rate and number of pageviews, and is both free and easy to install. Chartbeat – This tool offers analytics with a focus on what’s hot now. If you’re looking for real-time trends, Chartbeat offers a visually pleasing display of this type of data. Clicky – Clicky offers website analytics, including time-on-site tracking and real bounce rates. All statistics are real-time, though some detractors feel its interface is not user-friendly. GoSquared – This analytics tools also focuses on what’s happening right now, including a second-by-second analysis of what’s happening on your site. Reinvigorate – Reinvigorate offers basic analytics, like number of visitors and visit length. It also includes a basic heat mapping tool as part of its package. Woopra – This analytics tool aims to integrate analytics and CRM with the end goal of tracking user behavior across different types of devices.   Social Media Integration Disqus – This third-party commenting system integrates easily with a variety of CMSs, including WordPress and Blogger. Disqus is extremely mobile-friendly and reflects comments and responses in near real time. Livefyre – Livefyre is a new commenting system that offers many of the benefits of Disqus and Intense Debates, while also allowing users to post their comments simultaneously to Facebook and Twitter. IntenseDebate – IntenseDebate is a third-party commenting system that offers the ability to reward Reputation Points to rank comments and allow “better” comments to display above less popular feedback. Add This – AddThis is a simple social sharing tool that allows users to easily share your content to the social network of their choosing. Shareaholic – Similar to AddThis, Shareaholic offers the ability to install a tool bar with social sharing buttons to your site. Its aesthetics are different, so your preference between the two will be determined mostly by your taste. Click to Tweet – Clicktotweet advertises itself as the simplest, best way to promote your content on Twitter. The plugin allows you to generate pre-populated tweets with a snippet unique text you’ve created from your site’s content. Hrefshare – Much like Click to Tweet, Hrefshare allows you to create pre-populated content for your users to distribute. The difference is that Hrefshare integrates with Facebook, LinkedIn and Google+ in addition to Twitter. Send to Kindle – Adding this tool to your website allows readers to save your content to their Kindles. This way if they want to read at a later time, they already have your content at their fingertips.   Contact Capture LeadLife – LeadLife is a more traditional CRM and contact management system. Its cost may be significant for many small businesses, but it has shown a definite impact on revenue for some companies. Constant Contact – Constant Contact is a newsletter and email capture service. Starting at $15 per month, this tool allows you to easily manage your email list and capture new leads. MailChimp – The Mailchimp newsletter service is free of charge if you have a subscriber base of 2,000 or less. This contact capture program also integrates with services like EventBrite and SurveyGizmo. Aweber – If you need better analytics and reporting features from your email newsletter service, give the Aweber list management program a closer look.   Website Survey Tools SurveyMonkey – SurveyMonkey offers both free and paid versions that can handle everything from small, informal surveys to the ability to customize surveys, skip questions and even download survey reports. SurveyGizmo – This tool is allows you to create surveys with a customizable look and feel. You can also embed videos and images into your surveys and integrate easily with your MailChimp email list.   Social Media Management Tools Hootsuite – Hootsuite (which comes in both free and paid versions) allows you to post or schedule updates to multiple social networks (Twitter, Facebook, Facebook business pages, LinkedIn, Google+ and Myspace) from one simple interface. Tweetdeck – This Twitter management tool is 100% free to use and offers the ability to view multiple Twitter streams at once. Similar to Hootsuite, you can schedule updates from this easily-accessible interface. SproutSocial – Sprout Social is a paid toolset that provides social media management features, as well as analytics. Unlike the options above, it allows multiple people to access the account, making it a great tool for larger teams.   Having the right resources on hand can help ensure you’re making the most of your online presence. Implementing the combination of the tools above that’s right for your business can help you to easily take your website to the next level. Continue reading

Posted in HostGator, Hosting, php, VodaHost, vps | Tagged , , , , , , , , | Leave a comment

Smart Ways to Update Your Stale Website

Does your website feel stale and uninspired?  Have you avoided making any updates to your pages, due to a lack of time or technical “know how?” Well, then, it’s time to move past these trite excuses and start updating your stale website! In today’s digital world, websites must be more than simple, static billboards that telegraph the same information day in and day out.  Your users are expecting an engaging, dynamic presence – and the easiest way to convey this feeling is to regularly update your content.  At the same time, regular site changes are important from an SEO perspective, as the search engines value and prefer to reward websites that feature “fresh” content. You don’t need to undergo a complete website redesign every month to keep things interesting.  Instead, consider the following strategies for ways to update your stale website without a significant investment of time or energy:   Tip #1 – Add a blog Blogs are great from both a reader and an SEO standpoint.  When you install and regularly update your company’s blog, readers come back again and again to see what new information you’ve posted.  The search engines also reward your site, as the inclusion of more content naturally creates more opportunities to get picked up for different keyword-specific search results pages. Installing a blog is easy when you use tools like WordPress or Joomla.  Truly, the harder part is setting and sticking to a consistent publishing schedule.  Though it can be a challenge to marshal the resources necessary for proper editorial standards, the effort is well worth the rewards of a regularly updated site.   Tip #2 – Revise your “About” page Most companies slap together a generic “About” page – only to realize later on that it isn’t connecting with readers in a meaningful way.  If you find yourself in this position, don’t worry.  It’s easy to update your “About” page in order to make this content fresher and more engaging for viewers. To revise this all-important page, start with the “5 Ws”: Who are you? What do you do? When did you open for business? Where are you located? How are you achieving your business’s aims? It’s a simple framework, for sure.  But by following these guidelines, you’ll create the kind of punchy “About” page that both answers readers most pertinent questions and encourages them to dive more deeply into your other content.   Tip #3 – Add a new special to your home page Want a quick and easy way to freshen up your website’s content?  Simply post a new special on your home page!  For example, you could: Offer a special discount on shipping costs to new customers Give away free product samples with purchases over a certain dollar amount Provide discounts in exchange for referrals to your business Remember – your website visitors are always looking to get the best possible deal they can.  Adding any of the different specials described above to your home page both captures their attention and helps them to believe that their getting great value by working with you.   Tip #4 – Feature a new product or service Similarly, showcasing a new product or service on your website connects with readers in the same way as featuring a home page special.  Most shoppers like to believe that they’re on the cutting edge – that they’re “early adopters” who try new things before others.  Featuring new products or services on your home page appeals to this instinct, while also putting different offerings in front of your regular readers’ eyes. You don’t even have to launch a new product or service to take advantage of this effect.  If you offer a product or service that doesn’t generate many sales, giving it a spotlight on your website’s home page can help to freshen the look of your site while also raising the impact of underperforming offerings.   Tip #5 – Try a new template Finally, if you want to go all out and truly freshen up your website, you can’t do much better than trying a new template. If your website operates on WordPress, Joomla or any other popular CMS, updating your stale look and feel truly is as simple as purchasing and uploading a new template.  Of course, with any template swap, you’ll likely have to do a bit of clean-up work to ensure that your information displays appropriately within your new site.  However, the time and cost of doing so still comes in dramatically lower than having a custom site built from scratch, making this a smart way to update your stale website. Do you have any other ideas for ways to freshen up the look and feel of a dated website?  If so, share your recommendations in the comments section below! Continue reading

Posted in HostGator, Hosting, php, VodaHost, vps | Tagged , , , , , , , , , , , | Leave a comment

How to Optimize Images for Your Website

“A picture is worth a thousand words” – and that’s as true when it comes to SEO as it is with descriptions. Images play a huge role in website development, as their visual appeal is a powerful way to attract and retain reader attention.  However, the way that you incorporate images into your site can also influence the way your website is handled by the search engines.  To get the best SEO bang for your image buck, consider taking all of the following steps to optimize images for your website:   Step #1 – Check your licenses First – before we even get into the meat of modifying your images to make them more appealing to the search engines – take a few moments to be sure you hold the appropriate licenses to the images you plan to use. Smart webmasters know that you can’t simply right click and copy an image from anywhere on the web to use on your site.  Instead, you’ll need to download royalty free stock imagery, find images that have been licensed for commercial use under the Creative Commons license or purchase images from stock photo websites. Making sure that your image licenses are in order won’t improve your SEO, but it will prevent you from receiving DMCA notices from angry photographers who have the power to otherwise disrupt your business.   Step #2 – Resize your images Once you’ve appropriately sourced your images, take the time to resize to the exact dimensions at which they’ll be displayed on your website.  Photoshop and SnagIt are two popular image editing programs that you can use for this purpose, although the PicMonkey website represents a great free alternative for beginning webmasters. The reason that it’s important to do this before you upload your images is your site’s speed.  Forcing your website to reload images on the fly (because you’ve uploaded large images and told your site to display smaller versions) consumes digital resources, which can slow down your site’s operations.  And because site speed is becoming a major factor in your SEO performance, anything you can do to minimize the number of resources used is to your benefit.   Step #3 – Compress your images At the same time, don’t just resize your images – compress them as well! Both the size of your picture and the amount of information it contains (as in, whether it’s a high resolution image or low resolution picture) determine the number of resources required to load it to your site.  And since most websites don’t require the same level of photographic detail needed for art prints or printed pictures, you can safely compress your images without compromising their display value. To compress your images for free, check out Yahoo’s smush.it tool.  With just a few clicks of the mouse, this service will remove unnecessary bits from your image without changing its overall appearance – speeding up your site and improving its SEO performance.   Step #4 – Add target keywords to your image file names Once the size and compression rate of your images have been optimized, it’s time to start integrating your target SEO keywords.  One place in particular to do this is your image file names. As an example, if you run a website that sells fine jewelry and are in the process of uploading a picture of a gold watch, don’t leave your files names in their original photographer formats (for example, “IMG_023490.jpg”).  Instead, replace it with a keyword-optimized version – for example, “fine-jewelry-gold-watch.jpg.”  Doing so will help the search engines to better understand the content of your images, as well as how they should be treated from an SEO perspective.   Step #5 – Add title and ALT tags to your images In addition to optimizing your file names, you can integrate keywords into both the image title tag and ALT tag fields.  But that said, don’t treat these two areas as repositories for all the different keyword variations you can stuff into them. Think about the original purposes of these fields, which were to assist both the search engines and website visitors using adaptive technologies to better understand what they were seeing.  For this reason, any optimized tags you add should be descriptive in nature.  Don’t stuff your keywords into these fields – instead, create natural-sounding image descriptions that include mentions of your target keywords when it’s appropriate to do so. When it comes to image optimization, approach the process from a holistic standpoint.  Take as many actions as you can to improve your page load times and the ability of the search engines to parse your content, but don’t go overboard.  Including too many keyword repetitions or optimizing every single image on your site perfectly could set you up to experience an over-optimization penalty down the road. Continue reading

Posted in HostGator, Hosting, php, VodaHost, vps | Tagged , , , , , , , , , | Leave a comment