I dug around the web today for tutorials on making personalized jQuery plug-ins.  A plug-in is much more easily deployed onto a site than customized code, which may require editing or customization between sites.  Using a plugin, we have a much simpler means of calling a script using common syntax:  $(‘something’).doThis();

In the past, I’ve developed scripts to work within the $(document).ready() jQuery function.  Events and methods that were nested within usually had a variable targeting a class or ID on the DOM that manipulated that element accordingly.

Document Ready Scripting Examples:

$(document).ready(function(){
   var button= '.myButton';
   $(button).click(function(){
      alert('You clicked a button.');
    });
 });

This simple example will result in any page element with class myButton result in a message box once clicked.  While this is a simple example, more complicated scripts might be developed as a plug-in instead for increased portability without affecting functionality.  This practice also makes your code re-useable and easy to integrate between projects and other plugins. In terms of syntax, it is also much simpler for front-end developers to use a line of code such as the one below.

Plug-in Scripting Example:

$(‘.myButton’).makeButtonAlert(‘You clicked a button.’);

Documentation on Plugin Development

Having never developed a plugin, I had to look over a few tutorials to get a grasp on the needed syntax.  Here is a list of some of the better tutorials and documentation I came across:

• jQuery – Plug-in Authoring  (More technical approach)
• CodeProject – Creating A Simple jQuery Plugin
• SitePoint – How to Develop a jQuery Plugin
• My First jQuery Plugin
• A Really Simple jQuery Plugin
• Signs of a Poorly Written Plugin

Plugin Breakdown

Here is the same script re-written as a plug-in to jQuery and can be either appended to the end of the jQuery Library or included as a separate JS file.

 //Opening and closing the script is only slightly different in syntax:
 (function($){

     //Create your jQuery method name here (makeButton).
     //Notice we take in a variable "input" which is passed by the makeButtonAlert() 
     //call so that different messages can easily be used in the message box.
     $.fn.makeButtonAlert = function(input) {
       //Using the each function, we iterate all instances of the selector on the DOM.
        return this.each(function(){
        //At this point of the script, 'this' refers to the elements on the DOM you are iterating. 

             //Plugins can make use of a method for storing information -- this is properly named .data().
             $(this).data('message',input);
            //Just like the .css() or .html() functions, you use a second parameter to set the value.             

             //Plugins also have their own method of attaching events, using the .bind() method. The first parameter in quotations is the JS event, the second is the function you tie that event to.
             $(this).bind("click", events.click);
             //You may 'chain' the bind command on one selector to attach multiple events. The methods triggered by these events are coded below in the events object.

        }); //Closing for .each() method
      }; //Closing for $.fn.makeButton
      var events = {
         //Set up the events object with a method that gets fired when the 'bound' selector gets clicked.
         click: function(){
            alert($(this).data('message'));
         }
      }; //Closing for events object

 })(jQuery); //Closing for plugin

The Easy Part…

Now, you’re free to use your customized plugin in other projects using:

$(‘.button’).makeButtonAlert(‘You clicked a button’).
$(‘input[type="button"]).makeButtonAlert(‘You clicked a button with a different selector.’);
$(‘#message-button’).makeButtonAlert(‘You clicked another button’);

With the development of user-friendly Content Management Systems, we now see many people using these tools to edit their own websites. Often times, this includes adding images to your page, and almost always you will want to work within a certain image size constraint so that the images will fit better into the layout of your site. Here are some simple guidelines to follow to ensure that your images are appropriate for the web and a easy tutorial on how to crop images to a specific size using Photoshop.

Have an image you want to use on the web? Check it’s size. If you are trying to use an image for a header banner graphic that spans the entire width (or close to it) of the website you will probably need more than 500 pixels. In Photoshop the easiest way to do this is to go to Image > Image Size and check there. No matter what the resolution is set at in this box, the number of pixels in an image stays the same (unless you modify the size while in this box). For web, 72 pixels/inch is always used but even if your image is currently set at a resolution of 300 pixels/inch the Width and Height under Pixel Dimensions will stay the same so you can at least know this and see if you have enough pixels in your image for the spot on your website you want to use the image for.

The absolute easiest way to crop an image and get it pixel perfect height and width is to use the crop tool in Photoshop. With your image open, select the crop tool from the tool panel (of you can use Ctrl+C on your keyboard). Once the tool is selected you will notice you have Crop Tool specific settings in the top bar. This is where the magic happens. If you know you have to create and image that is exactly 200 pixels by 300 pixels you can enter this in the bar. Just use “px” after your size to denote that you want to crop to pixels (as opposed to inches or centimeters) and make sure that your resolution is set to 72 pixels/inch (also called dpi). 72 dpi is the image resolution that is always used for the web because this is the standard resolution for computer screens.

Once you have the appropriate values entered in, all you have to do is click and drag your crop tool over your image to select the portion of the image you would like to crop and resize, then just double-click to finalize. One thing to keep in mind is watch the clarity of your image. If after make your cropping and the image seems to “pixelate” (it will zoom in a bit and get fuzzy) this means that your image was smaller than the size you chose to crop to and you have lost image quality. You may want to crop differently if possible, or use another image.

Once you are content with your selection the best way to save an image is to go to File > Save for Web and Devices. A box will pop up that will allow you to select what file format you want to use and how much you want it to compress the image (this will make the file size smaller to allow for quicker loading times). My go-to is usually a .JPG with a image quality of about 70. This will make the image a bit smaller without sacrificing quality. For larger images you may want to go a bit lower, but keep an eye on the image quality. If my image is already a bit low-quality I will save it with a quality of 100. I only use .PNG if parts of my image are transparent and .GIF is used for flat color graphics that need to be a small file size. Using .GIF for many images will mean a large sacrifice in quality. The preview window will show you exactly what your image will look like when it is output. This will help you double check image size and file size in advance, so take advantage of it. It’s better to consider things now rather than put your image up on your site only to notice then that it is the wrong size or has an issue with the image quality.

Hopefully this guide will give you a few tips or help you understand the tools a bit better if you are trying to prepare images for your site or even just check the sizing of images for you pass them on to someone else to use for a specific purpose.

We launched another great site for ITW Texwipe at http://www.texwipe.com! This site seamlessly blends the functionality of Hannon Hill’s CMS (the Products, Industries and Technical Data menus) with a full-featured ecommerce store (the Buy Texwipe menu), with shared navigation and design. This is the first project that integrated both products at the same time and, thanks to hard work by pretty much everyone on the software dev team at one point or another. 

BEFORE

AFTER

Other interesting features of the site:

• Ability to “hide” pages from different geographical regions, based on the “region” selection of the visitor in the footer.

• Transition of transactional applications from old system to new
• Email verification required to place order

The jQuery library has a collection of methods built for animating and manipulating the DOM.  These effects implement styling changes to produce transitions like fading or element movement.  The full list of methods are available on the jQuery website.

jQuery also contains a nifty method, animate.  Animate allows you to make a timed transition from one style to another.  This comes is handy when other effects methods don’t quite behave or lack needed functionality.

Consider the two snippets:

1: $(‘h1′).fadeOut(1000);
2: $(‘h1′).animate({opacity:’-=1′},1000);

Both perform the same transition, and in one second, the selected element transitions to being transparent.  However, the fadeOut method has a feature that sets the element’s display attribute to none when opacity reaches zero.  This especially becomes an issue if you need the element that fades out to maintain its structure in a template.

The animate method is also capable of manipulating multiple styles in one method.  If we needed to make an element slide on the page while coming into view from being transparent, this can also be done with a single line, separating multiple style changes by a comma.

$(‘h1′).animate({opacity:’+=1′,marginLeft:’+=15px’  },1000);

Relatively and absolutely positioned elements can make use of the left/top CSS styles, but should be used to what works within your template and layout.

Animate and jQuery effect method’s all support callback functions which makes movement order easy.  The snippet below will result in the same animation, but the left margins are not animated until the transparency becomes fully visible.  These can be nested within one another to avoid using setTimeout and setInterval coding.

$(‘h1′).animate({opacity:’+=1′},1000,function(){
$(this).animate({marginLeft:’+=15px’},1000);
});

During recent projects, integrating fonts for the right look and feel has shown to be troublesome for Internet Explorer. After implementing a font file into a CSS file, Internet Explorer 9 would provide the following error and not show the embedded font:

CSS3114
@font-face failed OpenType embedding permission check. Permission must be Installable.

This error is listed on MSDN and states that:

 The font-face does not have permissions to install with the current webpage.

And to fix:

Obtain the correct permission or licenses for embedding the font.

The only help this really provided was narrowing my search results.  Luckily, I found a nifty program that can be run from the command prompt to correct this error in IE9.  Be aware however, as stated on the publishers download page:

Changing the embedding value does not give you license to distribute the fonts. You should only change this setting if you are the font creator, or something like that. Use at your own risk.

Download embed.exe

Program Useage:

1. Download the executable and move to the desktop with a copy of the font file.
   (Alternatively, you can drop this in your Windows/system32 directory)
2. Pull up a command prompt window.
3. Navigate to the desktop within the prompt
4. Execute by typing: embed.exe fontfilename.ttf
5. Viola, your font should be ready to use in IE9.

More on Font Embedding from MSDN »

“Nothing to Excess” -carved into the front of the temple at Delphi.

Without getting too geeky, the golden mean or golden ratio is simply a mathematical formula that dictates proportions that are found throughout the natural world and believed to be the foundation of what we find to be aesthetically pleasing. Many artists, sculptors and architects since before the Renaissance have proportioned their works to approximate the golden ratio. From the leaf of a fern spiral and its relationship to the other leaves on that same curved stem, to the arms of a spiral galaxy, these proportions can be found everywhere.

Thinking Out of the Box

In web design we are often limited by the use of boxes or box shaped areas that become containers for information, but that does not mean that the placement and proportions of these boxes can not utilize the mathematics that so greatly influence the harmony and balance of organic shapes. The functional structure of data is the king of everything in web design, but all of the header, sidebar, footer and main content areas can be laid out in a way the embraces the golden mean and detailed with graphics that have some semblance of the visually captivating, organic detailing of the natural world.

Symmetry Can be Boring

There is a time a place for symmetrical design. Sometimes it is the best way to wrangle in unruly content (an even number of columns in uniform widths, for example), but often times it is not the most visually interesting solution. A layout that is close to symmetrical (in that is doesn’t have a huge chunk of content on one side and then a slim cramped sidebar but instead maintains proportions closer to the golden ratio) will channel content in a way the provides a visual hierarchy. It is important that is not too out of balance yet is also not purely symmetrical.

Finding a Happy Medium

Creating captivating visuals doesn’t have to mean sacrificing functionality, and a data heavy site with a great deal of functionally does not necessarily have to be visually boring in order to be usable. With proper planning, a happy medium can be established that communicates information with a efficient hierarchy that allows the user to effectively engage with the content. You do not want overwhelmed users having to struggle to sort information on their own, but at the same time you do not want to bore them or not provide enough information. Nothing to excess; everything in moderation.

If you are looking for a design resource that helps you implement the golden mean into layouts check out the ever-famous 960 grid system – complete with Photoshop plugins.

We’re proud to announce the release of the Greensboro Housing Authority redesign!  As always, Beacon was right on-time with our deliverables, which is always our goal.  The client chose a soft launch date of December 1, 2011 because they wanted to show the new site to their Board of Directors at their annual meeting that day.

Their Web site was designed and constructed in-house several years ago, which meant that it was time for a completely new look.  The site also had content that was very out-of-date, so the client took it upon themselves to do a complete rewrite of the content, and restructure the site to be more intuitive.  Also, they wanted to get away from having to update the site by-hand using HTML, and wanted it in a content management system.  Finally, they wanted a new Web hosting partner.

Enter Beacon:

• We provided them with a brand-new graphical design;
• Developed it to display perfectly in multiple browsers;
• Implemented the new site into Cascade Server (content management system) to allow multiple users to update the content with an easy-to-use solution;
• Incorporated a new search feature;
• Imported approximately 60 pages of content, including 20 fact sheets about each of their properties;
• Transferred their Web site to a shared hosting package here at Beacon.

Several Beacon staff members made this project a success:

• Wendy:  Without much direction from the client, Wendy put together a design that they liked on the first try, which is phenomenal.
• Stephanie:  She was instrumental in getting the project off the ground, attending the initial meetings and providing meeting notes, the business requirements, and proposed site hierarchy.
• Zed:  He was thrown into the fire, as this was his first development project here.  He developed the front-end HTML/CSS/jQuery, and implemented the site into Cascade Server (which he picked up on very quickly), and entered most of the content.
• Tiffany:  Provided assistance and training to Zed.
• Justin:  Project Management and Cascade Server documentation & training.
• Beacon’s Technical Support Group (TSG):  And finally, no site hosting transfer is complete without the efforts of TSG, specifically Caleb and William, for setting up the hosting and troubleshooting some DNS issues over a weekend.

This is another high-quality design to add to our portfolio, and another non-profit site we can be proud of.   Thanks to everyone involved!

Before

After

Websites designs are always evolving and that’s a very good thing.It’s great for inspiration, engaging customers and can give a fresh new outlook on how the audience views your site.

The 3D effect is a great example in evolving designs. It helps give the illusion of depth to your site and when designed in a certain way can even be interactive and entertaining. There are some

It all depends on what you’re trying to achieve with the 3D effect. It could be for the site’s overall look or even enhance products visuals, that can give the customer a better feel for what they might purchase.

Some effects are drop shadows, 3D rotations, protruding banners, field of vision that has clear focus on an element in the foreground and another element blurred in the background, floating objects and color effects.

These are a few client sites from the Beacon team, that incorporate the 3D effect.

Protruding Banner
www.newbridgebank.com

Rotating Images
www.bassettfurniture.com/quality/explore-wood-furniture.asp

Field of Depth
www.framingham.edu/academics

With it’s constant stream of updated content and ever changing array of new tools that effect the way we interact with it, it’s entirely possible that nothing is more effected by visual trend than the Internet. That is why it becomes extremely important that your own website be influenced by and utilize these latest design trends but still maintain a timeless classic design that will stay fresh and relevant no matter which way the visual Internet trends sway.

Embrace Trends for the Details but Maintain Classics for the Foundation

For some time now the freshest designs have used subtle gradients and drop shadows to render 3D styling that help keep the site from looking too flat and static. Textures have also become increasingly important since they help break away from the typical cold sterile feel of flat computer graphics. Protruding title banners that break out of sidebar columns and non standard web fonts that are now possible are everywhere and making the Internet a more beautiful place, but all these things are good in moderation. Instead of running away with the latest design tools and splattering them across every portion of your site, using them in a subtle manner will actually make them more appreciated and will keep them from compromising foundational design that is vital to maintaining a look that stays fresh and usable over time.

Your Brand Must Stay at the Core

No matter what, your established visual identity and branding must influence every design aspect. If you have been representing your company with the same shade of green, sans-serif font and rounded mark for the past ten years, these visual elements can be carried over into your site layout. Green element can be added throughout the site to carry on the brand, creating a unified look and the same sans-serif font being used by your company can be utilized (especially with the @font-face capabilities of CSS3) in header and title tags throughout the site.

Functionality Above All Else

All of this doesn’t matter if usability is compromised. If the entire purpose of your site is to sell used books, having a search function that is buried at the bottom of your page will greatly compromise the user’s ability to successfully find the items they are searching for since it is the primary way content will be found on your site. A site like this could even put the search front and center with advanced search filters and gearing the design around this function while keeping product category menus close at hand. Your site should be as intuitive as possible, which basically means the user should be able to actually use the site without having to think too much about it.

Reflecting Back in Time to Understand Where We Are Headed

Possibly the best way to understand what designs will withstand that test of time and stay fresh and relevant for years to come is to look back at what has already withstood the test of time up until now. Neutral colors will always be dependable and clean fonts will always be readable, for example. The level of skill and care with which graphics are created really can make a difference, even seem to defy the limitations of technology if implemented in clever ways, just like a watch that is created with care by a skilled craftsman.

Designers hold CSS close to their hearts. It’s just code, but it is also what makes our carefully crafted designs come to life. Thoughtful CSS is CSS that respects our designs, that is handcrafted with precision. The common conception among Web designers is that a good style sheet is created by hand, each curly bracket meticulously placed, each vendor prefix typed in manually.

But how does this tradition fit in a world where the websites and applications that we want to create are becoming increasingly complex?

Keep Reading….