Style Guides for Web Design and Development

style-guide

Developers, designers and web administrators are always looking for ways to improve how they manage the look, feel and complexity when building a web site. This can be difficult when we have multiple team members or new members involved in ongoing projects. So how can we help maintain global branding and development patterns for sites that all users can utilize? Style guides.

What is a style guide?

A style guide is a document of code standards that details the various elements and patterns of a site or application. It is a one-stop place to see all visual styles of the site such as headers, links, buttons, color pallets and any visual language that is used on the site.

2015-09-15_1518

Check out a few of the other style guides below published by some great brands.

Why should you use a style guide?

Style guides take extra time to develop up front but we have found that they have numerous beneficial factors for developing.

  • Faster build time for new sections and pages.
  • Design consistency is easier to maintain
  • Designers, developers and content owners have a one-stop guide to reference.
  • New team members joining the project can refer to the guide for the exact style use.
  • Keeps both code and design consistent throughout the site.
  • The guide allows us to standardize our code (CSS, JS, HTML), keeping it small and quick to load.

Steps to building a style guide?

Template

Start your guide with the sites foundations. These will include elements like color palette, fonts, headers, body text and grid layouts. These basic elements are the foundation global elements of your site that set the tone for your style guide.

Patterns

Next start adding in your site patterns. These would include buttons, logos, images, icon library, form styles, etc. Any element that belongs on your site should be included.

2015-09-15_1511_001

Documentation

Documentation is essential to make a style guide successful. Your documentation is the key to keeping a consistent style and development pattern throughout the site. Documentation can be done in the code itself with comments or using interactive modals or tool tips in the style guide.

Cascade Implementation

After completing the base code you can start integrating it into your CMS system. Not only can we use a style guide for visual and front end documentation but also for how the content functions within your CMS.

The following elements can be added to help guide developers in with the site setup:

  • Formats
  • Blocks
  • Template regions such as header, footer, navigation, widgets and dynamic feeds for news/events.
  • Build out full examples of your data definition regions. See example below of Cascade Server data definition containing all site content input areas.

2015-09-15_1526

Using the guide

So you have completed building your style guide. Now what? The first step is talking to your team about how to use the guide and what updates should continue to be made during projects to it. As new member join your team reference the guide as a way to introduce them to your site styles and code languages. Utilize the style guide when testing new code or modules on your site or just as a way to present new design elements to the team. The possibilities are endless.

Your style guide will never be complete and should continue to evolve as your site does.

References

 

Keana Lynch
Keana Lynch is the Director of UX Design & Development at Beacon where she has provided leadership and consultation for over 35 Higher Education projects. She specializes in the analysis, design, and implementation of websites. Keana is very passionate about design and development strategies focused on user experience, accessibility, multi-device interactions, and technical best practices. Outside of work Keana enjoys spending time with her three dogs, hiking, kayaking and volunteering with local animal rescue groups.
By | 2017-06-16T12:24:15+00:00 September 17th, 2015|Cascade CMS|Comments Off on Style Guides for Web Design and Development

Holiday Gifts for Web Developers

Holiday WreathSeason’s greetings from Beacon! Today I’ve got a couple handy gifts that can help solve some tricky web development problems.

First lets unwrap how you can calculate line height on a client’s machine. This can be helpful when trying to truncate a block of text to not be more than say 3 lines tall. In order to do this across various browsers, devices, and zoom settings you need to see exactly how the font is rendered to the screen. To test this you need to sacrifice a chicken… sort of. See below:

You may have to add certain styling rules to the chicken if you want to measure a certain kind of font or what have you, but that’ll be different for each implementation. Now that you have that you can use whatever method you choose to measure individual line lengths to fit your container and still truncate properly, but one way I recommend is by initially truncating your string to the minimum character count that can fit in your area (like in a string with nothing but apostrophes) and then truncating by removing whole words until the element height is equal to 3 * lineHeight.

Lets see if there’s anything else to unwrap… Oh look here, have you ever wanted to post a javascript object (or array of objects) to your code behind and maybe pass the data along to the database? Did you know that by simply adding an empty asp control that uses postbacks that the page will come pre-equipped with a javascript function that allows you to do just that? Simply add this on your design file:

and suddenly you’ll notice that this function is defined on your page “__doPostBack” and with it you can post data directly to the back end. By calling the function with a target and an argument like this:

your data will be passed to this snippet on the back end:

In my example the javascript variable “myData” is a json array, and the vb.net type “MyDataObject” is a structure with matching properties so that the entire array can be quickly digested by the vb.net code. This also works in C#, though you’ll have to update the syntax.

I hope these gifts help you as you develop your own, hopefully festive, websites. Until our next festive update, Happy Holidays!

By | 2017-06-16T12:20:14+00:00 December 20th, 2013|Web Development|Comments Off on Holiday Gifts for Web Developers

Goodreads grid widget broken

Have you been trying to use Goodreads Grid Widget and not able to get it to work? Are you copy/pasting the code and not getting anything but the no script version of the grid with a } at the end of it? If so I was having the same problem and I wasn’t able to find much information online to help me.

The problem I was having was I couldn’t get the code itself to produce an actual JavaScript widget. All I’d get is a static list like this:

I did a little investigating of the copy/paste code to see that there is no actual JavaScript call within the code. That got my attention to the browser. Was my browser doing something to the code box that was messing up the widget code before I got to copy it? So I tried it in other browsers but still no luck.

After this I decided to just find another implementation out there somewhere and try to re-create it with my information. It worked perfectly and quickly (estimated 10-20 min). So along with notifying Goodreads of this issue I wanted to share with others the working solution. I’m not going to say this is the simplest thing in the world but it works. My hopes are that nobody will have to use this blog because Goodreads would have already resolved the issue and we can stick with using the copy/paste feature directly from Goodreads. You can also use the other widgets available to you that all seem to work ok. This is for anyone who REALLY wants the grid list and is willing to do the work behind getting it.

To create your Goodreads grid widget just follow the instructions below:

  1. To get to the widget area log in to Goodreads and go to the edit profile area. The link for this area is located in the drop down menu in the upper right of the site when logged in. Once there click the widgets tab.
  2. Scroll down to the Grid Widget and make the settings how you want them. Note* if you have trouble with the preview display on the left just change the max number of items and it should update the preview. This was a different bug I found when trying to Google my own issue.
  3. Once you are satisfied with the display copy the code into notepad but don’t close the browser window just yet. Scroll to the bottom in notepad and you will see an random } on its own line. You can delete this.
  4. Then at the bottom of notepad paste in the following JS call
  5. Replace the different parameters with the ones you had selected in the widget configuration area. Click image below for larger view.

Then just paste your final code into your webpage and you have a Goodreads grid widget!

By | 2016-11-22T18:22:52+00:00 April 27th, 2012|Web Development|3 Comments

Google Analytics Event Tracking in a Template File

Ever had an issue where you want to track unique events (or virtual pageviews) within Google Analytics from a template file?  For example, on an e-commerce site, you may have a series of product pages that use the same ‘add to cart’ button from either an include file or some kind of reusable wrapper.  You may want to track each ‘add to cart’ click as a unique event for that specific product, not just the product section as a whole.  Since the actual JavaScript snippet for event tracking can only be placed into these file once, this would seem to post a problem.

Here’s the Solution.  In this case, we are going to use the URL of each page to serve as a unique identifier for the event tracking.  If the URLs are not unique among the pages where you want the event tracked, there is a slightly more complicated solution that you can contact me on Twitter for.

In the <head> of the pages that you want tracked, place the following code snippet (or save this snippet as a JavaScript file and reference it):

This snippet will grab a 3 character unique ID out of the page URL on which it appears.  Simply replace the XX in the code above with the 2 characters that precede the unique ID in the URL.  If the ID is only one character long, then you have it.  If it is 2 characters, replace the “+3” above with “+4”.  If it is 3 characters, replace the “+3” with “+5”, and so forth.

Note: If XX appears multiple times in URL, you will want to make it longer than two characters to ensure that you get the identifier that you want.  Just make sure to adjust the ending portion of the substring accordingly.

Now that we have our unique ID, the rest of the event tracking is easy.  For your onClick or onSubmit event, the tracking code for GA usually appears as:

With ‘Category’, ‘Action’, and ‘Label’ each being strings that the coder enters to display in Analytics.

In this case, we’re just going to make one adjustment:

‘Label’ has been replaced by passID(), the function we created in the <head> of the page for the uniqueID.  You could also replace ‘Category’ or ‘Action’ with the passID() function as well, but I think ‘Label’ makes the most sense as these pages are going to be similar in nature coming from the same template file.

That’s it, the unique ID will now show in the label section of GA.  Feel free to contact me with any questions and I’d love to hear about any case studies where you use this.

– EJW, follow me on twitter: @ejwestksu

By | 2016-10-31T11:19:08+00:00 November 11th, 2011|Google Analytics|Comments Off on Google Analytics Event Tracking in a Template File

The Redesign Bug

We recently launched the Beacon site with a new design which included a handful of jQuery animation, many of which had replaced the the previous design’s Flash-intensive content. We have recently come across an issue with the jQuery library with some builds of IE7 and IE8 that resulted in an extensive trail of debugging. We concluded that it was a browser issue (even in different OS environments) that was only fixed by re-installing IE. Here I will outline the issue and the debug trail–and hopefully maybe even think up some potential fixes that weren’t explored when testing was originally performed.

The Issue

In IE7 and IE8 we found that refreshing the homepage would crash IE and sometimes handle restoring the tab, other times not.  Microsoft has acknowledged this error in an KB article.

Error Screenshots

Initial view of most common error displayed.

Error message that would periodically show right before the tab recovers.

Details of error.

Advanced error detail screen.

When tab is not recovered, this screen is shown. Had to repeatedly refresh until this error occurs.

Just-In-Time Debugger error found from a different machine.

The Debug Trail

  • Initial replication of issue in IE 8.0.6012 on one of the test machines using a Windows XP environment.
  • Attempted browser-configuration changes that might’ve caused issues including:
    • Privacy Settings
    • Security Settings
    • PrivateBrowsing
    • Add-Ons disabled
    • Just-In-Time Debugging (picked up from a slightly different error that was sent to me as a screenshot from Mark Dirks — last one on right shown above) Unfortunately not of these seemed to be the culprit.
  • Disabled JavaScript in IE altogether–which of course fixes it but not what we we’re aiming for. This confirms it is a JavaScript/jQuery related issue
  • Attempted using different versions from currently used (1.6.1) to most recently published version from jQuery site (1.6.4) – tried both compressed/uncompressed versions without any success.
  • Checked a  changelog of jQuery since version 1.6.1 onward for IE7/8 errors. *Anything related to these browsers I had checked out scripts for any instances of (CSS background-image in jQuery and other function calls)
  • One Google search led me to a site that reported changing the jQuery file name had corrected their similar mshtml.dll error—-not the case here)
  • Double checked the in-line JavaScript as well as .JS file functions dependent on the jQuery library contained no redirects or any instance of the window.location method Since the IE8 error that comes up sometimes on the test machine says the browser attempted to load more than twice) – the only instance of this I found is a comparison checking if ‘#beacon-video’ is in the URL and if so, it runs a function to scroll the Beacon video into view and sets the tabs display(css) values. The window.location value is never assigned anywhere.
  • Checked that there weren’t multiple instances of window.onload or jQuery(document).ready()
  • Ran the jQuery library file through a beautifier to get a better look at the pin-pointed trouble spot you found and checked for any obvious issues. Justin Klingman found that in the compressed library he could comment out the last half of the code which removed the crash so before ‘beautifying’ the code I had marked this position with a comment and looked in the region after the code was cleaned up.
  • Removed all other scripts from the page to see if those dependencies may have had an impact on the crash, but removing them all (including the JavaScript function calls in the body,) except for the jQuery Library. No difference, same crashing effect.
  • The only change that did successfully fixed the crashing tab to load was removing jQuery from the page, however, when the content of another root level page (the SEM pages) into the root default document, that loads/refreshes fine without crashing. The only difference between interior/homepage in terms of JavaScript is the presence of the homeScripts.js file and the inline function calls on the homepage. After further testing this, removing only homeScripts.js still crashed the tab on the homepage (unless jQuery was also removed) — All internal pages use the same copy of the jQuery Library and they don’t crash, so the exact source of what’s crashing the page/tab is still not clear to me.
By | 2016-11-22T18:07:35+00:00 October 13th, 2011|Web Development, Creative Design|10 Comments

Javascript Mouseover Shenanigans

I ran into an issue with the JS mouseover event while scripting some extra functionality onto our homepage last week. I would expect the issue to be more commonly reported or documented, however I found few hints or online resources that discussed the matter after doing some thorough searching.  The problem I faced was anytime I’d hover one of the child elements (the links) to the containing div, the mouseout event would trigger and fade out the box—and the links with it… And un-clickable links are no good.   So,  mouseover on child elements triggers a mouseout of the parent. The page requirement was to have a link that once hovered, faded in a box with links contained inside—and when you hovered off, the box would fade away.  Naturally, I anticipated that the child elements of the div would still be considered “moused over” the div, however this isn’t the case and requires further DOM manipulation.

The instant the mouse cursor entered the box illustrated above in red, the entire box would fade out. The code looked similar to the following condensed markup:

I did manage to find an article that discussed this, however, the provided solution was not cross-browser compliant—a concept we work pretty hard at Beacon to maintain. The article is available at QuirksMode.org. One consideration was to pick up the location of the box once the mouseover event was triggered (faded in) and then tracking the mouse coordinates in comparison to a region of pixels around the box, to fire the fade-out routine. Instead, I managed a way by conditionally allowing the mouseout event to fire. Here’s a solution:

So, what changed? When the page loads, two boolean variables are defaulted to false–One for tracking when the Div is moused over, and one for all the links. The boolean values are switched to their respective state when mousing on and off the links or the Div box. Since the onmouseout is triggered each time we mouse over those links, we’ve put a 250-millisecond delay in calling the hideLinks function (only on the containing div’s onmouseout attribute) so that the variables have time to swap and under the condition that the user is neither hovered over the link or the div–and the box persists with clickable links!

By | 2016-11-22T10:59:21+00:00 July 8th, 2011|Web Development|Comments Off on Javascript Mouseover Shenanigans

The Benefits of Using jQuery

Recently I have had the opportunity to make really exciting and interactive web pages using jQuery. Before working on these projects I had very little understanding of jQuery and what all it could be used for. So I decided to do some research on what the benefits are of using jQuery over other applications such as conventional JavaScript and wanted to see what all I can build using it. Basically you can do almost anything with jQuery to make effects and animation on your site and still be SEO friendly and cross browser compliant.  But those aren’t the only benefits….

What is jQuery?

“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.” http://jquery.com/

Benefits of using jQuery:

  • Search Engine Optimized – While search engines are getting better at being able to read content within some Flash, everything within jQuery is setup as text. This means it is completely readable to all the search engines, exposing all your keyword rich content.
  • Save Time – Five lines of jQuery are equivalent to 25 lines of conventional JavaScript code. This means smaller files and faster loading web pages.
  • Plug-ins – There are an abundance of plug-ins on the web that make creating special effects simple and fast for web developers.
  • Help? – With an abundance of plug-ins comes with an abundance of help. There is a large helpful support community on the web to help you quickly remedy any bug issues.
  • That was easy! – jQuery has easy implementation for web developers in comparison to other applications.
  • Cross Browser Friendly – jQuery is currently the most popular JavaScript library and works in all browsers.
  • FREE! – free, open source software.
  • Mobile Devices – jQuery is supported by any mobile device whose web browser supports JavaScript. A lot of mobile devices like iPads and iPhones don’t run Flash at all.
  • Simplifies AJAX
  • Wow Factor – Web developers use jQuery to make web pages more exciting, interactive, cleaner, and more user friendly. Make your users go WOW!

jQuery in action! A few examples of jQuery Usage

Keana Lynch
Keana Lynch is the Director of UX Design & Development at Beacon where she has provided leadership and consultation for over 35 Higher Education projects. She specializes in the analysis, design, and implementation of websites. Keana is very passionate about design and development strategies focused on user experience, accessibility, multi-device interactions, and technical best practices. Outside of work Keana enjoys spending time with her three dogs, hiking, kayaking and volunteering with local animal rescue groups.
By | 2016-11-22T10:57:29+00:00 May 24th, 2011|Web Development, Creative Design|Comments Off on The Benefits of Using jQuery

Java Script with Dot Net

There are many times when you want to execute some javascript within your Dot Net page to give it that smooth client side processing without reloading the page.   One example would be when  you have a contact or registration page that needs to be edited before emailing or saving the page data.  You could accomplish this with some Dot Net validation controls, or by registering your javascript within your code behind.

If you already have some javascript that edits input fields and displays a popup box or does whatever it is  you need it to do and you want to leverage the existing work then you can also execute it from your Dot Net control.   You still want to edit the fields in your code behind in case the user has javascript turned off.  Yes there are still people that do this.   You can catch the click event with a custom validator in the code behind for this purpose and use an OnClientClick to execute the javascript edits.  Hopefully the javascript edit are executed the vast majority of the time and the code behind edits will have no impact.

Look at the example below.  Lets say you have some javascript called ‘validate’ that validates the fields on the form.  This is the work that you want to leverage in your new project. Placing this within your <head> tag would appear as so:

 function validate(theForm) {             javascript edits here            on err return false            else return true }

Now let’s look at your submit button.  In this example it is an image button.

<asp:ImageButton imageUrl=”/images/buttons/submit.gif” AlternateText=”Submit”  OnClientClick=”return validate(registrationForm)” width=”92″ height=”24″ tabindex=”12″ runat=”server” > </asp:ImageButton>

Notice the OnClientClickattribute.  This will execute your javascript validation.  Your javascript validation should return a true or false depending on whether validation passed.  The return is captured in the OnClientClick attribute and if it is false, control will not be passed to the code behind.  This will keep the Click event from firing and editing your data from within your code behind.

Now let’s suppose javascript is turned off.  We need to edit the page from the code behind.  So lets set up a custom validator below the image button as so:

<asp:customvalidator id=”registerPage” onServerValidate=”CheckPage” ErrorMessage=”” Runat=”server” ValidationGroup=”Page”></asp:customvalidator>

We will capture the Click event in our code behind with the following code:  Execute the custom validator, that will execute your code behind validation.

Sub   btnSubmit_Click(ByVal sender AsObject, ByVal e AsSystem.Web.UI.ImageClickEventArgs) Handles btnSubmit.Click           registerPage.Validate() If (Page.IsValid)  Then                ProcessForm() End if

        End Sub

Below is the validation routine referenced by the custom validator.

Sub CheckPage(ByVal source AsObject, ByValargs AsServerValidateEventArgs)
        edit routines

         these should be the same edits as your javascript 

         End Sub

By using the OnClientClick attribute to execute the javascript edits, we can then capture the Click event when javascript is turned off and execute the code behind edits.   It should not matter if the javascript passes validation and then the code behind validation is executed because these edits should also pass validation.

That is one way to execute client side validation and leverage some pre-existing javascript code.

Happy coding!

By | 2016-11-22T10:20:09+00:00 January 11th, 2011|Web Development|Comments Off on Java Script with Dot Net
Load More Posts