HTML-CSS « Interactive Llama : Stephen M. James : IndianapolisInteractive Llama : Stephen M. James : Indianapolis Interactive Llama : Stephen M. James : Indianapolis

Ultimate Website Checklist for Launch

Somedays I wish designing and coding websites was just Photoshop/Illustrator and a code editor (I like Coda at this time), but it’s not. Once you understand how the whole system works (Best Practices are changing everyday in this industry…) and you work at a place that has clients based on relationships (therefore valuing quality over shipping bad product), it’s a varied list of technologies to provide optimal performance, social sharing, error checking, compiling, and general quality assurance.  There are many of these lists out on the web. Mine is targeting the WordPress CMS, but should be applicable to most content management systems and probably most websites. Remember, it’s sometimes about removing a feature instead of adding one.

Continue Reading →

Tips for responsive web design

Right now, responsive is pretty much all about the width of your website–although it may not always be that way. Responsive design is an approach though and not a specific technology (media queries, etc.). It’s about responding to the device the website is being displayed upon. For example, the appropriate design may change for touchscreens by making buttons larger.

People are used to scrolling up and down, so matching the width of your document to the width the browser is often the main goal. Although most of the tips below are related to CSS and media queries AND focus on informational sites (not web applications), I believe that JavaScript has a significant place to play in behavioral changes and touch implementations in responsive design. The following list is intended for front-end developers and designers that work with CSS regularly, but are just starting to build responsive sites.

Note: I am not going to use the term mobile, but small-screen. Using mobile implies that you are moving–not that you are viewing the site on a small screen. (via Zeldman)

The decision trees of your layout multiplies with responsive design. Where should this item if the screen resolution is…? This adds complexity to the project due to the multiple (or continous with fluid layout) layouts. Be sure to plan out how many layouts you will create from the beginning. Small, medium, and large? Two small layours (landscape and portrait?) Start with a media query boilerplate and add or subtract the media queries you need.

Continue Reading →

Hiding an email address from spambots and spiders

There is an army of spiders out there.  Some, like GoogleBot, you want scanning your site to be listed in their search engine. Many however have a devious purpose–to collect email addresses to add to spam email lists. If your email address is already out there, then there is no pulling it back in. The only way to eliminate spam is to create a different address and inform all your contacts that you have changed email addresses.

Ways to combat email spam:

  • A non-linked image
  • HTML entity encoding
  • Client-side obfuscation/abstraction (via JavaScript)
  • Server-side redirect
  • Contact form (no email address listed)

If your email address, is spelled out with any client viewable code, it is possible to obtain. Now that search engines can read PDF documents, including your email within a PDF as text may be suspect. I have not gone into great depth on any of them below but have provided a short description of each method with advantages and disadvantages listed.

Continue Reading →

CSSsprite: Photoshop script combines two images for CSS hover

The need

Professional web developers have been aware of CSS sprites or CSS rollovers/hovers since 2004 (The rollover term is taken from JavaScript and the hover term is taken from CSS). They are the background graphics that change position based on mouse hover thus eliminating the need for JavaScript image swaps and image caching since the “mouse on” and “mouse off” are one image. I have been using sprites for years. It is a more tedious process than clicking Swap image on a DreamWeaver drop down menu, but it produces more accessible and more clean code. The most tedious part of creating CSS sprites for menu navigation is aligning the static (in-active) and hover (active) images. This script solves this problem by taking two images and merging them into one. I hope this increases your productivity and creates a more standards-compliant web.

Continue Reading →

Features and characteristics of a great 404 error page

No matter how carefully you design your site, visitors will always request a page that is missing, moved, or non-existent (especially if you experiment with your site structure frequently). This past week, I’ve been obsessed with HTTP 404 errors and working on creating a better 404 Not Found page. The default 404 page for WordPress offers the opportunity to search the blog, but you should go another step. Usability is one of (if not the) key trait of a great website. If thought has gone into even your 404 error page, then I’d guess that much thought has been put into your entire site.

Continue Reading →

Change media and images to full size in WordPress media gallery

I’ve been familiarizing myself with WordPress 2.5′s new media gallery. If you’ve visited my blog before, you know I don’t upload many images, but I’m hoping to upload many images to my wife, Rachel Steely’s website. I was annoyed to find out that the default image posting size is medium (which is about 300px). On top of that, if you select full size, it doesn’t mean full size. It means your WordPress theme’s column width. So unless you are using Kubrick your media size will not be your column width.

Continue Reading →

Plain text link to HTML with a PHP function and regular expressions

If you have ever wanted to turn a plain text link, http://www.smjdesign.com, into a “linked” HTML version, http://www.smjdesign.com, you can now. Pass the following function your entire text field and it will find all your links and return tagged HTML.

function replace_plain_text_link($plain_text) {
$url_html = preg_replace(
'/(?<!S)((http(s?):\/\/)|(www.))+([\w.1-9\&=#?\-~%;\/]+)/',
'<a href="http://www.interactivellama.com/http$3:/$4$5">http$3://$4$5</a>', $plain_text);
return ($url_html);
}
echo replace_plain_text_link("hi this is dummy text before
http://www.smjdesign.com hi this is dummy text after")

Continue Reading →

Graphic web design and cascading style sheets

On Saturday, February 9 at 11:30 am, I spoke at BarcampIndy 2008 on Graphic Web Design and Cascading Style Sheets. All presentations were broadcast on BlipTV. You can view a video of this presentation on BlipTV.

The premise of my presentation was to show an overview of the process between layout in Illustrator and PhotoShop to coding in HTML and CSS. I find that web design is often segmented between the coders and graphic designers. I propose that the best outcome can come from bridging that gap. I do this in my daily workplace and try to show tips and techniques for others to bridge that gap. The time slot was only a half hour, so I could not go into coding detail, but only point to tutorials via links.

Continue Reading →

HTML standards in email clients: Oh, the horror!

A new HTML standards for email clients advocacy site has sprung up. It’s called Email Standards Project. I sincerely hope that it is able to make a difference. I’ve personally had issues with the major discrepancies in email clients at my job. I’ve heard that Microsoft Outlook 2007 is unfortunately using the Word HTML engine instead of the Internet Explorer Engine. The full list of clients that are on the Average or Poor list are:

This is based on their acid test. If you are involved in developing internet applications or sites and aren’t familiar with acid tests (and you should be!), visit WebStandards.org for the web browser acid test.

So what’s a person to due in the mean time–structural tables and inline CSS, of course! That’s what! So barbaric and so 1999! Here is a tutorial on what HTML/CSS you can use across multiple email clients.

Thirteen Ways To Add SEO To Gallery2

Overview of Search Engine Optimization for Gallery2

I hope this is a starting point for those that want to make Gallery2 more SEO. Please remember that the SEO doesn’t make you show up higher in search listings, but makes it easier for this to happen. Having other people link to your pages is always the best thing you can do (at least for Google). Any additions to this list would be helpful. If you have questions or would like clarification, please ask.

Technical Background on Gallery2

Some of the suggestions on this list involve editing template and class files, do this at your own risk. Gallery2 administrators recommend copying the file you are editing to the subdirectory called “local” and editing the file there. Gallery2 will then use that file instead of the original. This also means that upgrades will not overwrite your edited file. In the examples below, I am using Gallery 2.2.3.

Continue Reading →

Macromedia Dreamweaver 8 crashing on startup and close

For a long time, I have had problems with Macromedia Dreamweaver 8 crashing at the close of the program. I had never had a problem with Macromedia Dreamweaver 8 crashing at startup until the other day. I surmise that Macromedia Dreamweaver 8 had closed and crashed as it usually did, but this time it wrote an invalid or corrupt Site Cache file. It took me a few hours to remove all parts of Macromedia Dreamweaver 8 from my system, but I finally found the corrupt site cache file in users/{username}/library/application support/macromedia/common/8/Sites/

Coding faster and easier within your browser: CSS, HTML, Javascript

I have not tested Dreamweaver CS3, but prior versions of the program do a mediocre job of displaying CSS correctly. For instance, div tags do not always display correctly without inline style tags–which we all know is such a coding faux pas. This has led to a departure from using a WYSIWYG editor and to using the browser to construct webpages. Below are the best aids I have found in debugging and editing webpages in the browser Mozilla FireFox.

Continue Reading →

Multiple CSS increases productivity of hiding and showing with display attribute

With the prevalence of DHTML, much less AJAX, I have begun to use separate Cascading Style Sheets for development and publishing. Since styles override each other, the easiest way to accomplish this is to add a second style sheet link after the publishing CSS link and comment it out when one wants to test the page.

“dev.css” contains “display: block;” within all classes that in the publishing CSS contain “display: none;” much like that below:

.profile_box { display: none;} (index.css)

.profile_box { display: block; } (dev.css)

HTML/Flash: Use more than Arial and Times New Roman

To the designer, it’s a pain only using Arial and Times New Roman for headlines (well, the MacHead designers are probably using Helvetica and Times, but I regress. . .) , so one uses images. The problem is that images are static unless you have an image generation script package installed on your web server to create images on-the-fly.

So what’s one to do?

A friend of mine actually sent me a link to Mike Davidson’s site on sIFR 2.0 (Scalable Inman Flash Replacement) two years ago. I had forgotten about it until my creative director wanted a headline in a pixel font in a database driven site.

The concept

sIFR can replace short amounts of text with text rendered in the typeface you choose–whether or not your users have the font installed on their computer. A flash movie is created on the client side and uses JavaScript to pass text to it from the HTML (that’s correct, no coding the text twice). That means with a few lines of Javascript, you can use any fancy font you want for headlines and pullout quotes.

–Stephen M. James
www.smjdesign.com

HTML: FireFox Web Developer extension is your friend

This is the best tool I’ve seen for analyzing and disecting a pre-existing website (or to debug the one you just created). This extension allows one to outline table cells, view anchors, DIV tags, disable CSS, resize the browser window, validate your code with the W3C, inspect the DOM, and all inside your browser! Download Firefox. Then download the Web Developer Extension.

Screen shot of Display Element Information
Screen shot of Outline Table Cells

–Stephen M. James
www.smjdesign.com