My Favourite 5 Books – A smashing story

Recently I’ve been going through a fad of buying web related books. I love the feel of books, I love reading books. I love sitting on the train reading about web design and development. With a book you’re forced to read, rather than skim. With a book you can slide in a bit of paper and bookmark your favourite snippet of code. With a book you can have them sitting pretty on a book shelf. With a book you can pass it to your neighbour, or have it sitting on your desk, giving you something to flick through when you want to rest your eyes from the screen.

With books come magazines. The .net magazine is my bible. I will sit and read it from cover to cover, soaking in the news, the stories, the interviews and the hints and tips. I just love being able to open a page and turn it to my developer. My .net mag gets whored around like a lady of the night in my office and thats because its easy to read and easy to digest. Its not like sitting in front of a computer reading a long article. Web articles never look pretty. Books and magazines look stunning.

The irony is not lost on me that I am writing a blog post about how good books are. I have not lost the fact that I am writing a long piece of ugly text for you to sit and read. The fact i’m merely typing is because I cannot afford to publish my blog posts.

Anyway, I digress. The purpose of my boast was not to ramble on about the greatness of books, but to recommend a few. I would like to start some sort of #bookstobuy club. The idea being that you list your favourite 5 books, or recent web related book or magazine purchases and you explain in a few words why its a good book. Write a blog about it and put the link in the comments. Hopefully this will be good to the world. So onto my list:

Just a note – you’ll find the title of the book and a link, followed by the [publisher] and the {topics} of the book. All I ask is that you follow suit.

.net magazine {HTML, CSS, PHP, General Knowledge} - It goes without saying that this magazine has taught me an astonishing amount of things. The greatness it brings to life is good.
jQuery – Novice to Ninja [Sitepoint] {Javascript, jQuery} – this book, on its own, got me into jQuery. Made me realise the most complex of animations and effects are just a .animate() away.
The CSS Anthology [Sitepoint] {CSS} – A brilliant book that gives you the low down on all the CSS selectors and what they do and cover. An amazing reference book
HTML5 and CSS3 for the real world [Sitepoint] {HTML5, CSS3, Semantics} – (seeing a trend here?) This book educated me into the wonders of HTML5. It is what I have built this site and written this blog post. The things I learnt from the book have put me in good stead for the next few years.
The Smashing Magazine Books [Smashing Magazine] {Everything} – (I know strictly this is numbers 5 & 6, but they were a bundle!) I bought the bundle (books one and two) and they are absolutely fantastic. Brilliant. They cover tons of topics and give you a good overview of so many topics. I have, in fact, just ordered the third book despite not even being halfway through the first. They are just teasers of topics, which allows you to gauge what that subject is and what you’re interests are.

They are my favourite 5 books – what are yours?

Posted in General, The Internet | Tagged #bookstobuy, book, css, html, jquery, paper, php | 4 Replies

HTML5 – Explained. Briefly

After reading the aforementioned HTML5 & CSS3 for the Real World book, I have come to realise that there are loads of changes included with HTML5. I have the book in front of me for me to reference, but I find it laborious to keep opening it to check on the semantic meaning behind <small> or <section> …

After reading the aforementioned HTML5 & CSS3 for the Real World book, I have come to realise that there are loads of changes included with HTML5. I have the book in front of me for me to reference, but I find it laborious to keep opening it to check on the semantic meaning behind <small> or <section> elements.

So this post is not ground breaking, its not amazing. Its just a summary of changes to the HTML spec in English I understand and can refer back to. Its also to pass to my back end developer so he knows what’s what. [I'm also posting it incomplete - post a comment if you have an additions/suggestions].

Before you can use any of these elements – you should really use the HTML5 Shiv – found in my basic HTML5 Template.

If you get stuck – HTML5 Doctor created this simply amazing flowchart

<header>, <nav> & <footer> are all self explanatory

<section> – This is content which is related to one another. I.e. a ‘section’ of quotes, sections of a tabbed interface.

<article> – Should be a self contained piece of content

<aside> - Should be something that is tangible to the content, or something like a sidebar or ad space. It should not contain main content.

<h1> – These can appear more than once on a page and should be within context of where it is. I.e. you should be able to remove the parent and everything to still be correctly titled. Each <article> should have one.

<figure> & <figcaption> – perfect for an image and caption. Would be marked up like:

<figure>
<figcaption> An image</figcaption>
<img src="" alt="">
</figure>

<b> – can be used to make something bold, without it being significant – e.g. showing a change in a lump of code

<i> – for use in the case that you want italics, but not for emphasis – e.g. “Hello” he said

<small> can still be used to show text that is smaller, than the rest – e.g. <small>Copyright Mike Street</small>

<a> – can now be around block elements!

Posted in HTML/CSS, The Internet | 3 Replies

It’s My Way or the Highway. Not.

Recently with the spate of CSS3 and media queries, there has been a few debates over how development should be done. Several people have emerged saying that you should be considering mobile first. The attitude of some of these people on the web, is do mobile first or don’t bother doing it at all. Now, I understand why …

Now, I understand why you should. It helps you focus and means that the content is all the content you need. If you do mobile first, you’re not tempted to slide in the odd random graphic here or there. But i’ve been thinking. Why should we have to do it this way?

I’ve always been of the mindset that with the web, as long as its accessible and semantic and it makes sense, its perfectly acceptable. There are hundreds of different ways to skin a cat and as long as you get a clean website at the end, who cares how you got there? (People even have prejudices against certain bits of software…).

I often get annoyed on the web when people tell me I have to do something a certain way. I prefer to be nudged in a general direction than having a certain technique forced upon me. For example, I have recently read a couple of Sitepoint books – jQuery: Novice to Ninja and HTML5 & CSS3 for the Real World. They are fantastic books (highly recommended for people starting out in jQuery and HTML5).

The thing I like about the books is that they imply that there are several ways to do things. The code examples in the book are starting points that give you a nudge in the right direction. Before I read the jQuery book – I was under the impression that it was really complex, but the book showed me how simple things were and from that I have evolved into a jQuery Deputy Master.

So next time you read a technique, or tutorial, remember that it is not the only way and no matter what operating system, software or method people are using, please be nice and accept their working process – you might be surprised and realise they’re doing it better.

Posted in General, The Internet | Tagged css3, method, prejudice, sitepoint, technique | 1 Reply

Creating a HTML Email

Creating a HTML email is like going back to the nineties with web design – you have to go against all your natural instincts as a web designer. Floats don’t work, and emails rely heavily on tables for layout. Below are the steps I follow when creating a HTML email for clients.

1) Sign up for a test account everywhere. Gmail, Yahoo and Hotmail are the biggies, but make sure you also have access to Outlook, Thunderbird and Apple Mail (and if possible – Outlook Express).* This is, of course, unless you know everyone you are going to email reads their emails in a certain email client

2) Use tables for EVERYTHING. As much as it hurts to read that, it’s the only way to achieve a consistent layout. If you don’t know how to use tables for layout – it’s easy. (an outdated resource but handy for those who came in after the table era: http://www.ironspider.ca/webdesign102/tables4layout2.htm)

3) Be a bird – nest! If you can’t get that initial layout using the rows and columns you already have, nest a table inside of that table (but don’t overdo it – too many tables is confusing for you as a designer and slows load times)

4) Background images can be used but not relied upon. Certain email clients do not show background images – you can only have them tiled or not at all, so make sure you have a repeating pattern, also don’t rely on a body background for your email – the table can have a background but not

5) Span out! Don’t be afraid of colspan and rowspan (although they do sometimes have adverse effects if overused – especially in Outlook!). use <span> tags for colouring and font styles

6) Style everything twice. If you want your table or table cell to have a background color or w idth or a height, then make sure you define it twice. For example: a bgcolor and a style. E.g. bgcolor=”f2f2f2″ style=”background: #f2f2f2;” – It may give you a lot of code but at least you know it’ll work right!

7) Inline – Any CSS styles you apply pretty much need to be inline. Any links need to have their own styling, including colours applied (unless you want that default blue colour!). Again, apply twice if you want to be sure that vital colour comes through on your email in all the clients available.

8 ) Online Version – don’t forget to include an online version of your email for those with text enabled email clients or for those accounts you didn’t quite check!

9) Content Counts – Please make sure that the content has been spell checked and proof read by several people – nothing is more embarrassing than sending an email with a typo or an empty href. Include a target=”_blank” to make sure you don’t take anyone away from their emails and, more importantly, your email.

10) Images Matter – If your email contains images, make sure they are hosted somewhere on the internet and have an absolute path. People are not going to be able to access your ‘My Documents’ or the /images/ folder to view that all important logo. Also make sure all images contain ALT, WIDTH and HEIGHT tags.

11) Test. My testing procedure is usually to send a test to an email address rigged up to Outlook – as this seems to handle the worst*. Once looking good in Outlook I then send it to all my other test accounts to see how they cope. There are a few things I’ve found:

By far – Yahoo is the best at rendering HTML emails correctly
Hotmail won’t center the email nor will it apply body background colors or images to the whole email, only to the bit where there is content.
Gmail will center, but not display background images or colour

12) Adjust – make necessary changes to your HTML email so it looks good

13) Repeat Steps 11 & 12

14) Spam Check – Send it off for a spam check. The best I’ve found so far is sitesells:

Send a copy of your HTML email to: spamcheck@sitesell.net
Make sure the subject starts with TEST
You’ll get a report back – ignore the top section. The bit you want to focus on is the score and the feedback. Anything below 5 is good, anything below 1 is excellent.
Adjust your content/code until you get as low as score as possible

15) Repeat Steps 11 & 12 – Try sending it to friends and/or family to see how it looks on their system (and don’t get to alter the online version if you change any text/links/content/typos!)

16) Send! – Pick up any hair you may have pulled out and pray nothing blows up

Let me know how you get on or if you have any more tips on how to create the perfect HTML email.

Don’t be afraid of having a fair bit of code, as proved by Linkedin:

Linkedin sends me updates every now and then so I thought I would have a look at one of their emails to see if I could pick up any tips. I’ve attached it for your reference. Look at how the email is displayed and imagine how little code it would require to make a web page like that, then look at the source.

linkedin email

I’ll let it speak for itself!

*Statistics from Fingerprint show that in Feb 2010 – 43% of people we using a derivative of Outlook to view their emails. So it important to get it looking right!

Posted in General, The Internet, Websites | Tagged code, color, emails, font, html, inline css, layout, tables | 2 Replies

Changes – the Past, the Present and the Future

A lot has happened recently – mainly me getting a full time job doing something I love. During the final year of my degree I started doing work experience at a web design company in Brighton – BozBoz. Having worked on my own in my bedroom for several years it was a massive leap to work in an office on a site which is certain to get thousands of visitors a month where more than one person is working at any one time! Having people to talk to about design and decisions with was a great help!

They offered me a part-time job, allowing me to leave the shop I was working at and start earning money for a hobby, which I enjoyed. Once I had completed my degree (getting a 2:1 thank you) they offered me a full time job and here I am. I’ve only been there for two months but already I have learned so much! My very very basic knowledge of PHP has now developed into just basic PHP wisdom – but i’m getting there. Since being there my CSS and HTML skills have improved ten-fold. Things that I would have thought impossible before I started (layouts, designs etc.) I now feel confident creating.

When I am designing and developing websites for myself, planning the, i’ll create them for my skills, sometimes creating blocky sometimes basic designs. While at BozBoz however, we have a separate designer who pushes our skills to the limits and sometimes further! It is not just the designer who pushes my ‘talent’ but also our PHP/Javascript developer. Working with him we teach each other several things a day and sometimes dare each other to new limits.

Anyway – this isn’t about me blowing my own trumpet. Actually I lie. It is. I just thought I would keep you updated with my goings on!

Tim Healey

DJ Tim Healey approached me wanting a MySpace redesign for both his personal account and the one set up for his label – Surfer Rosa Records. It was a brand new concept to design for MySpace and had to go against all my instincts and code CSS like an amateur. However, I’m really pleased with the finished results and it doesn’t really look like a MySpace page at all!

They can be found at the following URLs:

myspace.com/djtimhealey

myspace.com/surferrosarecords

SusSAR

The ever on-going project of Sussex Search and Rescue is under new development. I am working with the afore mentioned PHP developer to create a custom login allowing news to be posted easier. The whole backend is generally having a full revamp, making it easier to update and change the layout or the pages. Watch this space for when it goes live.

Drink in Brighton and Skint

At BozBoz we’ve had two of the most biggest projects we’ve done go live in the space of a week. Skint Entertainment is the home of artists such as FatBoy Slim and the Freemasons. Check out the BozBoz portfolio for the full update.

We’ve also been developing a website for pub chain; Drink In Brighton. Owning over 40 pubs, this website collates the News and Events of the hottest pubs, clubs and bars in Brighton. We’ve been working on this website for a few months and Suday night was the night where it all went into the big wide world. The site includes custom templates for various venues and several funky features, including a flash map and a carousel. Again see the Portfolio for more details!

HTML Emails

One last thing – since working at BozBoz I seem to have become somewhat of a ‘pro’ at creating HTML emails suitable for email marketing. I am creating them for some well known people – but must keep it a secret! Sorry! On that note, however, I will be making a blog post on how to make that perfect HTML email!

Posted in General, The Internet, Websites | Tagged BozBoz, brighton, css, development, drink, graphic design, graphics, HTML emails, php, web design | Leave a reply

Create a WordPress Page with Posts and Custom Code

I have recently been creating a website where the client wanted a soundcloud player at the top of the page, with the posts from a certain category underneath within their wordpress powered site.. Obviously, I could create a sticky post, but that would be messy. Instead I created a WordPress Page template with the soundcloud …

Instead I created a WordPress Page template with the soundcloud code at the top, underneath I then included the code which inserts the posts from that category.

First create a new WordPress Page Template.

Next, copy and paste the following code into your php page

<!– insert Code here –>

<div>
<?php
if (is_page() ) {
$category = 4;
}
if ($category) {
$cat = 4;
$paged = (get_query_var(‘paged’)) ? get_query_var(‘paged’) : 1;
$post_per_page = -1; // -1 shows all posts
$do_not_show_stickies = 1; // 0 to show stickies
$args=array(
‘category__in’ => array($cat),
‘orderby’ => ‘date’,
‘order’ => ‘DESC’,
‘paged’ => $paged,
‘posts_per_page’ => $post_per_page,
‘caller_get_posts’ => $do_not_show_stickies
);
$temp = $wp_query; // assign orginal query to temp variable for later use
$wp_query = null;
$wp_query = new WP_Query($args);
if( have_posts() ) :
while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

<div <?php post_class() ?> id=”post-<?php the_ID(); ?>”>
<h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h2>

<div>

<?php the_content(‘Continue reading »’); ?>

</div>

<?php endwhile; ?>
<div>
<div><?php next_posts_link(‘Older Entries’) ?></div>
<div><?php previous_posts_link(‘Newer Entries’) ?></div>
</div>
<?php else : ?>

<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn’t here.</p>
<?php get_search_form(); ?>

<?php endif;

$wp_query = $temp; //reset back to original query

} // if ($category)
?>

</div>

Replace the line of code

<!– insert Code here –>

With the sound cloud, or youtube code you wish to appear on the page before the posts .

Change the category number ($cat=4; and $category = 4; in the exampple provided) and the number of posts you wish to appear ($post_per_page = 5)

Upload, select it in your page settings and hey presto! Your page is dual functioning!

Posted in The Internet, Websites | Tagged custom, html, page, php, posts, wordpress | Leave a reply

Making a WordPress Page

To make a page template in WordPress is quite simple: Create a new php page in your favorite text editor and at the top place: <?php /* Template Name: NameofNewTemplate */ ?> Done! On your new page you can do things such as including posts from a certain category, have a static html page or …

To make a page template in WordPress is quite simple:

Create a new php page in your favorite text editor and at the top place:

<?php
/*
Template Name: NameofNewTemplate
*/
?>

Done!

On your new page you can do things such as including posts from a certain category, have a static html page or even combine the two!
You may wish to start off by including your header, sidebar and footer

<?php get_header(); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

If you include the header, make sure you follow suit with the other pages and make sure you <body> and <html> tags are closed correctly

Posted in The Internet, Websites | Tagged blog, php pages, wordpress | Leave a reply

Show WordPress Post Titles & Posts On Your Website

If you use WordPress for your blog, but your blog is not your home page, you may wish to display the latest blog posts on your homepage, or any other page for that matter, to entice people into your blog. WordPress Pages If you use WordPress for your whole site (pages and all) then this …

WordPress Pages

If you use WordPress for your whole site (pages and all) then this is relatively easy to add the code in the code. It can be placed in your footer (where I have it), sidebar or anywhere else you want it. Unfortunately, as with most WordPress code, it cannot be pasted straight into a post or a page.

The code to show your latest 3 posts is:

<?php wp_get_archives(‘type=postbypost&limit=3′); ?>

Result:

The wp_get_archives code is hugely customiseable. It can show months, days, posts etc. The default code generated comes out as a list (<li>), but needs a <ul> tag around the php script.

To show, for example, the last 5 days where you have posted, with the post count next to it, you would use the following code:

<?php wp_get_archives(‘type=daily&limit=5&show_post_count=true’); ?>

Result:

One last example; If you would like to show Weekly posts for the last 7 weeks, with the word ‘Week:’ before each link and the words ‘was a good week’ after with each one in a <h3> tag, you would use the following code:

<?php wp_get_archives(‘type=weekly&limit=5&format=custom&before=<h3>Week: &after= was a good week</h3>’); ?>

Result:

That single line code, as you can see, can be adapted to show exactly what you want. More details about the wp_get_archives reference, can be found in the WordPress Codex. For hard coding the wp_get_archives html, it can be found on line 818 in the wp-includes/general-template.php

Non-Wordpress Pages

You can also include your latest blog post titles on your homepage, even if your pages are not generated within WordPress. (For example, my WordPress installation is located at www.mikestreetmedia.com/blog but I want my latest blog title to appear on my homepage, outside of the blog folder). It does not require complex database connections, but rather a call to the wp-load.php file.

To use the following code there are a couple of requirements:

1) The WordPress installation is located on the same server as the file where the code is going (for example: in a /wordpress/ folder)

2) Your page is a php page. If it is .html then rename to .php. unfortunately, you will need to upload the file to a server (or set up a local testing server) to make sure the code works.

Firstly copy the following code into your page:

<?php
// Include WordPress
define(“WP_USE_THEMES”, false);
require(“./blog/wp-load.php”);
query_posts(“showposts=3″);
?>

The ‘false’ tells the code not to include your template, the following line says where the wp-load.php file is. If your blog is in a /blog/ folder, you would change /Wordpress/ to /blog/. Finally the query_posts() line allows a variety of customisation. For example: if you wanted to show the 3 most recent posts in category 3, you would use the following code:

query_posts(‘cat=3&’showposts=1′);

Now you have called your posts, all you need to do now is include the loop and the information you want. The code is just the same as you would find in your index.php, or archives.php in your theme:

<?php while (have_posts()): the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_centent(); ?>
<p><a href=”<?php the_permalink(); ?>”>Read more…</a></p>
<?php endwhile; ?>

This can be customised as you would when editing your theme.

Alternatively, you can use a website like Feederr, which will turn your latest blog post into an image, which updates each time. It walks you through step by step to get your box, which, when customised, looks something like this:

Mike Street media latest blog entry

Posted in The Internet, Websites | Tagged archives, archives.php, blog posts, blog titles, codex, customised, display, excerpt, Feederr, homepage, monthly, php, posts, show, tags, themes, website, wordpress | Leave a reply

Archives

WordPress Pages

Non-Wordpress Pages