Category Archives: Development

10 Professional and Free WordPress Themes for Your Business

Did you know you can host a powerful and versatile company website on the WordPress.org platform? Frequently we find our clients confused about WordPress sites – they’re not just for blogs. In fact, lots of businesses use WordPress for their static sites because a designated web administrator from within the company can easily edit pages through the Content Management System (or CMS – which we have a whole post about right here). He or she doesn’t even need to know HTML or any programming language because the backend is as easy as a few menus and a word processor.

What you will need for your new site is a great design, and luckily for you, there are seemingly endless pre-made WordPress themes to suit your needs. Some are premium; some are free. For a new business with a limited time-frame or budget, one option is to try to find a free or low-cost theme, and then hire a designer to help you personalize it. It’s a little known fact that once you’ve downloaded a theme, you own all the files, so you can edit it however you want!

Here are 10 awesome and totally free themes. Maybe you’ll love them as is, or if not, you can always add a few tweaks here and there and no one will know you didn’t build it from scratch!

Danko
Intended for non-profts or charities, this beautiful theme could be great for an array of businesses. Plus the slider is so unique!

Pytheas
Clean, simple, and great for a business with a portfolio. It’s got a well-integrated slider, and it’s responsive!

Academia
Just as the name suggests, this site is tailored towards schools and universities, but is by no means so limited. If you’re looking for the scholarly feel, check this one out.

Poloray
This one’s all business: clean, smart, and professional.

Sight
Have a lot of content to get out there? We love this theme because it packs a lot on the page without overwhelming the eye. We love the modern twist on a newspaper-look, too!

Bizz
Another responsive beauty from WPExplorer, the Bizz theme already has a fantastic layout, just add your colors and logo!

Suburbia
Another option for a content-heavy blog, this theme fits in a lot of elements seamlessly with its innovative layout.

Structure
With modern lines and striking fonts – this theme will definitely make a splash.

Themia
A simple but sleek design for a small website that doesn’t need much fluff.

Murmur
Another clean, professional choice that could be really personalized with the addition of an accent color!

Could Your Website Use Freshening Up? Here Are 5 Ideas (Plus Resources!) for Inspiration

pantone

Considering the speed that the web is progressing, it’s no surprise if your business’s website design feels a little tired, even if its only a few months old. If you’re not ready for a complete overhaul, though, there are a few ways to freshen up your look and increase your website’s effectiveness with minimal changes. Here’s a few ideas, plus resources to get you started!

Get new buttons
Especially for your call-to-action! A shiny new button will draw the attention of first-time visitors, and also repeat visitors who’ve trained their eyes to gloss over your action buttons. Freepik.com has tons of free vector button files you can download and pull right into Photoshop. Just add text. By People has a fantastic and free vector image pack that includes 70 buttons and 50 social media icons, not to mention shadows, background, menus and much much more. Almost everything is also a .psd, so it can easily be edited or added to in Photoshop.

Add new photos
Has the same stock photo of a smiling woman been on your front page for a year? It’s definitely time for a change. Just be sure to find a legal image. Check out our blogpost, 5 Free Web Image Resources, for our top sites to find free photos. However for your most prominent website photos, it might be worth it to go ahead and pay top dollar for a great image from iStockPhoto.

Change colors
A fresh color palette could be just the ticket to take your website from humdrum to hot. We’ve got 6 Tools for Choosing Your Website’s Color Scheme, but our favorite is definitely the Kuler Palette Creator from Adobe.

If you’re stuck with your branded color palette, try adding in another color or playing with the saturation of your existing colors to give your site a makeover. Or try adding a few striking images that are within your color palette! Find them with the TinEye Labs Multicolor Search Tool.

Simplify
Is there a lot going on your website? Try utilizing the 80-20 rule: typically in web design, 20% of the content is providing 80% of the value. For example on a restaurant website, the most valuable 20% is probably their menu, phone number, hours, and location. What do you do with the other 80%? Pare it down as much as possible, and make sure all of it plays second fiddle to the most important 20%. If your website features a call-to-action, reducing the noise on your site will hopefully lead to less distraction and more conversions!

Get more above the fold
If you’ve already simplified, you should have an easier time with this one since you’ve got less content in the first place! Move around your elements so that your most important content (especially your call-to-action/phone number) are above the fold. Try shortening your header or removing extraneous images.

Simple changes can really go a long way to make your website more appealing to your visitors and get them to keep coming back. Just remember when you’re swapping images and buttons and adding colors that the most important thing is your message, so don’t clutter it!

7 Plugins to Optimize Your Business’s WordPress Site

wordpress-logoYou’ve probably poured a lot of resources into your website to make the interface user-friendly and the design look great, but you may have neglected some of the more subtle aspects of your website. Especially if your website is your storefront (and isn’t that more or less the case for all of us these days?), it’s worth going the extra mile to ensure your potential customers have the best experience possible.

Luckily for those websites on WordPress, there are plugins to do a lot of the hard work for you. You just have to know which ones to install! That’s why we’ve compiled this list of 7 essential plugins that we recommend for any site.

Disqus
If your website allows commenting, this plugin can really boost your customer engagement. First, it allows people to sign in through more avenues; they can use Facebook, Twitter, Google, Disqus’s own network, or just your email address. It’s got a ton more moderator options, including whitelists and blacklists, and with the new 2012 Discovery Tools, you can even use Disqus to help visitors find related content and share to social media.

Contact Form 7
There are lots of contact form plugins out there, but this one is dead simple and reliable. It’s also easy to personalize the look of it in your stylesheet if you know CSS. You can have multiple contact us forms and customize the notification emails, and if you want an extra layer of security, this plugin integrates nicely with Really Simple CAPTCHA to keep out all the spambots.

Better WP Security
Since the botnet attacks that targeted WordPress accounts last month, more people are concerned with the security of their website, and you should be too! Even if you aren’t storing credit card or any other sensitive information on your site, it’s worth your while to take a few minutes to install this plugin that limits login attempts, changes your login URL, secures your administrative account, and more. Trust us, it’s much less time consuming that dealing with a hacked website!

UpdraftPlus
Now to be extra safe, though, you need a backup service – and this is definitely a good one, and free! It will backup your files and your database (most backup plugins and the WordPress exporter will only save your database), and send them straight to your email, or to a designated folder in your Dropbox, Amazon S3, Google Drive, or FTP account. If you’re looking for a service that will not only perform the backup but also store the files, you might try BlogVault, which is only $9 a month for a single website.

All in One SEO Pack
Your site is secure, backed up, and ready for comments and calls to action, but people need to find it first! This plugin automatically generates meta tags for your posts and optimizes your titles, plus connects with Google Analytics. It works right out of the box, too, so beginners to SEO don’t need to tweak the settings, but advanced users can fine-tune the plugin to their needs.

WP Super Cache
With all that traffic, you’ll need to ensure your site is running smoothly and quickly. A caching plugin will help your site load faster for repeat visitors by storing elements of the site offline on their computers. The browser will have quicker access to slower loading parts of your site, like images, so no one is stuck watching the pinwheel of death instead of reading your content! This site works right out of the box too, but has lots of options for the advanced user. Plus, it’s got an easy “delete cache” button so if you make big changes, you can be sure visitors won’t see a cached version of your site on their next visit.

WP Touch
If you take a look at your site visit analytics, we’d bet you anything that more and more of your visitors are checking out your site from a mobile device every month. That’s why it’s really important for your website to look good from phones and tablets. If your theme didn’t come preloaded with a mobile theme, this easy plugin will automatically send mobile visitors to a simplified, mobile-friendly version of your site with a drop down menu. The free version allows you to change the theme color for your mobile site, but if you want more customization, WP Touch Pro ($59) has tons of pre-made themes and options to perfect your mobile experience.

From sharing to security, we hope these plugins help your site performance, boost social sharing, and bring you the customers you want!

Adobe Dreamweaver: Why You Shouldn’t Rely on It, Plus Alternatives

Adobe_Dreamweaver_CS4_iconIf you’re fortunate enough to have access to the Adobe Creative Suite, or you’ve recently purchased a subscription to their new cloud-based software, you may have worked with Dreamweaver, Adobe’s coding and website creation software. For many web development newbies, Dreamweaver seems to be near the top of the list of must-know software, but from our point of view, you’re better off spending those hours learning more about coding free-hand than deciphering the ins and outs of this over-complicated software. Here’s why…

Dreamweaver’s biggest selling point is its WYSIWYG (pronounced whizz-ee-wig) or What You See Is What You Get editor. Basically, you’ve got a split screen where one half is your code and the other half is a browser-like rendering of your current code. The problem is that the WYSIWYG editor isn’t a browser, and even the most careful coder who relies on it will need to make adjustments once they pull the website up in a live environment.

The software also features file management, pre-made templates, and code suggestion capabilities (so you type “text-a” and it guesses that you mean “text-align”), which can help someone who hasn’t memorized all the HTML and CSS properties.

So at its core, Dreamweaver is a text editor and a file manager – and a very expensive one at that. Now that you can’t buy Adobe software to install on your hard drive and it’s all in the cloud, their monthly subscription just for Dreamweaver is $20 a month, or $240 a year.

But that’s not where the problems end. Dreamweaver automatically changes coding (which sometimes you really don’t want), puts CSS in the page header, creates clunky websites, packs in tons of useless features, and takes up a much bigger chunk of processing power than anyone could need a text editor to do. Worst of all, it makes for lazy coders. It’s so much more important for a web developer to know how to free-hand code and build a file structure themselves than rely on this software. So save yourself some time and money and try one of these instead:

Text Wrangler (Mac or PC)
If lightweight is what you’re after, look no further. This dead simple (and FREE) text editor isn’t packing all those bells and whistles, but if you can code successfully in this software, you’re ready for the world!

TextMate (Mac) or E Text Editor (PC)
Another simple but powerful editor, both of these programs also feature code checking, suggestion, and file management. It’s definitely more featured-rich than Text Wrangler, but won’t leave you dependent on its interface like Dreamweaver can. TextMate is $53, but E Text Editor is free!

CoffeeCup (Mac or PC)
Like Dreamweaver, CoffeeCup’s text editor includes a validation tool for checking your code, a file manager, and pre-made templates to use as a jumping off point for your website. The interface is pretty slick too, and at only $69 (and that’s a one time fee), your wallet will be much happier, too.

Now go forth and code!

What is DOCTYPE?

Earlier this week, we posted about the differences between XHTML and HTML, which are pretty slight. They both use the same basic vocabulary (tags), and the overall same structure, but XHTML is stricter in its syntax than HTML.

So how do you know which one is being used at all, and how does the browser know which rules to interpret the document under?

That’s where the DOCTYPE comes in. Try this: go to any website and right click anywhere on the page. You should see an option to “View Source” which will pull up a bunch of code. This is the code that the browser is reading to render the page you’re seeing. If the site is built correctly, the first thing on the page should look something like this:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

This code tells the browser what kind of document you’re viewing, which in turn lets the browser know how to render it. In this case, the webpage is an XHTML document, which tells the the browser to hold the document to the more rigid rules of that language, instead of the more lax rules of HTML. If the document is written in HTML, the DOCTYPE might also include which version of HTML. This is not only helpful for the browser, but also for developers who may work on the site later.

Other important things to know about DOCTYPE include:

  • The DOCTYPE tag is not technically written in HTML; it’s only an instruction to the browser.
  • It must be the first item in the document, before the <html> tag.
  • It is not case sensitive.
  • Your webpage may not render correctly if you have the wrong DOCTYPE listed!

To check that your given DOCTYPE is aligned with the code you have on your webpage, you can run your site or page through the W3 Validator. This handy tool will not only tell you what problems you may have on your page, but what line they are on so you can quickly address them!

HTML vs XHTML: What’s the Difference?

If you’re learning the ins and outs of web coding, you’ve probably started by learning HTML (and if not, we’ve got a blogpost to get you started). You may have also come across another term, one that’s related to HTML but not quite the same, XHTML. To learn the difference, we must first discuss a little bit of history…

HTML has evolved through many incarnations, and each one addresses compatibility issues by introducing and standardizing new code. Each version also eliminates support for old code that doesn’t work as well.

While HTML, a language created to display data, was progressing, another language used to store data was also developed. This language is called XML, which stands for EXtensible Markup Language. Unlike HTML, XML does not have predefined tags, so while tags like <p> and <div> are standardized in HTML, an XML coder gets to make up their own tags based on the information being stored. An email stored in XML might look like this:

<to>Kermit</to>
<from>Miss Piggy</from>
<subject>Song</subject>
<date>May 7, 2013</date>
<body>It’s not easy being green.</body>

Instead of <body> one might also (and correctly) write <message> because the exact tags are flexible, but the syntax is strict. Two of the most important rules are that tags must be written in lowercase and must also be closed. Having stricter rules ensures a better web experience.

The marriage of XML and HTML is called EXtensible HyperText Markup Language, or XHTML, which combines the rigidity of XML with the tags of HTML. The stricter rules ensure that developers use current, correct code to make the websites built in XHTML more stable. In HTML, the rules are not so rigid, meaning that the website is far more likely to break and also harder to maintain and update since errors are more difficult to spot. A few things XHTML requires that HTML does not include:

  • A DOCTYPE must be specified in the head of the document.
  • All attribute values must be in quotation marks.
  • All tags, attributes, and elements must be written in lowercase.
  • Empty elements (like <br> for “line break”) must be ended with a space and a forward slash (so in XHTML it would be written “<br />”).

Don’t worry if you don’t know what all that means yet (especially about DOCTYPE – more on that coming in an upcoming blogpost!), but this brief overview should help you know some of the most important differences between HTML and XHTML.

Now, which should you use? While there’s no discernible difference in the HTML versus XHTML user experience, XHTML is a simple step forward from HTML, it’s more stable, and it’s future ready. It’s good for developers to strive to ensure that their websites at least meet the standards set forth by XHTML, especially since it’s likely to make their website easier to maintain later on!

Learning CSS Basics

Last week, we covered some basics of HTML, the most fundamental of the web languages. While the Internet could function using only HTML, it wouldn’t be very pretty or as interactive. Luckily, HTML is supplemented with other languages like CSS, which is the second most-important Internet language because it determines the style and formatting of a website.

Without it, everything would look something like this:

Screen Shot 2013-04-30 at 5.00.09 PM

That was the first website created on the World Wide Web 20 years ago. The formatting is basic, the fonts are default, and it’s extra, super boring. Don’t let the same fate befall your website! Learn CSS!

First, it’s important to know that CSS can be written inline or in an external stylesheet. When CSS is inline, it’s written right into the HTML like this:

<p style=”color: #FF0000; font-size: 17px;”>This is a red paragraph.</p>

That code will look like this:

This is a red paragraph.

The “style” tag indicates that everything in the quotation marks will be CSS styling. The “color” property determines the font color, and the “font-size” property is just what it sounds like! Most CSS properties describe exactly what they do. Other properties include border, text-align, and margin. There are tons of possible properties, though, and as browsers advance, more and more properties are being added to the CSS language. This means that CSS is getting more versatile all the time, which is a good thing for web design and functionality!

Inline styling can be useful, especially for unusual formatting that you only need to use once. However, if you had to style every line of HTML inline, it would take forever! Plus, if you ever wanted the change the font color, you’d have to change it hundreds of times in every line!

That’s why most CSS styling is in an external stylesheet. The top of an HTML document will often have a piece of code that looks like this:

<link rel=”stylesheet” href=”style.css” type=”text/css” />

This calls the stylesheet so the browser knows to apply the styles in that document (style.css) to the following HTML.

Depending on the website, the stylesheet might contain just a few properties or hundreds. A smaller stylesheet might look like this:

body {
background: #FFFFFF;
color: #000000;
text-align: center;
font-size: 14px;
}

p {
margin-bottom: 20px;
}

h1 {
font-size: 20px;
font-weight: bold;
}

So what we’ve got written indicates that the body of this HTML document will be rendered with a white background and black text, all the text will be centered, and the default text size will be 14. The next block indicates that all the paragraphs (<p>This is a paragraph.</p>) will have a bottom margin of 20px. The last block determines that any content in the h1 tag will be in a larger font and bold.

The advantage of writing CSS in a stylesheet (as opposed to inline) is that the whole look of an HTML document can be changed by just editing a few lines in the CSS. You can increase the font size easily, or change the color to navy instead of black in no time. And since you can call the same stylesheet from all the pages of a website, you can make those changes across the whole site with minimal editing.

While HTML may be the building block of the web, CSS is the beautifier. This is only a rudimentary introduction, and we hope you’ll be inspired to learn much more about CSS. May we suggest the W3schools tutorials?

Learning HTML Basics

www-questionsHTML, the building block of the web, is the very first computer language any aspiring web developer or designer will study. The best part is that it’s not very hard once you learn how to read it, which really isn’t terribly difficult either. So let’s get started, shall we?

The first thing to learn about HTML (besides that it stands for Hyper Text Markup Language) is that it is built using plain text and markup tags, or more commonly, just tags. The tags describe the plain text and are enclosed in angle brackets (like these: < >). The tags also usually come in pairs, like <strong> and </strong>, which surround the text they are describing. The first tag is called the start tag or opening tag, and the closing tag, which begins with a forward slash, is called the end tag or closing tag.

Ok, that was a lot all at once. Let’s try an example.

<strong>This text is bold.</strong>

The code above will render the following sentence: This text is bold.

In this case, “This text is bold.” is the plain text, while the surrounding <strong> and </strong> tags are describing the text. Once you understand the basic structure of HTML, <tag>plain text</tag>, you’re almost good to go on creating your first HTML document! All you need to do is learn all the myriad tags themselves.

<p>This is a paragraph.</p>

Probably one of the most common HTML tags, the p tag indicates that the enclosed text should render as a paragraph. Depending on the CSS styling (which we introduced in our previous post, Web Basics: What are HTML and CSS?) the paragraph will be rendered in the main body font size, and probably have a medium margin beneath it to visually separate it from the subsequent paragraph. The browser knows to render it that way because of the HTML p tags surrounding it.

<h1>This is an H1 header.</h1>

That code will render like this:

This is an H1 header.

Unlike the paragraph, the header will render in a larger font, and sometimes even an accent font (again, depending on the CSS). The h1 tag is only one of the many possible header tags (usually there aren’t more than 6). They are numbered like this:

<h2>H2 Tag</h2>

H2 Tag

<h3>H3 Tag</h3>

H3 Tag

And so on. Now that you’ve got the basics, you’re ready to break out on your own! We recommend the W3 Schools HTML tutorials to learn all the most common tags. You’ll be a code in no time!

8 Awesome jQuery Design Functions

jqueryWeb developers everywhere love using the jQuery library as a versatile, time-saving way to elevate a good website to a great website quickly and reliably. In short: it’s amazing.

A little background: jQuery is the term used to collectively refer to a large open-source library of pre-made Javascript-based scripts that work across all the major browsers. These scripts (which are free to use and modify) allow developers to add complex functionality and animation to sites without starting at the very beginning of the coding process. For the website owner, it makes advanced web features like sliders or tooltips inexpensive and easy to implement.

But there’s so much more this library can do! So, to show off the best of jQuery, we’ve put together 8 amazing, mobile-friendly, and very different jQuery plugins that can be integrated into a site design. Who knows – maybe you’ll get some ideas…

Makisu
This unraveling navigation makes the list for being so visually stunning. This is an element that a whole site could be designed around. We also love that it comes in three different options: facing left, facing right, and head on.

SuperScrollorama
This one is so fun – even the demo elicits a smile! Perhaps the demo takes it a little too far for an average website, but used judiciously, this plugin which triggers animations during scrolling could really bump your website from a snore to a success.

Scrollpath
Want to have even more fun with scrolling? Why go straight down? This jQuery plugin allows you to create a custom scroll path, so while the viewer is just scrolling down with their mouse, the website shows them going sideways, diagonal, and even topsy-turvy! This one would be great for a homepage with a story to tell.

Nested
Have a lot of content to get on the page, but still want a responsive website? The Nested jQuery plugin might be the answer. Put your content into their gapless grid, and the plugin will rearrange your elements seamlessly to fit on whatever size device you’re viewing it on.

Fit Text
This is a great one for responsive designers because it resizes header text based on the screen size. The most important text on the page will always be the best size for the viewer.

Textillate
Want your text to fly in from the right? Or bounce down from the top of the screen? Easily animate text with this plugin.

Three-Sixty
Display an object and allow a viewer to see all the sides of it by rotating it with their mouse. This would be great for a product website!

Lazy Line Painter
Note: this is not flash! That’s right, go ahead and try it on your phone – it works. If you can create a drawing in Adobe Illustrator, you can have your artwork draw itself right on your website upon the page load. Coooooooooool.

We hope we’ve given you a better idea of how amazing the jQuery library is. Are you inspired?

Google Leaves WebKit: What Does It Mean?

browsersEarlier this week on the blog, we discussed cross-browser compatibility testing, which is so important for making sure your website works across multiple browsers. We mentioned that different browsers render your website differently because they all use different rules (based on different software, or rendering engines) for converting HTML and CSS into a visible site. Mozilla has it’s own rendering engine and Internet Explorer has… well it depends on the version… and Safari and Chrome both base their renderings on a software called WebKit.

Until now.

Google has recently announced that it will be abandoning WebKit in favor of it’s own web-rendering software called Blink. The changeover will occur in the next 10 weeks, with the release of Chrome 28. Another popular browser, Opera, has announced that they will follow Google’s lead to drop WebKit and adopt Blink as it’s rendering engine too.

So you have a little background, WebKit is an open-source software (originally developed by Apple) that both Apple and Google have been working on collaboratively since Google Chrome’s release in 2008. But apparently, Google finds that the rendering engine is not progressing fast enough for them. As Adam Barth, a software engineer at Google, wrote on the official Chromium blog, “having multiple rendering engines — similar to having multiple browsers — will spur innovation and over time improve the health of the entire open web ecosystem.”

For developers, this means that Chrome and Safari can no longer be expected to be so close in their web renderings. For years, WebKit has been almost a golden standard for designers because of it’s versatility and wide usage (WebKit based browsers across desktop AND mobile accounted for nearly 50% of all Internet usage in late 2012).

Web developers may also need to pay close attention to Safari’s next move. Much of the WebKit project’s original coding and maintenance was contributed by Google, and Safari depends on much of that code. Without the developers to sustain WebKit, Safari will need to pare down the project or beef up their dev teams.

The good news is many-fold, though. Blink is based on WebKit and won’t differ all that much during it’s initial implementation. Even further down the line when the two do diverge significantly, Blink-based browsers will just require the same compatibility testing that web developers already do.

With Blink, Google is also seeking to simplify the web-rendering process, and cut out some 4.5 million lines of code from WebKit’s complicated structure. Blink promises to be faster, less buggy, and more mobile friendly than current rendering engines, and we’re excited to see it.

In the long term, developers can look forward to new innovations and even simpler coding practices as a result of Google’s WebKit departure. So don’t despair, but DO keep cross-browser testing!!