archive

html
7/20/2011
mobile diversity

Classically in the world of web design and development you would write up the code for a site to be viewed in one of the few browsers such as netscape, internet explorer, opera, etc.... These browsers mostly all supported the same web standards and it wasn't too hard to make a site work across all browsers. That doesn't work out anymore.

In modern times we have hundreds of browsers on hundreds of platforms and they are all being viewed in one way or another. Some support advanced features and some don't. Because of this us designers and developers have to keep several things in mind and make sure that we're targeting our specific audience and making sure that they experience the best browsing experience possible.

For a long time internet explorer was the enemy and in some ways this still holds true. Overall Microsoft has worked hard to rid themselves of the horrible reputation that the browser has got. IE9 should tackle a lot of the issues of the past but unfortunately this doesn't mean people will upgrade.

Very similarly to the IE upgrading issue is the legacy phone issue. These days more and more people are moving from a computer to a phone for the basic computing needs such as email, web browsing, social networking, and even document management. In today's market it can be difficult to distinguish which device a person is using so it's very important to make your site very scalable. This means that a mobile site developed by myself should work not only on an old Blackberry Curve but also on an ipad without looking too funky. This is an issue considering current versions of iOS and Honeycomb support some of the most up to date standards including css3, html5, javascript, jquery, etc. and legacy models of phones do not. In fact, as I was developing a site the other day I found that older blackberrys do not support css float and margins. This is a huge deal when making a site considering that these are common practice. Contemporary designers and developers need to find ways to work around this by utilizing old but still relevant code to accomplish the same layout. Easier said than done ;)

html
3/3/2011
web fonts

As far as search engine optimization goes, images that display text do nothing but hurt your website's indexability. Currently there are around 20 supported fonts on the web that all current browsers support. It can be a real challenge to stand out when everybody is using the same tools. More recently the ability to load fonts directly or linked has come up and it couldn't have come any sooner.

Google's web font directory allows for you to use their pre-loaded fonts using a call to their hosted stylesheets completely breaking down the font restriction walls. It works very easily and I thought that I'd walk you through the process of loading up a font in this manner. First step is to go to http://google.com/webfonts and find a font pack that you like.

There are several varients so make sure to try out all of your options. When you think you've got one that you like simply click on the 'use this font' link. It should give you a code snippet that looks like this:


<link href='http://fonts.googleapis.com/css?family=FONT' rel='stylesheet' type='text/css'>

Stick this snippet into the <head> section of your code near the bottom.

Next you'll have to edit your stylesheet to call the font:


h1 { font-family: 'YOUR FONT', arial, serif; }

Now with this example (provided it was filled out correctly) any of your H1 tags within the html doc would reflect that font. There is also a manual way to do this but I won't go into that on this post. Hope you enjoy!

html
3/1/2011
developer tools

As a designer and developer I can truthfully say that my life would be much more difficult without the help of browser developer tools. Developer tools allow for you to look at a site's html, css, and javascript output. In this post I am going to go over my favorite techniuqes and tools that I use every day in the field.

If you do any type of web design or development you've probably heard of firebug. Firebug is probably the hardest hitter in the in browser inspection tools. Coupled with Mozilla's Firefox it can be and is the most powerful way to look at the inside of a site. You can literally copy a site exactly (with the exclusion of any php, java, .net, etc.). The great part about firebug and firefox is that you can use an inspection tool to zoom in on code that you would otherwise have to sift through to find. Not only can I see what html makes a specific part work, but I can also zero in on the css. This can all be done manually of course but it's all about how fast you have access to certain code.

Most in browser development tools can do what I've explained above but what makes firebug great is the ability to easily add or edit styles and html in real time. I can go to a site that has a black background and inspect it's background styles and change it to whatever I please and it will show what that style looks like in my browser. This is extremely useful when trying to figure out margins and padding. Obviously none of your changes will stick upon refresh so you have to be sure to keep track of what you do. Maybe a cool feature would be to output changes? :)

Firebug isn't the only set of in browser developer tools and for a good reason. Internet Explorer doesn't work the same as Firefox, Chrome, or Safari so it requires its own tool set. This was built into IE 7 & 8 and is actually very useful if you take the time to learn it. The tools allow for you to switch back and forth between 7 and 8 render modes which is awesome considering they don't work the same.... MICROSOFT! The good thing is that you can do the editing in real time but cannot add styles (which can be somewhat of a pain). Google Chrome also has built in developer tools that seem to try to mimic the firebug set up but falls short in my opinion. The inspection tool doesn't work very well and I find myself struggling to find what I need when I need it. It also does not allow the addition of styles.

Other than inspecting and changing styles/code in real time there are also other great tools such as the web developer tool bar. It gives you the ability to turn off images, styles, forms, cookies, etc. My favorite, though, is the validation tools. You can run your code through a validation system that will scan and tell you where you've maybe not put up to par code, missed a semi-colon, or just plain wrote bad code. It's a great tool for cross browser functionality as different browsers handle errors much differently.

I hope this post has helped you. It has taken me several years to come up with this type of system and it doesn't work for everybody but I've never came across a problem that this solution did not provide me the means to fix.

html
2/25/2011
content management

If you don't know what a CMS (content management system) is then you're about to learn a little bit about how it can make both the client and developer's lives much easier in reguards to running a website. The concept is that I do a little extra work setting up the site to be very dynamic so that not only do you not have to pay me to make small updates but you can easily do them yourself. A few well known CMSs are Joomla!, Wordpress, and Drupal. I am specifically good with Joomla! but the same concept is applied in all three.

A few years ago I was bored with my work and wanted to take it to the next level so I started self teaching myself PHP. In order to do this I needed a project so I built my own CMS from scratch (sans the login system as I wanted it to be very secure). To start with I grabbed a secure login script and set it up to work with a MySQL database. At this point there were no styles, it was ugly, and the only thing you could do is login, set permissions, and add & remove users; not too functional, yet. Next I began looking into pulling data from the database. I started adding upload features and set it up to pull images and description text from the database and eventually it evolved into something somewhat functional and the job I was working at saw this and had me actually incorporate the cms into one of their sites (which is still in use today here).

After I got the uploads to work we hit a wall. What if the user messes up a word or uploads the wrong image? I had to go in manually and fix these issues. So I started adding more functionality. At this point I added a view, edit, and delete feature (which was pretty difficult considering the logic). I also added a WYSIWYG editor (what you see is what you get) which allows for somebody without knowledge of formating text for html the ability to write in words into a system similar to MSword and then submit. At this point I had a functional cms built on top of a nicely laid out template system.

More recently my good friend and graphic designer decided he wanted to use my CMS for his portfolio site so I built it out for him. At this point I had a little extra time and decided to make some upgrades. I found some scripts that allow for dynamic editing of styles via the css based style sheet. What this means is that he can go in and change the color of the menu links, the background color, etc. I also added the ability to upload a new header image, remove it, replace it, etc. My final upgrade (at least up to this point) was the ability to edit the keyworkds, description, and site title from the back end. Overall I'm very happy with the CMS but after all of these upgrades it will need to be re-laid out. I've also recently gotten into object oriented programming which would make a lot of my code a litte too repetative and require for me to recode everything.

If any of you are interested I am willing to post the entire cms / database file structure onto the site or per an e-mail as I know it was tough finding example cms barebone kits out there.

html
2/24/2011
there will be cake

The other day I recieved an e-mail at work from one of the developers who had made a cake to celebrate the drop in IE6 userbase to below 5% deeming it a browser that doesn't hold enough of a demographic to support. In other words WebMD has decided that since not enough people use Internet Explorer 6 that we will no longer be designing the site to work in that specific browser.

If you've ever had to write html and css then you know that there are two things in this world that are against us; IE6 and bad clients. Personally, I stopped building out sites for IE6 back when Google, YouTube, and many other sites decided to move on as well. It's extremely important for things like this to happen because web technology is moving extremely fast and a huge problem is making it pretty for those working in obsolete systems as well as making it look great in more advanced and contemporary systems.

In closing I think the point I'm trying to make here is that you should always try to keep your browser (if not ALL software) up to date, not only for secure web browsing, better user experience, and the fact that it looks like it was designed to look like, but also to make my life easier!

html
1/3/2011
website = house

In this post I would like to compare and contrast the similarities of a PHP based website with a modern day American house. I will cover PHP, MySQL, HTML, and CSS.

To start off with your house must have a frame. In web design and development this would be the HTML. Without anything else helping it, HTML is dull, plain, and quite the opposite of dynamic. Your HTML, however, provides the structure everything else will need to sit on and it will also provide direction for some of the PHP.

For our house the PHP would represent the electric, the chiminey, alarm system, and plumbing. A house would be kind of useless if it didn't have any dynamic ability to move throughout the rooms unnoticed. Of course there are many other things PHP can do but for our example it fits here.

MySQL databases hold all of the dynamic content of our website. Imagine the couch, tv, tables, the water running through the line, the electricity, etc. being data from the database. Your php regulates and calls what data it wants and what it wants to hide.

Now for the part that everybody loves; the css. CSS, in reguards to our house, would be the carpet, most colors, positioning of most things in the house. CSS sits at the highest level of websites and is what you see when you go to a website.

So in retrospect here is what we have:

  • HTML - The frame.
  • PHP - The stuff going on behind the scenes.
  • MySQL - The dynamic data coming in and out controlled by PHP.
  • CSS - The colors, patterns, textures, and placement of most anything you see visually.

Now if we wanted to go a little deeper we could include Javascript, JQuery, Ajax, etc. These can bring a dynamic level to the HTML & CSS as well as perform a few of the tasks PHP would otherwise be too deep level to handle.

html
1/2/2011
the basics

The idea of this blog is to give a little insight into who I am and a little about how I do things. Almost everything you'll read here is personal opinion and works for me. To start off with I want to go over what makes a basic html website without getting too deep. The world wide web is exactly that; a web. There is no central 'brain' of the internet. A website consists of two main things, as you see it. The website itself and the domain pointing there. Without a domain your site would be an IP address such as 127.0.0.1.

The domain you bought points to a specific directory which we can call root (some places call it 'public_html'). Here is where you will create an index.html or index.php file. By default your domain loads the index file. Depending on if you plan on using a dynamic template or just hardcode html will determine whether you want php or html. For the sake of this post I will cover the basic html version.

Here is the basic set up of an html page:


<!DOCTYPE html> <!-- the document type... -->
<html> <!-- begin html document -->
<head> <!-- the header of the html document.  load css and javascript files; declare meta info. -->
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>My Page!</title> <!-- title of the page -->
<link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen" /> <!-- loads the reset stylesheet -->
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" /> <!-- loads the style sheet -->
<script src="/js/js.js" type="text/javascript"></script> <!-- loads any javascript you should need -->
</head> <!-- end header-->
<body> <!-- this contains the visual area of your site -->
<div id="container"> <!-- a container lets you control a width.  imagine this as a layer on top of the body's background -->
<p>CONTENT INSIDE OF THE CONTAINER!</p>
</div>
</body>
</html>