XHTML

DotNetNuke Core Team all up in my Grill

Tuesday, June 3rd, 2008 | CSS, DotNetNuke, Improving Code, Programming, Skinning, Web Development, XHTML | No Comments

Man, I’ve been getting quite a bit of attention from the DNN Core Team the past couple days.

I just wanted to say I appreciate the feedback and I’m interested in the advancements and improvements being considered in upcoming versions of the platform. Thanks for putting up with my candor and overt angst in these past few bitch posts.

I’d be particularly interested in knowing about any plans to move forward with .Net 3.5 and its ability to allow designers to define all the HTML in the controls. I’d like to see DNN reach the point where all rendered HTML is controlled by the front-end engineer, and we can achieve W3C compliance and simpler control over themes and content generation.

CFD Smile Goes Live!

Monday, November 12th, 2007 | CSS, Clients, Code, Custom Development, Design, Portfolio, Portfolio - Freelance, Programming, Projects, SEO, Semantic XHTML, Skinning, Web Development, Websites, Work Stuff, XHTML | No Comments

Well, my first side project has finally gone live! After months of hard work, I now unveil www.cfdsmile.com to you. We wanted to bring out the services right up front for best emphasis, and lots of heavy stock photo usage for high impact.

We also worked with a professional web content writer to make the content more effective and search-engine optimized. This, coupled with semantic HTML, CSS, and google web master tools, will help this site rank high in keywords for Texas Dental Services.

So, please visit the site if you get a chance, and enjoy!

Semantic XHTML - More than Table-less layouts

Wednesday, July 18th, 2007 | CSS, Improving Code, Life, Programming, Semantic XHTML, Web Development, Work Stuff, XHTML | No Comments

OK so I have a confession to make. I didn’t know that semantic XHTML is different from standards-compliant XHTML.

I formally apologize to the entire web development community. My terrible practice over the last seven years has finally caught up with me and put me in my place!

I am deeply ashamed and will be making every effort to step up my game and read all about the wonderful world of semantic web development.

Page Title SEO

Friday, May 18th, 2007 | Artemis Solutions Group, Programming, Projects, SEO, Teamwork, Usability, Web Development, Websites, Work Stuff, XHTML | 1 Comment

I’ve recently sent out an email at work explaining Page Titles and their importance with SEO. I thought I’d share it on my blog. You may or may not have noticed that my Post titles and page titles come before my blog title in my page titles. I did this specifically because of SEO.

PAGE TITLE: - the text that shows up at the TOP OF THE BROWSER and in GOOGLE / YAHOO / MSN et al SEARCH RESULTS

Why is the page title important? It is what the casual searching web user will see when searching for content / services offered by YOUR CLIENT. So the page titles MUST INCLUDE keywords relevant to the pageâ??s content. The page title should be formatted well and DEFINITELY BE MORE THAN JUST A COPY OF THE PAGE NAME. The client name should be included.

If you donâ??t know how to do a very quick keyword-density page title, then AT THE VERY LEAST, format your page titles like this:

PAGE NAME | CLIENT / WEB SITE NAME

So if your client is Artemis Solutions Group and the page is Web Design

You can AT LEAST type this much:

Web Design | Artemis Solutions Group

But if you want to be keyword-savvy (just do a quick search and read on SEO Page Titles and Keywords for quick reference)

You could format it like this:

Web Design & Development | Lansing, MI | Professional Web site Design | Artemis Solutions Group

Itâ??s worth a LOT to the client for us as developers to think about their web marketing strategy and how their content and custom features affect that strategy. A little bit of Usability goes a long way, and is very easy to do.

Proper page titles take minimal effort, and add superb value to the client.

New Project “Marionette” in the works

Tuesday, April 3rd, 2007 | CSS, Code, Design, Life, Marionette, Photoshop, Programming, Projects, Web Development, Websites, Wordpress, XHTML | No Comments

OK, so I know I haven’t worked on the veritas project in a long time, but I promise you it is because my client has been busy working a second job and we just haven’t been in touch on the matter lately. It’s no big deal, I’m not charging money for the project and there is no strict deadline. I will be posting about that soon, though. I just got on him to purchase a domain and hosting solution so I can begin scripting the site. I will use wordpress and convert it into a CMS just like I did for Shirock Photography.

So, I am working on a new project, teaching myself cakePHP, and for now, it is codenamed “Marionette”. I’m very, very excited about this project and I hope to produce something in the coming weeks. Stay posted.

A Little SEO Goes a Long Way

Monday, February 26th, 2007 | Artemis Solutions Group, Programming, SEO, Usability, Web Development, Websites, Work Stuff, XHTML | 1 Comment

Last December, I took on the task of doing my first real Search Engine Optimization (SEO) job for one of our clients: Modern Metal Processing.

If youâ??re unaware of exactly what SEO is, itâ??s basically an organic internet marketing technique where you format your siteâ??s content for search engine robots such as Googlebot to be able to read your site, understand what itâ??s about, and find your pages.

First, SEO isnâ??t just about making your site search engine-friendly. Itâ??s most important to ensure that your content is User-Friendly. Your content should be easy for your visitors to read, understand, and find pages with more content and information on subjects that interest them. Go figure, right?

My favorite example of a site that is well indexed by Google but doesnâ??t offer much content for users is Britney Spearsâ?? Guide to Semiconductor Physics: The Physics of Optoelecgtronic Technology. If you search for â??Britney Spearsâ? on Google, you will probably always find this site near the top of the list. Why? Because the person who made that site knew how to make it matter to search engines.

As funny as it is, it illustrates that even if your search rank is high, your content still matters to users.

Iâ??ll get right down to a few of the things I did for Modern Metal Processing in December that have given them tremendous results on Google in the last couple months.


  • Implemented friendly URLs

  • Replaced generic content with specific keywords like â??heat treatmentâ? and â??brazingâ?

  • Added useful keywords to the Alt tags of all images (note: I didnâ??t add any keywords. I added keywords that describe the image)

  • Linked any instance of the keywords and images with keywords in the alt tags to their respective pages that contain more information

  • Restructured content so that easiest and most scannable content was up front for the siteâ??s visitors (Usually bulleted lists can help shorten otherwise bulky paragraphs. And theyâ??re perfect for links!)

  • Formatted all links to include helpful, descriptive text and keywords. This increases the rank for pages and helps the user, rather than a generic â??click hereâ? or some other such old technique.

  • Checked that every navigation element and important image and all content on the site is text readable by disabling CSS through Firefoxâ??s Web Developer Extension

  • Added a valid robots.txt file to the root of the site to block useless pages from the index (like login)

  • Added a valid sitemap.xml file which is automatically generated through server technology

  • Added MMP to Google Webmaster tools for easy tracking
And the results?
Within a couple weeks, MMP went from 1 or 2 pages in Google index to 29 (thatâ??s all their pages) They are now getting front page results on generic search terms: Top search queries and their average top position

  • modern metal - 8
  • modern metal processing - 1
  • heat treating michigan - 9
  • metal process mmp - 2
  • heat brazing work - 3
  • what is heat brazing work - 3
You can download their full query results table and view it in Excel.

So what have we learned?
Content is the most important aspect of web pages. Not only should it be readable to the robots, but most of all helpful to the siteâ??s visitors.

The client allowed us to change up their content as much as necessary to cause results, even if it meant hurting egos by not including that content which may not be very helpful or useful to the visitors(or at least not making it the top most important content on the page).

We were allowed to make links within the site that are helpful to the user, and we were able to include and arrange the keywords in a  tasteful way that helps the user and the search engine robots.

This is just one of the things we do at Artemis every day.

The Beauty of Standard Code

Wednesday, February 14th, 2007 | CSS, Code, Collaboration, Programming, Teamwork, Web Development, Websites, XHTML | 1 Comment

Eric Puidokas used to be a coworker of mine, but now he works in Florida for the New York Times. While he was here, he developed a standard skin and css naming convention for us to use so we could easily jump into each others’ code when need be to fix problems or implement redesigns.

I recently had the opportunity to do just that. I had to put in a new design for a client based on roughly the same layout. Eric’s standard coding made it very simple, and a process that takes 4 to 5 hours from a blank sheet took about 1 hour with Eric’s code.

We use the same names for similar layout elements in every single web page we do. It goes kind of like this: (this list identifies common unique DIV IDs)

  • Frame (main container)
    • Header
      • Nav (main nav bar)
    • Sidebar (sub page nav bar)
    • Main - or - Content
  • Footer

So thanks to Eric for the great code, and let this be an encouragement to other development teams to use standard naming conventions for your CSS and HTML elements.

Download a zipped example of our standard code.

CSS for IE 6 and 7 with no hacks

Tuesday, January 16th, 2007 | Browsers, CSS, Internet Explorer, Programming, XHTML | 7 Comments

UPDATE
Since the time of this writing I have learned some important things:

  • With correct doctypes, IE6 almost always renders the same as FFX and IE7, except when it comes to PNGs.
  • If you set your body’s font-size to 62.5%, you reset browsers to 10px.

Eric posted about this some time ago, but I really think this is one of the most unique methods I use in my coding process. I’ve yet to see this idea brought up by most sites I browse for CSS/XHTML solutions. The idea is that you can use pure XHTML in conjunction with conditional comments to create a CSS style sheet that is free of your usual hacks. The reason we found this out is because the people on the IE 7 dev team actually managed to bring their new browser into closer range for compliant style rendering. IE 7, for the most part, follows the box model pretty well, and ignores the usual string of hacks we use in our CSS.

Before we learned about conditional comments, we were using an underscore to rewrite any definitions that IE 6 needed to render our code correctly. The most common fix was usually to the width attribute. Add your padding back. Well, no more underscores. Here’s what you do:

When you create your body tag, write it as so:

<!--[If lt IE 7]>
<body class="ie6">
<![endif]-->
<!--[If IE 7]>
<body class="ie7">
<![endif]-->
<!--<![If !IE]>-->
<body>
<!--<![endif]>-->
OK, so what is this mess, you wonder. This is code that only Internet Explorer since v5.5 understands. Microsoft did a good thing by adding this functionality so that web developers like us can fix our coding problems without hacks. Essentially here’s what it says in order from top to bottom:

If Less Than IE 7 then read: <body class="ie6"> If IE 7 then read: <body class="ie7"> If NOT IE, then read: <body>

Since the first two statements are commented out, all browsers except IE ignore the HTML inside the comments. The last statement is commented it out, as well, but the HTML: is not. This is actually a twist on down-level revealed comments. The tags supplied by MS in the link above would have you use <![If !IE]>. This tag is not valid XHTML. All we did was put comments around it. IE still understands, and the code is perfectly valid. IE will skip that tag, no other browser will. Everyone is happy.Here’s how you use it in CSS:One thing I noticed is font sizes in IE tend to be bigger than Firefox. Here’s what I usually do at the top of my CSS files:

body{
font:normal 1em Arial, Helvetica, sans-serif; }
body.ie6, body.ie7{
font-size:0.9em;
}

Starting my stylesheets with this declaration almost always guarantees my fonts will be the same size on Firefox, IE6, and IE7.

And of course, if you need to fix a width problem due to improper box model:

.bigdiv{
width:140px;
padding:0 5px;
}
body.ie6 .bigdiv{
width:150px;
}

Using body.ie6 as the parent selector will cause .bigdiv’s new width to only be implemented by IE 6.

You may read Eric’s post and notice he didn’t differentiate between IE 6 and 7 in his comments. Since his post, I’ve come to find that sometimes IE 6 needs fixing, sometimes IE 7 needs fixing, and sometimes they both do. That’s why I’ve chosen to differentiate between them in my body sub classes.

About the Author

I'm a real Web Developer from East Lansing, MI. I like HTML, CSS, JavaScript, last.fm, 37signals, flickr, Getting Real, dogs, bikes, social life, ROWE, speaking my mind, UX design, dinner dates, dancing, movies, indie rock music, hipsters, scene kids, bars, food co-ops, drums, writing, books, organic food, eco-friendly, progressive thinkers, the secret message of Jesus, and lots of other things.