Thanks to Rich Clark for the upload.
]]>
Thanks to Rich Clark for the upload.
]]>I’m not sure what my next topic will be but HTML5 Doctor usually has a weekly post, so keep visiting, or get the feed.
I know I barely blog here on my own site, but I have another HTML5 project in the pipeline, so hopefully I can tell you about that soon.
]]>Since my last post there has been lots of attention on HTML5, with the web community seemingly getting involved and helping to sort out any issues in the spec. Still, there is a long way to go yet and many issues to resolve, and many issues that have yet to be found.
However you can start using HTML5 now if you want.
I am very fortunate to be part of the html5doctor team along with Rich Clark, Bruce Lawson, Jack Osborne, Mike Robinson and Remy Sharp. So far I have written a couple of articles there:
So go and feast on the RSS feed and get involved. Please ask questions, either in the comments section there or use the contact form. But please do not send questions about your health. Seriously, the amount of crap we get through is ridiculous.
Surprisingly, I’m still relatively happy with the design of this place. I think I’ll have another think about it come Christmas time. I built this using HTML 5 back in April and did things my way. However, Bruce Lawson has written Designing a blog with HTML5. So hopefully I will find time to restructure things under the hood here – I need to swap some article and section tags around. It shouldn’t be too difficult, as I built the ExpressionEngine templates with flexibility in mind - I guess I’ll find that out!
Just a very small but pedantic change here - I had “HTML 5” in the title, when it should be “HTML5”. No space!
]]>Some browsers will not display this ‘properly’. Internet Explorer needs this bit of javascript, and Firefox 2 and Camino do not work well either.
Whilst this site acts as my blog and portfolio, it is still experimental so there may be things that don’t work properly. And because HTML5 is still evolving and changing, please get involved in the discussion – if you think something needs changing, say so, but also say why.
It was a good opportunity to think about the semantics of the site – which goes where and why.
Tags like header, nav, article and footer make perfect sense (to me at least), but we all interpret them differently. I found the section tag a little loose to be honest:
The <section> tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document.
I’ve interpreted this to put this entire blog post in a section and within that section, comments in a section tag and the comments preview as well.
This may not be the correct way, but we’ll see.
I like how short the doctype is and that you don’t need to give a type to CSS and JavaScript tags.
Looking at the source code, it all seems in better structure and order than it would do with div’s everywhere.
That said, it’s not perfect yet.
For my aside, I use jQuery tabs to dispay categories, tags, etc. But to get the jQuery working, I’ve had to give the aside an ID. I’d prefer not to do that, but as jQuery and HTML5 grow, this will get sorted.
The section below my navigation is currently in an aside. I’m not sure about this. It sits outside the article tag, but the aside for my tags and categories sits inside the article tag. So where should an aside go?
The header tag requires a <h1>, <h2> etc
The header element must have at least one h1–h6 descendant
So in my case, it is at the top of the page so it needs to be a <h1>. However, there is a debate about this and in my opinion, the <h1> should be around the blog title in this case. So that is what I have done. But now I have two <h1>’s and that is bad for accessibility mmmkay?
I don’t like it but I’ll go with it for a while and hopefully there will be a solution.
Also, whilst I’m on it, should I put the blog post title in a <header> tag? How many can/should you have?
I don’t want it to sound like a moan, I know HTML5 is new and will change but just thought I would raise the issues I’ve come across.
This site does not validate but I’m ok with that. It is the WAI-ARIA role attribute that causes the issues.
Actually, I’ve noticed that on this page the social bookmark links create this error:
WHITESPACE in QUERY
Er, what?
The contact form also has several ARIA attributes, and if you look at it in Opera, you’ll see it has a nifty built-in validation.
I don’t intend to harp on much about the design of this site. Some of this article is still true
Come back in six months and it will probably look different again!
A few CSS3 bits and bobs in here, in particular rgba which I love and check out the site in Safari for some transition effects on navigation (that said, the rollover effects are pretty subtle).
Here I must give a shout out to Bruce Lawson who is doing great work with HTML5 and took the time to discuss some HTML5 things with me. So keep an eye on Bruce’s site.
Also, check out HTML5 Gallery by Richard Clark.
I’ll be trying to keep up-to-date with HTML5 and whilst it no doubt will change, hopefully so will the code behind this site.
One last thing. If anyone is heading down to FOWD there is a HTML5 meetup planned for afterwards. If you can’t make that, come and say hello to me anyway!
]]>
Put this is in your page load:
Partial Class yourclass
Inherits System.Web.UI.MasterPage
Public strURL As String
Public strTitle As String
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Handles Me.Load
strURL = Page.Request.Url.AbsoluteUri
strTitle = Page.Title
Session("PageTitle") = <strong>strTitle</strong>
Session("PageURL") = <strong>strURL</strong>
End Sub
End Class
Because I’m nice, here are the URL structures for various social networking sites.
<ul id="share">
<li id="email"><a href="<%=Page.ResolveUrl("~/email-to.aspx")%>" title="Email this to a friend">Email this to a friend </a></li>
<li id="delicious"><a href="http://del.icio.us/post?url=<%=strURL%>&title=<%=strTitle %>">Del.icio.us</a></li>
<li id="digg"><a href="http://digg.com/submit?url=<%=strURL%>&title=<%=strTitle %>">Digg</a></li>
<li id="facebook"><a href="http://www.facebook.com/sharer.php?u<%=strURL%>">Facebook</a></li>
<li id="furl"><a href="http://furl.net/storeIt.jsp?t=<%=strTitle%>&u=<%=strURL%>">Furl</a></li>
<li id="google"><a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<%=strURL%>&title=<%=strTitle %>">Google Bookmarks</a></li>
<li id="linkedin"><a href="http://www.linkedin.com/shareArticle?mini=true&url=<%=strURL%>&title=<%=strTitle %>">LinkedIn</a></li>
<li id="myspace"><a href="http://www.myspace.com/Modules/PostTo/Pages/?u=<%=strURL%>">Myspace</a></li>
<li id="reddit"><a href="http://reddit.com/submit?url=<%=strURL%>&title=<%=strTitle %>">Reddit</a></li>
<li id="stumbleupon"><a href="http://www.stumbleupon.com/submit?url=<%=strURL%>&title=<%=strTitle %>">StumbleUpon</a></li>
<li id="windowslive"><a href="https://favorites.live.com/quickadd.aspx?url=<%=strURL%>&title=<%=strTitle %>">Windows Live</a></li>
</ul>
And that is that.
You could use something like Add This but this gives you more control over the html and output.
And for icons (if you want them), I suggest Social Media Mini Iconpack.
There may be other ways to do this with .net, so let me know.
]]>
If you need any more resolution options, let me know. Feel free to resize it to your needs.
]]>
{embed=“includes/nav”}. Because I use image replacement on my navigation, I can’t add a class to a list item, so I have to replace swap the id on the list item to show the correct background image.
<ul>
<li {if segment_1==""}id="nav-home-active"{if:else}id="nav-home"{/if}><a href="{homepage}" title="Home" rel="home">Home</a></li>
<li {if segment_1=="portfolio"}id="nav-portfolio-active" {if:else}id="nav-portfolio"{/if}><a href="/portfolio" title="Portfolio">Portfolio</a></li>
<li {if segment_1=="blog"}id="nav-blog-active" {if:else}id="nav-blog"{/if}><a href="/blog" title="Blog">Blog</a></li>
<li {if segment_1=="about"}id="nav-about-active" {if:else}id="nav-about"{/if}><a href="/about" title="About">About</a></li>
<li {if segment_1=="contact"}id="nav-contact-active" {if:else}id="nav-contact"{/if}><a href="/contact" title="Contact">Contact</a></li>
</ul>
It is a similar process to the one used at FortySevenMedia and as the last comment there mentions, the URL segment has many further possible options, such as setting the ID of the body, or any other element for that matter.
Trevor Davis has an interesting post here which related to this.
There may be other ways or a better way of doing things, so let me know.
]]>
If you need any more resolution options, let me know. Feel free to resize it to your needs.
]]>The documentation on the EE site is very good and well written, and the forums are very helpful as well, especially when compared to Wordpress which has suffered for its success, as the forums are overwhelmed and questions go unanswered.
It was a lovely surprise to find out what this tab contained in the admin panel. You can send emails from this screen! Ok, it’s arguably slightly pointless for me as I’ll have Gmail open anyway. But for the administrator of a site, or the site owner, this is an excellent option and alternative. A very quick way of communicating.
Very simple and very fast. The Wordpress setup is equally as good and I can’t think of anything that is missing from either setup.
I absolutely love the ease with which I can set up a contact form, here’s the documentation.
It is easy to setup a contact form. This is something that Wordpress struggles with in my opinion. Although you can download the Cforms II plugin which is excellent and allows the user to add many actions to a form.
With the EE form, the documentation offers several useful parameters that can be used.
I was eager from the start to get stuck-in and see how EE allows manipulation of the code and templates. I can’t knock the Wordpress way but once you get your head around the EE setup and creating new sections and templates, I much prefer the EE way of doing things.
For example, you can of course change the way comments are marked up and styled in Wordpress, but I prefer the way of doing things in EE.
(exp:comment:entries weblog="(my_weblog)")
(if entry_author_id == author_id)
<li class="comment-author"><h3>(url_as_author)</h3>
<p class="comment-date">(comment_date format=‘%m/%d’) | (comment_date format=‘%h:%i %A’)</p>
(comment)
</li>
(if:else)
<li><h3>(url_as_author)</h3>
<p class="comment-date">(comment_date format=‘%m/%d’) | (comment_date format=‘%h:%i %A’)</p>
(comment)
</li>
(/if)
(/exp:comment:entries)
EE allows you to set up template groups. My groups are:
Within each of these I can set the exact HTML that I want, and which weblog I want to draw information from. Plus, it’s all editable within the built-in editor which is very handy.
With any CMS, you will need plug-ins and extensions. Wordpress has thousands, but it has a much bigger fanbase. Here are the extensions I’ve used for my site:
Right now, I’m loving ExpressionEngine. However the main negative from my point of view is the poor control panel. ExpressionEngine 2 is meant to be out ‘soon’, but it’s already 6 months late.
For my next couple of projects, I will almost certainly be using Wordpress because the control panel is far more user friendly and after some quick chats with clients, they certainly prefer the simplicity and usability of the Wordpress admin screens.
]]>A couple of years ago when I started looking around for a CMS, I didn’t come across ExpressionEngine (that’s one word by the way), it was Wordpress, MoveableType or Textpattern.
And Wordpress won. I love Wordpress and have used it on several sites. There is always more to learn in Wordpress but with all the buzz around EE, I thought I would jump on the bandwagon and give it a whirl.
$100. A reasonable price and the downloading and installation were easy enough.
"Ugh, what a horrible default page"
The Wordpress default isn’t fantastic but the EE is terrible. Still, I don’t judge a book by its cover.
Again, not promising. I couldn’t help but compare it the Wordpress control panel which is lovely to look at but more importantly, appears structured and easy to use.
The Admin tab in EE for example, I just find it so unhelpful and I was constantly changing something and forgetting how to get back to it. I still don’t find it particularly friendly.
From a client point of view, this is the most important aspect of a CMS. Clients have had no problems using Wordpress. Again, EE doesn’t come close. Yet. There are no heading tags, or list tags to insert or other ‘standard’ formatting buttons. The option to add these is hidden deep within the Admin tab somewhere and is not very friendly.
This had me scratching my head. There was/is no built-in function for tagging posts. I couldn’t believe that a CMS that I had paid for didn’t have this out of the box. And to rub it in, I had to then buy the extension!
Don’t get me wrong, this extension does the job very well but I was wondering if I had made a mistake with EE. How could it not have tagging?
I completely mucked up my installation a couple of times trying to remove index.php from the url. But this is down to my localhost. I used this extension when I installed EE on a web server.
The only issue this caused was with my stylesheets. This is the code I originally had:
<link rel="stylesheet" type="text/css" media="screen" href="http://www.tomleadbetter.co.uk/?css=styles/layout" />
<link rel="stylesheet" type="text/css" media="screen" href="http://www.tomleadbetter.co.uk/?css=styles/typography" />But after removing the index.php, the links rendered incorrectly, with a question mark in the URL throwing the whole thing goofy. But this wasn’t and isn’t a huge concern of mine as I can just upload the CSS files in the usual way, which I actually prefer.
In the address for this page and all my blog pages, I have the word ‘entry’. I don’t want this. This is a template issue I’m having because I’ve seen some EE sites that don’t have that issue. Here’s my code on the blog index page in case any kind soul out there wants to help (I’ve had to change the bracket types because otherwise the page fails to load…):
<div id="entry">
<h1>Blog(exp:weblog:category_heading weblog="(my_weblog)"): (category_name)(/exp:weblog:category_heading)</h1>
(exp:weblog:entries weblog="(my_weblog)" orderby="date" sort="desc" limit="15" disable="member_data|trackbacks")
<h2 class="title"><a href="(title_permalink=(my_template_group)/entry)">(title)</a></h2>
(summary)
<p class="post-info">Posted by (author) on (entry_date format="%D, %F %d, %Y") (if comment_total == 1)<span><a href="(url_title_path="blog/entry/")#comments">1 comment</a></span>(/if)(if comment_total > 1)<span><a href="(url_title_path="blog/entry/")#comments">(comment_total) comments</a></span>(/if)</p>
(/exp:weblog:entries)I suppose I need an if statement? Or rewrite the URL to remove ‘entry’ ?
Anyway…..
Wordpress has an endless amount of plugins and whilst there is a good amount of plugins/extensions for EE, the one that isn’t available is one for Flickr. There is one that pulls in images from Flickr groups but that is no good. So I am using javascript to pull the images in. Little things like that annoy me.
Well that all sounded rather negative didn’t it? Well it isn’t all bad, there are plenty of things I do like about EE, which I’ll blog about soon.
I’m sure most of the negative things will be cancelled out when ExpressionEngine 2 comes out, which will be very soon hopefully!
]]>I wanted the option of several colours, for further branding I may create, such as business cards. When I started playing about in Illustrator, I used pink and couldn’t take my eye off it. Then I added a light blue, a dark blue and a brown. Although I haven’t used the brown much on this site, it is a lovely colour on its own which I’m sure I’ll exploit further at some stage.
And from the brown came another set of colours which in the end I decided against for my primary style, but I think I will offer it as alternative stylesheet at some stage.
At first I wanted a little graphic in the logo but after a lot of time spent messing about, nothing suited. That’s when I incorporated the ‘web design’ into the logo. Because I have a long surname, it looked a bit funny on its own but now (I hope) the logo is balanced.
So I knew what I wanted but what font? Again, more hours spent looking at fonts online and in books. In the end went for MgOpen Modata.
On the site, I had planned on using the same font for all headings but after some initial design feedback, it was suggested that it was a bit overkill. They were right.
So for headings I’m using Myriad Pro which I love, and for normal text, I am using Lucida Grande.
Hey, Safari users, could you do me a favour, if the headings are in Trebuchet, could you let me know? On my version of Safari (PC), the headings are in Trebuchet. I really don’t know why. Ideas?
I wanted something minimal but also with some colour. The skyline in the footer was created with Illustrator and I also drew a little Twitter bird, but sadly he (or she) was culled as the design went along.
Again, because it is my own design, I have gone back and forth on so many things and I am not 100% settled on the homepage layout.
But like any site, it will evolve and I will be changing little bits here and there as I go along.
I don’t want to bore you any longer with a redesign post but if you come across any issues (possibly letter-spacing) or browser bugs, please leave a comment below.
The plan is to get more articles written and explore ExpressionEngine more, and probably do a redesign.
Unitl then, there are still a few minor issues to sort out, but they lie with ExpressionEngine, which I will definitely be blogging about soon.
]]>My previous sites were either temporary or just a poor reflection of my skills. This is a fresh start.
I’ll be blogging about the things and practises I come across in web design and development, particularly in .net which I’m doing more of these days.
I have to apologise in advance for things I may type that I mean to come across as sarcasm, but almost certainly will not. Honestly, we need a sarcasm tag. Maybe in HTML5 in 2022?
Download this stunning wallpaper from InterfaceLift, which is currently on my desktop in all its 1920x1200 glory.
]]>