Category Archives: Web 2.0

2 New jQuery Plugins

Leave a reply

I have just finished creating two new jQuery plugins.  I found them very useful for my own site, and thought I would share them with everyone else.  One is called FlickrTools, the other is SocialCards.

FlickrTools

FlickrTools is a simple jQuery plugin that queries the Flickr API, and gathers all the images that match a certain tag.  At some point, this can be expanded to query other properties in the API, but this is the simplest way to start.  I use my flickr images as part of my home page hero, and as a rotating carousel of images.  One of the nice things about this plugin is that the data retrieved from the query is reusable between both features on the site.  The hero is custom jQuery, whole the carousel uses Slick.

SocialCards

SocialCards is a jQuery plugin that queries all of your social media outlets and gathers all of your recent content into cards and displays them on your own site.  Currently it queries blog posts, Etsy, Flickr, Foursquare, GoodReads, Pinterest, and Tumblr.  Soon to be developed are Facebook, Google+, Instagram, Twitter, and Youtube.  It uses a masonry style based on the one I found on w3bits, that is configurable using CSS, included in the sample.  The plugin integrates with the Google API for easy RSS reading, and with Yahoo YQL API for other more complex data.

Please feel free to give these a try.  These are the 1.0 release, so they may not fit your needs exactly.  Reach out to me at brian.whaley@gmail.com with any comments, suggestions, or constructive criticism.

Upgrades to My Web Site – Eating My Own Dog Food

1 Reply

It has been a couple years since I have made any big changes to my web site, so I thought it was time.  I have taken my own advice in my post 2014 Web Design Trends, and added some changes to my own site.  I have flattened the design, added a hero image area, focused on Mobile First design, trimmed some text, and focused on a card based design.

Flat Design

I have made some minor changes to focus on a flatter, simpler design.  I have removed shadows and rounded corners throughout.  This makes the site look lighter, simpler, and cleaner.  I like the look. You can see more at 25 Delightful Flat Design 2.0 Websites for Inspiration.

Fixed header and navigation

I have anchored the header and navigation at the top of the page, so that it is visible even if you scroll away from the top of the page.  This is a very popular technique, particularly if the header and navigation is kept slim.  You can see more examples of fixed header and navigation areas at 22 Examples of Fixed Position Navigation in Web Design.

Hero Area

I have added a hero area on the home page, which showcases my own photos stored on flickr.  This adds a lot more interest and personalization to my site.  Some additional examples of this design can be seen at 30 Web Designs that Fully Embrace the Hero Image.

Mobile First

The amount of traffic coming from mobile devices increases with each passing day.  Building mobile specific web sites or applications separate from your desktop web site is not sustainable.  My site is now accessible on phones, tablets, desktops, and extra large screens.

Less Text

I have trimmed the extra, unneeded filler text from each of the different areas of my web site.  this kept the site focused on the original content, and on my photography too.

Card Based Design

This is a very popular design lately.  I have gathered and organized my most recent social media content from pinterest, tumblr, twitter, and my blog, and displayed it on my home page.  Each post, tweet, and pin is shown as a separate card.  I like that it is always updating and follows my pixelated design theme.  You can see more examples of card based designs at 15 delicious examples of card-based web design.

Main Course – My Motorola Droid, With a Blogroll for Dessert!

Leave a reply

Motorola Droid

So I have traded my Samsung i760 running Windows Mobile 6 for the Motorola Droid running Android 2.0.1 code named Eclair. I am loving this phone. It is just as good as (some even say better than) the iPhone. It is fast, comes with a speaker phone, a big screen, built in wifi, bluetooth, and GPS, is based on Linux, is all open source, and is a slider so I have a physical keyboard. The hardware, OS, and software are all very finger-friendly. The Android market doesn’t have as many apps as the iPhone yet, but there are still thousands to choose from and the number is growing every day.

My Favorite Apps

The first thing I did was to connect my Gmail account to my Android phone. I instantly got my Gmail, Google Calendar, and Contacts synced. Then I connected the email and calendar client to my Outlook account at work. I love how the Corporate Contacts app can look up people at work without any additional information.

Plantronics Voyager Pro

I also bought a new Plantronics Voyager Pro and hooked it up to my new phone.  What a great pair!  The bluetooth connection is great, the noise cancelling works awesome, the volume is excellent… i am so glad I bought this!

Blogroll

And here are some of the great articles that i have read recently on SEO, social media marketing, and user experience.

Mobile-izing an Existing Site

4 Replies

There has been a lot of talk amongst my clients lately on how to make our existing sites more mobile device compatible. We have done some brainstorming, and have come up with some ideas on how to do this.

Build a separate site

The simplest thing to do would be to do build a separate site for mobile users. Some simple user agent switching based on the user’s browser can take mobile phone users to the separate site. The new site can then be tailored for smaller screens, be less graphics intensive, and develop alternative solutions for Flash components.

Full Redesign of the existing site

Another possibility would be to build one site that has enough logic to manage multiple resolutions. This could be through multiple master pages, separate sets of images, JavaScript to display different image sizes, different CSS files, and a fluid CSS based layout without tables. This can be cumbersome and time-consuming, but may be a good approach long term. This will accommodate both large monitors on desktops, smaller resolutions on netbooks, and tiny resolutions on mobile phones.

Hybrid approach

One approach we are considering is a hybrid approach, combining the strengths of the first two approaches. If we have two domains with user agent switching, we can optimize each of the sites – one for mobile users and one for full browser users. Each site could have its own master page or template with its own separate set of images. We can reduce the work by tagging the reusable content with specific div or span labels, and reuse them on the mobile site.

Build a Mobile App instead

Building a separate mobile application for each of the major phone platforms would allow the development team to tailor the user experience to the individual phone. Delivery to the phones and advertising the mobile application may make the user base smaller. We would also need to develop across at least 4 different platforms – Android, iPhone, Windows Mobile, and Palm. There are multiple versions of the platform to manage, as well. The phones that use a custom platform would then miss out on the entire mobile experience.

Invest in a tool or 3rd party

There are lots of third party tools that can be used to help migrate or transform your site into a more mobile friendly experience. Some of the companies who develop and support these tools either have fully managed solutions or have a consulting services group that can be hired to help you through this process. There are also a lot of companies who say that they specialize in mobile-izing sites that you can contract with, and I am sure they are not cheap.

Do Nothing

The further technology advances, the more this option becomes really viable. The iPhone’s browser has multi-touch pinch-to-size technology, allowing you to zoom in and out of the HTML page. The Android is releasing this as well very soon, but in the interim has a zoom feature. Even the old Windows Mobile 6.0 phone I used to use had a custom browser with zoom technology for the pages it rendered. the more improvements in technology, the less developers will need to customize based on resolution.

What are your thoughts?

What are you or your team doing to break into the mobile arena? Do you prefer one of these solutions over another? Do you have another idea or approach you would use? What tools or 3rd parties are you using to mobile-ize your site? Leave your thoughts, ideas, or experiences here and share with others!

Visual Thesaurus Bends and Stretches Your Way to Synonyms

Leave a reply

I have stayed connected to the search industry ever since I was involved with the original launch of the Pravachol web site ten years ago. One of the ways I have stayed connected is through great online resources like Alt Search Engines. This week they covered a great new online tool that helps its users search for synonyms. Visual Thesaurus displays entries in the thesaurus graphically and separates them into individual entries through a tool called Thinkmap. This is very similar to the technology used in the TouchGraph Google Browser. Both of these technologies are similar to some of the social networking graphs that are used in Web 2.0 sites. Take a look at the new Visual Thesaurus, and the TouchGraph Google Browser, and let me know what you think of the usage of thetechnology, and what other ways you might like to see it.

Sermo: It Takes a Village to Raise a Doctor

Leave a reply

Daniel Palastrant, CEO of Sermo.com, has come to Bristol-Myers Squibb to speak at the quarterly OMNI meeting. This meeting is targeted to the individual Brand Teams and intends to bring innovative ideas into the company. Daniel came to talk about Sermo and Online Physician Communities – Salvation or Mirage?

Direct from their web site, Sermo is “a practicing community of physicians who exchange clinical insights, observations, and review cases in real time — all the time.” Their objective, from my perspective, seems to be to connect doctors to each other, doctors to medical information, and doctors to medical services, all in one place.

Medicine is a cottage industry. Accessibility to see doctors is decreasing – 18% of doctors are no-see, and this is increasing. This is due to lots of reasons – the trend is away from in-patient towards out-patient, the introduction of hospitalists, the end of society / academic / association dominance, and script writers staying at the office to make ends meet instead of going to conferences. Key opinion leaders are becoming more polarized from practicing physicians, the number of pharmaceutical approvals is dropping, and the emergence of consumerism in the pharmaceutical industry are accelerating the number of no-see doctors as well.

Detailing is becoming more and more expensive. It costs roughly between $250 and $450 to detail a physician, and when you start including some of the secondary costs, it can reach up to between $600 to $2000 per visit. E-detailing costs between $100 to $200 on average, but you will run into recruitment problems. Community based e-detailing is estimated to cost between $35 and $65. And since you are “fishing where the fish are,” there is no recruitment costs. Doctors are already there. Enter Sermo.

The popularity of online communities have historically arced. They reach a certain point, and the number of attendees, active users, and advertisers will start to drop off. Sermo needs to find a way to make sure their community doesn’t arc like the others. New media needs new rules. The way they plan to attack this is to make sure there is as much efficiency (or harmony, as they call it) within the community. Ebay is a good example of this – there are buyers, and sellers, and the transaction is not over until everyone is happy.

Sermo plans to focus on the needs of the doctors on a vocational level. They will offer a virtual “water cooler” for the cottage industry – a place for doctors to share news, strange and insightful cases, and the opportunity for discussion amongst themselves. And they will collect and offer hard empirical data about what other doctors think about all of these.

Within Sermo’s postings, they provide Hot Spots that focus on Learnings and Earnings. These are small little bubbles that will appear throughout the Sermo interface when there is an additional content the doctor may be interested in (about a particular drug, for example).

Another feature within Sermo is called AlphaMD. This is a way to collect real time market research from doctors within the community. Data will be collected within each article. Doctors can be targeted based on their surfing habits or their profile information. This research will cost 1/10 the usual amount for this kind of information, and reach 4 times the usual target audience.

Sermo also plans on growing its features, again to prevent the value of its community from arcing. Some of the upcoming features are: DrugCards, which will be like a real-time updated Physicians Desk Reference; eDetailing, which is a frame that doctors can schedule detailing, and will integrate with your in-house detailing application; and RepSchedule, which will be a form doctors can schedule a visit from a sales rep, and will integrate with your in-house CRM.

Sermo is working with the FDA and internal regulatory departments to connect doctors to hospitals, other healthcare professionals, and pharmaceutical companies, in ways that make sense for everyone.

This was a great presentation. The exciting part is that this opens up new doors for our sales and marketing teams. Thanks to Daniel for coming to speak with us, and to Bruce Levin for putting this together.

20 Reasons Why DHTML Layers are Bad

Leave a reply

A bit of background before I dive in to the post… My team and I are responsible for developing and supporting the Brand web sites for Bristol-Myers Squibb.  The Brand Teams and external Marketing Agencies develop a concept for their site, and they deliver a fully functional version of the site in  HTML to us to implement.  We take that HTML, squeeze it into our custom content management system, and hook up all of our custom features.  This custom content platform that we call LaunchNet has built in registration management, site search, web analytics, SEO helpers, and a full suite of other tools. 

With an environment like this, managing expectations becomes essential.  Sites need to be streamlined for industrial-strength campaigns involving thousands of concurrent users and possibly millions of site users per month.  From this perspective, DHTML layers is one of the banes of development.  I have broken out why DHTML Layers make me lose my hair into 6 categories: Performance, Metrics and Analytics, Accessibility, Implementation, user Experience, and Search & SEO.

Performance

When using DHTML Layers, your users are now loading multiple pages combined into one, some of which they may not even view, wasting download time and bandwidth.  Pages are slower to download, and are slower to draw inside the browser.  Processing is now heavier on client side, and is heavily dependent on JavaScript, which is known to be a memory hog.

Metrics & Analytics

Layers are not pages.  This is a simple fact, but needs to be stated again for emphasis.  Layers are not pages.  This means that anything that is dependent on the construct of a page will break.  Google Analytics tags, which are designed to fire on page load, will need to be re-engineered to fire on layer loads instead of page loads. 

Accessibility

Mobile users on phones, PDAs, tablets, UMPCs, and other lightweight devices with web browsers will have difficulty.  These browsers are slimmed down versions of their bigger brothers, and do not have all the functionality needed to process JavaScript properly.  Cross Browser Compatibility is very difficult to implement and maintain with DHTML Layers.  You cannot bookmark a layer, either, so your users will not be able to come right back to where they were.  Popup blockers may block the use of DHTML layers, as this is a common delivery mechanism for advertising.  And, DHTML Layers could affect your site’s handicap accessibility.

Implementation

Layers on the site increase complexity, and make maintainability more difficult.  If JavaScript is turned off, any functionality to show or hide layers will not work, so your users will not see it.  Developers will need to spend lots of time to make DHTML JavaScript function with content management systems, particularly when custom functionality is delivered in this way.  And, if layers are big enough, scrolling can become an issue, as the layers may run off the page, hiding content from view. 

User Experience

User Experience is the biggest reason to implement DHTML Layers.  It adds slick new interface to the hum-drum of static pages.  But designers need to keep in mind that performance impacts user experience.  This is an “I want it an hour ago” generation, and waiting even 10 seconds for a page to load will mean your users have left and gone somewhere else.  Layers are a not a standard UI convention for web development, and some users may be intimidated by the change in interface.  And, some folks may perceive layers as “popups”, which is bad for perception.

Search & SEO

Implementing site search while using DHTML Layers is very difficult.  Most search products are page based, and as stated before, layers are not pages.  Your content might not get crawled, or may be crawled incorrectly.  Layers could also cause a problem with search engines.  Your page could end up not getting indexed, or not indexed properly.  Invisible content may also be viewed by search engine crawlers as “gaming the system” or a black hat SEO practice, and may negatively impact your page rank.

Conclusion

When implementing, DHTML Layers, think twice about the impact on other aspects of your site.  Ajax can do a lot of the same kinds of things that DHTML Layers can.  Adobe’s Flash and Microsoft’s new Silverlight products can also deliver great new user experiences.  All of these have benefits and drawbacks that need to be weighed before jumping in.  You may be providing a slick new experience to your users, but you may be creating more problems than it is worth.  There are lots of other alternatives to explore.

Ideas on Ideation

Leave a reply

Ideation is a hot topic lately.

Wikipedia defines ideation as “the process of forming and relating ideas. It is a concept utilized in the study of New Product Development, creativity, innovation, design thinking and concept development.” The important part of the definition, however, is “As part of the move into Enterprise 2.0, usage of ideation in the product innovation process has become an integral element. In this context, employees or customers are invited to participate in the ideation process, via a web portal (open on the internet or intranet), where they can suggest new ideas, rate other ideas, and collaborate with the entire community in the process of ideation.”

Ideation can go too far, though. IBM has used the concept of ideation in an advertising campaign called “Stop Talking, Start Doing.” Two particular commercials stand out, one with ideators (is that a new word?) lying in a conference room, and one involving an ideation superhero.

The reason it is hot is because of a trend to enable those inside the company with a tool for collecting and implementing ideas. Dell’s IdeaStorm and Ubuntu’s Brainstorm are great examples of how a technology can enable ideation. So I decided to do a bit of Digging (just a little bit of foreshadowing there) on Google and found a number of Digg-like clones that are available. They are either open-source or hosted solutions.  Check them out:

On The Road to Mix ’08

Leave a reply

I consider myself blessed to work for a company I believe in, and in a field that I love.  Working in the field of web development is exciting.  The job is never the same.  The technology is always in flux.  Tomorrow will be different than today.  Bristol-Myers Squibb has treated me well.  And they are doing it again.  I am now scheduled to attend the Mix ’08 Conference at the Venetian Hotel in Las Vegas from March 5 through March 7. 

Mix 07 was a fantastic conference, and Mix 08 looks to be just as great.  Steve Ballmer and Scott Guthrie will be keynote speakers this year.  The sessions look really interesting.  I am hoping to attend the MVC session from Scott Hanselman, some of the Web 2.0 panels, some SharePoint sessions, .Net 3.5 demos, WPF and Silverlight sessions, and some of the UI discussions. 

Last year I documented my trip with blog posts after each one of the sessions.  I hope to do the same this year.  I was criticized by some of my peers last year that my blog posts from each session didn’t really count as individual posts (we have a performance objective to post a specific number of blog entries per year) but as one giant post.  We will see if my online trip report creates as much of a stir again. 

I am really looking forward to Mix again this year.  Take a look at the sessions, and let me know if there are any that interest you.  I can try to attend, attend, and bring back as much information for you as I can.

Netscape is Dead, Long Live Netscape!

Leave a reply

Well, it is official.  The once-popular browser, from Mosaic through Netscape Navigator and all of its Mozilla variants, fought in the Browser Wars from 1994 through 2008, and is now throwing in the towel.  My once-favorite browser has finally fallen under the weight of Internet Explorer (and Firefox, too, I suppose). 

AOL announced on December 28, 2007 that as of February 1, 2008 they will no longer be providing Netscape Navigator.  Oh, how the might have fallen.  I found out about this on Engadget – Netscape finally bows out, browsers no longer supported, but you can read about it on the Netscape Blog – End of Support for Netscape web browsers.  The Browser Wars will continue, but without one if its original participants.