Archive for the Category Web Development

 
 

Finally some sense in this flash nonsense

Daniel Dilger wrote a brilliant post on why Flash for the iPad and iPhone are simply not viable, ignoring hardware, battery and other constraints – it simply isn’t possible from a gesture perspective.

Hooray, finally someone is talking sense.

Read the post here

Graphic designers and the unknown medium

As the title indicates this post is specifically targeted at the ongoing discussions that swept twitter yesterday regarding whether or not designers should have a hand in coding their designs.

Initially this was started by Elliot Jay Stocks who tweeted:

Honestly, I’m shocked that in 2010 I’m still coming across ‘web designers’ who can’t code their own designs. No execuse.

Since I spend a lot of time working closely with designers I thought it would be interesting to weigh in on some of the points which have been floating around.

Should designers be able to code their own designs? Yes, no, maybe… I mean actually it has less to do with code and more to do with understanding the medium. In all the time I have worked with designers, the one thing I have found refreshing is to work with designers who actually understand the medium in which they are working. Unlike print, which is a very controlled medium, moving into the web is very much a different experience for designers. Without properly understanding the medium in which they work you are destined for hard to implement designs which do not make use of benefits of the web.

In order to make things pretty on the web designers need to first understand principally what is possible, how their design will work, that what they are designing can actually be implemented without too many browser limitations and that it will look as good on the web as it did in Illustrator when they were making it.

I am not advocating that designers should go out and learn HTML, CSS and Javascript and do it all themselves, unless of course you are a sole-trader, but in understand the medium you will in turn work quicker, smarter and produce designs that are easy to implement, manage and maintain over longer periods.

For those who have come from print backgrounds, this is what you already know, it’s what you have done in print for years. You first learnt the medium, its constraints and how to deal with them. Now you need to learn the new medium you find yourself working in.

No promises, no guarantees

Something that every technology person comes across is budget and time overruns. Something like 80+% of technical projects run over time.

Really? Are you surprised? I’m not. No matter how much pre-planning and thought you put into a project, no matter the resources, staffing and waterfall diagrams to back it up, technical projects are at best a guess.

There is no finite timeline on which you can measure how long it will take to implement payment gateway ‘x’. And of course during such an implementation you will uncover problems ‘y’ and ‘z’, which are not in your waterfall diagram.

As technologists we need to communicate to our clients better that timeframes are mere goals – not guarantees.

My pet hate from Wordpress

Auto updates in Wordpress are great. They make it so easy it’s actually enjoyable to update, well for some people it is. For those of us who want to override one specific thing in the Wordpress core with an enhancement, such as my archive listing, we have our changes overriden with each update. In my case my archives page is broken until I go and reapply my patches again.

Thank god eZ Publish made some great design decisions and made overriding internal functionality easy… now we just have to simplify the upgrade process a little and we can have the best of both worlds.

Linklog / Tumblelog

After considering Tumblr and other services I realised that I spend quite a lot of time reading and collecting resources across the internet for personal development or out of interest and quite often intend on sharing or commenting on such content within my blog. This of course doesn’t happen simply due to time constraints, enter asides.

Asides, linklogs, tumblelogs and any other associated name you want to throw in allow you to post short form comments/posts, in my specific case related to other content I have found around the web.

I have set this up on my blog quickly and will expand on it over time when I can focus on the display and functionality issues surrounding it. For the mean time they will be the short ones (obviously) with a grey(ish) background.

Cufon, a sIFR alternative

Over the past 24 hours I have refreshed the layout/look of my blog and it has given me a chance to simplify my layout and a chance to test out something new, Cufon.

Cufon is a text replacement system much like sIFR but much quicker and easier to configure and without the need for flash. Instead of flash, Cufon uses canvas and VML for cross-browser support and converts fonts into VML paths for use by javascript.

It sounds ugly, but it is actually quite elegant in both design and usage. It is quick and well supported and whilst there are still known bugs I think that in comparison to sIFR it is infinitely quicker and easier to setup. It is in use on this blog now and it is definitely something I will be considering for future projects and recommendation to others.

Safari 4 text-shadow bug

Safari 4 Beta, the latest release of my favourite browser, has fixed a “bug” that has become a common practice among web professionals.

Text-shadow has been around in the CSS2 spec since 1998, but has had poor support from browser vendors. It’s rise to fame however has been as a workaround for sub-pixel rendering of fonts within Safari.

Safari uses sub-pixel rendering instead of normal anti-aliasing as a part of the Core Graphics framework, which in most cases makes text look sexy, unless you have light text on dark backgrounds.

A workaround was discovered using text-shadow in Safari, which invokes anti-aliasing. This workaround provided a text-shadow offset of 0 and forced anti-aliasing, ensuring text remained legible.

Unfortunately these days are numbered… Safari 4 Beta has removed this option and text again looks bloated and ugly. Luckily Garrett Murray has come to the rescue with a solution for this “bug fix”.

text-shadow: #000 0 -1px 1px;

Obviously substituting #000 for a background colour suitable for that your text is displayed on, alternatively you can use rgba(255,255,255,0.1) as your colour specification for the definition to work on any background colour (I haven’t tested this across all browsers).

Safari 4 Beta

A lot of people have been blogging about the recently released Safari 4 Beta. There seems to be plenty of camps on whether new features are of any benefit, if they break usability and if Apple really knows what they are doing.

Throwing all of that garbage aside, Safari 4 is a nice update. The tabs work, they actually make more sense at the top than under the address bar and it seems that the browser is overall a much faster, sleeker implementation.

My only issue at this point in time is it’s CPU usage. Some bloggers seem to be saying CPU usage on Safari 4 is lower than 3, but I am experiencing quite the opposite, with my poor MBP stuck with Safari chewing up 80%+ CPU and driving up the temperature.

If anyone has any suggestions as to what may cause such CPU usage please let me know.

WSG on Acid 3 Compliance

I have been a member of the WSG mailing lists for some time and I have watched with amusement the discussion regarding the release of the Safari 4 Beta and whether or not it was Safari or Opera which passed the Acid 3 test first.

My response to this is simple.. who cares?

In the web industry there are only two important positions on this issue, those browsers that do pass Acid 3, and those which do not. Stop worrying about who gets there first, and focus your worry on those who still don’t pass.

While the the two most popular browsers worldwide continue to sit in the wrong camp I am not impressed.

Plainview – a dream for presentations

I don’t know how many people follow the work from the The Barbarian Group, but they produce some pretty amazing things, including Magnetosphere, a visualizer for iTunes which has been rebuild and shipped as one of the new visualizers in the latest versions of iTunes. 

Not surprisingly these extremely cool people have built some other extremely cool things, including a little OS X app called Plainview. 

Plainview fills a very specific need allowing web based developers and designers to showcase, present and demo their work within the medium it is designed to be used. The best description comes from the Barbarian site:

We Barbarians give a lot of presentations. A lot of speeches. A lot of Dog and Pony shows. People want to see our work. And the work we do is on the Internet. And, until now, we really had two options for showing our Internet work: we could capture it all to Quicktime, and throw it into Powerpoint or Keynote, so we could present in a nice full-screen mode that looked professional, or we could try to show it in the browser, and have all that ugly chrome distracting people from our beautiful sites. Both of these options had their pros and cons – full-screen looks sweet, but you lose the interactivity of the site, everything has to be canned. And showing things in a browser lets you show the site’s interactivity, but, again, that ugly chrome.
So now we have a third option. Fire up your full-screen browser and let your audience focus on the work.

You can find more information and download a copy from here

So if you happen to be on a Mac go and grab a copy of Plainview and give it a go, it might just make that next client meeting a lot easier.

Web designers working alongside print designers

I totally agree with whoever posted this over at reddit: 

If you’re a web designer working alongside print designers with little to no web design/dev knowledge, how is your experience?

and in response:

Teeth-grindingly annoying.

Print-turned-web designers:

  • Learn the medium you’re working in. A five minute video of even the best print advert makes for a lousy TV advert. Likewise, techniques and habits refined by years of print design are often sub-optimal or flatly counter-productive when applied to the web.
  • For the love of god, give up on pixel-perfect positioning and learn to appreciate flow layout. Sure, it makes design harder… but if you think designing flow layouts is hard, think about us poor schmucks who have toimplement the damn things. And if you think flow layouts are ugly, let’s see how good your precious pixel-perfect design works when I do something freakishly unusual like resize my browser window.
  • Print pages are Things To Look At. Web sites are Things To Use. Prioritising aesthetics over usability or functionality is like putting a car steering wheel in the middle of the dashboard “because it looks nicer there”. You think it’s pretty and a real design coup, but everyone else is laughing at your idiocy (… or swearing at it if the design ever gets into production). Incidentally, I swear if I get one more design through with a “button” image but no pressed button image (or “link” style but no “active/hover/visited” link style) I will personally bite off your head and defecate into your body-cavity. You have been warned.
  • Conventions are not boring – conventions are your friend. Putting light-switches near doors is a convention. Sure, putting them square in the middle of the ceiling is innovative, but then so is cheesegrating your knees (hey – do you know anyone who’s done it?). Innovative means “nobody else is doing it”. Accept the possibility that nobody else is doing it because it’s a fucking stupid idea.
  • I don’t want to “explore the interface”. I want to get in, do my shit and get out again. If you think forcing users to explore the interface is such a good idea, try ripping the labels off all the cans of food in your cupboard. A couple of meals of cat-food, chilli and peaches should demonstrate exactly how “fun” this is.

Pant, pant, pant, pant… pant… ahem.

Amusing to say the least and I am sure the print designers will have plenty to say in return. 

Thanks to Thomas Koch from whom I found this little gem.

Just build it.

I read today that Jamis at 37signals has fallen into the same trap their “Getting Real” philosophy tries to avoid. 

I kept chasing my tail. I’d look at the existing reporting UI that we have for our other products, and then I’d start thinking what needed to change to adapt it for the Jobs/Gigs reports. That would then lead me to think about potential refactorings in the code needed to support the (hypothetical) UI changes. Thinking about the code refactorings would lead me back to the UI, where I would think some more about the visual impact of the code refactorings, and so I would go, loop after loop, ad nauseam.

It is good to see the staff at 37signals still fall into the same traps everyone else does, even after evangelising their “Getting Real” philosophy. 

I certainly agree that it is a hard habit to kick, and in some cases I don’t have a desire to. There are a number of projects and clients, especially so in the enterprise space where these approaches just aren’t desirable or suitable. But that is a topic for another day, what really caught my attention was the last line..

So, if you ever catch yourself playing mind games with your code, just stop and make something. Pretending is poison. Stop drinking it!

This is great advice. This is something every web developer, user interaction designer, graphic designer or similar should seriously consider and take note of. Rather than spend countless hours thinking about how it might work, build it quickly, visualise it, tweak it, delete it and move on if it’s not suitable. This in many ways follows on from the previous blog post at ZURB regarding failing fast

Designers seem to be able to do this well inside of their fancy Adobe toolkits (ok, you caught me, I have CS3 as well) but handing a PSD to a programmer isn’t very useful, it happens often, but prototyping inside graphic programs is usually done without too much consideration for the real content to fill those spaces. 

Increasingly the best solution seems to be rapid prototyping in html/css/jscript. If you can free yourself from the mindset that html/css are left only for the actual development then you can start to rapidly prototype and see if things work. Mark Boulton Design is certainly a great inspiration for this approach as they continue to work through the redesign of the Drupal website. In the past 8 revisions it’s been possible to see the site come together through quick prototyping, with user feedback. The great thing about this approach is you can click it, interact with it. Rather than just seeing the navigation looks pretty, you can determine if it’s usable, if your content overflows your containers and if users feel comfortable with the interface. 

So next time you get caught “pretending”, as the 37signals guys would say, then whip out your favourite editor and just prototype that interface in 5 minutes, see if it works, if it does great, if it doesn’t then change it, or delete it and go make another coffee (my preference).

Correct use of table tags

I seem to find myself saying this all too often this year, to both new staff and other friends in the wider community so I thought it best to post briefly. I know a lot of others have covered this topic in the past and continue to do so, but it doesn’t always seem to get through to people.

Do not use <table> for layouts

<table> and its related tags are provided in HTML 4.01 to provide a means for which to define tabular data. Their purpose is neither one or layout or display and should not be used to achieve any visualisation of any type. They exist solely to provide a definition for tabular data. 

Well yeah..

It was a popular message, here comes CSS and it answers a bunch of questions about how we style content. But somewhere along the way the message seemed to be misinterpreted or lost in some way… and turned into

“don’t use tables, they are evil” – which it seems a large proportion of entry level web developers still believe to be true. So now we find hordes of people looking at css layout techniques for floating cells to replicate the same functionality a table provides…

Stop it.. oh my god

The original message was “Do not use <table> for layouts” and that is still true, don’t set them at 100% width and start putting your menu and content areas inside tables, it is bad form. But this doesn’t mean stop using tables. If you are displaying tabular data then use a table, its why they exist. Tables are not evil, just the way people chose to use them a few years ago was. 

Oh, and you can make them sexy using CSS.

Excuse me?

Google Developer Events does not work in Safari

Google Developer Events does not work in Safari

“Please use IE or Firefox to view this page.”

Since when did adding an event to a calendar become such a difficult task as to exclude Safari? Of course I browsed over to Google Calendar in Safari and added events galore…

Cornerstone 1.1 Released

Back in late May this year I downloaded the first beta release of the Versions SVN client from http://versionsapp.com and while impressed with its simple layout, native OS X integration and clean approach to SVN it did seem lacking in feature set. Granted over the subsequent 6 or 7 releases the product has improved further, but I still don’t feel it is suitable for our own internal development teams.

At exactly the same time Cornerstone 1.0 was released by Zennaware. This full featured SVN client provided some nice features for repository browsing, a nice visual separation of repositories and working copies and all the shortcut keys you could ask for (something that bugged me with Syncro SVN and SmartSVN).

After a few weeks of random testing I settled on using Cornerstone as my preferred SVN client on OS X and purchased the product, then at version 1.0.3. Unfortunately there were some issues with the 1.0 release, especially around the speed of repository browsing, checkout/in and refreshing working copies. After a few days I went almost nuts with the constant waiting on large repositories and fired off an email to creator at Zennaware.

To his credit he acknowledged the bugs, provided some work around options for the meantime and asked if I would like to assist in beta testing the 1.1 release.

Over the past 12 weeks or so the 1.1 release has been beta tested and gone through numerous revisions, fixes and improvements resulting in a very polished product and certainly an SVN client I would recommend for developers on Mac OS X.

In another post I will provide a detailed comparison of my thoughts on Cornerstone, Versions, Syncro SVN and SmartSVN the four clients I have worked with through this year.

In the meantime download a trial copy of the Cornerstone 1.1 release from the Zennaware website.