Archive for the ‘Web development’ Category

h1

All about hex

August 12, 2017

My friend Dave Gash has written a GREAT article on understanding hex colors – long, but worth it!: http://medium.com/dev-channel/css-hex-colors-demystified-51c712179982

[Link last checked August 2017]

h1

What year is it?

February 3, 2016

I spotted this notice on a website I visited today (Feb 2016). I guess it takes some organizations a long time to adapt to change… (BTW, Microsoft announced end-of-life support for IE 10 in January 2016 [http://www.infoworld.com/article/3020534/security/microsoft-will-end-support-for-internet-explorer8-9-and-10.html])

browser_what_year

h1

Firefox: Can’t open PDF in Acrobat

September 16, 2014

Firefox allows you to set options for how you’d like to deal with a linked file (Tools > Options > Applications). I thought I had them all set properly to open a PDF with Adobe Acrobat:

pdf01

But PDF links clicked in Firefox would still try to save and NOT open in Acrobat as I wanted!

So after many months of being frustrated by this behavior and setting and resetting those options (for some reason, they reset themselves every so often — I’m not sure if it’s related to the regular Firefox updates or something else), I went looking for an answer. After viewing a lot of websites, I found another setting on that screen that is the critical one — you have to scroll down and there’s Portable Document Format!:

 

pdf02

Once I set this to use Acrobat, everything worked fine.

What I want to know is how is ‘Adobe Acrobat Document’ in this list different to ‘Portable Document Format’ and why is PDF under P and not under A as all the other Adobe options are?

 

h1

Super easy zebra-striped tables using CSS selectors

October 16, 2013

I read about this trick in an article in the October 2013 issue of Australian Personal Computer (‘Powerful styling with CSS selectors’ by John Allsopp, p98-100) and thought I’d give it a try.

Wow! Super simple! Much better and cleaner than using JavaScript or coding each table row with an odd/even class.

The result

Here’s the result (ignore the ugly colors — they were just for testing the code):

zebra_tables01 The CSS

Here’s the code in my test CSS file that created the differently colored rows for odd and even rows (yes, I comment my code, especially where I can’t figure out what a color is by the hex value):

zebra_tables02

How simple and elegant is that! Basically just two lines of CSS and you’re done. Of course, substitute your own colors.

One caveat: If you have a TH row at the top of the table, it gets ‘counted’ as Row 1 (an odd row), so the color striping is ‘out’ by one.

The HTML

And here’s the bare bones HTML code I used for my test file:

zebra_tables03

Thanks for the article, John!

(John’s article has more on how this all works, and how to assign different column colors using math in the CSS, but for this post I just wanted to share the simplicity of the doing ‘zebra’ striped tables with CSS.)

h1

Mixed error messages

October 11, 2013

Why is it that here we are in 2013 and STILL website error messages are confusing and often contradictory?

I needed to create an account with one of the Australian federal government agencies (yes, ASIC, I’m talking about you!). Easy enough — just my name, email address, phone number, and a password. Not so…

I entered an 8-character password (with numbers and letters), then got this (click the image to see it all [aside: spot the spelling error]):

password_error01

Hmmm… I tried again, this time adding two numbers to the end of my existing (so now it was a 10-character password with six lower case letters followed by 4 numbers). As far as I could understand that error message, my password met the requirements.

So I clicked Submit again, and this time I got this:

password_error02

The problem with this second error message was that there was NO ‘entry above’ — it was totally meaningless.

I tried a couple more combinations, still using 10 characters, but converting some lower case letters to upper case ones. Still the site wouldn’t accept my password and I kept getting this second message. I must have tried about five different combinations and was ready to give up… But I’m nothing if not persistent when it comes to technology and especially bad user experience on websites ;-) (It’s all fodder for blog posts like this!)

My final foray before giving up and walking away in frustration was to hover over the question mark next to the password field. I got this tip:

password_error03

Note that the wording is different to that displayed in the first error message. This time it says that my password MUST contain AT LEAST three lower and upper case letters and three numbers, though it wasn’t clear about whether special characters were required. The first message said OR implying any combination, whereas this one says AND.

I tried more variations on my 10-characters, but still couldn’t get in. Then I had a brainwave — maybe I should try only nine characters and make sure that I had three lower case letters, followed by three upper case letters, followed by three numbers. And guess what? That worked!

So it looks like this password check was quite specific, but the error message and tooltips didn’t tell the whole story. ‘Minimum nine characters’ actually meant ONLY nine characters, and ‘contain at least three’ meant three in ORDER.

No wonder people walk away when online registration forms like this are so hard to use!

(One final thing… the requirement to NOT use two or more consecutive letters from your username [which must be your email address on this form], first, or last name seems particularly onerous. And the requirement in the first error message to not use one of your previous EIGHT passwords seems particularly onerous too. Not that that was relevant to me — I had enough trouble entering my first password ;-) )

h1

Firefox Sync Manage Account not visible

September 11, 2013

Ages ago I set up Firefox to sync bookmarks etc. between my main PC and my laptop. It all worked fine. But now I wanted to set up my PC to sync with Firefox on my Android tablet too. I went around in infinite loops trying to get it to work! The PC kept asking me for my recovery key, but every time I followed the Mozilla instructions on how to find it, I came up against a brick wall — there was no ‘Manage Account’ option on my Sync panel under Firefox > Options > Options, and I couldn’t find anything similar on my Android tablet either.

I was ready to give up, but I’m a persistent sod. One of the Google searches I did mentioned something about making sure you are using the same version of Firefox on all your devices. It was time to fire up the laptop, which I haven’t used for a few months. I updated from Firefox v19 to v23 on the laptop, and just for fun, I decided to see if I could see the ‘Manage Account’ button on the laptop’s Firefox installation. And there it was!!!! (I don’t think its appearance had ANYTHING to do with updating Firefox.)

I *think* that I must have set up the sync the first time on that laptop, and therefore the recovery key was accessible from the laptop and not the PC. I saved it to a location on my server, and now will attempt the sync operation with my tablet…

I got a little further with the sync this time — after entering the recovery key on the PC, it said setup was complete, and the Sync panel in the Firefox Options window now shows the ‘Manage Account’ button on my PC too.

However, my tablet is still reporting ‘Waiting for other device…’ I’ll give it another 30 minutes or so as I have an extensive list of bookmarks, etc. About 5 minutes later: The message on the tablet has now changed to ‘Setup complete’ and it tells me that my data is being downloaded in the background.

So it looks like it worked. It was just a matter of going to the correct device to get that recovery key — in this case, my laptop. The process ended being very quick, but I had a lot of frustration trying to figure out what was going on and was going to give up.

firefox_sync

h1

Mental model disconnection

May 10, 2013

I was looking up a website for a local bathroom renovation company. This image was on all their web pages:

bathroom_renos

A cooktop and range hood just don’t fit my mental model of a bathroom, so I checked their entire website to see if they did kitchen renovations as well, and found NOTHING to indicate that they do. Their business name clearly states that they do bathroom renovations.

Which leads me to wonder WHY they have an image of a range hood and cooktop on their bathroom renovation site. Did their web designer just grab any image from the internet and plonk it there? Or do they do kitchen renos too, but they’re keeping that service hidden for now? Or did no-one who signed off on the website notice that the image doesn’t match their business name and service offerings?

The problem with this mental model mismatch is that I now don’t trust that this company would take the care required to do a bathroom reno for me (not that I want one now, but that’s not the point). Any trust I may have engendered from looking at their website text and testimonials has been reduced by this cognitive dissonance.

Bottom line: Trust is jeopardized when the images and text (and business name in this case) on your website don’t match. If your prospective customer sees that you can’t get that right, then they won’t trust you to get their job done right either.

Or maybe that’s just me…