Posts Tagged ‘xhtml’

10
Feb
2010

Drop Dead British Designer

No Comments

For those of you who don’t know me personally, I’ll let you in on a little secret. I’m a complete hussy for quality design. I mean honestly, some people like strip clubs and others ogle the fender of a Ferrari but for me? It’s all about the subtle details of quality design.

This week, while I was wildly clicking around looking for something completely unrelated (standards compliant xhtml) I came across a website for Oliver James Gosling, a freelance web developer in Bristol who’s got to have one of the sexiest websites I’ve seen in weeks, if not months. The piece of art came from DropStudio, another Bristol boy named David Robinson. My theory is that the recent snowstorms kept them at the office and if you look at the portfolios for either of them, creating spectacular work.

I don’t know either of them and this isn’t a paid advertisement but and so I don’t mind saying that the two of them (who seem to work together on a number of projects) do a wonderful job combine two very different disciplines, something more web professionals should keep in mind.

Web designers, design. Web developers, develop.

Tags: , , , , , , , , , , , , , , , , , , ,
Posted in What I'm Reading

read more
28
Nov
2008

Free WordPress Theme – Pink Flowers

8 Comments
Pink Flower Theme

Pink Flower Theme

I’ve just wrapped up another free WordPress theme for you guys, it’s a clean and simple traditional blog theme using a lot of pink. Some people have previously commented that some of my themes are a little bit less manly than they could be but there’s a reason I choose to do these themes in pinks and blues … because there are not a lot of themes out there in pink and blue.  

As with all my themes, this one is setup to be Search Engine Optimized and makes use of proper title tags, document hierarchy and W3C compatible xHTML / CSS so even if you don’t know a thing about making cool websites, this theme is already designed for you.

Speaking of design, a special thanks to designious.com for creating the awesome flower pattern and to Smashing Magazine for making it available for free.

One other note, this theme makes use of my really cool WordPress technique for showing both icons and text in your WordPress links.

The theme is 100% free, I designed it with an ad on the left hand sidebar but you can easily remove it in the sidebar.php file (it’s even commented) all that I ask is that you don’t change the footer, but even that’s optional. If you’re using it, I’d love to hear from you.

Tags: , , , , , , , , , , , , , , , , , , , , , ,
Posted in Free Downloads, Web Design, WordPress Themes

read more
10
Nov
2008

Placing page content in Adobe Dreamweaver

5 Comments

So far in the tutorial series of building a website in Dreamweaver, I’ve focused a lot on the Template including the header and footer elements but now I want to take a bit of time and look at the content area of a website. 

In order to understand how to build a website properly, you first have to understand some basics of Search Engine Optimization, or maybe you have to understand some basics of website publishing to be good at SEO work but either way, publishing web content and optimizing your web pages is interconnected.

A web page needs a specific structure, just like a book needs chapters and paragraphs so does a web page. Some people forget the first real use of the web was for academic papers, today the structure of a web document is still very connected to it’s origins and there are some pretty basic tags used to format pages. Let’s take a look at the basic building blocks of a web page and how to use them properly before we begin placing text in our documents.

Headings

xHTML allows for up to six headings on a page, each should be used in a hierarchal structure starting with the most important and proceeding to the lowest value.

 

  • <h1> – There should only every be one <h1> tag on a web page, the level one heading is most often also the title of the document and is extremely important both in standardization practices and search engine optimization
  • <h2> … <h6> – Used as hierarchal structure tags, the lower headings are used to identify the importance of each level of the document. <h2> contains content more important than <h3> for example
Lists
Web pages can also contain lists, as we saw in our earlier lesson about menus. Lists come in two flavors, each must contain list items (<li>) to be used correcty.
  • <ul> – An unordered list, most commonly presented with a bullet character (•)
  • <ol> – An ordered list, most commonly presented with a numbered value (1,2,3,…)
Paragraphs
The basic building block of a web page, the paragraph (<p>) tag defines a paragraph.
Example of a Page Structure
Because web page content is structured in a standard manner, we can demonstrate that structure in a simple document tree such as:
  • <h1>
  •   <p>
  •     <h2>
  •           <p>
  •           <h3>
  •                <p>
  •      <h2>
  •           <p>
  •           <ul>
  •           <p>
  •           <p>
This document structure demonstrates an easy to understand, mechanical overview of the document but also acts to help new web publishers understand that web page publishing and web page design are two different things, we’ll get to design later.
Working in Dreamweaver
Now that we have a basic understanding of how to create web page content, we need to write something for our pages. To save time, I’ll let you into another publisher trick. Using Lorem Ipsum to generate gibberish text for websites allows us to save time by filling in our content. Later, when we know what we want to place on each page we can go back and fill in the real text.
For now, pop over to the Lorem Ipsum generator and create five random paragraphs of text. Windows users will want to take an extra step here … when you copy text of the Internet, Windows tries to also copy the xHTML tags. Let’s get rid of the excess content:
  1. Copy the text from the Lorem Ipsum Generator
  2. Create a new Dreamweaver document (Control – N)
  3. Switch to Code View
  4. Select All (Control-A) and Cut (Control-X) it
  5. Paste the text from the Lorem Ipsum Generator
  6. Select All (Control-A) and Copy (Control-C) it
  7. Close the new document
What this did was created all the special codes, and leaves you with just the plain text.
Next, open the about.html file in your Dreamweaver File document and ensure you’re in Design View. Remember when we created the template we created an Editable Region named Content? In that area, Dreamweaver placed the word Content, now I want you to select the word and Paste (Control-V) the Lorem Ipsum text into place. This will replace the existing text on this page with the content from the generator.
format Placing page content in Adobe Dreamweaver imageTake a bit of time and format the text using only the text format tool on your Properties toolbar. This will allow you to apply <p> and <h1> … <h6> tags to your Lorem Ipsum text.
listitems Placing page content in Adobe Dreamweaver imageOnce you’ve got the hang of adding some <p> and <h1>, <h2> tags to your document, try adding an unordered list (<ul>) and some list items (<li>) to your page. Notice that Dreamweaver automatically creates the list items for you in an ordered or unordered list.
picture 6 300x154 Placing page content in Adobe Dreamweaver imageNow that you have an understanding of how to create paragraphs, headings and lists for your web page content take a bit of time and add real text to your website pages for all for of the pages. Before you add anything however, as yourself where the content belongs and try to understand that every element needs to belong to a document hierarchy.
One of the best documents to see a document hierarchy demonstrated in is a traditional resume, take a few minutes to study this example of a document structure:
  • <h1> – Christopher Ross
  • <h2> – Career Objectives
  • <p> – A paragraph about my objectives
  • <h2> – Previous Employment
  • <ol><li> – My employers
  • <h2> – Education
  • <ol><li> – Schools
Once you appreciate the structure of a document, creating HTML pages is easy.
This tutorial is part four in a ten part series.
  1. Preparing a website in Adobe Dreamweaver
  2. Building your first Dreamweaver Template file
  3. Structuring your website with Adobe Dreamweaver
  4. Improving the common elements in Dreamweaver
  5. Placing page content in Adobe Dreamweaver
  6. Hyper linking in Dreamweaver
  7. Working with Images in Adobe Dreamweaver
  8. Adding Cascading Style Sheets with Dreamweaver
  9. Putting your website on a remote web server with Adobe Dreamweaver
  10. Adding Google Analytics to your Dreamweaver Template

Tags: , ,
Posted in Learning

read more
17
Oct
2008

Simple tricks to speed up your WordPress website.

12 Comments

WordPress is a great tool but for those of us on shared hosting it’s important that as our web traffic increases we look at ways to decrease the amount of stress our sites put on the web server. I found a couple of wonderful suggestions on Lorelle’s website and I’ve added a few of my own.

There’s a couple of reasons for this, first we want to make sure our web pages load as quickly as possible but as importantly we want to ensure our website stays online. There are countless stories on the internet about websites that suddenly found themselves very popular and struggled to keep up with the traffic, only to have their account temporarily shut down by the hosting company.

WordPress is written in PHP and uses a MySQL database to serve up content. This is great except the content on your website doesn’t change all that often so why are you dynamically generating it for each visitor? Instead of rebuilding the xHTML for each visit, why not serve them a previously saved version? We call this caching a website and it can be done with the wp-cache plugin from Ricardo Galli Granada.

So the first step to increased speed of your WordPress website is to download and install the WP-Cache plugin. It allows you to set how many seconds between page caching as well as if any specific files should never be cached. Very handy. You should also make sure you’re on a reliable web host who can handle the traffic.

Diggproof & Speed up Your Wordpress Blog has a great and often overlooked suggestion. Upgrade your WordPress blog. This might sound silly but generally speaking the latest code releases for WordPress are stable and optimized, so taking a little bit of time to upgrade your site during each release is a solid idea.

Unused plugins can kill performance so before you go installing and forgetting about your plugins, make a habit of deleting unused plugins. Some people might assume deactivating them is good enough but personally I prefer to delete them.

Using a tool such as phpMyAdmin take time once a week to optimize your MySQL tables. If you don’t have access to phpMyAdmin, execute the following SQL statement from your command line to make sure your tables are in the best shape possible:

OPTIMIZE TABLE `wp_comments`, `wp_links` , `wp_options` , `wp_postmeta` , `wp_posts` , `wp_ratings` , `wp_terms` , `wp_term_relationships` , `wp_term_taxonomy` , `wp_usermeta` , `wp_users` , `wp_wpsb_users`

Arne has some great suggestions for MySQL Query Cache and PHP Compiler Cache options, they’re pretty technical but well worth it if your running into significant server speed issues. If you’re technical, give this article on how to configure Apache a read as well, it will help you optimize your whole site.

Paul Stamatiou makes a great point by writing “Every HTTP request, or loading each item on your website, has an average round-trip latency of 0.2 seconds. So if your site is loading 20 items, regardless of whether they are stylesheets, images or scripts, that equates to 4 seconds in latency alone“. So, take a good long look at your theme and determine what you really need in there. I saved a ton of time per page load by stripping out over 20 JavaScript calls and replacing them with PHP scripts which are cached once every five minutes. I also combined all my CSS files into a single file which decreased the number of HTTP requests my server had to take. Paul also have a great article on Compressing CSS with PHP that you should read if you still need to speed up your site more.

There’s another great suggestion from WPCandy that I’m extremely reluctant to do, but I know they’re right. First, use shorthand CSS so:

#commentarea li {
margin-top: 10px;
margin-bottom: 10px;
}

should become:

#commentarea li {
margin: 10px 0px 10px 0px;
}

You should also decrease whitespace (that’s the empty space between tags), sure it makes it look better but it also takes up bandwidth.

Finally, decrease your overall database calls. WordPress gives us all sorts of great functions in our templates but really do you need to call the website name from your database? The simple answer is no, so let’s decrease the over all number of MySQL queries by optimizing our templates. Replacing with your title for example will help decrease the server load.

I hope this helps, if you have any other suggestions for how to optimize WordPress and speed up the site please let me know.

Tags: , , , , , , , , , , , , , , , ,
Posted in WordPress Help

read more
09
Oct
2008

Better HTML Helps Search Engine Results

6 Comments

For the best search engine rankings, you need to understand (and accept) that search engine robots (sometimes called spiders) are not as clever as people, so it’s important if you’re looking to have your website listed on search engines that you speak the same language they do. By language, I mean HTML, xHTML and CSS. Writing valid syntex helps search engines understand the code on your site and in turn, list you effectively. This can greatly increase the traffic your website receives from search engines with very little investment.

Writing valid HTML code will also have the side advantage for rending in visitors browsers better, faster and without errors. Everybody likes a websitet that words, so instead of driving away traffic you can follow some simple tips to improve both the number of people how visit your site and the amount of time they spend on it.

Modern HTML editors such as Adobe Dreamweaver do a great job of building better websites but they still have some problems writing clean web code, once you’ve completed your website pop over to the W3C Validator and test your website. This will tell you how easily search engines can read your website. Remember, a single error can cost you the difference between being on the first page of search results or … somewhere else.

Remember, coding web pages isn’t easy and doing it well is even harder but it takes practice and eventually you’ll pass the W3C’s tests. Sometimes it takes me hours to get a simple page past their inspector, but it’s worth it in the end.

Tags: , , , , , , , , , , , , , , , , , , , , , ,
Posted in Web Site Advice

read more