My Blog

Category Archives: Web Dev Tools

FAQ: WordPress.com vs WordPress.org

November 6, 2015

When the majority of my clients hear “I work with WordPress” they immediately come back with: 

  1. I don’t need a blog 
  2. I don’t want my URL to be  [insertcompanyname].wordpress.com 

Both of these touch on common misconceptions about WordPress, so today I’m going to answer some frequently asked questions, including what is WordPress and why do you use it? Let’s get started… 

So what is WordPress?

WordPress is a Content Management System (often referred to as a “CMS”), which means that it is a platform that offers its users the ability to manage/edit/update the content on their website without knowing any code. Pretty simple, right?

Think of WordPress as the engine of your car, you can build the structure around it, add some paint, make it pretty and fill it with your friends, but the engine is what keeps it running. 

I went to wordpress.com and it looks like I have to pick a theme and my website is going to look like a blog, what’s the deal? 

If WordPress is the engine of your car, WordPress.com is like a base model, no bells and whistles, Honda Civic. It will look like a lot of cars on the road and you won’t be able to upgrade it in any way, but if you’re just looking to get from point A to point B, then it will do the job.

WordPress.com is a very straightforward, free platform that was created for people who want to build a website/blog with a few clicks of a mouse, not knowing any code, and get it online for free. There are few customization options with this service, so your website will look exactly like the template you select, with very little wiggle room. This is where the misconceptions start because with this version, your URL will include “.wordpress.com” and every one of these websites looks very much like a blog. I do not build websites with this version.

So then what do you build? 

If WordPress.com is like a base model Honda Civic, WordPress.org is like a totally custom built car. Every one of these cars will look slightly different, you may want your car to look like a Honda Civic, and that can be done, or you may want your car to look like a spaceship, and that can be done too. The main point of this analogy is to say that WordPress is still the engine of that car, and the engine on both of these versions (WordPress.com vs WordPress.org) is exactly the same, the difference is the ability to customize how it looks and functions in order to make it unique and make it suit your needs perfectly. 

I work with WordPress.org. This version was intended for developers to build/code a website from the ground up, which does require a lot of code. Then, once the building and coding of it is done, the website uses the WordPress content management system, making it easy to edit the content on the website without needing to know any code. In other words – I build the car around the WordPress engine, and then hand you the keys to drive it. 

Why do you use WordPress? 

I use WordPress because my clients want the ability to change the content on their websites, they want to be able to add pages, remove pages, edit images, edit copy, add a blog post and more without having to call me up every day to make the changes for them. The WordPress engine is a very user-friendly platform that gives my clients a lot of control over their website without having to see a single line of code. I use WordPress because it’s powerful, well-supported and has a lot of tools that make the building process more smooth and secure for my clients. 

I hope that answers some of your WordPress questions. Next up, I’ll be tackling What is a WordPress theme and What is the difference between a “custom” theme and a purchased theme? Stay tuned! 

Image via Unsplash

4 Easy Fixes to Make Your Site More Accessible

January 30, 2015

I’ve been doing some work with existing websites to ensure they comply with the Accessibility for Ontarians with Disabilities Act (AODA). As of 2015, businesses in Ontario of a certain size must comply with the act, which more specifically means their websites must comply with the Web Content Accessibility Guideline (WCAG) developed by the World Wide Web Consortium (W3C).

There are many tools you can use to review your code for accessibility (I’ve been using FireEyes), but the best way to ensure your site is accessible is just writing good code. It all comes down to intuitive organization and proper labeling. Below are the top 4 issues I’ve run into with easy fixes for each.

  1. The primary language of this document has not been set. Add <html lang="en"> (exchange “en” for your primary language if it is not English) just below <!DOCTYPE html> at the top of your HTML doc and save a lot of people a lot of trouble. Here’s a great article on the importance of including the “lang” tag.

  2. Pages do not have enough headings. This is fixed with proper use of your h1-h6 tags. Be sure there is only one <h1> tag on each page and that the remaining header tags are used according to the importance of the header, and not for styling purposes. Best practice is to have the <h1> as your brand name at the top of every page. You may think you’re covered with a logo in lieu of an h1 tag, but screen readers can not read what your image says, neither can search engines for SEO purposes. The best way to handle this situation is including <h1>BRAND NAME HERE<h1> in your html doc and then in your CSS make your h1 tag  display:none so it’s there but not visible to the eye.

  3. HTML links or elements that act as links MUST have a visible name or text alternative for image as well as an HREF. Make sure you include “alt” tags on all links and images throughout your site. Alt tags should be descriptive – for links, alt tags should explain where the link will take the user, for images, alt tags should tell the user what is in the image.
  4. Poor visibility between text and background colors. This one is all about styling and is probably not a favourite of designers everywhere who want to make colours subtle and text petite. Design be damned, it’s important that everyone can read the text on a site. All it takes is making sure the contrast is stark enough that all your text is clearly legible.

That’s it! I’m not an accessibility expert, but I do think it’s an important part of web development and we should all be advocating for clean, organized code.

Image source: Bell Blog

Web Tools I Love

November 5, 2014

  • Sublime Text – if you take only one tool from this list, let it be Sublime Text, most of the web development community will agree that this is the best text editor available – and if you want to dig deeper into the shortcuts and tools available, check out “Sublime Text Power User” by HackerYou teacher Wes Bos
  • Emmet – a Sublime Text shortcuts tool, it significantly improves efficiency as you code (here’s a full list of the shortcuts)
  • Can I Use… – resource for cross-browser compatibility
  • Responsinator – lets you input any website and shows you what that site looks like on different devices
  • Unheap – a useful and user-friendly repository of jQuery plugins
  • Hurl.it – helps you build and test API requests
  • Font Awesome – I use this for the social icons, it allows you to incorporate them into your HTML and style with CSS like any text on your page
  • Noun Project – an amazing database of icons, most of which are available for free and can be downloaded as PNGs or SVGs
  • Pesticide – Chrome extension that outlines all the divs on any web page – surprisingly useful
  • WhatFont – Chrome extension that allows you to hover over text on any website to find out what font was used
  • Panda – Chrome extension that replaces your Google homepage and gives you the latest news in the web development and design communities
  • 0to255 – enter a hex value and you’re given a gradient of that colour to choose from

Image via Unsplash