Creative Web Solutions
Comments Off
Logo design for a Florida based web site design company.
Posts Tagged ‘web design’
31
Dec
2009
Dec
2009
23
Apr
2009
Apr
2009
How to center a header in HTML without using the center tag
The HTML <center> tag is one of those funny little tags left over from the early days of websites when designers often mixed the publishing of web content with design. These days, it’s much easier to separate content and design by using effective style sheets.
To center any text in HTML and CSS, we can simply add a couple of lines of code to our stylesheet file as follows:
[source lang="css"].center {
text-align:center;
}[/source]
This little code snippet will center the content within a block tag (such as a <p> or <h1>) but only if it already knows the width of the object you’re centering too! To get around this, we can simply add the display:block tag to our CSS:
[source lang="css"].center {
text-align:center;
display: block;
}[/source]
Now our code knows to center text.
To apply it to our HTML code, you need to simply apply the code to an object as a class. For example let’s turn a heading into a centered heading by applying the new class like so:
[source lang="html"]
<h1 class=’center’>This is my header.</h1>
[/source]
It is of course also possible to simply align all <h1> tags to the center by using the code:
[source lang="css"]h1 {
text-align:center;
display: block;
}[/source]
What about converting existing pages?
Luckily if you already have a bunch of documents which use <center> tags there’s fairly simple fix for you to clean up those files. Using a tool like Adobe Dreamweaver you can do bulk search and replace functions across multiple files.
The replace is a two step process. (please backup your site before doing this)
First, let’s replace the phrase </center> with </div> across the entire site. This will change the closing tag (remember all tags come in pairs right?) to be a normal div tag.
Now, let’s replace the phrase <center> with <div class=’center’> to turn the opening tag into a div tag with the center class assigned.
You can now add the .center details to your CSS file and presto, your website is now using the proper center formating!
31
Mar
2009
Mar
2009
What image format should you use on your website?
There is nothing more complex about publishing on the web than the concept of images, they’re quite possibly the hardest part of HTML for the general public to get their minds around so let’s take a quic look at what makes an image complicated and how we as web designers and publishers can approach them in a simpler way.
Image Format
The first step to web graphics is to appreciate that images come in dozens (or hundreds) of file formats from BMP’s to TIFF’s and everything in between but when it comes to the web, there are really only three formats for you to think about:
- The CompuServe Graphics Interchange Format (GIF) format (pronounced giff)
- The Joint Photographic Experts Group format, JPG (pronounced jaypeg)
- the Portable Network Graphic file format, PNG (pronounced ping)
Close up of the GIF file format
These three file formats encompass the entire spectrum of Internet based graphics. The first format, GIF was introduced way back in the very first days of computer graphics (1987) and allowed people to exchange graphic files via an online community similar to America Online (AOL). The GIF format was limited to 8 bits of color (255) with some reserved for core data. It was a loss-less graphic format ideal for the graphics of 1987 but could hardly produce quality photos.
The GIF format stores each pixel of an image as one of 255 possible colors resulting in a crisp image. The GIF format however also had a number of unique benefits such as the ability to have invisible (alpha) transparent pixels which when place overtop of other colors would allow the backgrounds to remain visible and the capacity to store multiple GIF images in a single file as pages. When displayed in a web browser or other image viewing tool these pages would appear as animations similar to old ‘flip book’ style animations.
In 1992 the Joint Photographic Experts Group created and issued the JPEG standard to the world. These days we tend to call the file format JPG since old Microsoft based computers could only hand three characters as a file extension but the format is also known as .jpg, .jpeg, .jpe, .jif, .jfif and .jfi. The .jpg format was an instant success, it quickly addressed the primary failings of the GIF format by allowing 24 bit graphics (16.7 million colors) and smooth transitions between the these colors using a lossy compression method … which is a fancy way of saying the graphics blended together.
Lossy file saved as both 20% and 80%
In effect, how the JPG standard worked was to rapidly reduce file sizes by averaging the color values of a pixel with those around it. This caused massive reductions in file sizes allowing photographers to post 500kb images in extremely small (20-100kb) files while controlling the loss of quality. To the right you’ll see an image saved at 20% quality to the left and 80% to the right, both the difference in quality and the method JPG uses to reach the results should be evident.
Before I go on, I want to pause and take note of a statement I made in the above description because I’m sure most people missed it or brushed past without much thought … the JPG file format was introduced to the world in 1992. This phrase is critical because it reinforces how much the world has changed in just 17 years. For those of you who are under 20 years old, you’ll most likely have never known a world without Facebook or YouTube but for the rest of us, we sometimes forget the Internet is for all purposes a fairly recent addition to the world. I’m 35 years old and I remember the first JPG photo that I saw, the introduction of this format changed the way we shared images over computers. Notice that I said it changed the way we shared images over computers? There was no Internet, or at least not what you see today.
In 1996, Unisys became uppity and started threatening to sue over the LZW compression found in the GIF format so the world invented the Portable Network Graphic format (PNG), along the way the format improved upon most of the qualities of the GIF and lost the capacity for animation. The PNG format has 8 bit graphics similar to the GIF but also has 24 bit like the JPG and introduced a new level with 32 bit graphics. While it lacks support for animation, it includes transparant pixels like a GIF. Unlike a GIF, where those pixels can be on or off the PNG allows for alpha transparency making the format extremely flexible and also capable of compressing images. The problem with the PNG format, is that it produces large files.
So which is best? Actually that depends entirely on what you want to accomplish with the graphics. As you’ll see from the image above the file size of the graphic can range from ~25k to ~430k depending on the quality you’d like to achieve. Photographers for example should use the JPG compression most often to ensure their images are strong, crisp and colorful while illustrators and others who work with line art will benefit from the GIF format. In the end, practicing and experimenting are the best ways to determine what you should be using.
A quick thank you to the Old Shoe Woman for posting the a wonderful photo Sunlight Under a Live Oak Tree on Flickr for me to use as part of this tutorial.
11
Mar
2009
Mar
2009
Why Redesign My Website?
a circular movement of water, counter to a main current, causing a small whirlpool.
By definition the web is a fluid medium, it ebbs and flows like a river. In fact, when I formed my first web development company I pondered a wide variety of names and first settled on Eddy as my company name. Eddy is both a persons name (informal for Edward) and also a circular movement of water, counter to a main current, causing a small whirlpool. Exactly what I wanted my company to do. To be honest, the company was ready to be launched, we had brochures designed, logos ready and then one night at dinner I was speaking to my wife about the launch when my five year old son asked “Do I know Eddy?”.
That stopped me dead in my tracks and made me take a step back. I stayed up late that night looking at the company and realized that I had been too close to the problem, I’d become blind to the obvious and my attention was so focussed on the details that I’d not looked at the larger picture. The old expression “you can’t see the forest for the trees” came to mind but in this case, it wasn’t just about some vague concept it was about money. Eddy died that night but Rodonic was born.
Rodonic web design services, Ottawa
Rodonic was a funny company name, it was intentionally designed to mean nothing. In fact, when Rodonic was launched there was no other uses of the word in the Google database. That was great for branding and helped ensure the company was a success.
Where with Eddy I focussed only on my desires for branding, Rodonic was all about others. The name, selected in part for its vagueness was a perfect software company name. We tested the name to ensure it could work with various titles such as Rodonic WordPress, Rodonic DRAW, etc. and it stacked up as well as Corel, Microsoft or Adobe (I was young and had big dreams). What it lacked however was a passionate team behind it and eventually the business closed.
Why Redesign thisismyurl.com?
Just like Eddy, I was so close to the old design that I’d forgotten to check if the visiting public could find things easily on the website and just like Rodonic sometimes you have to take a deep breath and accept that changes are needed. The top navigation of the old design had bugged me for some time but more importantly, I had to ask myself what the purpose of my website is (remember, that’s one of the ways to make a successful website). This is what I came up with:
- Provide quality, informative posts related to the space between design and technology.
- Provide easy access to downloads.
- Inform the public about my technical and creative skills.
Oddly, my website structure of the old site was too cluttered and confusing for most people to find my most popular WordPress plugins easily. So I took a bit of time and redesigned the layout. Some of the new features of the site are just to show off but others are designed to make using the website much easier to use.
Automatic highlighting of key posts
Key posts are now highlighted
One of the big improvements to the website is for navigation and highlighting of critical posts. Throughout the website downloads are now automatically highlighted in the listings with icons to represent the categories they belong to. So far, I’ve highlighted:
- Free downloads
- WordPress downloads (as well as Plugins and Themes)
- osCommerce downloads
- Macintosh downloads
- Windows downloads
Automated content additions
To further assist users to find key content such as downloads, I’ve added an automated piece of text at the bottom of key articles, designed to help users find other related downloads much faster.
These new additions to each page are found on all pages that share a common category. For example, if a post is included in the Free downloads category, a paragraph and link to free downloads is included on the bottom of each post. The text is automatically applied from a central repository and increased the displayed count as I add downloads to the specific category.
Improved header
By far the biggest addition to the website is a new, cleaner header. The new header is designed to show the key navigation and highlight sub navigation quickly.
I’ve used standard CSS layers to highlight the active page as well as to focus attention on mouseover states. The key advantage over previous designs is that I can now help surfers find downloads and blog posts much faster.
Ongoing changes
There’s a lot more to come over the next few weeks, and as always I would love to hear back from you so if you’re having a problem finding content on my site, confused by navigation or just want to say hi, I’d love to hear from you. – Chris
20
Feb
2009
Feb
2009
How to build a free website
There’s a secret that many web designers don’t want you to know, it’s that there’s no cost to building a website. In fact, you don’t even need special software to do it, everything you need is already installed on the most basic computer available today. In order to build a website, here’s all that you need:
- On a Windows computer – NotePad
- On an Apple Macintosh – TextEdit
Now that you have all the tools that you’ll need to build a web page, you need to understand a few things about building web pages.
How to Format a Web Page
Web pages are divided into two specific areas, the <head> and the <body>, each of these two areas does something specific and before you can build a web page, you need to understand the basic purpose of each section.
Setting up Your First Web Page
For a web page to be recognized by a web browser (the software application used to view a web page) we first need to tell the browser that our document is an HTML document. To accomplish this, all we need to do is place the code <html> on the first line of our document followed by </html> on the very last line of our document.
Once those tags are in place, most web browsers will understand that the content being displayed is an HTML document. I say most because technically, there is a bit more that you should put in there if you want to ensure the site is 100% compatible with all modern web browsers, but explaining the fine details of DOCTYPE structure is a little beyond the scope of today’s tutorial. Needless to say, placing the tags <html> and </html> will tell web browsers what your document is but if you’d like to technically perfect, place the following code instead:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
</html>
Once that’s done, remember that all other code must be placed between the two <html> tags to be recognized as valid HTML.
The <head> Section
The <head> tag of a web page is the reserved for things which other computers and software applications require to understand your web page properly. For example, when a web browser loads your web page there are specific things that it looks for in order to understand what language your site is in, what your web page is about and the name of your page. Within the head section, we want to include details such as:
- Links to alternative content such as RSS feeds, XML site maps and mobile interface files
- Javascript links and or content to help the functionality of our page
- META data for robots to read including a page description, keywords and generator
- Cascading Style Sheet (CSS) details or links
- The document content type
- Codes and robot commands for foreign applications
- Pingback processing directives
- The web page icon file location
- Canonical labels for search engine optimization
- Base directory directives
- The title of your document
Sounds like a lot right? Well it is, and it’s all very important stuff. Essentially, the <head> section of your web page stores all the mechanical and client side information required to properly index, label, categorize and distribute your web page as well as the information needed to successfully display your web page in a users browser. I could write a whole post on each of the items above but for now, it’s simply important for you to know that the <head> is used to store those pieces of information and you can add them at a later date.
Adding data to the <head> of the document is done the same way as all elements of an HTML document, by opening and closing an HTML tag. In this case, the <head> tag must be opened and later closed </head> in order to store the appropriate content. Between those tags, you may store a series of HTML or xHTML (we’ll talk another day about the differences) data devices for use in rendering your pages. For example, here is a basic <head> element for a common web page:
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Untitled Document</title>
</head>
You will notice that in this basic example we only store the basic information required to make a web page work, the http-equiv which tells web browsers that the document being served is in text/html format (as opposed to text/rtf which is a Rich Text document or text/javascript which would be a JavaScript file) so that the web browser looking at this document understands it is an HTML page. 
Additionally, the <head> contains the <title> tag which closes (</title>) after labeling the document Untitled Document. If you loaded the source code into a web browser, you would now see a blank document with no content displayed to the user but a new title at the top of your browser, labeled Untitled Document. This document title is the label being fed to the web browser from the <title> tag contained within the <head> of this document.
Additionally, the <head> contains the <title> tag which closes (</title>) after labeling the document Untitled Document. If you loaded the source code into a web browser, you would now see a blank document with no content displayed to the user but a new title at the top of your browser, labeled Untitled Document. This document title is the label being fed to the web browser from the <title> tag contained within the <head> of this document.The <body> Section
If the <head> of a web page is the content being presented to other computers, then the <body> is the content being displayed to human eyes (or text readers) visiting your web page. Creating content on a web page is wonderfully simple. If you’d like to have a web page say hello, simply add the code:
<body>
hello
</body>
Presto! You now have a fully functional web page, albeit a little dull. The <body> section works by displaying exactly what you type as content, so anything (and everything) you add between the two <body> tags will appear on your web page but you have to be careful, HTML needs the content marked up (labeled) to be properly viewed in a web browser. Just in case you didn’t know, HTML stands for HyperText Markup Language, a Markup Language is simply text that’s been formated to be read by computers. For example I can create my own Markup Language right now called Chris Ross’s Markup Language (CRML) that looks like this:[-open-]Hello World![-close-]
Now I have my own Markup Language but since nobody uses it, it’s pretty much useless. On the other hand, everybody with a web browser uses the HyperText Markup Language (HTML) so let’s look at it. HTML has a handful of common codes used to display content effectively, they are:
- <p>, always followed by </p> which displays text in paragraph format
- <br>, which never has a </br> but instead is written <br/> in xHTML and represents a line break (where a paragraph is often displayed as two line breaks to separate content)
- <ol>, which always needs a </ol> for ordered lists (numbered lists) and <ul> with a </ul> for unordered list (bullets), both also require <li></li> tags for each list item in the list to work
- <b></b> or <strong></strong> tags mark text as important. The <b> tag was replaced with the <strong> tag a few years back since not all languages bold words to make them more important
- <i></i> makes a word italics but like the <b> tag, was also replaced. These days, you can use <em></em> to place emphases on a word or phrase
- <h#> tags are special and always need an corresponding </h#> tag where the # symbol can be replaced with the numbers 1 through 6 (<h1>,<h2>,<h3>,<h4>,<h5>,<h6>) which represents the level of a header in your document
- <img /> will allow you to place images in your document but requires special parameters we’ll talk about another time
- <a> followed by a </a> tag will hyperlink the text between the tags to another document but also requires special parameters.
- <table> tags can be used to display tabular data (like charts) on a web page. It needs to end in a </table> tag and can include headers (<th></th>), rows (<tr></tr>) and columns (<td></td>). Why columns are <td> is beyond me, but that’s what they are.
- <div> tags use a closing tag of </div> to divide content into various areas of a page, much like the <span> tag, the <div> tag has no visual effect on content but is used by programmers and designers to affect content.
Essentially, the ten tag structures above represent the HTML code found in every single web page on the planet. There are other tags, but have either been replaced or are simply bad tags. For example the <u></u> tag will underline content and the <blink></blink> tag is simply wrong … even the creator of the tag, Lou Montulli (it’s odd to think somebody actually invented a tag eh?) appears to wish it would simply die.
When put together, the <html> document label tells a web browser the information is a web page, the <head> indicates content reserved for other computer systems to read, while the <body> shows content to the end user.
In total, the 26 tags here represent the whole of the content required to build your own web site for free. If you’ve found this post at all useful, please feel free to leave me a comment below, thanks for reading.
10
Dec
2008
Dec
2008
It’s easy to setup your domain name you don’t need to be an expert.
OK so the other day I wrote about the fact that you don’t need to hire a web guru to setup your website using something like Blogger, WordPress.com or BlueHost and yesterday I told you how to setup your own domain name such at a hosting company like GoDaddy or Domains At Cost but how do you combine them? Again, this is painfully simple and not just for spiffy web guys like me. Anybody can do this, so lets take a quick look at how it’s done.
In this example, I’m going to assume that you’re hosting your website at BlueHost and you’ve registered your domain name with GoDaddy, if you’ve done it else where the steps should be fairly simple to modify with a little bit of common sense and reading their Frequently Asked Questions section.
First … we need to point the domain name to the hosting company. We do this by logging into GoDaddy and editing something special called the DNS records. You can find this under your account Domain Manager. If you have multiple domain names, it will display a list and prompt you to select the one you’re looking to modify. At the top of the domain profile, there’s a button called Name Servers, we’re going to click that and expose the Custom Name Servers option where we simply type the name servers for BlueHost. The name servers for BlueHost are:
- ns1.bluehost.com
- ns2.bluehost.com
BlueHost setup process
Once that’s done, setting up your hosting account at BlueHost takes about 15 minutes and requires very little technical knowledge.
- First, log into your BlueHost control panel and click the link for Domain Manager.
- Click Add Domain
Now that you’re in the Add Domain screen, specify the name of the domain you wish to setup and the wizard should fill out the rest of what you need for you.
Please note, in order to assign a domain to BlueHost the first step at GoDaddy must already be complete, sometimes this takes a few hours so my advice is after you’ve completed the process at GoDaddy take a couple of dollars from the money you just saved and go have a coffee.
Now you’re done. Your website will take between 24 and 48 hours to propagate which is a fancy Internet term for point to the right place. Once it’s done you’ll be able to setup your own emails and put up a website at your new address, which I will talk about later this week so why not sign up for my email notification or RSS feed to stay connected.
In the interest of being honest, BlueHost pays me to refer people to them but I’d do it anyways. While you’re waiting for me to write something else, feel free to comment on any of my existing articles.
28
Nov
2008
Nov
2008
Laid Off Technology Workers Find Work Online
Some of you may remember that I left my job at the university a couple months back, I’ve had a lot of people ask me what I’m doing these days and I tend to simply answer that I’m working from home. The trick is, most people have no idea that you can work for yourself from home these days but it’s actually very easy.
Elance – One of the oldest and best sources for online projects, Elance spends a ton of money getting people to post their projects here, all you need to do is compete with offshore agencies. There are also some Elance-like sites you might want to investigate:
LinkedIn – Some of you will remember my Career Management class at the local college, I call it BEER. Beer doesn’t stand for anything, it’s about social networking and using tools such as LinkedIn to cultivate professional contacts. While you’re at it, let people on your Facebook and Twitter lists know you’re in the market.
CraigsList – One of the best sources for work I’ve found, CraigsList and Kijiji easily keep me in 40+ hours of freelance work a week. The trick is to make proper use of RSS feeds to really get a handle on the listings.
Speciality Job Sites – Take a look at sites like jobs.wordpress.net if you’re into building WordPress blogs or moodle.org for Moodle specific work.
There are a couple of posts worth taking a look at if you’re fresh to the freelance market:
- Top Ways to Find Opportunities in Open Source
- 8 Ways to Showcase Your Open Source Skills and Get Hired
- Top Resources for Finding Web Work
Help me out, if you know of any other great sources for people looking for freelance work please post it below, I’m sure my readers would love to know about them!
08
Oct
2008
Oct
2008
New Business Cards for Tinker Priest Media
I’ve just finished a new business card design for Tinker Priest Media, my partnership with web design junky Chris Bavota of Montreal.
The card was a lot of fun to design as it features the new logo (also designed by me) and a rich red strip. I’m not sure what my inspiration was for the red but I’ll be honest and say that gradient background was a total accident. When I first produced the card, it was meant to be white and I actually exported the original artwork from Adobe Illustrator as a white background. After bringing it into Carrara for 3D rendering I set a light incorrectly and the resulting render had a reddish orange gradient on the card. Much like the when a scientist exclaims “that’s interesting” after an unexpected result, I made the changes to my original EPS artwork to ensure the piece printed with the same burn texture.
The back of the card is a white knock out on red, full bleeds. The piece is printed on a 14pt coated white stock.
