Within the mobile phone landscape, there are at least ten operating systems (OSs) and fifteen browsers that require consideration when testing. Web developers should concentrate their testing efforts on smartphones. All good mobile browsers run on one smartphone platform or another. To get stats of popular browsers in your country there’s only one source of mobile browser market share information: StatCounter.

Apple, Google, Samsung, and RIM default browsers are among the top browsers because they support touch events and are all based on the WebKit rendering engine. The next level of mobile browsers include Opera Mobile, Palm WebKit for webOS, and MicroB, the Gecko-based default browser for Nokia’s Maemo OS. These browsers do not support touch events, and zooming varies in each implementation. From a pure CSS and JavaScript point of view however, you’ll encounter few problems. Of the three, Opera Mobile is the most important, because it serves as a default browser for many Windows Mobile devices where the vendor decided IE wasn’t good enough. Currently, it’s an alternative for Nokia WebKit on Symbian, the largest mobile OS.

Below is a list of all the current mobile browsers, there special features, operating systems, and devices they can be found on. Some of the browsers do not come default on phones but are among the top browsers used today.

• Opera Mobile
  • Key Features: Multiple tabs, Zoom-in
  • Operating System: Windows Mobile, Symbian
  • Devices pre-installed with Opera:
    • Nokia N90
    • Sony Ericsson P1
    • Sony Ericsson XPERIA X1
    • HTC Touch Viva
    • HTC Touch Diamond
    • HTC Touch Diamond2
    • HTC Touch Pro
    • HTC Touch Pro 2
    • HTC Touch HD
    • HTC HD2
    • Meizu M8
    • Creative Zii
    • Samsung i900 Omnia
    • Samsung i8000 Omnia II
    • Sendo X
    • Motorola ROKR E6
• Opera Mini
  • Key Features: Compressed downloads for fast browsing, Zoom-in
  • Operating System: Java
  • Devices pre-installed with Opera Mini:
    • Motorola V980, E2, L7, i1
    • Nokia 2610,3120c, 2700 Classic, 2730 Classic, 3500c, 3600, 3600 slide, 3710 fold, 3720, 6085, 5130, 5230, 5500, 5310, 5610, 3110, 7373, 6131, 6233, 6600 slide, 5070, E65, N95, N71, N73, 5000, 3110c, 6288, 6103, 6080, 6303, 6300and 8800 Arte
    • Sony Ericsson K310i, K530i, K550, W200i, W760i, Z530i, Z550i, Z780i, W910i
    • Samsung X160, E570, E420, F480, X510, X650, E900, E250, U700, ZV60, D900i
    • LG K880, KU250, KE970, and KU311
    • SAGEM My411x and P9521
    • BenQ-Siemens EL71 and EF81
    • BenQ EZ1 fight
    • Orange Rio (ZTE-G X991)
• Skyfire
  • Key Features: Display rich websites with Flash or widgets like YouTube, customizable zoom feature
  • Operating System: Android, iPhone, Symbian, Windows Mobile
  • Devices compatible with Skyfire:
    • Android 1.5, 1.6, 2.0, 2.1, 2.2
    • iOS 3.1.3, 4.0, 4.1
• Safari
  • Key Features: Display rich websites like YouTube, zoom feature, excellent touch-based user interface
  • Safari accounted for 62.17 percent of mobile web browsing traffic in October 2011
  • Operating System: iPhone
  • Devices:
    • iPhone
    • iPod touch
    • iPad
• Google Android
  • Key Features: Display rich websites, zoom feature, touch screen interface
  • Operating System: Google Android
  • Devices:
    • Android powered phones
• Microsoft IE for Mobile
  • Key Features: Standard browser features
  • Operating System: Windows Mobile
  • Devices:
    • IE Mobile comes loaded by default with Windows Phone and Windows CE.
• Firefox Mobile
  • Key Features: Mutiple tabs, Awesomebar, password manager, Add-on support, PC-syncing
  • Operating System: Nokia Maemo, Windows Mobile 6.0 (alpha)
  • Devices:
    • Android 2.1 and above devices with an ARMv7 CPU
• Dolphin HD
  • Key Features: Gesture browsing, Webzine, tabbed browsing
  • Operating System:  Android, iOS
  • Devices:
    • Android
    • iPad
    • iPhone
• Blackberry Browser
  • Key Features: Standard browser features
  • Operating System: BlackBerry OS
  • Devices:
    • Blackberry devices
• S60 Web Browser
  • Key Features: Standard browser features
  • Operating System: S60
  • Devices:
    • S60
    • Symbian Mobile Phones
    • Nokia N8
    • Nokia E6
    • Nokia E7
    • Nokia C6-01
    • Nokia C7
    • Nokia X7
    • Nokia 603
    • Nokia 700
    • Nokia 701

Recently we developed a custom WordPress site for a client that has an integrated lightbox image gallery. It was an easy plugin installation and activation process. The next step was to add in the images to the media library and then call the shortcode inside the code dialog in the specified page. Everything looked great on thumbnail preview, but when clicking on one to view a larger version the lightbox would not show up. The larger image would preview in a separate window.

First, is to check to see if the lightbox version works together with the WordPress installation and custom theme. WordPress notifies of any updates. Second, check to see if any of the plugins are not compatible with the lightbox plugin, by checking one at a time. If any of them are not compatible, it’s good practice to notify the plugin developer, so they can try to work out a solution for future versions. Third, is to check against any custom codes to see if anything is conflicting. In this particular case it happened to be a jQuery conflict on a particular plugin. By updating these conflicting files it allowed the lightbox to work properly.

It’s often common to put majority of the emphasis on the functionality of a site. While this is important, the value of good design needs to be recognized. It is possible to overlook the design and the value of content above and beyond what is strictly needed. We see that this type of extraneous content can be very important when we look at how human beings engage with the websites they use.

source

In psychology, Maslow’s hierarchy of needs is a food pyramid of human needs. The base of this pyramid is “physiological” needs. Before any other needs can be met, physiological needs have to be taken care of. The next level is “safety”, then “love/belonging”, and “esteem”. Only when all these more basic needs are met can we being to attend to the highest need, “self-actualization”.

source

A similar hierarchy of needs can be applied to web interface design. The base of the pyramid and most fundamental need is that a site be “functional”. It has to enable a user to complete a specific task. The next element is “reliability”. The site has to be online and working whenever a user attempts to access it. After this we have “usability”. Things have to make sense and the user should be able to figure out the site without to much learning. Up until recently, this was a high as the pyramid went. But now we have learned that the actual “pleasure” that is derived from a site contributes very much to how effective the site is.

Looking at some basic info about how brains process information, we can see how the pleasure factor when viewing a site can be very important. Emotionally charged events last much longer in our memories. They are also recalled with greater accuracy than neutral memories. Part of this is due to the fact that when we experience something that speaks to us more emotionally, the brain releases dopamine. Dopamine actually acts as a type of marker, signifying that what we are experiencing is important and this allows the information to be more robustly processed with more detail and a greater ability for recall. You can see how this would be incredibly useful to engaging your users and enabling the content of your site to be stored in their memories with greater strength and accuracy.

Another aspect of how good emotional design can contribute to the user experience is emotional stimuli is disarming and engaging. It makes us comfortable and signifies that this is something we should be interacting with on a deeper level. Molecular Biologist and author, John Medina states that using emotional stimuli to build positive memory is actually a very effective brain hack and a great way to engage the users ability to learn.

Our perceptions are critical. Usability is absolutely necessary but not everything, and the value of pleasure in a design should not be disregarded.

Ever been mystified by the numerous acronyms involved in DNS and/or what the heck DNS is anyway?  This fun six-minute video is well worth the time and does a really good job of explaining the mysterious world of the Domain Name System.  Of course, our Web Hosting experts can also assist with any questions you have, so be sure to contact us!

First I would like to say I am a Web Developer here at Beacon so Design is not my specialty. However, I’ve gradually been getting annoyed by the round corners that are on most social icons. I think there is always the ‘too much’ factor and for me I’ve been given too much round icons. So the only thing that looks fresh and appealing to me anymore is square. I’ve looked at other free icon sets out there and still have yet to find a basic and simple square set. So I decided to give it a shot :).

All these icons are vectors I created within Adobe Fireworks CS4. For most of these I used the method mentioned in this post (http://trentrichardson.com/2009/04/11/convert-bitmaps-to-vectors-in-fireworks/) and others I copied the company provided vector into fireworks and modified from there. Feel free to download and do what you’d like with them. I have them all within one file for ease of creating/posting but again each is its own vector so you can copy it into another document or slice them out from the file.

Download Here

This Vector set includes:

• Facebook
• Twitter
• LinkedIn
• Pinterest
• WordPress
• Google +1
• RSS
• SlideShare
• Goodreads
• GitHub
• Forrst
• Amazon
• Blogger
• YouTube
• Dribbble
• Skype
• Vimeo
• Delicious
• Technorati
• Last.fm
• StumbleUpon
• Yahoo!
• MySpace
• Foursquare
• Flickr
• Tumblr
• Meetup

Beacon kicks off its 2012 conference series with ASPDotNetStoreFront’s user conference in Ashland, Oregon on March 20th.  Members of our Development Team have been participating in the conference for several years, but this year Beacon wanted to exhibit the great things we have been doing with the platform in regards to design, development, marketing and hosting. So we’ll not only be soaking up knowledge in the sessions, we’ll also be sharing some on the exhibit floor.

Myself, Tracy Dirks (Dir. of Development) and Mike Wood (Sr. Engineer) will be manning the booth throughout the conference.  I’ll be holding down the fort a good bit of the time while Tracy and Mike are in the sessions, so I’m a little bummed to miss out on the interesting topics like: personalization, multi-store, mobile, social media and integration.  So if you are at the show, come by table #6 and say ‘hello.’  It would be great to hear about your business, cool things you are doing with the product, ‘take aways’ from the sessions, your journey to Ashland (14 hours and 3 flights from North Carolina), etc.

Also, If you are interested, I’m happy to talk about some of the awesome things Beacon has done for clients like Business-Supply, Robert Ham, BMI and dozens of others.  Our team has been turning out amazing sites featuring custom design and development work as well as really powerful solutions we’ve put together in conjunction with our partners, like: Bronto, Nextopia and Windsor Circle.

As always, please help keep those less fortunate (like the exhibitors, my fellow teammates back at Beacon and the others who couldn’t make it) in the loop via #ASPDNSFconf on Twitter – we’d really appreciate it!

Have a safe trip and see you in Ashland!

There are quite a few video players out there to preview your video(s) on your website. This site offers a great video player, www.jqueryvideo-player.com.

It has support for all major browsers such as Internet Explorer, Firefox, Google Chrome, Opera, Apple Safari. Also supports mobile browsers such as iPhone 3+, iPad 1 and 2, Android 2.1+, Blackberry 6+ and Windows Phone 7+. It uses the WebM, Theora Ogg and MP4 formats. It takes the supported video format and applies it to the correct browser that supports it.

First trip to IRWD.  Quick recap.  A lot of focus on usability and what I call “mindwork”.  We are at a point now where everyone is finally starting to look at conversion optimization onsite via improving usability and calls to action; offsite via personalization and segmentation.  When I say “mindwork”, I’m referring to the marketing and technical minds formulating actionable insights behind the tools and data.  Certainly, as I’ve said for years, the right tools and technology are essential, but successful websites have one or more creative, analytical minds guiding the operation.  More of these types of people were at IRWD, so it was fantastic seeing how various companies brought business and technology together.  Most of the sessions that I attended focused on unique ideas, usability and decisions being made to improve conversion rates based on data, testing, more data and more testing.

The exhibit hall had more Usability companies that I expected and of course there were a variety of companies promoting web design/development services, ecommerce software, site search software and digital marketing services, along with some firms that offered some interesting tools and services.

Here’s a random set of notes that and thoughts that I jotted down during the various presentation.  I didn’t attend every presentation.

• 13% growth in online retail in 2011.  (Corrected, originally stated 19%)
• 13% of web traffic mobile now.
• Asking visitors to register before checkout is still poor practice.
• Amazon & LL Bean continue to be what everyone compares to (but it is important to remember that each business has its own unique needs and very different budgets)
• Grainger
• gets 9M monthly visits, produces $2.1B in eCommerce sales, receives 2M daily product searches.
• was originally B2B and only dealt with business owners – but now it has opened a B2C channel to go directly to end users.
• uses GPS w/ mobile to help customers find their store and provide directions from wherever they are.
• It’s all about knowing your customers – and designing accordingly.
• Important features: I LIKE ALL OF THESE when financially feasible for our clients.
  • Order History (reduces inbound calls, customer-focused service, helps with re-orders).
  • Custom Catalog in left nav (for clients based on what they normally purchase).
  • Previously Purchased Items in left nav (or as part of site search results).
• Need to spend more time analyzing onsite search logs
• Setup “Click to Call” or “Click to Chat” when a customer has been on a page a long time or if possible, when they move their mouse to the top right (looking for help/support links).  This feature typically increases conversions and decreases cart abandonment.
• Belk – believes in “light and simple” home page, minimizing the number of things that are promoted to limit distractions.  Max of two levels in left nav and 4 horizontal thumbnail images on listing pages.
• Tools:  Clicktail (Video/User Monitoring feature), VisiStat, Adobe SiteCatalyst
• I liked Daryl Logullo’s concept of the “Principle of Continual Gradual Improvement”
• David Goldsholle pointed out that it is critical to get detailed SLAs from vendors (hearing that they have done this for many years isn’t sufficient).  He also mentioned Google Commerce Search for its extended attributes.
• Mike Sidders pointed out that the old school continuum of “Attention, Interest, Desire, Action” still works – just needs to be mechanized via internet technology now.
• Lots of Usability firms in attendance as companies move from worrying about traffic to improving conversion rates via usability improvements, personalization and segmentation.
• The top two things that mobile users do while shopping are search on price and search for reviews.
• Check out Trello.com and KingArthurFlour.com to see responsive web design (re-size the screen and watch what happens)
• Confirmation about the need for SEO specialist involved in Design/Development process.
• One speaker mentioned that when you have a good web development company, recognize it and take care of the relationship because there are a lot of poor web dev companies out there.  (Gotta agree!)
• Checkout Steve Krug’s book, “Rocket Surgery Made Easy”
• Mention of 4Q as a great survey tool.
• Online reviews build trust and help improve conversion rates.  Nathan Decker (Evogear) stated that 4-7 reviews is enough to influence the purchase of an item.
• Check out PowerReviews.com, Monetate.com, PivotLink.
• 1-2 optimization tests per month is not enough.  One company, I believe it was Freshpair.com ran 50-100/month to expedite overall site improvement.  Expedite continual improvement w/ significantly more tests.
• Checkout Book:  “Start With Why”
• Very, very impressed with Halley Silver’s presentation about King Arthur Flour.  Checkout the website, kingarthurflour.com.  Concept of “Responsive Mobile First” is the way to go.  Takes more time, but the design becomes device agnostic.  She estimated 2 months to develop 5 templates.  Build mobile site first; tablet, second; website, third.
• Search “320andup” in Google and read through some of the links.
• Check out Threadless.com.  Very cool concept… have artists submit artwork for t-shirts.  Have the site’s community select a winner each week, print the winning design on t-shirts and sell them online.
• Great presentation/discussion between Seth Freiden (US Toy Co) and Shaun Ryan (SLI Systems) about the value and importance of Site Search (esp. tuning and cross-site searches)
• Exhibit Hall – Chatted with
• Chris Bannister (Nextopia).  They have a great product that is priced right – plus (and this is important) their customer service is incredible – probably the best of any of our partner vendors.
• the folks at Bridgeline Digital (IAPPS Suite).  Beacon is a development partner of theirs.  The IAPPS integrated platform (CMS, eCommerce, Marketing, Analytics) eliminates a lot of the chaos of integrating multiple 3^rd party software solutions.
• Lee Alison Rable at MyBuys.  Really like their product/services.
• Lindsay Rice at Tobii.  They seem to have a great list of products/services with respect to Usability research and testing, particularly eye-tracking (which I saw offered by several other exhibitors).
• Ortery – Cool to see their 360 image product in action.  Seemed to be priced right to expedite the creation of product images for ecommerce websites.

That’s It.

Greensboro (Feb-2012).  Since its early days, Beacon Technologies has had its hands in higher education.  It all began in the late 90’s when Accenture hired Beacon as a subcontractor to build the FAFSA and Campus-Based systems for the U.S. Department of Education.  Shortly thereafter, Bearing Point brought Beacon in to redesign and develop the website for Texas Southern University.  Then, back in 2005, after evaluating many different content management systems, Beacon hooked its wagon to Hannon Hill’s CMS product, Cascade Server, which is used widely by universities.  Now, in the last several weeks, Beacon has added Syracuse University, the University of Wyoming, the University of Scranton and the Wharton School (University of Pennsylvania) to an already impressive list of Higher Education clients.

“Cascade Server is a feature-rich, easy-to-use and well-supported product which is why so many colleges and universities use it,“ says Mark Dirks, Beacon’s CEO.  “The fact that we work with major universities all over the country now is a real testament to the great web technologists and customizable products that we have put together here at Beacon.”

Higher Education calls on Beacon for many different things, primarily custom web development and design, but also for mobile site development, digital web marketing, web hosting, strategic consultation and Google Analytics support.  “Most university websites have multiple stakeholders involved because there are typically several schools contained under the university umbrella,” says Dirks. “I believe Beacon’s experience with large technology projects helps bring efficiency and cost savings by walking all the parties confidently and successfully through the process.”

Last year, Beacon worked with Winston-Salem State University to redesign its entire website with over 3000 web pages.  After the project, Dr. Brenda Allen, the University’s Provost said, “Beacon’s experience with Cascade Server & proven web development methodology were key factors in guiding our Steering Committee and University through the entire process. They delivered a state-of-the-art website with the functionality and administrative capabilities that our students, parents, faculty, alumni and administration need in today’s technology.”

Here’s a sampling of Beacon’s clients within the Higher Education vertical: 

• Syracuse University
• University of Pennsylvania
• University of Hartford
• Framingham State University
• University of North Alabama
• University of NC – Greensboro
• North Carolina A&T University
• St. Mary’s College of Maryland
• Georgia Tech
• University of Wyoming
• Texas A&M University
• American University of Antigua
• University of Scranton
• Randolph Macon College
• University of Houston
• Rollins College
• Wake Forest University
• Florida International University
• Winston-Salem State University
• Texas Southern
• Albright College
• George Brown College
• North Carolina State University
• Southeastern Baptist Theological Seminary

“These relationships also lead to other education-related opportunities with clients like The Princeton Review and the Massachusetts Library Information Network (State of MA), which have been with Beacon for 4 years and 10 years respectively,” says Dirks.  “I’m also excited about a few other major colleges that we expect to sign during this quarter.”

Beacon Technologies, headquartered in Greensboro NC, has been a leader in web development, web marketing and managed web hosting since 1998.  The company specializes in delivering web solutions that effectively grow its clients’ business through creative, easy-to-use design, driving more web traffic, improving conversion rates for sales and leads, and providing reliable web infrastructure.  The company distinguishes itself not only due to the mix of custom, integrated web services, but by the deep level of technical expertise it brings to each specific area.  As a result, Beacon’s customers can obtain a complete and effective web presence that automates, grows and connects their business via the web.  Beacon was selected by Google as a Google Analytics Partner, by Hannon Hill as a Cascade Server CMS Development Partner, by AspDotNetStorefront as a Premier Development Partner, by Bridgeline Digital as its IAPPS Product Suite Solutions Partner for the Carolinas.

Using Google Web Fonts is a great way to integrate nice web fonts that aren’t the standard. There are a large variety of fonts with settings to choose from.  Within the Google Font website, you can search, filter font types, preview a word, sentence, paragraph, change scripts, sort options and add or remove from your collection. It’s very easy to apply to your website with a simple CSS style link and CSS font code snippet supplied by Google.

To get started, go to http://www.google.com/webfonts

1. Select the desired font or fonts with settings they offer and click “Add to Collection”.
2. Click “Use” in the bottom right of the website. Note: Once here, you will see the “Page Load” impact it will have on your site. So the less font selections the better, unless necessary.
3. Embed your Collection into your web page, copy the code as the first element in the <head> of your HTML document.

Example from Google:

<html>
   <head>
      <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
      <style>
         body {font-family: 'Tangerine', serif; font-size: 11px;}
      </style>
   </head>
   <body>
      <div>Making the Web Beautiful!</div>
   </body>
</html>

You call also add the font CSS to your external CSS style sheet for a single reference.

h1 { font-family: 'Tangerine', serif; font-size: 11px;}

That’s all there is to it on using Google Web Fonts.