The New Wisdom

Parting is such sweet sorrow

Wayde Christie — 2011-02-25T04:17:53+10:00

It's with a solid chunk of ambivalence that I can announce that Anthony is heading back to university to study architecture full time.

Of course when we asked Ant in as disgruntled a tone as is possible "what, the web not good enough for you?", it was no surprise at all that he had probably the best reason I can think of to switch careers. No, it's not because he feared never being able to top the epic skills of his creative director, rather that he wanted to make a difference and a positive impact on the world. He's got his head screwed on that boy.

Ant's been with us from day one - since before we had an office, when we all worked out of a single room at my home. We weren't exactly looking for a staff member when we first spoke to him, but his enthusiasm impressed us a great deal so we hired him straight away. To be honest, he's spoiled us, because we now have such high expectations of everyone :)

Some of the best work Newism has created over the last 2 years has been Ant's doing. He's made a major contribution to the Michelle Bridges 12 Week Body Transformation, he almost single-handedly built FixOutlook.org, he designed and built the old MacTalk site, he's churned out a tonne of online ads and Facebook promos, and his swan song was a set of email template designs for Campaign Monitor. Impressive stuff for a bloke who came to us with exactly zero experience.

An incredibly good-looking farewell lunch (minus Leevi who was trapped in Christchurch)

So all of us at Newism wish Ant all the best. We know he'll excel in everything he does, and we plan to commission his leet architectural skillz for the future Newism Global HQ. He'll be working a couple of days a week for us while he completes his degree, so we'll still get to see him pretty regularly, but still, *sniff*.

I promised myself I wouldn't cry...

Good luck Ant!

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

Newism on the hunt for a web designer / developer. Is that you?

Wayde Christie — 2011-02-21T04:24:52+10:00

The position is a full-time role at our Newcastle office. The ideal candidate will have a great online portfolio and/or some commercial experience. We’re after someone who is a great designer and a solid front-end coder.

These are the skills we’re after in particular:

Solid HTML/CSS front-end code skills. You’ll really have to be fluent in these languages, and the ideal candidate will have to be fully up-to-speed on HTML5/CSS3/JS.
Great web design. We want to see an online portfolio of your work; stuff you’ve posted on dribbble etc., but in general you should understand the web and be able to produce designs that are of consistently high quality.
Experience with a CMS. Ideally you’ll know and love ExpressionEngine as we do, but if you’ve had experience using a CMS for the production of commercial sites, that’s a plus.
Good knowledge of PHP. While primarily a front-end design role, it would be extremely beneficial if you knew your way around PHP.
Email design and development. We regularly produce email marketing campaigns for our clients, and experience in this area would be great.
Experience with Flash. We’ve been known to produce the odd banner campaign at Newism, and your help in that department, while not necessary, would be much appreciated.

Our ideal person

You eat, sleep and breathe web design.
You dream of attending web design conferences and cannot wait for your copy of the latest web design book to arrive at your door-step.
You love web frameworks like jQuery, but use them sparingly and only when it adds to the user experience.
You’re always on the lookout for the next best CMS, and you have installed and tested every single one of them.
You sign up to every new web app known to man, just because they have a nice splash page.
You’re an ideas man/woman.
You worship at Steve’s altar.

Who we’re not after:

This role is primarily a design gig. We don’t want .Net and Java developers applying for this and every other IT related job that crosses their path. Unless you have a solid web design portfolio and you can convey your passion for the web to us, then please don’t waste your time and ours.

Salary

Newism offer some of the most competitive salaries in the region, and the salary for this role will be based on experience. We have a philosophy of paying great money for great people.

About Newism

We are a small group of web professionals based in Newcastle, Australia. Some of our favourite clients include CampaignMonitor, nib, ABC TV and the Michelle Bridges 12 Week Body Transformation.

How to apply

Please email team@newism.com.au with links to your work, CV etc. We’re interested in who you are as a person too, so tell us a joke or send us a funny cat pic. We like those :)

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

expressionengine-addons.com is now ee-garage.com

Leevi Graham — 2010-12-09T06:18:25+10:00

Why the name change?

When we first launched a little under 6 months ago we made a couple of mistakes that have come back to bite us in the ass.

Mistake 1: PayPal

When I created the PayPal account I made one tiny error that with any other web service would be so easy to change. I checked "partnership" instead of "company" during the signup. That's it one checkbox wrong.

Less than a month later we were shut down by PayPal without notice because our account reached over $1000. We've spent the last 5 months sending offiical documents trying to have this mistake corrected. So far we'e provided:

utility bills
Wayde's drivers licene
Certificate of Incorporation
Lease
My drivers license
Telstra phone bill
Bank Statement
ASIC Company Registration

We're at a stage now where we can prove we're a company but PayPal still cannot change our existing account from a partnership. As a result today PayPal told us we could now no longer receive payments using our existing account.

Mistake 2: Using ExpressionEngine in our URL and not asking permission.

When naming the site we knew that the third_party addon market would be getting bigger and more competitive. We chose our domain name for SEO reasons only hoping that it would give us an edge in the search results. There was never any intention to deceive the ExpressionEngine community, claim that we hand any direct affiliation with EllisLab or anything else underhand.

Obviously our naming was confusing and / or our competitive behaviour was a bit on the nose for some. We received plenty of anonymous criticism and public support (thanks Stephen) so we didn't question our naming choice.

Months later EllisLab officially politely asked us to add a "no affiliation" clause in our footer which we did without issue. A couple of months later again we received another email asking us to remove "ExpressionEngine" from our name entirely because "it is causing too much confusion" and "people wondering if we officially endorse it" before Jan 1st. Unless granted permission by EllisLab can only assume the same will apply to:

http://www.expression-engine.nl/
http://expressionengine.ru/
http://www.expressionengine.nu/
http://www.expressionengine.de/
http://codeigniterdirectory.com/
http://codeigniterpodcast.com/

Now don't get me wrong I totally understand where EllisLab is coming from, protecting brand is important and there's no hard feelings on our side. Rule: Don't assume anything.

Recent changes.

We were originally going to relaunch with an updated design the site but due to client demand it's not production ready and given the recent action by PayPal we've had no choice but to go with something simpler.

To resolve the PayPal issue we have to close our account then create a new one, change all of our config and re-submit our documents for verification. Fingers crossed it's all setup correctly this time.

What does this mean for our customers. Essentially nothing. Transfers will be sent to sales-at-ee-garage-dot-com instead of sales-at-expressionengine-addons-dot-com. We're backing up all of your purchase history so refunds won't be an issue for recent purchases.

Needless to say the last 6 months has been a roller coaster of addon development "fun". At times I've considered throwing in the towel and stopping releasing addons publicly. The income doesn't compare to client work and support can be a massive time drain.

So what's kept me going? The community and the positive feedback. Thanks to everyone for supporting our software and making sure we deliver the best addons for ExpressionEngine.

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

All your projects are belong to Adam

Wayde Christie — 2010-11-25T05:30:02+10:00

And who better to manage those projects than our latest team member Adam O’Brien? No-one, that's who.

We figured a guy with an MBA and a Computer Science degree from the University of Newcastle would be perfect as a project manager, and so far all evidence points to that being true. Adam comes to us from Castle Systems as an experienced project manager of a software team. He’s also worked in that capacity for local building manufacture company Ranbuild (no, he can’t hook you up with a shed).

Project management oozes from Adam’s brain

Adam has already got us using scrum (an agile project management philosophy), which we’re digging. We all feel much more focused and we’re definitely much more productive. Having two of the company directors also contributing to projects is a little out of the ordinary in terms of scrum, as are multiple concurrent projects, but Adam’s taking that in his stride.

Having a project manager at Newism should come as welcome news to our clients. Adam will soon have us running like a well oiled machine, which will mean better client relationships and higher degrees of accountability and reliability.

We’re all really excited about having Adam onboard and the potential that he will add to the company.

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

Designing for Amnesty International

Anthony Short — 2010-11-12T03:51:22+10:00

We love working for clients with noble goals like Amnesty International. it motivates you and gives you a nice, warm, fuzzy feeling inside. You feel like you've done something good for the world.

Amnesty Australia wanted to update their email campaign design to better target their audience, communicate their message of protecting human rights, and most importantly encourage donations. We happily took up the challenge.

Previous Amnesty email template

While itself a good design, Amnesty had updated their style guide and wanted the new design to reflect this.

Our solution

The structure of the original email design worked well but the typography required some work and the calls to action had to be clearer.

The main goal for Amnesty is to secure donations - without them they can't help anyone. So it was important to make these calls to action speak loud and clear. These calls to action also couldn't over-power the content or appear to be screaming for donations. The high contrast separates these blocks but allows them to stand on their own without distraction.

The emails themselves were delivered by Campaign Monitor (of course) and compiled on-the-fly via ExpressionEngine and the fantastic Champagne add-on. Each campaign is generated from ExpressionEngine channels and templates which are then imported into Campaign Monitor for delivery. This allows Amnesty to keep publishing site news as normal and then deliver it via email without any extra work. Nice!

Check out the Amnesty archive of newsletters where you can see the varying types of content that are used within this single template.

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

Newism gains yet another rock(abilly) star

Wayde Christie — 2010-11-09T04:02:43+10:00

When asked to express how he felt about joining such a prestigious company, he enthusiastically replied “thrilled”. He’s quite the conversationalist it seems.

Incredibly good-looking pic of Chris courtesy of @ofdphoto

We originally met Chris at one of our Bits & Pixels nerd-fests; I believe it was the one where Pete Ottery did a little preso for us, downstairs at the Grand Hotel.

After working for us on and off for the last twelve months as a contractor, we finally saved up the cash to offer him enough to drag him away from his already successful freelance business “Butteryweb” (now a minor subsidiary of Newism-hyper-compu-mega-global-net).

Chris has already contributed a great deal to our web design and development portfolio since he’s been with us, playing a major part in projects for Lake Macquarie Council and several of the ad agencies we outsource to. He’s getting stuck into ExpressionEngine development, and is already mastering the art of jQuery.

Fun fact: in a past life, Chris was the face-melting guitarist for awesome Aussie hardcore band Stockholm Syndrome. Here’s a pic of Chris (left) that our mate Nic Bezzina snapped at the Annandale Hotel. We’re not worthy!

Hey mom, look at Chris rocking out, he's on the interwebs!

We hope you’ll join us in welcoming Christopher J. Buttery to Newism.

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

Newism seeking mid-level php developer and/or recent graduate

Leevi Graham — 2010-10-20T23:27:25+10:00

The position will be full-time at our Newcastle office and the successful candidate will be able to start immediately.

International applicants will not be considered at this stage.

You will be reporting to our Technical and Creative Directors and will be working with a small team of designers and developers, taking a range of rewarding projects from brief to completion.

Flexibility is a big thing for us, so the ability and desire to quickly learn new processes and methodologies is vital.

Newism are a small team of experts with a diverse range of skills, working on great projects for a range of cool companies and brands. Most importantly we're looking for someone who will value working for us. A lot of us at Newism have young families, so work/life balance is something we heavily encourage.

Must have skills:

Object-oriented PHP development (you really need to know PHP inside-out)
MySQL
Javascript/JQuery/AJAX
HTML/CSS
Practice web standards

Experience with any of the following is highly regarded:

Git (version control)
ExpressionEngine (or similar publishing platforms)
CMS plugin development
E-commerce
Actionscript
Photoshop
Mac user

We work with several ad agencies, so any experience in that regard is a plus.

To apply, email team@newism.com.au with your CV and cover letter. If you've got an online presence, we'd like to see that too.

Salary based on experience. No agencies or freelancers please.

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

“Newcastle web developers take on the world.”

Wayde Christie — 2010-10-08T05:09:16+10:00

We were visited at the Newism office by none other than local celebrity, Maynard (here he is interviewing Donny Osmond).

We chatted about the web industry in Newcastle, and the pros and cons of running a web business outside of a capital city.

It was a great experience and Maynard did a good job of making us feel comfortable. He started off chatting with us about a few webby concepts, you know, getting us all limbered up. Then it was out with the microphone...

Steve, Karl and Ricky.

I think I can speak for all of us when I say it was pretty confronting having a mic stuck in your face. All of a sudden everything you say is being recorded for all to hear, so you'd better know what the hell you're on about! We'll let you decide whether we pulled it off :)

Anyway, we all dug it, and Maynard was a champ. Read the ABC article here, and listen to the full interview above.

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

The Michelle Bridges 12 Week Body Transformation

Wayde Christie — 2010-10-06T04:58:06+10:00

You may be surprised to learn that we plan on paying for our listing for as long as we exist, because that single inquiry turned into one of the most successful relationships we've had the pleasure of being involved in.

That relationship came about in late 2009, when a call from the 'Michelle Bridges Online Partnership' team interrupted a Friday afternoon visit to our local. What we discussed was the Michelle Bridges 12 Week Body Transformation, and unlike many of the grand plans that land in our in-box, I immediately felt that this project was going to be important, and that it was something we definitely wanted in on.

Who’s behind it?

Michelle Bridges is the popular female trainer on the Australian television version of 'The Biggest Loser'. She has an empathy on the show and in person that is truly endearing. She's likeable and trustworthy, and most importantly is a woman of her word, and it's that integrity that has made her so successful and rightfully earned her a legion of loyal fans. She's also an ex-Newcastle girl which is another reason we love her. Go Newy!

What is the 12WBT?

At it's most basic, the 12 Week Body Transformation is a 12 week online training program that runs three times a year. Members get access to weekly exercise and nutrition programs, recipes and shopping lists. They also get access to a lively forum and a weekly live video broadcast from Michelle. Each 'round' consists of 12 weeks, plus 2 weeks of 'pre-season tasks' to help members prepare themselves, both practically and mentally.

What the 12WBT is really about however, is changing people's lives. This is something I hadn't considered at first, but in the nine months I've been involved with the program I've seen a compelling amount of evidence that it does change lives dramatically for the better.

How did it come together?

After a full day workshop with the team, we threw ourselves head-long into the project. The majority of the planning had already been completed, so we were able to focus on the job of determining the technical approaches necessary to achieve the best outcomes for the site. A very quick round of wire-framing lead to an equally quick design phase, and then it was onto setting up the CMS (ExpressionEngine of course) and building the site.

Here's where it gets technical...

Behind the scenes the site is a fairly standard ExpressionEngine install, but with a few major additions.

Forums

Designing and coding forum themes is a total nightmare. I've done it. Twice. Thankfully the kind people at EllisLab created the 'Minimalist' forum theme for ExpressionEngine. We modified the theme fairly heavily to match the brand, but having a minimal base to start from saved us a heap of time.

Live Video

Once a week Michelle hosts a live video chat during which she takes questions from members. On average we get around 500 viewers at a time. The technology we currently use is called Watershed and is powered by uStream. A moderator logs in to Watershed, sets up a new broadcast, then using Adobe Media Encoder they stream their live video to the site. Once the broadcasts are complete, they are then archived and made available to members who were unable to watch them live. Finally, audio is then extracted from the videos and is made available as a podcast via the site. Convenient much?

While Watershed has been great in the short term, we're currently looking into other streaming providers, particularly those that offer the .h264 format for iPhones and iPads. Livestream is currently at the top of our list.

Live Chat

Initially we went with uStream's text chat system, but being Flash based there were a lot of limitations with it. The main thing we were after was a single log in - we didn't want logged in 12WBT members to then have to log in to another system just to chat with each other. So a quick search lead us to Chatroll, which we can't praise highly enough. Chatroll allows us to pull member avatars into the chat, doesn't require a secondary login, and best of all, it's built with standards compliant Ajax goodness. The feedback from members about Chatroll has been overwhelmingly positive. Just having their avatars in the chat massively increased participation rates.

The 12 Week Body Transformation live chat

Purchasing

Since there is only one product for purchase it was decided from the outset that a pre-built shopping cart system would probably be overkill. The only curly thing for us to consider was that lump-sum and recurring payment options were required. Recurring payments as it turned out are a tricky beast :)

Ultimately we chose PayPal's PayFlow Pro payment gateway because we thought it would be nice to provide PayPal payment as an additional option to standard credit card purchasing. Leevi (our technical director and ExpressionEngine guru) developed a bespoke EE module to handle all of the purchasing. It communicated with PayPal's API to debit credit cards, and also to make sure that those paying by recurring billing didn't miss a payment due to insufficient funds or card expiries.

Without a doubt this was the most challenging aspect of the entire project, simply because a stable payment system was so integral to the success of the business. While the PayFlow Pro platform is certainly solid, it's unfortunate that their documentation and support were not so much. We're tied to that platform right now and it's working well for us, but in future we'll be looking at other platforms.

Deployment

Working in a collaborative coding environment, across several domains and applying regular updates, requires a solid deployment system, and it was with the 12WBT that Newism finally hit our stride in this area. Git has become our source control system of choice, and Beanstalk is what we use for deployment.

Put simply, we set up local site repositories using Git, we push our changes to Beanstalk, then we deploy via SFTP from Beanstalk to development, staging, and production domains. We test on development, demo updates on stage, then once the client is happy we push to production - all in an instant, and ready to be rolled back if anything goes wrong. This process has removed a metric tonne of stress from our development cycle, and the client can be confident that there will be no surprises when we push any upgrades.

Members area

Obviously all of this technology is great, but the really important stuff is tracking member stats like weight loss. It's knowing that you've lost 900 grams that week that motivates you to do even better next week, so getting the members area right was vital. The members area contains several major sections:

'My Program' - Essentially a dashboard which provides weekly updates from Michelle and links to other important areas of the site.
'My Stats' - Here's where the all important weight loss figures are displayed and managed. Charts are generated on the fly via Google Charts, the dreaded 'before and after' photos are displayed, and a matrix of custom member profile fields allows users to update their stats.
'Pre-season Tasks' - A series of eight preparatory videos that open up over the two weeks leading to the start of each round.

We've learned a lot about how members use this part of the site over the last 9 months, so we have some big plans in terms of improving efficiencies and paving the cow paths, so to speak.

Marketing

The marketing behind the 12WBT has been extensive, with the majority being online rather than more traditional offline methods. By far, the best performing of all of the methods used has been email (which won't surprise our friends at Campaign Monitor), and the next closest behind are Twitter and Facebook.

Email

The only promotion of the first round of the 12WBT was in the form of a single banner on michellebridges.com.au. That banner linked to a simple Campaign Monitor email sign-up form, and it was that subscriber list which kicked everything off. 12WBT, more so than any of our clients, have embraced email marketing whole-heartedly. They have an arsenal of custom built email templates in Campaign Monitor, and they use them incredibly effectively.

They immediately adopted Campaign Monitor's new auto-responder feature the moment it came out, and of course, they have now become insane stats junkies (like us). Their love of stats came about when we enabled e-commerce tracking for them in Google, then tagged all of their email links with Google campaign data. So now they know exactly how much they earn from every email they send, in real dollars.

Twitter and Facebook

Their audience, while not uber-savvy, were definitely using Facebook, and to a lesser extent Twitter. Leveraging these networks has had a huge impact on their brand awareness and ultimately conversions, but in essence they are mainly about 12WBT participants communicating with each other and spreading the word.

To kick-start follower numbers for the 12WBT Facebook and Twitter profiles, we put together a custom Wildfire campaign for each. Wildfire is a fantastic platform for running contests and sweepstakes, and it does so by plugging into the Facebook and Twitter APIs. So we designed a Wildfire promotion that matched the look of the site, then set it loose on Facebook and Twitter, and to say the increase in numbers was rapid would be a huge understatement. We've continued running these promotions across all three rounds so far, and they've been hugely successful.

Did I mention that people can opt-in to receive newsletters after entering the Wildfire promos, and this immediately adds them to a Campaign Monitor subscriber list? Oh my!

OK - enough with the techno and marketing babble, it's...

Party time!

At the end of every round of the 12WBT the participants are invited to attend an after party. Here everyone gets to finally meet in person, rave about how good everyone looks, and prize winners are announced. Anthony and I were lucky enough to be invited on behalf of Newism to attend the first party, which is actually the first and only time we've met Michelle believe it or not. Of course we had a great time meeting everyone, but the real surprise for me personally was the unexpected effect it had on me.

Never in my career have I had praise heaped on me as much as I did on the night - it was literally overwhelming. Everyone we spoke to thanked us for our great job building the site, and as somewhat of an epiphany, they also thanked us for helping to change their lives. This hadn't really dawned on us until that point, and it came as quite a shock. We left the party with swelling pride, not just because we'd received a lot of praise, but because we'd actually helped people. For me, that was a first.

Some of the 12 Week Body Transformation members

A great relationship

The 12 Week Body Transformation has been one of the most rewarding projects in my career on many levels. I've had a part in empowering close to 10,000 Australians to lose weight and live a healthy lifestyle, plus I've been involved in a web project that has encompassed the full gamut of my expertise (which doesn't happen very often - I'm just that skilled).

Round one for 2011 is already on the drawing board, and us folks at Newism couldn't be happier. If you'd like to learn more about the program, check out the 12WBT Facebook page and follow @12WBT on Twitter.

A touching wrap-up of the program from 12wbtdennae

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

nib Health Care iPhone App

Anthony Short — 2010-06-16T03:25:24+10:00

It was our first iPhone app design job, and boy was it fun. Maybe it was the Apple fanboy in us rejoicing at the fact that we finally had a chance to design something for the iPhone.

The nib Health Care iPhone application lets you view your policy and make a claim right from the app. Its primary function is to find nib outlets that are near to the user, and it does this by determining the location of your phone via its built-in GPS.

The application automatically updates the locations of the outlets by pulling location data from a custom built nib web service. It uses web views (web browser based screens) to display information that needs to be updated on a regular basis and to login and make and view previous claims you've made.

It's a simple but solid app. The design is straightforward and doesn't try to do anything revolutionary. We focussed on getting the usability just right by adhering as closely as possible to Apple's Human Interface Guidelines, and all reports so far from the client suggests users are very happy with the result. Most of all, the app gave us a chance to see how we would fare at iPhone design. We're definitely hoping to do more of it in the future.

You can download the nib Health Care app from iTunes.

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

ExpressionEngine 2.0 Entry Previews with NSM Live Look

Anthony Short — 2010-02-26T02:44:18+10:00

17/09/10 — NSM Live Look is now officially available over on expressionengine-addons.com! Go download it now.

For those who don't know, NSM Live Look is an extension that adds a new ‘Live Look’ tab to the publish form in the control panel. The tab contains a preview of the last saved version of an entry.

Screenshot

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

Look Hear - March 2010

Anthony Short — 2010-02-09T04:56:44+10:00

In March, I'm going to be doing a little talk about our web design process here at Newism. There are very few web designers at this event, so I'm taking the chance to give other people in the industry some insight into what we do and how we do it.

From the Look Hear site:

Look Hear is a weekly event for the month of March where creative professionals take to the stage to present a series of talks and presentations. Each Wednesday evening starting 10th of March, a selection of designers and artists will discuss their creative process, methods and techniques, and the inspirations behind their careers in creativity.

During the event, they're also holding an exhibition called Look See which gives creative types an opportunity to show off their amazing work. They're taking submissions now, so if you're interested, get in quick.

If you're in or around Newcastle, make sure you check out the Look Hear events happening this March at the Newcastle Region Art Gallery. Check out the Look Hear site for more information.

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

A Real-World Case Study on HTML5

Anthony Short — 2009-12-18T02:21:28+10:00

From a business point of view this is completely understandable - it's risky. Being dependent on Javascript is the one roadblock stopping most people from implementing it everywhere.

I won't discuss the fundamental aspects of HTML 5 (ie. the new elements), instead, I'll discuss about the ups and downs of the real-world implementation of HTML 5.

We recently designed and built a site entirely with HTML 5 for Melbourne law firm, Grigor Lawyers. It's a single page website and fairly straight-forward, so we decided to take a leap of faith and use this as a learning experience.

Go and take a look at the source of Grigor Lawyers and then come back. I'm sure there will be comments on the structure and some arguments about semantics, and these are all welcome! It's a learning experience for everyone and discussions like this help iron out the creases in our knowledge and possibly even the spec. It's not every day we build a site with the HTML spec sitting in another window!

A New Way of Thinking

HTML 5 comes with more than just a bunch of new elements to increase the semantic juice of your site, it brings with it a whole new way of thinking.

The 'header-section-footer' approach to markup is one that actually makes a lot of sense when talking strictly about the semantics of information. A section is a block of content, which usually includes an introductory overview of the forthcoming content and additional meta-information about it's content.

A lot of HTML 5 is about following this header-section-footer approach. That is, the page can have a header, section and footer, and within those sections can be another group of headers, sections and footers which take the scope of the parent sectioning element.

<header>
<section>
	<header>
	<section>
		<header>
		<section>
		<footer>
	<footer>
		<header>
		<section>
		<footer>
<section>
<section>
<footer>

Of course, not every sectioning element needs to have all 3 elements. You can use any combination of them or none at all. In fact, it gets quite complex, so you might just want to take a read of the HTML 5 spec yourself.

At first, I wasn't happy with the elements of HTML 5. It feels as though it's directing the page layout. But you need to move past what you know is a header and footer. Breaking down your content to this fundamental level, regardless of design, allows you to structure it with semantic meaning, but still create whatever design you've come up with. With HTML 5 I think we need to be extra careful that we don't fall into the trap of uninspiring design patterns.

The Ups and Downs

We were weary of embracing HTML 5 because of the single fact that IE requires Javascript for it to work properly. As much as I'd love to ignore it we just can't. There were a few other downsides...

The Mysterious Unknown

We don't know if certain browsers will freak out when targeting new elements with CSS or if that Javascript we're using will fail completely. All of my knowledge tells me this is unlikely to happen, after all they're just elements like everything else, but there is a whisper in the back of my mind telling me that something could go very wrong. We just don't know. It hasn't been used widely enough for these potential bugs to surface.

Findability

One thing we do as designers and developers, apart from creating beautiful and functional sites, is help people find them. With clean, semantic markup and interesting content, we allow Google to find the site and tell the world. Using the new structure for headings (<hgroups>'s can have a whole set of new headings inside them whose ranking is nested inside the previous heading level of the section), Google might thinking we're spamming h1's all over the page in an attempt to fill keywords.

This could possibly be detrimental to a site's ranking. Apart from this problem, Google doesn't yet recognise the semantic value of the new elements (to my knowledge), so it's not really providing much functional benefit over HTML 4.

Our solution to this was to not use <hgroup>s and stick to the heading structure of HTML 4.

Semantic goodness

The improvement to the page semantics is huge. It's also much easier to scan and read. When everything isn't a <div>, your code becomes much less of a mess. <div>'s with id's and classes add some semantic meaning, but they're still just meaningless <div>'s.

This alone makes HTML 5 worth it for me. It's possibly just because it allows our styles-heets to be cleaner. Most of the time, we wouldn't feel safe doing something like this:

#our-special-element div { }

That div could be anything! It's meaningless. For people reading the CSS, it's much easier to understand exactly what is going on. This takes me to my next point...

Meaningful CSS

What I really like about HTML 5 is the fact that it also gives our CSS more meaning and context. Rather than using seemingly random class names and ids, we now have a consistent and meaningful way of targeting elements. Due to the structure of HTML 5 it naturally gives our CSS implied meaning about the structure of the content, something that we didn't have when just using classes and ids.

Our approach

Hopefully, you've taken a look at Grigor Lawyers by now so you can follow along. You'll notice that the design can fairly easily be broken up into sections. There's the top blue area, 'About', 'Our People', 'Areas of Practice', 'Contact' and the meta information about the content.

Here's the basic structure:

<div id="document">
	<header><header>
	<section id="about_us"></section>
	<section id="our_people"></section>
	<section id="areas_of_practice"></section>
	<section id="contact"></section>
	<footer></footer>
</div>

HTML 5 is all about scope. This <header> and <footer> describe the page as a whole, because their parent element is the <body>. Remember, <div>'s are meaningless and provide no scope. I was tempted to use :nth-child or child selectors to target each section, for example, the 'Our People' section could have been targeted like so:

#document > section:nth-child(2) {}

Or like this if you want to support IE:

#document > section + section {}

For obvious reasons, this wasn't a good idea. This brings me to my next point - you shouldn't try and avoid ids and classes completely just because you have these new elements. I think naturally, my first instinct was to try and avoid them as much as possible because I had these new elements instead. But you quickly realise this is a really bad road to go down.

Marking up 'Our People'

The 'Our People' section has the most interesting markup of all the sections. I marked it up trying to completely forget the fact there was going to be a Javascript effect on the profiles.

<section id="our_people" class="alt">

	<header>
		<h3>Our People</h3>
		<nav>
			<a class="back-to-top" href="#document">Back to top</a>
			<ul>
				<li><a href="#about_us">About Us</a></li>
				<li><a href="#our_people">Our People</a></li>
				<li><a href="#areas_of_practice">Areas of Practice</a></li>
				<li><a href="#contact">Contact Us</a></li>
			</ul>
		</nav>
	</header>

	<section class="content">
			
		<article id="persons_name">

			<figure><img/></figure>

			<header>
				<h4>Name<h4>
				<p class='position'>Position</p>
				<p>Intro paragraph</p>
			</header>

			<section class="content">Content</section>

		</article>

	</section>

</section>

These profiles don't really look like articles do they? But here's what the W3C think we should use the <article> element for:

The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

This seems to fit that description no? Awesome, instead of using a meaningless <div> for marking up these profiles, we've now given them much more meaning.

The way I approach the decision of making something an article, section or div is this: Does it need it's own scope? In this case, each of these profiles could use their own scope - a heading, section and footer relating to the profile itself. If something has an introduction paragraph or a heading, it's usually a section or article.

One thing I'm not entirely happy with is the <nav> element here. In this scope, the nav should really be navigation for the 'Our People' section. It needed to be in the section, but I wish I had a way of manually defining the scope of the element. <nav scope="body"> or <nav scope="#document"> - something to that effect.

All of this, and I haven't even thought about the styling yet.

Styling it up

One thing I noticed when using HTML 5 was that I became much more dependent on advanced selectors like the direct child selector ('>') because I used less ids. However it does give more meaning:

#document > header 
{
	background:url('../images/bg-header.jpg') bottom right no-repeat;
	border:1px solid rgba(255,255,255,0.4);
	border-width:1px 0;
	padding:0 0 36px;
	height:354px;
}

So we know we're targeting the header of the entire page. Sure I could have added an id - #page_header - but that doesn't give as much information about the structure of the document... arguably.

I won't go through the progressive enhancement I've used on the site, as that topic has been done to death for the last couple of years and I'm sure we're all aware of it's benefits by this point. Using this new-fangled HTML 5, I wanted to go all out with CSS3, but it just wasn't possible with IE creating an uncomfortable social situation similar to having a weird guy in the room that no one likes but everyone is too be polite resulting an awkward silence... But I did get away with using webkit's multi-columns in the staff profiles and some nice transition effects :)

Our conclusion

The Javascript dependency of HTML 5 in it's current state (thanks to IE), will make it entirely unfeasible for most projects. However, whenever you get an opportunity to use it (on your own site for example), take the leap and give it a go. You'll learn a lot about the different approach to marking up a document and will hopefully take something worth knowing back to your plain ol' HTML 4 builds. At the very least, it will give you a leg-up on others in the field by being ahead of the curve.

I've found myself looking at print work, like brochures, posters and cards and thinking how I would mark them up in HTML 5. It may seem strange, but it's getting me thinking about how I would structure designs which don't follow the stock-standard approach. A trend that is appearing on the web lately is breaking out of the standard ways of thinking about 'what does a website look like', and it's one worth following.

What I'd like to do for future projects where HTML 5 isn't feasible, is use a pseudo-HTML 5 approach. Using the same header-section-footer approach with classes instead of elements will allow us to keep practicing the way we build our sites and structure our CSS, while remaining technically sound. We're going to need to practice, refine and rework our current thinking and style of coding when HTML 5 gets into full swing.

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

HowTo: Enable ExpressionEngine 2 custom field settings

Leevi Graham — 2009-12-12T23:53:12+10:00

EE2 (builds 20091207 and 20091211) have custom field custom settings disabled so before you can add your own settings there are a few core hacks that need to be applied. The hacks below will appear in a future update of EE2 so your custom field should continue to work.

Here’s the modifications you’ll need to apply:

Add a new table col titled field_settings to exp_channel_fields and set the data type to ‘text’
In /system/expressionengine/controllers/cp/admin_content.php around line 4514 (line numbers depends on your build) Uncomment:
```
$native_settings['field_settings'] = base64_encode(serialize($ft_settings));
```

Next you’ll need to tell EE what your custom settings are by returning an associative array in the save_settings method. I prefer to submit my custom settings in their own array which makes them easier to manage.

The display_settings method creates the settings form. A simple example:

/**
 * Display the settings form for each custom field
 * 
 * @access public
 * @param $data mixed Not sure what this data is yet :S
 * @return string Override the field custom settings with custom html
 * 
 * In this case we add an extra row to the table. Not sure how the table is built
 */
public function display_settings($data)
{
    // Add a table row to the settings table
    $this->EE->table->add_row(
        // row header
        Custom Configuration,
        // row content
        // $data includes our custom setting
        form_dropdown('my_field_field_settings[setting_1]',
                               array(1 => "Option 1", 2 => "Option 2"),
                               $data['setting_1'])
    );
}

When the form is submitted return the my_field_field_settings POST array as the custom settings array.

/**
 * Save the custom field settings
 * 
 * @param $data array Not sure what this is yet, probably the submitted post data.
 * @return boolean Valid or not
 */
public function save_settings($data)
{
    // return the custom field settings array
    // the array keys will become their own settings keys in $this->settings
    return $this->EE->input->post('my_field_field_settings');
}

The custom field settings are available in the $this->settings array when a new instance of the custom field class is created. You will need to access these settings when displaying the custom field in the publish form.

/**
 * Display the field in the publish form
 * 
 * @access public
 * @param $data String The field content
 * @return String The custom field HTML
 */
public function display_field($data)
{
    return $this->settings['setting_1'];
}

And there you have it — enabling custom field settings in EE2.

For more custom settings code examples check out NSM TinyMCE.

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

NSM TinyMCE - ExpressionEngine 2 WYSIWYG custom field

Leevi Graham — 2009-12-12T12:27:07+10:00

27/8/10 — NSM TinyMCE is officially available over on expressionengine-addons.com! Go download it now.

Unless you've been hiding under a rock you probably know that EllisLab have released a public beta of ExpressionEngine 2. As a result I've been receiving constant requests to port my ExpressionEngine modules, plugins and extensions to EE2. So far a large number of those request have been for LG TinyMCE, my TinyMCE WYSIWYG custom field.

I first published LG TinyMCE way back in September 2007 and since then it has been downloaded over 10,000 times. Naturally LG TinyMCE has earned a high priority when deciding which addons to port to EE2.

Introducing NSM TinyMCE Alpha 1

NSM TinyMCE is implemented using the Custom Field API and has the following new features:

Multiple TinyMCE configurations
Per field configuration

For all the other EE developers out there the code is heavily commented so you should be able to use NSM TinyMCE as a reference when creating your own custom fields.

Just to be clear this is an early Alpha version of NSM TinyMCE and should only be installed by experienced ExpressionEngine developers / designers. The version number reflects the stability of EE2 Beta 1 not the addon code quality or implemented features. Some core hacking is required if you are using Build 20091207 or 20091211 but it's minimal (make sure you read the README).

Publish form with multiple TinyMCE fields and multiple configurations

Custom field configuration

Download

Download NSM TinyMCE from our GitHub account. Make sure you completely read the included README before installing. If you find any issues or have feedback leave them on the GitHub repo issues page.

Enjoy

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

My 2009 EE wrap up, AcademEE Awards and EE2 Roadmap

Leevi Graham — 2009-12-11T02:41:39+10:00

It's that time happy time of the year again where we get together and thank our peers for all their hard work. No I'm not talking about Christmas presents; I'm talking about the 2009 AcadamEE awards! Run by Ryan Masuga over on Devot:ee the awards recognise the hard work that all 3rd party developers have put in over the last year and rest assured there has been some great EE Addons produced by some great EE developers.

As members of my site I really hope that you have enjoyed my addons (free and commercial) and I thank you for your continued support. If you would like to publicly show your support for my addons I encourage you to vote for them in the 2009 AcadamEE awards.

You have to be a member (registration is free) and you can only vote once so make it count.

Register for free: http://devot-ee.com/members/register/free/
Vote here: http://devot-ee.com/academee-awards/vote/2009/

Hey Leevi, where's your EE2 roadmap?

That's a good question and something that I haven't made public until now and for a very good reason. Basically EE2 official release dates and code are still too volatile to base any third party release dates on. There are also still a lot of technical reasons why a lot of my addons cannot be ported to EE2 at this time. However be assured we are keeping a keen eye on EE2 and porting addons where possible.

So far I have ported:

NSM Addon Updater: In public alpha
NSM Multi Language: In public alpha

For now my priorities are:

NSM Better Meta (formerly LG Better Meta) : 70% ported
NSM Polls (formally LG Polls) : Haven't started
NSM Publish Plus: Haven't started

If you have any addons that you use in your site and require them for EE2 fire them through and I'll add them to the list.

So you're an international speaker now, what's the deal?

This year I was lucky enough to be invited to be a speaker at EECI2009 in Leiden, Netherlands by the good chaps at Whoooz! Webmedia. It was an awesome event attended by not only ExpressionEngine peeps but a good handful of CI developers as well.

The event was such a success that it's being held again in 2010; Twice in fact in both California (USA) and Leiden (Netherlands). I'll be speaking in California along with many other EE & CI experts including:

Rick Ellis, Leslie Camacho, and Derek Jones (EllisLab)
Simon Collison, Jamie Pittock, and Greg Wood (Erskine Design)
Ryan Irelan (Happy Cog, EE Insider)
Lea Alcantara (Lealea Design)
Lodewijk Schutte
Thomas Myer

Remember to look out for Early Bird Tickets on 15th December!

EECI2010 Updates: http://twitter.com/eeci2010

Signing off

That's about it for this post. Make sure you stay up to date with all my EE announcements by:

Following me on Twitter: http://twitter.com/leevigraham
Following me on Github: http://github.com/leevigraham
Following Newism on Twitter: http://twitter.com/newism
Following Newism on Github: http://github.com/newism

Thanks for all your support again, and don't forget to vote!

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

Newism welcomes Tony Arnold as our newest team member

Wayde Christie — 2009-10-06T08:28:09+10:00

We’ve been keeping this under our hats until we finished with the formalities, but it’s with great excitement that we can finally announce that -ex Newcastle Uni ‘Senior Analyst Programmer’, Tony Arnold, will be joining our crack team of elite nerds.

In his own words Tony is a “highly motivated developer, technologist and team leader who has a passion for software design and development”. In our words, Tony will be “all over your web projects like a powerful moss”.

Here’s a quick rundown of the fantastic skill-set he brings to the team:

Mac and iPhone application development (check out Tony’s HyperSpaces app)
Server administration
Web development
ExpressionEngine development
Documentation and reporting

We know - documentation. Swoon.

The elite nerd in question

His first official Newism business will be to attend Web Directions South with us this week. Beyond that he’ll be helping us with medium to large web projects, iPhone and Mac application development, and generally improving our systems and processes.

So from all of us at Newism - welcome Tony! We’re all super excited to have you onboard!

If you’d like to join us in making Tony feel welcome, leave a comment below. If you’re at Web Directions South this week and want to talk iPhone or Mac development, drop us a line or fire us a Tweet.

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

Michael Jordan’s greatest Gatorade moment? Vote with Wildfire on Facebook.

Anthony Short — 2009-08-05T22:42:54+10:00

It wasn't easy but the results speak for themselves (over 500 votes in the first couple of minutes). The promotion even includes a tasty embedded Flash video in the header, which we didn't think was even possible in a Wildfire app, but it gives a very, very cool effect — and I'm not even a fan of Flash.

Congratulations to the whole Wildfire team for pulling together and making this Facebook promotion another huge success.

What are you waiting for... go and vote for your favourite Michael Jordan moment.

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

Britney Spears Facebook Promotion

Anthony Short — 2009-08-03T04:22:02+10:00

We deployed the promotion across Facebook and other social networks with the amazing Wildfire app which, you guessed it, creates a wildfire-like spread of hype and interest across social media.

The promotion instantly showed up on the walls of Britney's fans (all 1.8 million of them) who needed to invite 2 friends to enter the sweepstakes; So you can imagine how quickly it can spread.

We're the Wildfire promotion experts, so if your product, company or event is worth promoting, give us a shout.

View Britney Spears Promotion on Facebook ›

Some tasty screenshots

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

Fixoutlook.org - Using Twitter to petition Microsoft

Anthony Short — 2009-06-26T00:00:47+10:00

A little over a week ago our friends at Campaign Monitor asked us to help them use Twitter to send a message to Microsoft about their decision to use the Word rendering engine in Outlook 2010. The result was http://fixoutlook.org and an unprecedented 20,000 strong online movement that took everyone by surprise.

"In what may be one of the most successful Twitter campaigns in recent memory, more that 20,000 Twitter users have grouped together to “Twitter petition” Microsoft about their lack of web standards in Outlook 2010."

So why the fuss?

"Microsoft have confirmed they plan on using the Word rendering engine to display HTML emails in Outlook 2010. This means for the next 5 years your email designs will need tables for layout, have no support for CSS like float and position, no background images and lots more. Want proof? Here’s the same email in Outlook 2000 & 2010."

Microsoft wanted feedback on Outlook 2010, so the web design and development community gave it to them – in spades. At the time of writing, there are 22,415 tweets from a passionate audience voicing their concerns, and all in less than 48 hours.

If you've been in the web design industry for any amount of time, you'll most likely be aware of the trouble Microsoft has had with web standards in both email and on the web. The pain we may experience with IE6 is nothing compared to the nightmare that is email client software.

The Email Standards Project was founded to promote awareness of the lack of standards in email and to hopefully encourage the makers of the email clients to come to an agreement. The email standards environment has been steadily improving; that was of course, until Microsoft announced that that they will be using the Word rendering engine in Outlook 2010. A huge backward step.

So, with our help, Campaign Monitor skillfully crafted a rebuttal in the form of http://fixoutlook.org, which is essentially an effort to show Microsoft just how important standards are to the web.

Microsoft responds

Surprisingly, it didn't take long for Microsoft to post their response on the Outlook Team Blog.

"We’ve made the decision to continue to use Word for creating e-mail messages because we believe it’s the best e-mail authoring experience around... Our customers enjoy using a familiar and powerful tool for creating e-mail, just as they do for creating documents."

Now I'm not judging, but it's clear to me that they're missing the point. Fair enough, they're only concerned with their customers – they're a business. But at some point, we need to think of the non-corporate users and work to improve the internet for the benefit of everyone. That, and as email marketers we just want our jobs to be a little easier.

"It’s not good for users, not good for business, not good for designers. It’s not logical, not on-brand, and the opposite of a PR win." – Jeffrey Zeldman

The blogosphere chimes in

A mere two hours after the launch blogs started firing up about the issue, helping to spread the word. TechCrunch, Mashable, PCPro, SitePoint, CNet, and ZDNet to name a few.

Microsoft, Outlook Is Broken, Says 6,000 Tweets (And Growing). Fix It. - TechCrunch
Sour Outlook - Jeffery Zeldman
Microsoft Sees Your Tweets, But They’re Not Fixing Outlook - Mashable
@msofficeus: 16,000+ Twitter Users Want You to Fix Outlook 2010. Pls Listen. - Mashable
Designers criticise Outlook 2010 - PCPro
Outlook 2010 to Set New Standard in Irritation - Sitepoint
Users Pressure Microsoft to Fix Outlook - PCWorld
Microsoft defends Outlook HTML decision - CNet
Microsoft: Outlook's not broken and we aren't 'fixing' it - ZDNet

The result?

Seeing all those faces and conversations from around the world in near real-time was, and continues to be, awe-inspiring. It's truly amazing the power the internet has to mobilise like-minded people into action.

Of course we won't know whether the Fix Outlook campaign has worked until Outlook 2010 is released next year, but it's obvious that it has certainly ruffled Microsoft's feathers – hopefully to the point that they've taken notice and will reconsider their decision. Whether anything does come of Fix Outlook, it has definitely been the most exciting web project we've had the privilege of being involved in.

And for those of you interested in how the site was actually built, we'll be putting together a post soon about everything that's going on behind the scenes. There's some serious technology happening in there for a single page site, so we're sure you'll love it as much we enjoyed building it.

2/12/09 4:31pm — If you'd like to read the article you can download a PDF version here.

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***