Wordpress CMS

https://vimeo.com/bravodesignince

WordCamp LA 2011 – Design, SEO and Selling WordPress

Posted on by Daniel Arriola

This past weekend, I had the opportunity to speak at Los Angeles’ WordCamp about my experience with WordPress and how we’ve developed countless websites for individuals and businesses using this amazing platform.

WordPress Design

While talking about design, I used one of the latest websites that Bravo Design, Inc. created for World Wide Digital Services, a film rental equipment company that commissioned a new website for their expanding entertainment industry connections. This website was used as an example of what WordPress can do and how it can break the mold of what people have come to expect from the open-source blogging CMS.

This WordPress theme was custom designed and developed by Bravo Design, Inc. starting from WordPress’ basic Twenty Ten theme.

“Oh, that’s like a blog isn’t it?” Yes, but that’d be like saying: “Wow, that’s a pretty nice Maserati… that’s like for running errands isn’t it?” There is much more to WordPress than the platform’s original blog functionality.

WordPress Search Engine Optimization

So we know that WordPress is ideal as a blogging platform, and it’s true that WordPress is already pretty optimized for search engines straight out of the box. So let’s just have a quick recap of what the search engines like, and what they like about WordPress, shall we?

Search Engines Love Keyword Relevance. Probably more than anything, search engines love finding people results that are extremely relevant to their search query. But the trick, well not really a trick, is finding how the search engines rate/rank relevance. So here’s a breakdown of where to put your keywords throughout your site.

  1. Domain Name / Subdomain
  2. URL of a webpage
  3. Title of a webpage
  4. Meta data of a webpage (description, keywords)
  5. Tags on the webpage (h1, h2, a)

So while these are some good places to put a small and specific assortment of your keywords (usually no more than 5-6 per page), the search engines (primarily Google) place a greater importance on a website’s traffic, PageRank (the number of quality websites linking to it), and how frequently it’s updated. Important stuff to remember.

Using WordPress puts you in a great position to compete on the search engines: 1. Blog = Frequently Updateable 2. Keywords / Custom Themes = Great Keyword Placement / Usage 3. SEO = Great plugins for updating search engines about website changes. All that’s left is providing your website visitors with interesting and useful content they’ll enjoy and share with their friends (Traffic / PageRank; it’s not all easy but it doesn’t have to be hard).

Selling WordPress

Probably the greatest way to “selling” a client on WordPress is simply providing them with a demo. The biggest hurdle that a lot of young designers and new upstarts have trouble with is finding the right client. Selling WordPress should not be hard, finding the right client is what will take up your time.

I’m a fan of the soft sell when dealing with WordPress. Does the client need a new website? Does the client need a new design? How is the client competing on the search engines with other businesses in their industry and approximate location? Once these questions have been answered you can make your judgement on client. Not everyone needs a website (well, that’s not true, but not everyone realizes that they need a website) and trying to force a website on a client is counter-productive. Oftentimes, I’ll meet with a client, we’ll talk about websites and WordPress but they’ll pass on the job. Maybe a month will go by and the client will get back in contact with me ready to get a website going.

Plant the seed, give it a little water and let it grow into a stronger desire and understanding of websites and the internet environment. Provide them with resources to do more research on their own; be helpful; not forceful.

Finally, be nice. That’s it. Be patient with your clients. They don’t know as much as you (that’s why they are coming to you), and it’s your job to show them how they can improve their business with a customized and focused web presence. Your job is to help them, and convert them to the web way of life (sometimes easier said than done).

The slides from my WordCamp LA 2011 Presentation are available for download, here.

https://vimeo.com/bravodesignince

HTML Basics For Beginners: Part Three Image Styling

Posted on by Daniel Arriola

In this series of tutorial articles, we’ve covered HTML basics like how to Embed Links In Your WordPress Website, and How To Style Text In Your WordPress Website. Now we’re taking a look at our <img> tags (for images).

WordPress allows us to simply upload and manage all our media content, but sometimes we need a little extra style thrown into the mix. We’ll be taking a look at how the <img> tag is used, and how we can make a few simple styling modifications on-the-fly.

So let’s first examine how WordPress inserts the <img> tag when an image is uploaded and Inserted Into The Post. Here is what the HTML will usually look like after “Insert Into Post” is selected after an image is uploaded. I have also chosen not to include a link, and the none option was selected for the alignment.

<img src="http://www.bravodesigninc.com/wp-content/uploads/2011/04/photo_helicopterbunny.jpg" alt="" title="photo_helicopterbunny" width="450" height="333" class="alignnone size-full wp-image-725" />

What will be
displayed:

If you’ve already read the previous two articles, one thing that may stand out about our <img> tag is that there is no </img>. This is because the <img> tag isn’t surrounding anything other than the attributes contained within the tag itself (i.e. href, width, height, title, alt and class). We will notice, however, that at the end of the tag there is a /> that closes the <img> tag specifically. Let’s mess around with some of the attributes to see how we can change the image…

<img src="http://www.bravodesigninc.com/wp-content/uploads/2011/04/photo_helicopterbunny.jpg" alt="" title="Cutest Bunny Ever" width="225" height="166" class="alignnone size-full wp-image-725" />

What will be
displayed:

Please take note of the changes made to the title, width and height attributes. The href was left the same, still linking to http://www.bravodesigninc.com/wp-content/uploads/2011/04/photo_helicopterbunny.jpg, but let’s make a change to a different (perhaps even cuter photo. Hit it!)

<img src="http://img.dailymail.co.uk/i/pix/2007/11_03/RabbitKit2NSPA_468x316.jpg" alt="" title="A Bunny Under A Pile Of Kittens" width="468" height="316" class="alignnone size-full wp-image-725" />

What will be
displayed:

Here we see that I’ve changed the href attribute to link to another image that has not been uploaded on our server (hence, no http://www.bravodesigninc.com/… in our href attribute).

Most likely, you’ll be using your images around text in your WordPress posts and pages, so let’s see how we can have both displayed properly.

<img src="http://www.bravodesigninc.com/wp-content/uploads/2011/04/photo_helicopterbunny.jpg" alt="" title="Cutest Bunny Ever" width="225" height="166" class="alignleft size-full wp-image-725" /> Pardon my Greek, lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat mauris ut sem auctor ut consequat nisl dignissim. Maecenas aliquet, nisi eu elementum porta, orci mauris porta urna, euismod condimentum urna ligula vel urna. Integer eu turpis ac ligula adipiscing bibendum ac ut sem. Aenean vestibulum felis lacinia augue laoreet congue. Phasellus ultricies convallis lacus, nec pharetra tortor commodo sit amet. Sed imperdiet, magna facilisis dignissim eleifend, mi felis sodales mi, et rhoncus turpis nulla a tortor. Integer pretium lacinia facilisis. Maecenas vitae tempus nulla. Duis hendrerit, nulla quis tristique fringilla, sapien odio convallis odio, eu hendrerit dui odio iaculis odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

What will be
displayed:

Pardon my Greek, lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat mauris ut sem auctor ut consequat nisl dignissim. Maecenas aliquet, nisi eu elementum porta, orci mauris porta urna, euismod condimentum urna ligula vel urna. Integer eu turpis ac ligula adipiscing bibendum ac ut sem. Aenean vestibulum felis lacinia augue laoreet congue. Phasellus ultricies convallis lacus, nec pharetra tortor commodo sit amet. Sed imperdiet, magna facilisis dignissim eleifend, mi felis sodales mi, et rhoncus turpis nulla a tortor. Integer pretium lacinia facilisis. Maecenas vitae tempus nulla. Duis hendrerit, nulla quis tristique fringilla, sapien odio convallis odio, eu hendrerit dui odio iaculis odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

You’ll notice that the class attribute in my <img> is has ‘alignleft,’ the alignment option that I selected before I inserted the image into my post.

Let’s see what is displayed when I have my image in the middle of the text…

Pardon my Greek, lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat mauris ut sem auctor ut consequat nisl dignissim. Maecenas aliquet, nisi eu elementum porta, orci mauris porta urna, euismod condimentum urna ligula vel urna. Integer eu turpis ac ligula adipiscing bibendum ac ut sem. <img src="http://www.bravodesigninc.com/wp-content/uploads/2011/04/photo_helicopterbunny.jpg" alt="" title="Cutest Bunny Ever" width="225" height="166" class="alignleft size-full wp-image-725" /> Aenean vestibulum felis lacinia augue laoreet congue. Phasellus ultricies convallis lacus, nec pharetra tortor commodo sit amet. Sed imperdiet, magna facilisis dignissim eleifend, mi felis sodales mi, et rhoncus turpis nulla a tortor. Integer pretium lacinia facilisis. Maecenas vitae tempus nulla. Duis hendrerit, nulla quis tristique fringilla, sapien odio convallis odio, eu hendrerit dui odio iaculis odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

What will be
displayed:

Pardon my Greek, lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat mauris ut sem auctor ut consequat nisl dignissim. Maecenas aliquet, nisi eu elementum porta, orci mauris porta urna, euismod condimentum urna ligula vel urna. Integer eu turpis ac ligula adipiscing bibendum ac ut sem. Aenean vestibulum felis lacinia augue laoreet congue. Phasellus ultricies convallis lacus, nec pharetra tortor commodo sit amet. Sed imperdiet, magna facilisis dignissim eleifend, mi felis sodales mi, et rhoncus turpis nulla a tortor. Integer pretium lacinia facilisis. Maecenas vitae tempus nulla. Duis hendrerit, nulla quis tristique fringilla, sapien odio convallis odio, eu hendrerit dui odio iaculis odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

So to sum up what we’ve covered, let’s take one more look at the <img> tag and it’s attributes:

<img src="http://www.bravodesigninc.com/wp-content/uploads/2011/04/photo_helicopterbunny.jpg" alt="" title="Cutest Bunny Ever" class="alignleft size-full wp-image-725" />

What will be
displayed:

  1. The tag starts with: <img
  2. src=”http://www.bravodesigninc.com/wp-content/uploads/2011/04/photo_helicopterbunny.jpg”, is the URL to the image file.
  3. alt=””, alternate text visible if/when an image doesn’t load properly.
  4. title=”Cutest Bunny Ever”, title that will appear when the user rolls over the image
  5. width=”225″, width in pixels
  6. height=”166″, height in pixels
  7. class=”alignleft size-full wp-image-725″, the class that WordPress applies to your image based on your options selected before inserting into post. (e.g., alignleft, alignright, alignnone, etc.)
  8. The tag ends with />

I hope this has been a helpful article regarding updating the images in your WordPress website. We’re always looking for ways to enhance our tutorials, so if you have an idea, or an issue let us know!

https://vimeo.com/bravodesignince

HTML Basics For Beginners: Part One Embedding Links

Posted on by Daniel Arriola

If you’re reading this post, chances are you were referred to it by the Bravo Design team regarding your new WordPress CMS website. I’d just like to take a moment and emphasize, probably again, how incredible the WordPress CMS platform is. Faster load times when compared to Joomla and Drupal, and optimized more efficiently than any other CMS right out of the box. Bravo Design Inc. primarily uses WordPress for all of our website commissions because we are all about empowering our clients. So how can we empower our clients further? By showing them some quick and easy HTML basics for making their websites easier to update and keeping them looking great.

Part One: Using The <a> Tag To Embed Links

Let’s get started with the HTML tags you’ll be using the most, starting with the <a> tag. Every time you’d like to insert a link in your post, you’ll be using the <a> tag.

Let’s take a look at how a link is coded in HTML, don’t worry this’ll be painless.

<a href="http://www.google.com">Google</a>

What will be
displayed:

So we see that the only thing visible is the text that is surrounded by the <a> and </a> tags. This is a fundamental concept of HTML; making sure you always close your tags. Forgetting to do so can have some pretty hairy results.

Let’s take a look at an example where a client has forgotten to close their <a> tag.

One of my favorite websites that I use to search the internet is <a href="http://www.google.com">Google. I use it all the time, and I definitely prefer it to using <a href="http://www.bing.com">Bing</a>.

What will be
displayed:

One of my favorite websites that I use to search the internet is Google. I use it all the time, and I definitely prefer it to using Bing.

You’ll notice that the link for http://www.google.com is active for all the text until the next <a> tag is called around the word “Bing.” So we see how forgetting to close our tags can have a drastically adverse effect on our code, so if you take one lesson from this series: Remember to close your tags!

We’ve covered how to use the <a> tag, so let’s take it a step further and make a link open in a new window. Take a deep breath, it’s only an additional 15 characters.

<a href="http://www.google.com" target="_blank">Google</a>

What will be
displayed:

The output looks exactly like our first example, but when we click on the link (go ahead, click it) the link opens in a new window (or tab, depending on how you have your browser configured). The extra snippet of code, target=“_blank” tells the browser that this link should be opened in a new window. By default, the target attribute equals “_self”, meaning that the link will open in the same window that you are browsing.

A good practice is having links within your website (i.e. http://www.mysite.com/services, http://www.mysite.com/about) open in the same window, and having links that lead off of your site (i.e. http://www.google.com, http://www.bing.com) open in a new window.

By now you’re feeling pretty confident about putting links into your website, so I’ll show you just one more cool feature before we move on. What if we’d like to show some more information for our links without taking up more room on our web page? We can do this easily, with use of the “title” attribute in our <a> tag. Let’s try it out.

<a href="http://www.google.com" target="_blank" title="The internet's most used search engine">Google</a>

What will be
displayed:

Doesn’t really look like much, until we roll over the link with our cursor. After holding the cursor still over the link for a moment, we’ll see the title that we entered in our code. So this is a cool way to add some extra information to our links without taking up too much space on our web page.