New framework for responsive HTML emails

Quickly create responsive HTML emails that work on any device & client. Even Outlook.

Quickly create responsive HTML emails that work on any device & client. Even Outlook.

Ink is a fairly new framework from Zurb, who brought us the Foundation CSS framework, for creating responsive HTML emails.

It’s been a while since I’ve been asked to help put together an HTML email but as news of this new HTML email framework dropped into my inbox this morning I thought it would be useful to share it.

As anyone who has been charged with creating HTML emails, and told that they must look equally good in Google Mail, Outlook and any other client, will attest it’s not entirely straight-forward. Not least because, well, who wants to go back to using tables for layout?!

Newer versions of Outlook (2007 and 2010, I’m looking at you) don’t help either as they use… wait for it… Microsoft Word to render the HTML!?

I don’t have any need for creating HTML email at the moment, but this really looks interesting. I may just have a play with it one lunchtime.

Download Ink from Zurb

Job vacancy: web developer

Spanner lying on a laptop keyboard

The University is looking for an experienced web developer to join the web team.

  • Grade: 5
  • Salary: £24, 766 — £29,541 per year
  • Fixed term: 3 years
  • Start: as soon as possible
  • Closing date for applications: Friday 19 July 2013

The main focus of the job will be in helping design and develop small-scale web applications, and add additional functionality to existing pages/websites so a solid and demonstrable knowledge of HTML, CSS, JavaScript, and PHP is required.

Our enterprise web content management system is the commercial, Java-based TerminalFour Site Manager (although we’ve never had to dabble with any Java) running on an Oracle database; and we’re working a lot with WordPress (and MySQL) too these days (both stand-alone installations and WordPress multisite). Pre-knowledge of either is not required as training will be offered.

We’re currently using an adapted version of the Blueprint CSS framework and a patchwork of jQuery plugins, but we have plans to move to the Bootstrap framework, the LESS CSS pre-processor and a host of other Node.js enabled time-saving goodies. We currently don’t use any particular PHP framework, although PHPMaker has been used to help generate a few applications; that’s not to say that we’re not option to the adoption of a PHP framework. We often use Agile methodologies in our project work and use Trello to keep ourselves organised.

It’s not all about hardcore coding, however. An important element of the job will be to deal with website users and content creators in a support and perhaps even training role. The web team offers first, second and third line support, and you will be expected to get involved there too.

The web team is currently made up of four members (web manager, web architect, web editor and web apprentice) with a fifth member on secondment to Corporate Communications for 18 months. Speaking as someone who is obviously somewhat biased, the web team is a good, fun and supportive place to work. Do you fancy joining us?

More details can be found on the University’s job vacancy website – the job reference code is SB1005.

Help us prevent broken links on the University website

One of the most frequent problems with content on the University website is broken links. Frustratingly, many of these broken links are perfectly avoidable. With a bit of extra care, content owners can take one simple step to help prevent broken links.

The problem with hard-coded links

If you are familiar with HTML and are used to hand-coding your own webpages, you may feel most comfortable using hard-coded links, where the URL of the destination page is defined in the code. This method works.

This is also the type of link created if you use the ‘Insert/edit link’ button in the editor in T4 Site Manager.

Hard-coded link button on the TinyMCE interface

However, over time these links begin to break. As pages are moved, edited or deleted, URLs are liable to change. So if you have a hard-coded link, it will have to be manually fixed — or there will be broken links on the website.

For this reason, this sort of link is reserved for external links only, or for links to items not within T4 Site Manager.

Section links in TerminalFour Site Manager

To avoid this problem, you can use the ‘section link’ feature within T4 Site Manager.

Section link button on the TinyMCE interface

Clicking this button will display a pop-up window that displays the structure of the University website. From here you can select the page you wish to link to.

This creates a special piece of code that is used by Site Manager to automatically generate the link. So, if the page that you link to gets moved to a different location, the link automatically updates across the website.

If section links were used for all internal links within the University website, we could significantly reduce the amount of broken links and links to outdated content.

Media Library documents

It is even more vitally important that hard-coded links to documents in the Media Library such as Word documents or PDFs are avoided. Linking directly to the URL of a document may work in the short run, but in the medium to long term it significantly increases the risk of linking to outdated documents.

The correct way of linking to an item in the Media Library is to use the ‘Insert Media’ button.

Insert media button on the TinyMCE interface

With your help, using this method can significantly reduce the number of broken links across the website.

Are you using the latest HTML editor in T4?

If you are using TerminalFour Site Manager to update content on the University website, it is worth taking a short amount of time to check that you are using the most up-to-date HTML editor. In late 2009, Site Manager was upgraded to include the TinyMCE editor. Ever since then, the following message has been displayed on the login page:

Following the upgrade to Site Manager 6.2 please upgrade your HTML editor to TinyMCE. Using the Site Manager menu above (not your browser menu):

  2. Locate the “Html Editor” row (near the bottom) and select “TinyMCE” from the drop-down list.
  3. Click UPDATE

The TinyMCE editor is much better than the previous editor HTMLArea. See the TinyMCE page for more details.

Every once in a while, we still come across users that are still using HtmlArea, over a year on. Since HtmlArea contains more bugs and is more difficult to use than TinyMCE, we recommend that you double-check which editor you are using. If you are finding difficulty updating content, simply switching to TinyMCE could be the solution.

Horizon scanning at IWMW10

Earlier this month Gareth and I attended the Institutional Web Management Workshop 2010 (IWMW10), held at the University of Sheffield. It was my first time at IWMW, and since I still feel slightly new to the Web in a higher education environment, it was a good opportunity for me to take in the sorts of issues that are commonly faced by institutional web teams.

Turbulece (sky before a thunderstorm)

Turbulent times - we certainly experienced that in Sheffield's weather

It turns out that, right now, the main issue is the effect of the economy. The theme for this year’s IWMW was ‘the web in turbulent times’. Many of the presentations focussed on the doom and gloom. This, coupled with the horrendous weather we experienced while in Sheffield, did little to dispel the stereotype that it’s grim up north (or, in our case, a couple of hundred miles down south).

Luckily, there was plenty of techy chit-chat too. It still fits in with the theme. The web is permanently turbulent. (I think it was designed like that because turbulence creates bigger waves, leading to a more enjoyable surfing experience.)

One of the key characteristics of the web for me is the fact that it is always changing, always developing. Once you’ve got on top of it, something else comes along for you to learn. That is what makes working in the web such an interesting challenge.

An update to the language of the web

Two of the biggest developments on the horizon were covered by one speaker, Patrick H Lauke from Opera Software. The first was HTML5 (and friends), the upcoming update to the language of the web.

The headline is that HTML5 does not replace the existing version of HTML. It is the same but with “more bling”. By the looks of it, it will be much easier and more intuitive to code as well. But the specification is not yet complete, and there are hurdles still to leap in the form of compatibility, accessibility and a question mark over video formats.

We were given a demonstration of some HTML5 functionality in the Opera browser. A lot of what HTML5 adds is exciting and sensible. But I think there will be a rough period while the creases are ironed out. The demonstration was promising, but it is clearly not yet the finished product.

Nonetheless, I read an interesting article recently outlining five reasons why you can use HTML5 today. It’s definitely something we should be turning our attention to sooner rather than later.

Mobile web

Later, in a smaller breakout session, Patrick H Lauke spoke about the mobile web and how to make your website mobile-friendly. Phones are becoming ‘smarter’ and connectivity is advancing. People will increasingly come to expect to be able to browse the web while out and about just as efficiently as they can on a desktop machine.

But the mobile web throws up a whole extra set of issues, adding to the already-complex set of challenges we have been accustomed to facing for years. There is a huge range of screen sizes and browsers in use, and mobile web designs must try to accommodate them all. Then there is the question of how to streamline the website for mobiles without ‘dumbing down’ the content.

Like HTML5, the mobile web still has a bit to go. As we found out in Sheffield, the mobile web cannot yet be fully relied upon in the same way we can rely upon the web on a PC. But that is why HTML5 and the mobile web are for the future, even though we need to start thinking about them now.

Reflections on my first IWMW

Overall, I found my first IWMW to be a great learning experience. It has given me plenty to think about. Although I was of course aware of the issues surrounding HTML5 and the mobile web, what I learnt at IWMW has helped me focus on the key aspects to look towards.

In addition, there were plenty of other interesting talks. Particular standouts included Jeremy Speller’s about disaster communication in a crisis and Paul Boag’s persuasive presentation about cutting down the amount of content on an unwieldy website.

Due to the anticipated sector-wide cutbacks, there is uncertainty about whether IWMW will take place next year. I think it would be a real shame if it was not held in 2011, because at my first IWMW it was clear that the event is a hugely useful way to discuss ideas and meet people facing similar issues.