Gregory Tarnoff Photography & Design
Madison | Milwaukee

Archive for the ‘Web Design’ Category

« Older Entries

Do’s and Don’ts for Web Accessibility

April 17th, 2009, posted in Computers, Flash, Graphic Design, Standards, Web Design

Why You Need to be Aware

While at this time the federal government has not made it mandatory or criminal if you do not, the larger your company is the more likely it could face a civil trial. Target Corporation has been through a suit filed by the American Council of the Blind in which the ACB won $6 million dollars and forced Target to accommodate the blind and visually impaired on their website. The ACB isn’t suing everyone, but they are pushing to make Section 508 a civil rights law rather than a government regulation.

Section 508 subsection 1194.22 of the ADA is the portion of the law that addresses accessibility for things from computers to software to the internet. According to the law the only people required to implement Section 508 are those providing services or product to or on behalf of the government (federal, state and local). If your company provides a product or service to a private company that is contracting with the government and that product or service will be the contracted interface representing the government, then you are obligated to adhere by Section 508 as well.

If you are not in one of these situations, but have a consumer facing web site that MIGHT be used by someone with a disability you should be following the law.

So without further ado…

Do…

  • Provide at least one font size larger than your default. Users can increase size with their browser, but if you provide a link you can do it without breaking design which increases usability.
  • Provide a high contrast mode. If that majority of your text and links aren’t black or dark blue text on white, give the user this option. You can do white text on black, but limit this to menus or highlight areas as it is harder to read long text.
  • Provide alternate, title, or long description text for all non-text elements with a message. This includes images conveying a message (not spacer or decoration), multimedia, and form fields. If the alternate text (alt) is longer than 50 characters, use the long description (longdesc).
  • Use tables for displaying tabular data only. This means if you think the presentation is best in a spreadsheet, use a table.
  • Provide a summary for all tables using the “summary” attribute.
  • Better than alternate text, use labels on all form elements. Do this by adding the “for” attribute to the label with the value equaling the id of the field it ties to. If the label doesn’t work, put the title on the field.
  • Provide a link at the top to skip repeat navigation for the keyboard navigators.
  • Provide a link at the bottom to take the user to the top.
  • Instead of using a drop down for multiple select items, use check boxes (have you tried multi-selecting a drop down using a keyboard to navigate?)
  • Any emphasis made using color, should also be understood without color. Bold it, underline it, box it, but just add something other than color alone.
  • Provide accessible text versions of multimedia presentations that sync with the presentation.
  • Make your pages so that they make sense when no style sheet is applied. This means navigation at the top, followed by content. Use headers to separate your content like a outline.
  • Provide redundant links if you use a server side image map. Better yet, use a client side image map or none at all.
  • Provide a header row and header column to all tables. Make sure that all the data cells and header cells relate appropriately if there are two or more logical levels of headers.
  • Title all frames so that they can be identified and navigated easily.
  • Make sure that if your page flickers, that it is between 2Hz and 55Hz.
  • Make sure that any items relying on scripting to display can also be accessed when scripting is turned off.
  • Provide a method to reset or extend time limits if a timed response is required.
  • Provide a link to any plug-ins or applets needed to view the content you provide. These should also be hosted on compliant pages and be compliant themselves.
  • Provide a text only version of the site if no other accessible alternate is available.
  • Test your project in prototype form before implementing it.
  • Use sans-serif fonts for long sections of text. These read better than serif fonts like Times New Roman when on a screen.

Don’t…

  • Know if something is accessible? Try using it with a screen reader like JAWS and you will know. Close your eyes and forget the mouse to see how you do.
  • Put blue or red text on black or black on blue or red.
  • Make a Flash only site. Provide a text based version.

Resources

read more 4 comments

Has Apple Influenced AT&T's Customer Service?

July 29th, 2008, posted in Web Design, iPhone

I have been a fan of Apple for a while. I don’t consider myself a fan boy as while I do get wrapped up when Steve Jobs is pitching new wares, I easily see through the RDF after his presentations. But one of the reasons I like Apple so much is that when something goes wrong they are ready and willing to help fix it. I haven’t had any major calamities requiring losing a computer for weeks to a repair facility, but I have had a number of issues requiring Genius Bar attention and it has been easy to deal with.

read more Comments Off

Launch of Firefox 3…and the unfortunate death of Firebug

June 19th, 2008, posted in Computers, Downloads, Standards, Web Design

If you haven’t been paying attention to the interwebs lately, this has been a big week for the browser wars. Opera 9.5 launched as well as Firefox 3.  I have been a fan of Firefox for a long time and recently have become a huge fan of the extension Firebug for it.

In my current work environment we are building Java web applications and while I can and do run them locally, it can take a while to put the build up, take it down, modify it and put it back up. Since most of my work is front end focused I spend a lot of time in Firebug testing things before taking the build down to update.

When Firefox 3 launched on Tuesday, I diligently downloaded and installed it. I played around with it a little and saw that Firebug wasn’t updated for it yet. So I packed it away and pulled out Firefox 2 and got back to work. Then I started having tabbing issues. I have had to restart my PC three times because my tab button on my keyboard stops working in Firefox 2. Additionally, if I am in Firebug’s CSS live editing window  and highlight a property it automatically deletes the property when I tab out. Becoming increasingly frustrated I dug around and saw they now have Firebug updated for Firefox 3 but in a beta format (although is it beta 3). so like a good little boy, I installed the new extension and booted Firefox 2 back up.

One of the beautiful things about Firebug is the ability to turn on and off various properties. However in the new beta on Firefox 3 this is causing the entire browser to crash. So here I come Firefox 2, wait what is this…the new beta is incompatible with Firefox 2 BUT deletes the old version on install. Come on guys, if you are going to not be functional, you can at least not touch my previous install.

By the way, what is with Firefox 3 not importing all my bookmarks from Firefox 2 on install? It captured my IE and Opera ones, but ignored the ones I actually use.

read more 2 comments

Short Listed for Schmap.com California Edition

April 29th, 2008, posted in Computers, Downloads, Landscape, Photography, Portfolio, Web Design
Cleveland National Forest

I just received a notification from Schmap.com saying they want to use my Cleveland National Forest image for an upcoming edition of the application. The terms look ok even though there is no pay. They do link to my Flickr account and only use a thumbnail, so I will use the publicity.

read more Comments Off

Internet Explorer 8 beta Released to Designers and Developers

March 6th, 2008, posted in Computers, Standards, Web Design

Hot on the heels of announcing that IE8 would be standards compliant by default, Microsoft has announced the first beta release of their new web browser. Lots of new features abound including web clips (similar to Mac web widgets), better jscript handling, better AJAX handling, and extensions similar to what Firefox has. It automatically detects and imports from Firefox, however i haven’t installed it yet so I don’t know how the import of extensions works or if they are com patible. I will also be curious to see if they import form Safari, Netscape and Opera.

Something to be warned about, It does appear that Microsoft hasn’t learned to allow multiple installations of its browsers. IE8 will replace whatever working copy of IE you currently have running include 7 and 6. Install with caution.

Get the beta here.

read more Comments Off

Internet Explorer 8…now with more standards compliance

March 4th, 2008, posted in Computers, Enlightenment, Standards, Web Design

When I first wrote about IE8 and the new HTML 5 standard the plan was that by default IE8 was going to render in the IE7 mode unless you declared it to render in the new IE8 standards mode using a meta tag.

Today, Microsoft announced that this will not be the case. The new standards mode that render the Acid 2 Test with 100% accuracy will be the default mode. If you have an old site that breaks in the new IE8 you will have to go back and add the meta tag or adjust your server to allow for rendering under the older engine (aka quirks mode).

We’ve decided that IE8 will, by default, interpret web content in the most standards compliant way it can. This decision is a change from what we’ve posted previously.

Some speculation behind the change points to Opera’s complaint and the recent European Union fine of $1.3 billion dollars for anti-trust tactics by Microsoft, but like any good spin-meister they deny this.

We think that acting in accordance with principles is important, and IE8’s default is a demonstration of the interoperability principles in action. While we do not believe any current legal requirements would dictate which rendering mode a browser must use, this step clearly removes this question as a potential legal and regulatory issue. As stated above, we think it’s the better choice.

You can read the rest of the article discussing the various modes at the MSDN blog.

read more Comments Off

HTML 5, Microsoft IE8 and Backwards Compatability

January 23rd, 2008, posted in Computers, Standards, Web Design

In case you haven’t heard the W3C has released the working draft of HTML 5 this week. Microsoft recently released a statement that the pre-alpha versions of Internet Explorer 8 has passed the Acid 2 test. However having achieved this, IE8 will need to break many existing sites, more than IE7 did. Or does it?

read more 1 comment

Google Lets You Associate Other Emails to Your Account

January 22nd, 2008, posted in Computers, Project Management, Web Design

So this week Google rolled out this little new feature that in their words:

Adding email addresses helps Google associate useful information with your Google Account. For example, Google Calendar can show invitations sent to any of your addresses.

I thought this was genius. I am constantly having syncing issues with my calendars. I bought the iPhone in September because I thought it would be the solution, however the solution is to export my work calendar (from Outlook) and import it to Google Calendars which I have a feed imported into my Mac iCal. The loop hole here is that I don’t like exporting my work calendar daily.

This new feature could answer that. I associated my work email address with my Google account but when people sent me meeting invites, nothing happened. So I tried my Yahoo! email address and sent an invite to myself. Still nothing happened.

Has anybody gotten this to work yet? Is the invites thing something “coming soon”?

read more Comments Off

Dr. Touchscreen, or How I learned to stop hating the iPhone

November 6th, 2007, posted in Computers, Standards, Web Design

I bit the bullet in late September. I had known that my needs changed from a regular phone to a smart phone back in April.  Between Late February and May I went through 4 improperly functioning phones. AT&T replaced each one of them, but that was hours out of my time I didn’t need. When the fourth phone started doing the exact same thing in july that the previous models had I decided I needed to just buy a new phone.

I started my investigation into the smartphone market. The big that I found is that I had to buy additional software to get one to work cleanly with my Mac, and even then there was much to be desired. I was convinced that maybe the Blackberry Pearl was for me. It was compact, the syncing was pretty decent to Macs and there were some really good deals going around.

I wasn’t ready to bite the bullet yet. In August my iPod started really acting up and skipping tracks when they were halfway through. I took it in to the local Apple store. I waited for my appointment for 20 minutes during which time I played with the iPhone more extensively than I previously had. I found overall the interface was very nice to work with, however the keyboard was a little funky. My feelings towards the device shifted from pure hatred to mere dislike.

So I stepped up to the Genius Bar when my turn came around and the techs there diagnosed a hard drive problem with my iPod and replaced it right on the spot. I was shocked. I thought for sure I would have to mail my iPod in (and would be lucky if they did it for me) and be without the thing for a week at least. Then the tech said something that made me go from disliking the iPhone to considering it.  he informed me that when the iPhones act up and need replacing they swap them out right on the spot just like they did with my iPod. I have been back a couple times since and have seen it with my very own eyes.

Well this is customer service! Realizing that if I bought an iPhone I would not be dealing with AT&T for tech support, but rather Apple, I reexamined the iPhone.  i started piecing together what I needed the phone to do, what I felt was a fair price for data access, and what the cost of the handset was going to be.

turns out I wasn’t going to be eligible for any handset discounts form AT&T. This moved the price of all smart phones to $300 minimum. The Blackberries started at $400.  The data plans for the Palm, RIM and Windows smartphones started at $40 and were not unlimited. Apple just knocked the price on the iPhone down. I could find the 4GB for $300 now. And the data package was just $20 more than what I was currently paying for voice.

My biggest problem is I wasn’t going to be able to sync my iPhone (without losing some data) with both my work PC and home Mac. However Google came to the rescue. I was able to export my calendar to Google on a daily basis and use Google’s subscription to iCal format to sync Google and my Mac, which of course allowed me to get my entire schedule on my iPhone.

With just about 6 weeks under my belt with the device, I wonder how I ever got along without it. I build all my to do lists, grocery lists, shopping list, weekly menus and other notes on it. I can find out movie listings in a couple clicks if on the road. I am constantly up on the news and mail. I have saved a few car rides that kids get bored on by playing a movie. In short, it is a huge benefit. My job as a User Interface Designer became more interesting when I realized how badly normal websites are on small screens.

The down side: I could really use the ability to extend it without hacking. I look forward to the SDK in February.  I should have gone for the 8GB as i quickly fill up the hard drive with just music. The camera could use a zoom. I am an internet junkie now that it is on my hip. It needs Flash.

Is it right for everyone? No. Am I happy with my choice? You bet. Like anthing out there, if you are considering it, make a list of pros and cons and see who wins.

read more 1 comment

Safari on Windows

June 12th, 2007, posted in Computers, Flash, Standards, Web Design

There seems to be a question as to why Apple would introduce Safari for Windows and why anyone on Windows would run it. I think people are missing the point that Apple is trying to acheive and what this could mean for the small developer.

By introducing Safari on Windows Apple has introduced the SDK (as they call it) for the iPhone. Developers won’t be able to make their apps run directly on the phone and must use AJAX instead(Flash is reportedly not going to be supported). Having Safari on Windows will allow the vast majority of developers to make sure their application will run on Safari’s JavaScript. Now hopefully a developer will make sure it works in all versions of JavaScript on all major browsers, but Apple doesn’t care about that.

In addition to this, Apple is showing that it is doing something Microsoft has decided to undo. Apple is opening more than iTunes to the other OS. I expect by the time Leopard launches we will see Windows versions of iWork and iLife. I don’t expect major applications like Final Cut or Apeture to show up, but remember Apple dropped “computer” from its name. Microsoft has restricted its applications to VMware and Office, but the deal on Office is only for 4 more years. Watch that go away by then.

Last but not least, this is a great opportunity for the small web designer/developer to now test their application and site on all the major browsers without having to shell out for an additional computer. Not everyone can afford a Mac, nor do they want to use a Mac. Now they don’t have to. They can install Safari and use it for testing purposes.

Now is it the best browser? I don’t think so. It has usability issues (I found another issue today in that you can’t use backspace to go back in browsing history like ALL other browsers). I personally prefer Firefox with its extensions and themes. but I would pick Safari over IE because I know the CSS I write will work.

Update: Issue number 4 and a reason to have it on Windows. Wordpress’s WYSIWYG editor for writing posts doesn’t seem to work properly. I only have Code version available to me while writing this post from inside Safari. It looks like Wordpress is one of those small teams that need to test their JavaScript to see that it is compatible with Safari.

read more Comments Off
« Older Entries