I have to share this with you.  If you are reading the Beacon Blog you are likely a customer of ours, an employee, a friend, family member, or perhaps a future customer.  Regardless, you likely have some interest or association with web technology.

I want you to visit a website today.  This is the first ‘website’ (if you can call it a website) that I have seen in the past 10 years that simply blows me away from a creative perspective.  I have spent the past 10 years consulting and supporting Marketing Directors and I have never seen such a creative idea.  At first I was confused and skeptical.  But after 15 seconds or so I started to understand it and I am impressed.  The site is wildly creative.  It won the 2010 Webby Award for Professional Services category.  It is highly creative and fun and fascinating and it certainly created a buzz for this Agency.  Our industry is constantly evolving and it is great to see new and creative ideas.

Now you may be confused and think that I messed up this link but trust me, the link is working correctly.   Go visit the site today, BooneOakley at: www.booneoakley.com

Beacon has an exceptionally creative team of designers and we are constantly meeting and exceeding the demands and expectations of our clients!  Call us and lets strategize about your future website.

For more information about Beacon Technologies and our web services, please contact me at 336-232-5668.

Patrick

Patrick Flanagan, Business Development Manager

pflanagan@beacontec.com

336-232-5668

Due to the infrequent use of class or ID attributes on important elements, styling can require a bit of digging through the storefront XML Packages.This combined with the use of advanced CSS selectors alleviates many of the issues that may occur during the design and styling of an ASPDotNetStoreFront site.Here are a few XML Packages to consider preparing ahead of time that are commonly used in an ASPDotNetStoreFront site:

• Entity.grid.xml.config – grid of products/categories package
• Entity.gridwithprices.xml.config – same as above, but includes pricing
• Entity.categorties.xml.config – Package for displaying categories
• Product.simpleproduct.xml.config – Package for product page
• Product.tabbedUI.xml.config – Tabbed variant of product page package

Before you can begin modifying any of these, (pre-version 9!) you need to specify that you will be using a custom XML Package by making a change to the file found in the root “XMLPackages” directory. This can be as simple as adding a space at the end of the document.Once this is done, copy the XML Package to “/skins/Skin_ID/XMLPackages”.

The nice thing about these custom packages is it allows you to go through many of the page elements and add classes, IDs, or in-line styling where CSS is needed.Not all tags can be modified inside the XML Packages, specifically tags that are generated by “<xsl:value-of name=’ASPDNSF: {…..}’ />” and other ASPDotNetStoreFront elements.Adding div tags around elements with an ID can provide a way to select elements only within that div, even if you can’t get to the code.

<divid=“view-larger-image“>
<xsl:value-ofselect=“aspdnsf:LookupProductImage(ProductID, ImageFilenameOverride, SKU, ‘medium’, 1, $AltText)“disable-output-escaping=“yes“/>
</div>

Even if there is a wrapping div, by adding id=”view-larger-image”, we can make styling changes to images, links, etc.This requires viewing the page in a browser to know what elements to target.The above lines of code are not intuitive to the resulting tags.

Using advanced CSS selectors may omit XML Package changes, provided the CSS doesn’t result in unwanted site-wide style changes.Take the image below as an example, which is found directly below the product image.It is wrapped in the same div (view-larger-image) as shown above in the example.

In order to put a border around our product image, but not include this View Larger image, the code generated by the ASPDNSF gives us limited options.The CSS could be written to make all images found in the view-larger-image div receive a border and the explicitly set the magnifying glass and text to no border with:

img{ border:solid1pxblack; }
img[src='skins/skin_1/images/showlarger.gif']{ border:0 }

Using attribute selectors in your CSS works perfectly with image ‘src’ attributes. (Unless file names or hierarchy is changed!)Be aware though, that a line of CSS as simple as “div[align=’center’]{ border:0 }” may create adverse effects on other pages across the site.The ‘src’ attribute is good for images that are not generated dynamically.A product image would not be suitable, because there would need to be a line of CSS for every possible product in the site.The ID and Name attributes are dynamic for the product image, so any selector utilizing these attributes would be of no use.

If you observe the structure the ASPDNSF tag generates in a browser, (using Firebug or View Source) you can look at structural ways to get your CSS selector matched up with the elements you need.This is what is generated by the above aspdnf element:

<divid=“view-larger-image“>
<divalign=“center“>
<scripttype=“text/javascript“>
function popupimg(url) {
window.open(‘popup.aspx?src=’ + url,’LargerImage3196528′,’toolbar=no,location=no,
directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no,
width=500,height=500,left=0,top=0′);
return (true);
}
</script>
<divstyle=“display: none;“id=“divProductPicZ31“>
</div>
<divid=“divProductPic31“>
<imgborder=“0“alt=“XXXXXXXXXXX“src=“images/Product/medium/XXXXXXX.jpg“title=“Click here to view larger image“onclick=“popupimg(‘images/Product/large/31.jpg’)“style=“cursor: pointer;“name=“ProductPic31“id=“ProductPic31“><!-—This is the image >
</div>
<br>
<imgheight=“4“border=“0“width=“1“src=“images/spacer.gif“>
<br>
<divalign=“center“>
<aonclick=“popupimg(‘images/Product/large/XXXXXX.jpg’);“href=“javascript:void(0);“>
<imgborder=“0“align=“absmiddle“alt=“XXXXXXXXX“title=“Click here to view larger image“src=“skins/skin_1/images/showlarger.gif“><!-—This is the image shown above >
</a>
</div>
</div>
</div>

This provides other means of using CSS selectors to style your elements.With this method, no default ‘img’ style is made for other ‘img’ tags and instead only targets the product image.

#view-larger-image div+divimg{border:solid1px#000000;}

Have you ever visited this site? The Best Designs

I have been going to this site for years and I am constantly impressed by the creative ideas that are being developed into websites across the globe.

I am artistically and graphically challenged for sure.  One of my brothers is an exceptional artist and designer but I missed out on those genes.  Since I am limited artistically I use The Best Designs site to discuss and share ideas with clients/prospects.  It is an excellent site to get a sense of the taste and expectations for a client/prospect.

We have an excellent graphic design team here at Beacon.   Our lead designers are exceptionally creative, talented and work very hard to stay up on all the latest trends!!

One recent site that we completed last month that is getting a great response is Framingham State University.  The client loves it.  I have received several calls and emails from friends and clients that think this site is excellent.

We also recently launched a redesign for our long time client, Texas A&M Foundation.  Check out their site!!

Thanks for reading this blog entry!!!

Take care for now,

Patrick

336-232-5668 direct, 336-944-4187 mobile

Patrick Flanagan LinkedIn

We did a quick theme we think you’ll enjoy inspired by a hot new trend in photography, light graffiti, check it out!

 Light Graffiti WordPress Theme

It’s not uncommon now-a-days to hear this weird jargon thrown around called ‘AJAX’, but what does it stand for?

I’ve yet to read a better history and break down than what Jeremy Keith wrote in his book entitled “Bulletproof AJAX“. So without further ado, I’m going to quote Keith a bunch:

“Jesse James Garrett is an information architect, author and founding partner of the San Francisco-based company Adaptive Path. In February 2005, he published an essay on the Adaptive Path Web site titled ‘Ajax: A New Approach to Web Applications.’ In this essay, Garrett coined the term Ajax to describe techniques used by a new kind of Web application…. It was originally intended to be an acronym standing for ‘Asynchronous JavaScript and XML.’ ”

Keith goes on to explain that the acronym implies that asynchronous and XML are requirements within AJAX, which just isn’t true. (JavaScript is definitely required in most cases, but the AJAX behavior could be done through Flash or Java as well, just to name a couple.) “Jesse James Garrett later updated his essay, making it clear that Ajax is not an acronym.” The technology has been around before Garrett as well but coining the term made it possible for most of us to talk about a set of technologies, that when used together, create a new user experience. So think of AJAX more as a user experience than a certain set of technologies.

Garrett created the term AJAX so he could more easily have a conversation with clients and his developers alike. So why is the AJAX behavior different than your traditional development? 

Example
- Tradition: You login at a web site and notice your  browser has to think for a bit while it either refreshes your current page or goes to a new one. This makes you have to reload the same content or be forced to load new content.
- AJAX alternative: You login at a web site, it gives you a little notice saying that you’re now logged in. That’s it. No loading required on your end.

What AJAX does is allow the user to send and receive information back from the site without ever having to load content. It’s not that the technology is that much smarter, or psychic, but that all the loading happens behind the scenes, putting the burden on what matters the least, in the code. What matters most is the user and their experience on your site.

So why ask for it?

AJAX allows for a faster, smoother user experience. It’s becoming so mainstream lately that it’s making more traditional web development seem bulky and slow to use in comparison. Ever used Google Maps? Yep, all AJAX. Even the competition switched over to use their techniques – Mapquest and Yahoo, to name a couple.

It’s also pretty neat on our end too. This affords us with some pretty neat effects we can do easily for our clients’ sites, like animation.

Now that you’re just a little more knowledgeable on the subject, I hope your next web site will include a lot of AJAX implementation to give your users a smoother experience. Feel free to contact us for more information regarding AJAX implementation on your site.

Every usability expert, designer or developer could give you different opinions about what makes forms more usable, less confusing and less daunting. I sought out to research all the experiments and form a general list of things that developers, designers, and gurus should and should not do. The rest, as usual, always depends on the context of the project.

After combining this research with fellow co-workers and everyone’s combined knowledge, I generated a short list of common things you can do to improve your forms, but I want to discuss what types of forms I’m talking about first.

One type of form is the generic one: I’m talking about the generic “contact” form on the web, the one with fields that aren’t even new to my grandmother anymore. Fields are empty areas for you to fill in data, usually personal data. Fields like “Name”, “E-Mail Address” and “Comments” are very well known. Also, forms like “Request for Quote”, “Search” or “Sweepstakes” have much in common with the “Contact” form: they are generic, no task required, “enter in that information yet again”, forms.

The other type of form is one that requires more thought on the user. Forms like these include insurance quotes, submitting payment, government forms, loan requests, etc. These are the types of forms you receive in the mail in a booklet and have an instruction book accompanying it. These forms are quite different from the “generic” forms I mentioned above. The more data and thought necessary required from the user, the more division and instruction is needed in the form itself. In general, I think each form in this division should be designed in each instance, so I don’t think general tips apply all the time, but most of the ones I will list can apply.

So we will only be discussing the generic form, which is a good base for any working professional in this area I think. This form shares a commonality with many others, your contact form will be at least 50% identical the next guy’s contact form, and this means that already your user base is experienced with your form. Which brings me to the first tip:

#1 Don’t break convention just because it looks neat or you think it’s better
Break convention only if it works better. Your forms should be putting your user first. They are active participants ready to endure your form gauntlet – do not change their minds! Making your forms work should be the number one priority. What’s the only way to know if it’s working better? Field testing.

#2 Do field testing
I can’t agree with the usability experts more: field testing always shows you what went wrong or right with your forms. I understand that many companies lack the resources to hold usability tests, but they are a necessity. My favorite thing to do is actually allow the client to field test by bringing them in and watching them use your form. Make your coworker do it. Make your mom do it. Don’t tell them you’re testing the usability, make something up. If you are able to watch them use it, you did not guide them through it and you learned something from the experience, congratulations, you just did usability testing. Now take notes and correct what went wrong. This won’t be as accurate as some measurement tools the experts have, but it’s just as helpful and it was free. Have to say, nothing is more embarrassing then to watch that client months later use it and complain because it makes them frustrated or simply does not work. Field test before it’s too late.

#3 “Use the right field for the right task”¹⁸
Crescimanno and Nielsen argue that every field type should be appropriated correctly with the label. For example, if your label said “First Name” you should not use a radiobox for your field because then the user cannot correctly fill in their first name. A more complex example would be if your label said “Expiration Date” and you gave the user 3 drop down menus, 1 for month, 1 for day and 1 for year. The month and day fields have an absolute beginning and end, 01-12 for month and 10-31 for day. The year field, on the other hand, is a bit arbitrary since we are concerned with when said subject expires. Do you list the years until 2012? 2050? Should the user have to endure a very, very long drop down menu or should the user face having their year not even listed? If you put into too many years or not list enough, respectively, this could happen. Why not just make all 3 fields free entry? Or why not require just month and year in the same format and make it easier not only for the user, but also your developer? Usually there is a good solution to every type of data you need. And like Crescimanno suggests, stay away from multiple-selection boxes that are confusing (and may not even work in all browsers).

#4 Don’t let your clients pick your form structure for you
Unless your client is a certified master in creating usable forms, don’t allow them to pick what type of data they “think” they need. Have a good sit down with them and ask considerate questions about why they think they need this form, what do they expect from the user, what data are they looking for, how do they intend on using the data, and so on. I guarantee that your company (full of qualified, wonderful people) can create not only a more usable form, but also a form that integrates better with the database, integrates better with the graphical design of the website it is in, does not deter the user away, that takes the least amount of time to fill in, etc. Clients are blind-sighted by the bigger picture, take control of this crucial analysis process.

#5 Use informative error messages¹
Don’t tell me the form encountered a critical error after I hit “submit”. Don’t tell me my e-mail address is invalid when I only have not registered with it yet. Don’t tell me my password is not strong enough, tell me why. Please.

#6 Use better placed labels¹²³
Do not make them bold, do not place them far away, make them consistent with other labels, right-align if you won’t place the label above the field and don’t use illegible fonts.

#7 Quit putting in a reset button⁴
Reset buttons are accidentally hit instead of the “submit” button when the user submits a form, so what purpose does it serve?

References:
1 A List Apart: Sensible Forms: A Form Usability Checklist
2 UX Matters: Evaluating the Usability of Search Forms Using Eyetracking: A Practical Approach
3 UX Matters: Label Placement in Forms
4 Creating Good Websites: Usability
5 Sitepoint: 7 Steps to Usable Forms
6 Krug, Steve. “Don’t Make Me Think: A Common Sense Approach to Web Usability”, 2000, New Riders Press.
7 Nielsen, Jakob. “Designing Web Usability”, 1999, Peachpit Press.