Category Archive: Learning

  1. A fortnight in

    Leave a Comment

    I have now been in my new employment for a little more than two weeks, and I am thoroughly enjoying it so far. The biggest difference to my previous employment is the move from an agency environment working on multiple projects for multiple clients at once, to focussing on a much smaller number of sites and taking the time to complete projects properly and to a high standard. There were times in my previous role where I felt things were far too rushed in order to meet a deadline, and as I am now responsible for the project management in this role then I will be making sure that ample time is allocated to complete each task.

    I am particularly enjoying the freedom which comes with the role, and the ability to set the agenda and prioritise the workload so that each task is planned and organised. I also have the freedom of knowing that I’m the sole developer so can make design and development decisions without fear of handing over the project to another developer. However, it has to be developed in a way that is easily maintained by anyone else as well as myself.

    The plan at the moment is to make some minor tweaks and content updates to the existing sites before commencing a full redesign and development. Before this can happen though, a full strategy has to be documented and agreed which indicates the long term plan for the website and where it sits within the organisation, both in terms of marketing strategy and organisational changes. This is a challenge that I am really looking forward to working on, as I have been wanting to work on a long term project like this for a while and develop a long term strategy.

    It’s only two weeks in but I really am enjoying it so far.

  2. Geolocation

    Leave a Comment

    Geolocation has been around in the spec for a while, but hasn’t really taken off on the desktop as yet. It’s hugely common in mobile apps for it to ask for your location, but rarely for websites to request this information. Such information can provide localised information relevant to where the user is, and whilst hugely beneficial on mobile devices when out on the go, such information can be put to good use on the desktop as well.

    One example where this is used effectively is on the Pizza Express website, where upon sharing of your location will display the nearest restaurant to where you are, and contact information for the restaurant as well as a clear call to action to book a table at the restaurant.

    Such a simple use of this technology is effective and one which I feel provides a lot of benefit to the user and could be easily implemented onto more on sites. Coming up I will demo how to create a simple call to ask for the user’s location.

  3. Patterns and Systems

    Leave a Comment

    When it comes to creating templates from static mockups, there are a couple of approaches that you can take. One is to follow the mockup and create exactly what has been made available, and another way is to create a system which can be used and re-used as the site evolves and grows.

    This systematic approach is one that I now adopt on almost every project I work on, creating as many layout agnostic elements as I can, so that when it comes to creating the layout these elements can be added in anywhere. Website designs by their nature have a level of consistency in terms of colour and typography which will be repeated throughout the site. By creating a system first before creating the layout of the site, I find that lends itself to writing less CSS and creates a more flexible codebase.

    A couple of examples of these systems are Jeremy Keith‘s Pattern Primer and Paul Robert Lloyd’s Styleguide and Barebones project, which I both use on a regular basis. I feel this makes creating templates much easier but also makes maintaining a site much easier as well.

    I tend to create a styleguide which will have a list of almost every HTML element styled in a consistent manner, but I will also include examples of any common JS that is included such as lightbox scripts so that if another developer comes to work on the site they can see at a glance what is being used on the site and avoid any duplication of code.

    I now take this approach on each project and I would recommend it to others.

  4. Content First

    Leave a Comment

    Ever since iOS 5 introduced the reader function into safari, more and more often I’ve found myself using it more and more. When a site loads, instead of tapping and zooming around the adverts and other distractions, a quick tap on the reader button and I get my content, with no distractions.

    When I visit a site on my phone, quite often it’s through an app such as Flipboard or Readability which lets me read the article I want and doesn’t distract me with other unnecessary elements which take my focus away from the content. And regardless of device, I visit websites to read the content and more and more the thought of tapping and zooming around puts me off to the point where I will use Reader or a read it later app.

    This is one of the reasons why I am a fan of a content first approach to design where the sites content is put first, and the site fleshed out from there where the focus is placed on the content, and anything added is to the benefit of the site, and not purely decorative or marketing driven. Starting this way ensures that every design decision is how it will affect the content and cuts down the number of unnecessary distractions. We’re getting pretty good at filtering out all the marketing and other information we’re not interested in as we get it from tv, radio, billboards etc and now websites. We users much prefer our content first please.

  5. 2011: A Review

    Leave a Comment

    Things have been pretty quiet here recently, though by contrast 2011 was an eventful year both personally and professionally. During the course of the year I completed many interesting projects at work, had my first speaking engagement at Dundee Web Standards, moved house and got engaged to a beautiful girl. An eventful year I’m sure you’ll agree!

    The highlight professionally was when I agreed to do a short talk about Responsive Web Design at Dundee Web Standards in August, and I enjoyed doing it and will maybe do more speaking in the future. I’ll admit to being a bit nervous before grabbing the mic, but once I got started it seemed to go pretty well. Responsive design is a topic I’m highly interested and a strong supporter of so I had plenty to say on the topic.

    Just before the talk I re-designed this site slightly both in terms of look and also converted it to a responsive layout, although I’ll admit to neglecting it a bit of late. I added a Labs section with great intentions of using it to host experiments and little snippets I’ve worked on but this year I intend to get this up and running properly. I also intend to start writing more, as the last post was in February and is the longest I’ve gone without adding new content. There are several drafts waiting to be finished that I can complete and push to the site.

    All in all 2012 will be a busy year and I personally can’t wait to see what is in store after a fantastic 2011.

    The highlight undoubtedly was getting engaged and plans are well underway for our wedding next January – complete with it’s own website which I am currently working on and will announce the details of in due course.

     

  6. HTML5 Changed Elements

    Leave a Comment

    Changes

    As well as the well-documented additions to the HTML5 spec, a number of elements have had their meanings changed to reflect the changes in the way websites are built and also some previously deprecated elements have been brought back so to speak and now have valid, semantic meaning, allowing us to use the b, i and s elements again without the need to feel dirty whilst we do so!

    A list of the changed elements is listed below:

    a

    The anchor elements changes in the manner that block-level links are now valid code. This has been supported in browsers for a while, but is now valid. Also, using the name=”#id” convention is now obsolete which was typically used for in page navigation. Instead, apply this technique to it’s containing element. The target attribute is now no longer deprecated “as it useful in Web applications, particularly in combination with the iframe element.”

    The media attribute is new and can be used in conjunction with CSS media queries.

    b

    The b element has changed from the presentational meaning of bold text to “offset text conventionally styled in bold”. This doesn’t appear to be a massive shift in definition but is a way of separating out content from it’s surroundings without providing any extra meaning. The em and strong attributes embolden the text but provide emphasis on the text, whereas the b element has no extra meaning and is useful in a range of situations.

    cite

    The cite element refers to the title of a cited work, and not an individual as previously defined. Cite should not be used to mark up a person’s name and instead refers to title of work, ranging from a document to music to games or in fact anything that is referenced in a document.

    hr

    The hr element used to be a purely presentational element which was used to insert a horizontal line on the page, though it has now been given the meaning of a “paragraph level thematic break”. This means that it can be used to break up a paragraph or to indicate a change in content – it can be used to provide a transition between content within a document and provides a link between the two.

    i

    The I element is similar in meaning to the b element in that it used to be a purely presentational element and now represents text that is offset from it’s surroundings but provides no extra emphasis. Anything that is usually presented in italics, but requires no emphasis then the I element should be used and there is no need for extra spans messing up your markup.

    menu

    The menu element has changed from a “single column menu list” to specifically referring to a list of commands. Potentially more useful in web applications as opposed to traditional websites, the type attribute declares whether it is a toolbar or a context menu. If no type is defined, then it represents commands that are neither a toolbar or context menu.

    s

    The s attribute was a purely presentational method of applying a line-through to text, however this has been changed to be given the semantic meaning of “struck text”, which is text that is no longer accurate or relevant. An example of this would be previous prices on e-commerce sites, I’ve been using this element to mark these up and has the benefit of more semantic meaning and no need for presentational span elements.

    small

    The small element was also a presentational element which referred to text which was to be rendered as small. This has now changed to be given the semantic meaning of “small print” and refers to content such as copyright notices, or links to the development company of the website.

    All of these elements valid code that can be used today in practice without fear and with the benefits of reducing mark up and the need for styling additional span elements which add clutter to our markup and also provides more structured, semantic meaning to our code.

    An excellent html resource and a great place for keeping track of the changes is in fact the HTML working draft, which is available on the W3 site

    Thanks to David Reece for the photograph.

  7. The Unknown Elements

    Leave a Comment

    The Unknown Elements

    There are over 100 elements in the HTML specification, and it’s fair to say that some are more used by others. Elements like div, ul and table are used on almost every project whereas some are rarely used such as kbd, var and wbr. Some of this is down to browser support and I’ll be honest in my case some down to ignorance of it’s existence.

    I’ve done a bit of research into some of these lesser known elements and listed them below, and I certainly intend to use them more in projects now where appropriate.

    Base:

    The base element is a way to declare a base href for the document, which is then used by the relative urls on the page. There is a maximum of one base element per page and is a similar syntax to normal a elements:

    var

    The var element is used to markup variables, or text that represents a variable value. In a maths or programming concept, it represents a value which is a variable, or can be used to indicate a value which the user will mentally replace with a custom value.

    samp

    The samp element is used to mark up sample output of a program. Again, more suited to web applications than standard websites, it’s used for sample output for example a demo of a process or system which generates a value or result depending on a user’s interaction.

    (more…)

  8. New @font-face syntax

    Leave a Comment

    New @font-face Syntax
    The availability of fonts that can be used has grown massively over the last couple of years, with services such as Typekit and Fontdeck taking the hassle out of serving fonts to the world. Services such as sIFR and Cufon are now largely out-dated unless in certain circumstances (corporate fonts for example may need some protection from publishing the font file on the server). One of the most common ways to embed custom fonts on a webpage is through the @font-face declaration, and there is a new syntax which should be used now which handles Android devices and IE9 a lot better, and also is a lot cleaner and easier to maintain.

    The syntax is:

    @font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?') format('eot'),
    url('myfont-webfont.woff') format('woff'),
    url('myfont-webfont.ttf') format('truetype'),
    url('myfont-webfont.svg#svgFontName') format('svg');
    }

    I think you’ll agree that’s a lot easier to understand and maintain. The question mark at the end of the eot declaration is the key here, so head over to Font Spring for a full explanation of the new syntax.

  9. Review: 2010

    Leave a Comment

    Review: 2010
    As it’s been a while since I’ve written a blog post, I thought the traditional end of year post would be a good place to round up.

    This year has been quite eventful, as I started the year as a full-time student working part-time from home and ended it out of education and working full time with a different employer. As I’ve written before, I wasn’t entirely happy with university and my original plan was to finish the academic year and consider my options over the summer, deciding whether to carry on or seek full-time employment. As it turned out, I was lucky enough to be offered a position with a company here in Dundee and I can honestly say I do not regret leaving uni one bit. I’ve learnt far more in 6 months of work than I did in 2 years of university, and am thoroughly enjoying it.

    For 2011 I have a few goals, with the main one to become much more fluent in JavaScript and jquery. I feel my HTML/CSS skills are at a good level but my js needs some serious work. I’m not horrendous at it and can implement basic things such as slideshows, hide/show etc no problem but I’d really like to become a lot more fluent and knowledgable about it in order to write custom functions and better scripts.

    Something else I’d like to improve greatly is my actual design skills, and spend a lot more time crafting in Photoshop and then implementing in the browser. Or design in the browser but either way I’d like to become much better at designing interfaces from scratch. One way to do this would be to create a psd on a regular basis and to brush up on design theory etc so that I know what I’m doing, and able to improve.

    As well as improving on my skills as a designer/front end developer, I’ve a couple of personal projects that I’d like to work on throughout the year, nothing big or extravagant but something where I can flex my muscles a bit and put into practice some stuff in a real live project. I’d like to have something up in the first quarter of the year but we’ll see how I get on.

    I’m looking forward to 2011 and hopefully it’s as good as last year.

  10. ICT FC Re-Design

    Leave a Comment

    ICT FC Re-Design

    Having not designed anything from scratch for a while, I was getting that urge again, and with not having a real project to try it on, I decided to make one up. Having been to the football last week and watched a couple of games on tv, I decided to re-visit an idea I first had way back last summer. A football club website.

    There are very few exceptions but the vast majority are truly shocking and stuck full of ads. The official site of my team has all the content squashed into a tiny area which is packed full of ads and has the main body text center aligned! I don’t visit the site too often but it offends me each time I do, and I decided to have a go at designing a replacement which I think could work and could replace the current version.

    There’s a lot of information on football club websites and I wanted to present as much of this as possible, but still making it usable and clear to understand. By arranging the areas into different boxes it gives the content room to breath and also makes it perfectly clear and easy to use.

    This is only the homepage and I may have a go at designing some of the sub pages at a later date, but wanted to put this up here. I’m not overly keen on the footer area as it probably needs more work to it in order to polish it off but I’m quite happy with it overall.

    View the completed visual here and feel free to let me know what you think, good or bad.