Like Wow Online

Constructive Criticism: Radar for the iPhone

Shimone Samuel — Tue, 17 Feb 2009 16:17:42 +0000

Radar is a free (advertising-supported) service for sharing pictures taken with a camera phone. Radar can be used with a mobile web browser or dedicated iPhone application.

Radar is intuitive, easy to use and fun. The iPhone application allows a new user to register for the service and immediately begin sharing photos.

In the interest of providing constructive criticism for the fine folks at Tiny Pictures I’ve crafted this page-by-page report on a few areas I feel could use improvement.

This report is free and released under a Creative Commons Attribution 3.0 License.

If you’re interested in receiving constructive criticism on your own application or website please contact research@likewowonline.net for details.

The research contained in this report is based on a review of Radar version 1.0 for the iPhone.

Download the full report in PDF: Constructive Criticism: Radar for the iPhone

Shimone.info – A crowdSPRING Success Story

Shimone Samuel — Thu, 29 Jan 2009 21:58:48 +0000

From early challenges to eventual success, my experience with crowdSPRING has also been educational and gratifying. The design of Shimone.info is more beautiful and unique than I could have imagined.

I look forward to explaining the code and technology which power Shimone.info, but for now I will describe my experience as a crowdSPRING Buyer.

Inspiration

Having spent several weeks attempting to redesign Shimone.info, I found myself arriving at a familiar conclusion: Not being a designer by trade, I’d spent far too much time working on something I would ultimately be unsatisfied with. Looking for alternatives, I discovered crowdSPRING after reading a post on Somewhat Frank titled crowdSPRING offers lots of design options.

crowdSPRING is a marketplace for creative services such as website and logo design, illustration and marketing collateral. The format works similar to an auction. “Buyers” offer a reward for “Creatives” who submit their bids as visual designs. The Creative with the winning entry (chosen by the Buyer) receives a cash reward in exchange for their completed work.

After reading Frank’s story, I joined crowdSPRING as a Buyer and submitted my first project: The Redesign of Shimone.info.

Writing the Creative Brief

Shimone.info is powered by SweetCron, an open-source aggregator of social network activity. In my Creative Brief I provided an overview of SweetCron, described the style of design I desired and noted its personal nature. I allowed for wild and creative ideas with a specification for out-of-the-box thinking. As a requirement I stated that the design must adhere to web standards and best practices. Finally, I linked to example customizations.

Design Proposals

I received proposals from only 8 designers even though crowdSPRING guarantees a project receive 25 entries. I mistook crowdSPRING’s guarantee to denote the numbers of participating designers, but later learned that if one designer submits 10 revisions they each count as an entry.

Out of the 27 entries I received;

3 were terrible
7 were mediocre
2 were fair but ignored an important requirement from the creative brief.
1 included a lengthy diatribe on the designer’s vision but nothing more than a singular background image and later, an apology for missing the project deadline.
8 were submitted within 2 days of the project end date.
2 (+ their revisions) were very beautiful and aesthetically pleasing—1 of which I chose as the winner.

Overall I felt the talent inclined toward designers who’d received no formal training. More than half the designers ignored (or failed to understand) requirements from the creative brief and several included design elements from “free download” sites.

Buyer & Creative Interaction

The first few entries I received were variations on my existing design customized with icons, backgrounds and other elements from “free download” blogs. I was disappointed by the lack of creativity and wondered if I’d offered too small a reward to entice more professional talent.

Thankfully, crowdSPRING’s recommended that I contact several designers at the start of the project, and eventually began receiving more suitable entries. After providing additional comments I received revisions from several designers. I will highlight 3 notable interactions and for privacy purposes refer to these as Designers A, B and C.

Designer A

Curiously, Designer A contacted me after I linked to their website in my creative brief. We discussed my design needs by email but it became clear they wanted to work outside the system. I explained the crowdSPRING process and how I’d already prepaid for a winning design. Designer A replied that due to their geography they could not receive funds sent by PayPal (the payment processor). After contacting crowdSPRING on Twitter I understood there were other payment methods available and the designer’s geography would not be a problem. I forwarded this information to Designer A but never received a reply.

Designer B

Design B was an early leading contender. I hadn’t received many entries and none were more creative. While the design wasn’t exactly what I was looking for, it was a huge improvement and a stark contrast from other entries I’d received.

After reading the glowing response I left for Design C, Designer B contacted me asking if I’d found my winner. I answered honestly that Designer C took me by surprise and was now the leading contender.

The next day all entries and revisions submitted by Designer B disappeared from the project with the comment “Withdrawn: Client found his perfect design.” After seeing this, other designers followed suit.

I contacted Designer B privately and explained that although Design C was currently the top choice, 8 days remained in the project. This left plenty of time for other designers to submit entries that were possibly more creative.

Designer C

Designer C submitted the winning entry. The design was exactly what I was looking for and so perfectly suited to my tastes I could hardly contain my enthusiasm. My comments were received with professional courtesy and with a few tweaks I had a winning design. The wrap up phase went smoothly and later we discussed and revised some of the finer details by email. As a bonus, after the award-winning design of Shimone.info Designer C went on to win first one, then another and another crowdSPRING Creative award.

Lessons Learned

With the right creative brief and effective project management anyone can receive a beautiful and professional design from the crowdSPRING community. Apart from a strong creative brief, here are a few key points to remember:

Understand the difference between Standard and Pro

Pro projects start at $1000. Standard projects start at $150. This effectively divides the talent pool in two.
Personally I chose Standard and offered a $500 reward in the hopes of attracting designers from the Pro crowd willing to take a pay cut in exchange for a fun project.

Spend time on your creative brief

Download a copy of the Creative Brief and work on it offline
Make sure your Brief is complete before submitting your project
Write your Creative Brief detailed but concise
Be specific with any requirements

Browse the site for entries which match your aesthetic

Contact several designers and politely invite them to participate in your project. This will increase the likelihood of receiving entries you like.

Browse the Help Center, read the following entries:

Can I cancel a project after it has been posted? (no)
How does the guarantee work? (25 entries or full refund)
What does it cost to post a project? (15% commission)
How does crowdSPRING protect users’ intellectual property? (industry-leading tools)
Does crowdSPRING provide a contract for projects? (yes)
What if the Buyer and Creative have a disagreement? (contact crowdSPRING)
How do I update my project description? (you can’t)
Why do I have to pay when posting a project? (guarantees winning designer will be paid)
Can I change the end date of a project after it’s been posted? (no)

Read the Top 10 Tips for Buyers

Most of the points I’ve mentioned are included in crowdSPRING’s list of Top 10 Tips. In addition, pay special attention to the following:

Focus on the right details at the right time. Don’t get caught up in details before they become relevant.
Score all entries. Note crowdSPRING’s suggested scoring scale.
If you don’t like the design, make sure to score it lower. Don’t waste the creatives’ time by giving them false hope.
Consider the wrap-up process – focus on the concepts during the project and worry about execution and final tweaks during wrap-up

Final Thoughts

The visual design of Shimone.info is the product of a successful crowdSPRING Buyer experience. The process was not without its challenges but in the end, I developed a great relationship with a crowdSPRING Creative and we are both overjoyed with the results.

Recently I was contacted by both founders, thanking me and making themselves available for any questions or concerns. I appreciate the personal touch. With any company it’s the details that make all the difference.

Without hesitation I strongly recommended crowdSPRING for all your graphic design needs.

Generating HTML footnotes with AppleScript and MarsEdit

Shimone Samuel — Tue, 15 Jul 2008 01:28:12 +0000

As noted in the intro to Accessible footnotes with HTML and CSS, I’m using WordPress to manage the contents of this web site. Searching for an offline content manager, I found MarsEdit was consistently praised as both powerful and effective.

Among other features, MarsEdit offers support for AppleScript and intelligent macros using what it calls Text Markup. Combining these two features offers users advanced tools for speeding up their workflow.

In the case of footnotes, I’m using a combination of AppleScript and Text Markup to reduce the process to two simple steps.

AppleScript creates a unique link and identifier from a selection of text.
```
¹
```
AppleScript then creates the unique identifier and return link. This reference is stored in the clipboard.
```
FOOTNOTE ↑
```
Text Markup creates the footnote code block and includes the stored text from the clipboard.
```
	
		FOOTNOTE ↑
	
```

What the “Create Footnote” AppleScript does

Check if MarsEdit has a post window open
- If no post window is open, return an error message
Check if post window contains a text selection
- If no text is selected, return an error
Store the selection as a variable
Store the date and time as a unique identifier
Replace the selected text with unique link and identifier
Update clipboard with unique identifier and return link

Download: Create Footnote Applescript

What the “Footnote Block” Text Markup does

Generate a block of html code
Add the contents of the clipboard to the code block
Paste the complete code into the post window

Text Markup can’t be exported but the process to create a new macro is simple:

Open a post in MarsEdit
Select Edit in the Text Markup menu
Click the “+” symbol in the window that opens
Name your new macro “Footnote Block”
Enter the following Text Markup into the Opening field and click “Ok”

Footnote Block macro


	
		#pastetext#

Generating footnotes with AppleScript and MarsEdit

Part 1: Setup

Download the Create Footnote Applescript.
Copy the file to your MarsEdit/Scripts folder (to find the folder, click the AppleScript icon in MarsEdit and select “Open Scripts Folder”).
Create the Foonote Block macro in MarsEdit using the instructions above.

Part 2: Usage

Open a post in MarsEdit and make a text selection.
Choose “Create Footnote” from the AppleScript menu.
Move the cursor to a new location and select “Footnote Block” from the Text Markup menu.
To create additional footnotes, skip the Text Markup step and paste the stored clipboard item in the ordered list.

Demo

This demo video shows how AppleScript and MarsEdit is used with the methods above to create HTML footnotes.

Watch: Create Footnote demo video

Choosing a theme and topics for your blog

Shimone Samuel — Thu, 10 Apr 2008 04:19:23 +0000

This is part two in a series of articles about Creating a Blog for Fun and Profit. In this article , we will look at choosing a theme and topics for your blog.

An appropriate theme is essential to attracting and retaining new readership. Choosing the right one for your blog can be difficult.

To begin, ask yourself the following questions: Who is my target audience? What do I want to share with them? Where else can they get this information?

Next, think about the blogs and websites you admire. What makes them successful? How are they unique? What keeps you coming back?

Some of my personal favorite websites include: TechCrunch, LifeHacker, Gizmodo, Smashing Magazine, and A List Apart.

TechCrunch is a “weblog dedicated to obsessively profiling and reviewing new Internet products and companies.”
LifeHacker is a “blog that features tips, shortcuts, and downloads that help you get things done smarter and more efficiently.”
Gizmodo is a “blog with the sole purpose of writing about tech and gadgets as fast as possible.”
Smashing Magazine “delivers useful and innovative information for designers and web-developers.”

A List Apart “explores the design, development, and meaning of web content, with a special focus on web standards and best practices.”

Each of these websites has a technological focus, but they differ in their approach and core subject matter.

Finally, consider the purpose of your blog. What is it you ultimately wish to gain from your writing and publishing?

Finding purpose in your writing

Bloggers fall into 3 distinct categories:

Those wishing to strike Internet gold
Those with a passion for or knowledge about a given subject
Those writing about themselves or their business

Blogging as a gateway to fame and riches

As in any good business, blogging for profit requires a careful and well-planned strategy. High-traffic websites with an active community have proven the most attractive to advertisers.

When choosing a theme for your website, consider which topics are most likely to result in viral distribution, repeat visitors, sponsorship opportunities, and community interaction.

Blogging as an outlet for passionate discourse

Genuine passion is evident in both the quality of a blog’s content and the commentary it inspires.

One of the most effective ways to increase your website’s visibility is to focus on thoughtful, quality content. Interact with your visitors and the community at large, and people will see your website as an essential destination.

Blogging about you or your business

Blogs with an individual or business focus tend to target friends, family, business associates, and potential partners. Because of this, the implied theme of the website is you.

Maintain a loose structure, generate new and interesting content, and your visitors will keep coming back.

That’s all for now. Stay tuned to next time as we tackle Part 3: Finding the right name

siFR and the user experience

Shimone Samuel — Fri, 07 Mar 2008 01:56:16 +0000

Scalable Inman Flash Replacement or sIFR for short, combines Flash and JavaScript to enable the display of custom fonts on a web page. sIFR is attractive to both web designers and developers as it provides an accessible and semantic alternative to other methods of font replacement.

sIFR enhanced sites require a modern web browser with the Adobe Flash plugin installed and JavaScript enabled. For visitors lacking these features, sIFR will degrade to a suitable baseline font and continue to render both on the page and in the generated source code.

In theory, sIFR is a perfect response to one of the more frustrating restrictions imposed on web designers by the medium. Unfortunately, the technology is not without its flaws and ultimately should not be considered a viable choice for web professionals.

The limitations of sIFR include: localization, extended character support, fouc, page zooming, text scaling, text wrapping, page load, cpu load, scalability, utf-8 compliance, QA testing, future-proofing, upgradability, wmode support, dynamic text sizing, DOM support, and z-index collisions.

While there may be solutions or workarounds to some of the issues illustrated here, collectively they remain a barrier to the technology’s adoption as a standard.

Wizardworks: sIFR – Point Of View (Publish date unknown)
Jim offers a god breakdown on the pros and cons of sIR and I will elaborate briefly on item #5: sIFR and Special Characters
- In order to truly support localized content, a separate .swf file would need to be created for each language, each of those .swf files would then need to contain the entire character set for that country.
- The more characters added, the larger the .swf file becomes. This is noteworthy as few if any fonts families contain every character set for all languages.
- Web designers may encounter much difficulty testing the site with different languages as the text and spacing is rendered differently depending on the user’s country and whether or not the Flash plugin is installed.
- Support for dynamic widths is also a serious issue as the Flash movie width must be explicitly set. This further reduces sIFR’s practicality as fixed widths cannot be used for text on localized websites.
Usable Type: How and When to Use sIFR (December 24, 2004)
Andy discredits much of the misinformation and concludes sIFR is best used to replace no more than one headline per page.
Virtual Elvis: Why I hate sIFR (April 29, 2005)
A fabulous tirade about the difficulties of keyboard navigation and screen zooming for an Opera user.
Leftlane: ESPN.com Looking a Bit Pixelated (February 9, 2006)
Interesting to note in the comments here that while ESPN is one of the sites often quoted to be using sIFR it is a) not currently using sIFR and b) (quoting Mike Davidson) “It was actually not sIFR at all, and even pre-dated Inman’s IFR by at least two years. It was basically inline Flash files with text… that’s all. And yes, the page is huge and so are all of those images.”
Drupal: sIFR Module discussion (February 16, 2006)
In the comments section, a user notes that sIFR text is not searchable and cannot be made both selectable and linkable. The commentary further notes a lack of respect for user-specified font settings. Someone else points out that sIFR is not utf-8 compliant.
Mezzoblue: The Pros and Cons of sIFR (October 26, 2006)
A notable article which points out the need to refresh the browser once Command/Ctrl + is used to increase font size. The inability to use sIFR for headers which are also links (the link destination will not show in the status bar) is also mentioned.
Devshed Forums: SIFR … Innovative or Designer’s junk? (April 13, 2007)
A flaming forum rant that suggests using a pre-rendered PNG instead. The author also further points out the load and latency issues inherent in sIFR.
Sitening: New Flash player breaks sIFR (December 14, 2007)
This is an important occasion to make note of. When Adobe released the latest version of their Flash browser plugin, earlier implementations of sIFR malfunctioned. While awaiting a fix, sites deploying sIFR were forced to remove the code – assuming they were even aware the feature stopped working.

Live sIFR examples

As a test, interact with these (or any other) sIFR enabled web sites using different browsers such as Opera, Firefox, Safari, Internet Explorer and Konqueror. Try printing, previewing, selecting text, searching for text, increasing and decreasing font size, and other page-level interactions. Keep in mind that while every individual may use the internet in a unique way, all web browsers offer the same set of features to each of their users.

For the following examples I have included sample videos showing scripted interactions with each web site. These videos are made available as a point of reference should one of them cease using sIFR or the technology evolves.

Aston Martin See demo video
1. Visit www.astonmartin.com
2. Notice how the sIFR headers render after the content.
3. Try increasing the browser font size using the keyboard or option menu. Notice the header text size does not increase with the rest of the page.
4. Using the keyboard, try selecting all the body copy (Ctrl +A in Windows, Command +A in OSX). Notice the header is not selected.
5. Using your mouse, try selecting the entire body text including the header. Notice the header is not selected or selected irregularly.
6. Using Firefox, first select the header text with your mouse and then try to deselect it.
7. Select print preview and notice the header missing (FWIW: this is supposedly fixed with media=screen in the css link)
8. Try searching for text transformed with sIFR using Ctrl/Command +F. Notice how the text is not selected.
~~Hollywood Reporter~~
1. www.hollywoodreporter.com has recently undergone a redesign and chosen not to continue using sIFR.
Offbeat See demo video
1. Visit http://www.offbeat.com/
2. Watch how the content loads first and the headers second.
3. Notice how the first header is hidden when the navigation menu floats over it.
4. Using Firebug, inspect each header element. Notice how they all use a fixed width.
5. Search for text contained in a header. Although the text is found, it is not highlighted by the browser.
6. When viewing the demo video, note that although the word “Bach” is found 3 times in the header, it is not highlighted during a page search until a fourth attempt to find the word (which also appears in the body) or after selecting Highlight All as an option.
7. Attempt to open any of the header links in a new tab or window.
8. Block futura.swf using the AdBlock Plus plugin for Firefox and watch the headers disappear (FYI: This has been fixed in a recent release of sIFR).

Final thoughts

When designing web sites, our foremost concern should be usability and the user experience. At no point should our visitors be forced to relinquish the basic comforts and features afforded by every modern browser.

As it stands, sIFR is not the hot topic it once was, likely for some or all of the reasons noted above. Many big-name sites are touted across the Web as using sIFR including: MSNBC, ESPN, Nike, ABC News, Visit Las Vegas, and The US Navy. At the time of this writing, none of these web sites are using sIFR.

With that said, sIFR continues to be actively developed and version 3 is already in beta. As an entirely volunteer-based effort, the sIFR team should be applauded for their continued contributions to this ambitious project.

Accessible footnotes with HTML and CSS

Shimone Samuel — Sat, 16 Feb 2008 00:36:21 +0000

Having recently set out on the long journey of mastering a new CMS I’ve found myself searching for and stumbling upon¹ all manner of plugins, customizations and tweaks for WordPress.

The latest clever addition I found is the use of footnotes. When used properly, footnotes are an appropriate way of commenting on or referencing a portion of text².

Footnotes serve as a more graceful way to add an aside compared to the long-winded parenthetical. (For instance, here I could give some personal insight into the guilty pleasure of using lengthy digressions, but as you can see, by the time you reach the end of this amusing passage, the original point is confused with a new idea).

So let’s have a look at the requirements for this project:

A format for referencing footnotes
A format for displaying footnotes
A method of moving between the two
Making your footnotes accessible

A format for referencing footnotes

This first requirement is easy: footnotes are referenced nearly universally with superscript. Deciding what form of superscript to use: number, letter, figure or symbol is entirely up to you. I personally chose numbers.

Fortunately, support for superscript is part of the W3C recommendation for paragraphs, lines and phrases – thereby making it perfectly valid for appropriate use.

In practice, your code may start off looking something like this:

¹

A format for displaying footnotes

Footnotes are commonly placed at the bottom or “foot” of a page or section. There is no rule stating a footnote cannot go elsewhere, but sticking to traditional conventions is a recommended best practice.

How you choose to style your footnotes is also a personal choice. Perhaps you can peruse your library or book collection to see how it’s been styled elsewhere.

However you choose to style your footnote, using CSS provides the most flexibility to differentiate it from preceding paragraphs.

The resulting code may start off looking something like this:


	
		Footnote

By applying an id to the containing div we can cascade the styling of content within. By using an ordered list we retain the continuity of footnotes throughout the page.

A method of moving between the two

Ideally, references should link to their respective footnotes and footnotes should link back to their references. This provides the user with an effortless method of jumping to the footnote and then returning to the passage.

The resulting code may look something like this:

This is some text¹


	This is a footnote ↑

… and the resulting output may look something like this:

This is some text¹

This is a footnote ↑

Making your footnotes accessible

For some, the example above may appear perfectly usable. You see a linked number in superscript, click and you’re taken to a footnote. A link in the footnote returns you to the sentence you last read. It doesn’t take much to deduce this just by looking at it.

For those who aren’t looking however the purpose isn’t as clear. Questions arise for those visiting the page with an assistive device such as JAWS: What is this linked number? Where does the link #32066 take me? Once I get there what will I find and how will I get back? Users of JAWS and other assistive devices are simply not seeing a page with the same clarity.

Once again we check the W3C HTML 4.01 specification for a solution and find a fitting one in section 12.1.4: Link Titles.

The title attribute may be set for both A and LINK to add information about the nature of a link. This information may be spoken by a user agent, rendered as a tool tip, cause a change in cursor image, etc.

The resulting code may look something like this:

This is some text¹


	This is a footnote ↑

Add a little CSS and the possibilities are endless!

This is some text¹

This is some more text that’s a bit longer than the first²

This is a footnote ↑
This is another footnote with longer text describing some point in greater detail and adding random irrelevance to this passage for the sole purpose of showing text wrapping. ↑

That’s all there is to it. Your methods may vary but this should serve as a good starting point. See below for how we do it here at Like Wow Online.

In a future article we’ll learn how to automate footnote creation with AppleScript. Stay tuned for Part II.. Using AppleScript to create HTML footnotes

To me, Stumble Upon has become nearly as synonymous a verb as Google and I falter when I see or use the term. In this instance I “stumbled” on Justin Blanton’s Footnotes and TextPander article after seeing footnotes used to great effect on the SmartArchives for Wordpress page.↑
Footnote as defined in the Answers.com dictionary reference: A note placed at the bottom of a page of a book or manuscript that comments on or cites a reference for a designated part of the text. ↑

Creating a blog for fun and profit

Shimone Samuel — Thu, 07 Feb 2008 16:50:33 +0000

In this series of articles I will discuss the process and research that go into starting your own website for fun and profit. Many of these suggestions can be applied to the creation of other websites, but for now we’ll focus on one of the more popular formats: web logs or blogs as they are more commonly known.

As with any website, launching a blog requires careful planning. To the joy of many, what isn’t required is a reason! Anyone can launch a website at any time and for any purpose.

Still, careful planning can sometimes make the difference between success and failure. So let’s look at some of the necessary steps:

Creating a blog for fun and profit
Choosing a theme and topics
Finding the right name
Deciding how to manage content
Finding a web host
Designing your website
Launching your website
Gaining exposure
Retaining readership
Recruiting contributors
Having fun
Making a profit

Look at all these steps! Who knew that launching a blog requires so much work?

In reality, very few of those steps are required absolutely. As I’ve mentioned before:

Anyone can launch a website at any time and for any purpose.

Keep that in mind and you’ll have fun. Even if your website isn’t wildly popular, the crucial advantage can still be won. By focusing on each step, you may also reap the benefits of gaining exposure, retaining readership, and making a profit. After all, you aren’t just doing it for fun, are you?

With the right combination of careful planning, creativity, hard work, and passion anyone can be a success!

That’s all for now. Stay tuned to next time as we tackle Part 2: Choosing a theme and topics for your blog

Announcing Like Wow Online!

Shimone Samuel — Tue, 01 Jan 2008 15:22:42 +0000

Welcome to Like Wow Online!

Starting with a /~ on Earthlink in 1997, I began launching a wide range of modestly successful hobby and commercial websites, including: a radio station and music store, fashion and culture blog, novelty gift shop, photography gallery, and a consulting firm.

My experience has been fun and educational. I learned not only a great deal about technology, but that I love writing about it for the World Wide Web.

Focusing on industry and technology that power the Web, Like Wow Online! is published in a magazine format to appeal to Web designers and developers, and anyone interested in Web technology.

Thank you for visiting and be sure to subscribe to our latest posts through the RSS feed.

Your host,

Shimone