GPORT.NL

Post Images Gallery for Wordpress

Lately, I’ve been working on a website and i found the need for a Wordpress plugin that shows a small gallery of all the images attached to a post.

I could not find a plugin with his functionality anywhere, so I decided to write one myself.

So, without further hassle, I present the Post Images Gallery widget for Wordpress.

It creates a widget that shows a gallery of all the images in your posts, and it uses minimal styling so that it will fit into your blog easily.

On the admin side, you can change the title of the widget block, the dimensions of the thumbnails, and the javascript framework you use.

Currently, only Jquery is supported, but I am working on adding MooTools and Prototype.

You can download the plugin over here!

My First Steps Into HTML5

Today I started coding on my first HTML5 project.
This new standard is very promising, it makes code a lot more semantic and readable, and it also makes our life easyer (or at least, it will eventually).

I started on reading some resources, the most important are listed below:

http://diveintohtml5.org/semantics.html

After this, I set up a structure in HTML5, and started the coding. I quickly found that even firefox font apply CSS to the new <article> and <section> elements.
I solved this by adding <div>’s to my structure, like this:

You probaby think, okay then what’s the point of using HTML5 at this moment? Well, I thought the same and had a discussion about this with a friend of mine.
He stated that, even though it takes more lines of code and not all browsers support it right now, it is still worth the effort.

There are two reasons for this:

- Your websites will be ready for HTML5 when it will be broadly supported by all browsers.
- It will improve the readability of your code (also for search engines!).

Because of this, I was convinced that it is a good thing to start implementing HTML5 in my code.
I encountered another problem, and you can guess: it’s IE. Internet Explorer does not understand any of the HTML5 properties, so you have to use JavaScript to force it to understand it.
This is achieved by the following lines of code:

<!–[if IE]>

<![endif]–>

This makes sure that when the client is using IE, it will load the JS that make HTML5 work (thanks to htm5shiv).

You can take a look at some of the code I wrote today here, I hope this post helped your HTML5 efforts!

Bye Bye, IE6

Yes, I am too dropping support for the outdated but still widely used IE6. It’s old (2001!), it has numerous compatibility issues, it is not safe and it is lacking all the features a modern browser needs. It doesn’t even have tabs. But why do people keep on using it??

The main reason is because most websites still support it. Also, a lot of internal company systems only work in IE6, and last but not least, people just don’t know that they are running an unsafe, outdated browser.

If we want to have a better internet, and give people a better experience, we as webdevelopers have to stop supporting IE6. But if you make it hard for yourself and waste your time in IE6 hacking, you’re doing the exact opposite. All the hacks that we use on our sites is the main reason IE6 still is a big player on the browser market.

In stead, give your users a message that they are using an old and unsafe browser, and give them directions in how to upgrade to a more modern browser.
This way, you are not completely ignoring IE6 users, and presenting them with a broken website. Don’t be scared that dropping IE6 support will make you lose all those precious users.

Do not make the mistake of only telling people to get Firefox, or another open-source alternative. The unknown will make your users go away, so be sure to mention IE8 as well (it’s kinda good anyway)!

So let’s all drop IE6 support, and make the web better

Your Site’s Logo – The SEO Way

A site’s logo is an element that’s always there, but a lot of designers still treat it as just an image.
It’s time to change that. If we treat the logo as just an image, google will treat it that way too. But we want google to treat your company’s logo like an important heading element, right?

Using the stechnique I will describe now, we will make <a> element that holds your logo, and can still display an alternative heading to search engines.

The Code

HTML:

<a href="link-to-your-homepage.html" class="logo"><h1>Company Name<h1></a>

CSS:


a.logo {

	background-image: ('link-to-your-logo-image.jpg');
	background-repeat: no-repeat;
	width: 200px; //* Change to correct width *//
	height: 200px; //* Change to correct height *//
	text-indent: -9999px;
	display: block;

}

As you can see, the core of the code up here is the usage of a background-image for the link element, and the usage of text-indent.
Text indent makes sure your text indents (duh). What this means in our case is that it is effectively moving the text 9999 pixels off-screen, so that we as end users do not see it.
The search engine bots that crawl your site however, will see the content in there.

So now, in stead of showing search engine bots an image, we are giving them the heading they need: your company name.

Last notes

This approach has another minor design advantage, you can give your logo a nice and fancy hover effect (check the logo on top of this site). It was created using the same technique, and adding a simple :hover element in the css.

Creating An Email Newsletter

Lately I’ve been working on email newsletters a lot for clients, and although there are plenty of good resources on this subject, I thought I’d summarize things for you guys.

Email newsletters are a populair and effective way for company’s to reach their clients.
Of course, all this emails have to be designed, and coded. That’s where we come in.

But how to this the proper way? Most email clients respond differently to the code that’s is valid on the web today, and to make it even harder there are services like hotmail and gmail that display your emails in a browser. So, we have got to make sure that we test. Testing is the key here, next to a number of guidelines that I will point out later in this article.

For testing, make a virtual machine, and install all the mainstream email clients on it. This way, you’ll keep your host PC clean!
Use VirtualBox to make a VM, and use the list below to download the email clients.

Also, do not forget to create a wide variety of email adresses, with all the mayor players like gmail, hotmail, yahoo etc.

All right, now to the practical bit of this article: the guidelines.

Base rule

As designers, you probably are familiar with XHTML and CSS. For email coding I can say only one thing; remember the syntax, forget the aesthetics.
In email design you can’t work like you are used to.

Inline Styles

Email clients do not accept external stylesheets, in stead you have to use inline styles.

Bad:

&lt;link href=&quot;http://www.gport.nl/public/css/base.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;

Also bad:

&lt;style&gt;
a {

font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
font-size: 14px;
color: #5f1d54;

}
&lt;/style&gt;

Good:

&lt;a style=&quot;font-family: Verdana, Geneva, sans-serif; font-weight: bold; font-size: 14px; color: #5f1d54;&quot; href=&quot;http://www.google.com&quot;&gt;Text here&lt;/a&gt;

JavaScript

This is a very simple, but important not to break rule. DO NOT use JavaScript. It will make sure your emails will not arrive at their desitantion, and they will be marked as spam.
Also, most email clients do not know how to execute JavaScript code, and it will break up your beautifully crafted design.

Use tables

Use tables for your email design, and forget about div’s. Tables are widely supported throughout email clients, and div’s are not.

Also, forget about everything around your tables. Do not use the body tag with a background attribute applied to it, but instead add an overlapping table that contains the background.

Make sure that you declare width, cellpadding, and cellspacing for all tables and table cells. This makes sure that your tables look the same in every email client.

Bad:

&lt;table&gt;
Content Here
&lt;table&gt;

Good:

&lt;table width=&quot;550&quot; height=&quot;29&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;
Content Here
&lt;/table&gt;

Do not use background images

A lot of email clients, including Gmail, block background images, because they can contain malicious code. So use this as little as possible.
If you are still determined to use a background image, make sure use the background attribute, as well as an inline style with the background-image property. This makes sure the image will display in most clients. If you use this technique, do not forget to add the background-color as well in your inline style, so that if images are not displayed, it still strokes with the rest of your layout.
In this case, also make sure that you seperate the visual and message part. Use the image for the visual, and plain text for your message. This way you can still present a fancy image to most of your users, and the people with no support for this will still read the message.

Bad:

&lt;table style=&quot;background-image: url('http://www.url.com/img.jpg')&quot;&gt;
No content here, content is in image
&lt;/table&gt;

Good:

&lt;table width=&quot;550&quot; height=&quot;29&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; bgcolor=&quot;#EAEA&quot; style=&quot;background-color: #EAEA;&quot;&gt;
Content Here
&lt;/table&gt;

Alternative:

&lt;table width=&quot;550&quot; height=&quot;29&quot; border&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; background=&quot;http://www.url.com/img.jpg&quot; style=&quot;background-image: url('http://www.url.com/img.jpg'); background-color: #EAEA;&quot;&gt;
Content Here
&lt;/table&gt;

Images are either way blocked untill the user allows to display them, so it is important not to use images for important messages you want to communicate with your users.

Make sure that for the images you use, you do apply alt tags to them, so that the user that sees no images still sees the message you want to communicate. This will also make sure that visually impaired people that have turned off images can still get the message. Sadly, Outlook 2007 dropped support for this tag. The peeps at Microsoft apparently don’t like the visually impaired..

Also make sure that you apply width and height attributes to each image, so that all email clients will display them properly.

Bad:

&lt;img src=&quot;http://www.url.com/img.jpg&quot;/&gt;

Good:

&lt;img src=&quot;http://www.url.com/img.jpg&quot; alt=&quot;Description&quot; width=&quot;200&quot; height=&quot;100&quot;/&gt;

Last Notes

The most important thing – I mentioned it before – is to test. So test, test, test and test a bit more before you send your newsletter to your clients.
You don’t want to give them the wrong impression, right?