22 04, 2013

Considering Drawer Style Site Navigation

By | 2016-05-27T10:13:29+00:00 April 22nd, 2013|Categories: Web Development, Creative Design|Tags: , , , , , |

Lately we have been utilizing a drawer style navigation in our designs to provide a better user experience in our websites. The request for quite a bit of content in the drop downs themselves (mega drop downs that span the full width of the site no matter which tab you have clicked) in some of our more complex higher-ed sites also creates the problem of covering up the content of the site and proving tricky when the site responds to mobile screen sizes. Putting the navigation in a sliding drawer is proving to be a unique solution that translates beautifully to mobile in responsive design.

If you look on Mashable, a popular news article site, the nav drawer does not shift the page down, but is a full width mega drop down menu. Compare to the University of Wyoming, a site recently developed by Beacon, which has a drawer based nav.

Mashable mega drop down navigation

University of Wyoming drawer based navigation

Whether or not this is the right nav for your site will probably be based upon a lot of factors like what type of content is in your drop downs and what type on content is on your homepage. If you have a lot of content in your navigation it may be worth while to put that navigation in a slider so that the homepage remains visible, even when the navigation is open. Also, you need to think about what your navigation does on mobile devices and tablets and how to best integrate this with your drop downs. Mashable.com serves up a different navigation for it’s tablet users, for example, simplifying the menu, so they put it in a side drawer. On the higher ed sites we develop here at Beacon, we need to provide a consistent navigation for users on every type of device, so we might use a similar drawer on both mobile and desktop, but just change the navigation to stack taller on smaller devices and open and close subsections. This also can allow us to integrate deeper navigational tiers in the main nav on mobile devices so we can keep the content area cleaner and simpler.

This solution can be elegant and it even translates very well to touch devices that do not have the ability to open menus on-hover. This keeps the experience more consistent through all the screen sizes by utilizing an on-click drawer.

Ultimately decisions like these need to be made on a case by case basis.

16 11, 2012

GIF wins Oxford’s ‘Word of the Year’

By | 2016-11-23T10:52:04+00:00 November 16th, 2012|Categories: Creative Design|Tags: , , , |

I really was looking for some nice serious techie news to blog about today, but this article was just too irresistible to ignore: GIF wins Oxford’s ‘Word of the Year’.  Despite the hilarious sub-title “JPG and PNG decline to comment“, I really did learn a lot  in the guts of the article.  For example, I didn’t realize that our friend the “GIF” (graphic interchange format) has been around for 25 years (almost as long as me!) and that nearly every Internet browser ever made supports it (and believe me, that’s A LOT of programs, cause we test our sites in most of them).  The acronym has also evolved from a noun to a verb (“Most recently many media outlets were live-GIFing the 2012 presidential  debates.”).  According to the article “it’s the easiest way to share a quick animation.”

And as a completely un-techie side note, who even knew that Oxford Dictionary selected a “USA Word of the Year“???

A GIF of GIF

A GIF of GIF

9 07, 2012

On Hover Alternatives for Touch Devices

By | 2016-05-31T16:50:39+00:00 July 9th, 2012|Categories: Web Development, Creative Design|

Even though touch screen devices make up only a small fraction of users that visit your site, the number of these devices hitting your site is only going to increase. This doesn’t just include mobile devices, but also tablets that are being served a full site version. Your site should take this into account and any mouse hover effects need to be rethought and accommodated by some other means.

Designers are trying to come up with clever ways to deal with this issue. But sometimes the simplest answer is the right one. Especially in this case, where the user is expected to know how to use the site, it’s best to keep things clear and intuitive and not throw them any type of interaction with the site that is outside of the norm.

The simplest ways to deal with hover actions on a site are to replace them with:

Direct Action This removes the content from the hover and instead places it directly on the page itself. This makes sense for some things and not others, such as small bits of info or tooltips. This content can be integrated in the page itself as long as it doesn’t make the page awkward and cluttered but maintains and elegant usability.

On Tap Menus This is a quick and easy fix as long as the content of the hover menu makes sense to be presented to users with a tap and it doesn’t interfere with the use of the site.

Separate Pages This is a better solution for hovers that would present the user with extensive amounts of extra content. The content may be so much that it warrants it’s own separate page.

 

So this seems like a Sm, Med, Lg approach where how you serve up the hover content depends on the amount of the content, but the way in which the user will expect to use the site needs to be factored in as well so that usability is not compromised.

No matter which solutions are used, it’s important to remember throughout the design process that the devices that are being used to browse the web are becoming more and more varied and even though we don’t have to eliminate hover completely, we do have to accomodate devices that don’t allow this action.

6 03, 2012

Free Social Media Vector Icon Set (including pinterest and google plus!)

By | 2016-11-21T17:21:13+00:00 March 6th, 2012|Categories: Creative Design|Tags: , , , , , , , , , , |

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
7 02, 2012

Design Freebie: Photoshop Tessellation Patterns

By | 2016-05-27T09:42:01+00:00 February 7th, 2012|Categories: Creative Design|Tags: , |

While working on a site design recently I played with creating some tessellation patterns (I’m pretty sure I had been looking at M.C. Escher that morning).  I never did use these graphics for the site design I was working on, but I thought I would colorize them and create some seamless Photoshop pattern files to provide as a download. Enjoy!

Download Tessel.pat.zip

13 10, 2011

The Redesign Bug

By | 2016-11-22T18:07:35+00:00 October 13th, 2011|Categories: Web Development, Creative Design|Tags: , , , , , , , |

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.
31 08, 2011

The Expressive Web (Beta)

By | 2016-11-04T08:52:46+00:00 August 31st, 2011|Categories: Web Development, Creative Design|Tags: , , |

The Expressive Web (Beta) was recently released by Adobe to showcase some of the newest and most expressive features that HTML5 and CSS3 can add to the web today. Personally I found this to be an amazing example of what’s in the future for web designers and developers.

The Expressive Web

The site highlights the following HTML5 and CSS3 features:

 

Each feature page contains:

  • A demo of the feature.
  • Data on browser support.
  • Links to examples in the wild that use the feature.
  • Links to more in-depth resources and tutorials.
  • Detection and fallback strategies for the feature.

 

To read the full article about the development and design of the site visit Adobe Introducing The Expressive Web

24 05, 2011

The Benefits of Using jQuery

By | 2016-11-22T10:57:29+00:00 May 24th, 2011|Categories: Web Development, Creative Design|Tags: , , , |

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

13 04, 2011

Backgrounds made easy!

By | 2016-06-09T16:50:57+00:00 April 13th, 2011|Categories: Web Development, Creative Design|Tags: , , , , , |

When working on a new web site design, I often have projects where a client is interested in having a nice background pattern or texture as a part of their design. I recently found a great tool that makes background images extremely easy:

http://bgpatterns.com/

With this tool, you can choose a background texture, image pattern, foreground color, and background color. You can adjust the opacity of the image pattern, scale the image pattern to change the amount of spacing between the pattern repeat, and rotate the pattern.

You can preview the background image and continue to tweak it. Once you have the look you want, just click the download button, and you will get repeatable .png.

It’s so easy! I <3 this tool!

11 10, 2010

Illustrator Slices: The best invention since sliced bread?

By | 2016-11-22T09:55:24+00:00 October 11th, 2010|Categories: Creative Design|Tags: , , , |

To Slice or Not to Slice: What’s the Big Deal?

Let me start off by explaining the bigger picture a bit and why this issue is worth writing about in the first place. In the past, I have had to deal with badly organized design files where nothing is in any particular order, nothing is named appropriately, and there are no slices. Trying to sort through it in order to make a simple update is like a guessing game. It wastes a lot of time and can be very frustrating. Just because you know how everything works in the design file, does that mean when the client asks for a change months later that someone else will be able to come behind you, open the file, and be able to clearly discern where everything is and how it’s organized? Will you remember months down the road? I can tell you from experience that if things are not organized and named well in a design file, the answer to that question is an emphatic “No”.  Some design files can have 80+ layers containing hundreds of graphics and things can get pretty complex. Trust me, it always helps to find things in the file if the layers, groups, and slices are well organized and named accordingly… and it helps to have slices. This really isn’t an option, at least it shouldn’t be.

The Old Photoshop “Crop & Undo” Doesn’t Cut It

There are bigger issues than simple file organization and naming. I have had to make updates to websites that required updating the graphics. A basic example of this would be that the company logo has been updated and the new version of the logo needs to replace the current logo image on the site. This should be a simple change and will be if there is a design file with a slice path for the logo graphic. If not, this might not be so easy. This can especially be troublesome if the logo sits on a gradient background. In order to have the gradient line up when the logo is replaced, you need to know exactly where the logo image sits on the background. If you crop the logo out of the design and you’re just one pixel off, it will show because the gradient will not match up. One solution may be to save the logo out as a transparency, but what if that’s not an option? Because in some situations it won’t be an option for one reason or another. This scenario demonstrates the problem with the old Photoshop crop and undo method. Because with that method, there is no record of where the graphic elements were cut out of the design. This can really be a problem when you have to go back to the design file and figure out where and how something was cropped originally, because sometimes it is not so easy to get it to match up.

But What About Slices? What Are They Anyway?

Glad you asked! Okay, so obviously the slices I’m referring to have nothing to do with bread. Instead, it’s a neat tool for cutting a design up in smaller bits. Both Photoshop and Illustrator have a Slice Tool (formerly called “Knife Tool”). Of course, just like with most of the other tools Photoshop and Illustrator have in common, the Slice Tool works a bit differently in Photoshop than it does in Illustrator. I prefer Illustrator slices because in my opinion, they are easier to work with.

In order to make a website, you have to cut the design up in pieces sort of like a puzzle and then cleverly put it back together using HTML and CSS. In Illustrator, using the Slice Tool allows us to cut the design up in the necessary puzzle pieces. Basically, you use the Slice Tool to draw out rectangles (paths) over the graphic area you wish to cut out of the design. That is the sole purpose of slices, to carve the graphics out in rectangular pieces from the design file. The best part is that the slices are saved in the file, so you have a record of it. In Illustrator you can make a Slice Layer and have all your slice paths under that layer. This makes the slice paths easy to find, and allows you to maintain the exact dimensions of all the graphics that were originally cut out of the file. You can hide the slices so that you don’t see all the slice path outlines, show the slices when you need them, and you can lock the slices, which is usually a good thing to do to ensure you don’t accidentally move the slices around. So if you come back to a design file a year later in order to update some of the graphics, you can use the original slices in order to make sure the graphics are cut out exactly like they were when the website was originally developed.

Before You Slice…

Before you create slices it is a good idea to create a new layer at the top of the layer stack and name it “Slices”. The reason for this is that the Slice layer is a “special” layer and you should treat it differently than other layers. Once you make a Slice layer, you can then make slice paths and place them within that layer. I will explain more about this and why they should be at the top of the layer stack a little later on.

During the process of creating a website design there comes a point when screenshots are needed in order to present the design to the client for feedback and approval. This is the point where I always create a Slice layer in the design file. So often times, once I hand a design file over for development, it already contains a Slice layer at the top of the layer stack with a layer named “screenshots” that contains all the slice paths I used to make the screenshots within it.

Name That Slice!

Whenever you make a slice path, Illustrator gives it the name “<Slice>” by default. It is a good idea to rename the slice. To do this, double click on the path in the layers palette and a window will pop up where you can type a name for the slice.

What’s In a Name?

Meaning… names give things meaning. It does not make sense to use a name for a slice that is in no way related to what the slice is being used for. Just like with programming and development, typically it is a good idea to give variables, id’s, and classes meaningful names related to their purpose, so it is with slices in a design file. For example, if you are creating a slice path for a submit button, then a meaningful name for that slice might be “submit” or “submit btn”. Whatever you choose to name it, just be sure it is relative to the graphic that the slice is being used to cut out of the design. The reason this is important is because not only do some website design files contain tons of layers and graphics, but they will also need many slices in order to cut all the graphics out. Again, it is very difficult for someone else to open up the design file months later and figure out which slice goes to which graphic, and it only makes matters worse when there are 80 slice paths that are in no particular order, and they all have arbitrary names or even worse, they’re all named “<Slice>”.

Slices Are Special

Earlier I referred to the Slice layer as “special”. The reason for this is that you can do things specifically with slices that you cannot do with other graphics layers. In Illustrator you can choose to “Show Slices”, “Hide Slices”, and “Lock Slices”. When you choose one of these options, it only affects the Slice layer and slice paths. It does not show, lock, or hide, any other layers. The other thing that makes slices special is that they should be placed at the top of the layer stack in order to maintain your sanity. Trust me on this.

Where Did it Go?

The Slice layer containing slice paths should reside at the top of the layer stack. As a best practice, nothing should ever be placed on a layer above the Slice layer. This is because slices should always be above the graphics they are meant to cut out. Imagine trying to carve a space out of something located on a shelf above your head, but you cannot see it because you are unable to look up, you can only look down. That is sort of the way slices work, they cannot see what’s up above them very well, only what’s below them. Thus, the graphics you want to cut out should always reside below the slices. As a matter of fact, Illustrator sort of does it for you.

If you have a graphics layer selected and switch to the Slice Tool in order to create a new slice path, by default Illustrator will create a new slice above your current layer (the one you had selected before you made the slice path). That’s a neat trick and it’s great Illustrator does that for you, right? Sure it is. But it is also a great way for you to lose track of where your slice went. So keep track of where you create your slice paths in the layer stack and if you happen to accidentally create a slice path while you have a graphics layer selected, grab that slice and move it up under the Slice layer. If you don’t, you may encounter some puzzling side effects of buried slices. I’ll refrain from telling what those side effects are, I’ll let you figure that out on your own. If the problem ever presents itself you aren’t likely to forget it again. The best way to avoid it altogether is to make sure all your slice paths end up under the Slice layer!

Saving Sliced Images

With slicing, you can either save each slice as you go, or you can wait until you have all the slices done. When saving out slices, slice order matters, really matters. Generally it is a good idea to move the slice path you want to save to the top of the stack in order to make sure there are no overlapping slice paths above it. If there are overlapping slices, the topmost slice wins and this can produce some strange results. So put the slice you want to save on the top, that way it will win every time!

When you are ready to save your slices, you will need to use “Save For Web & Devices” instead of the traditional “Save” or “Save As”. When Saving For Web, you will be presented with various options. Different people like to set their Save For Web options differently. You can have Illustrator write out HTML for you (I don’t usually use Illustrator’s generated HTML), you can choose the file type (.jpg, .png, .gif) and specific settings for each type, have Illustrator save out multiple slices at a time, specify a naming convention for slices, a naming convention for the saved images, and also choose to have Illustrator save all the images to a specific place automagically. Feel free to explore all the options and decide which ones work best for you.

Extra Tips & Tricks

Now that you know how to use slices, below you will find some extra tips for a few of the peculiarities I have experienced when using slices.

Dealing With Decimal Pixels

Depending on how you look at it, or rather how you use Illustrator, one downside can be that Illustrator allows for decimal measurements and placement of graphics. This can be a problem with web graphics because in HTML and CSS, there is no such thing as a .5 pixel. If you make a slice and its x-position on the Artboard is at 100.725 pixels and its width is 200.256 pixels, well that does not compute in HTML and CSS. In order to resolve that issue, Illustrator forces the slice to use whole numbers instead of decimals when it is saved out. You will see your slice path outline, and then a second outline showing the actual size and location of the slice. This second outline is Illustrator compensating for the decimal numbers, and it always rounds up and chooses the ceiling of the decimal number for width and height values. So if you have a slice path 200.256 pixels wide, Illustrator will make the actual size 201 pixels. Also, if the slice has an x-position or y-position that includes a decimal, Illustrator will force the positions to be whole numbers as well. Again, you will see your path outline and a second outline showing the actual location/size of the slice.

In Illustrator, one of my favorite tool panels available is the Transform Panel. The transform panel makes it very easy to measure and place elements to the exact pixel needed. The thing I love the most is that you can do math right inside the Transform Panel. If you need to move an element to the left or right 20 pixels, then you can just add or subtract 20 pixels from the x-position. You can add, subtract, multiply, and divide in the Transform Panel.

The Transform Panel also works well with slices. If you create a slice and you see the slice path and a second outline showing the actual size and location of the slice, then you already know that the slice dimensions are not whole numbers, or the slice x & y positions are not whole numbers, or all of the above. You can use the transform panel to size the slice correctly and put it in the exact place you need it. In the transform panel, choose the registration point that coincides with the top left corner. Once you have done that, you can set your x-position, y-position, width, and height to whole numbers and the slice will adjust accordingly.

Missing or Blank Images

Sometimes you may try to slice out a graphic but when you save it out, either nothing is saved, or the image that was saved is blank. If this happens, try turning on the Artboard and see if the graphic you are trying to slice out is positioned outside the Artboard area. If it is, you can adjust the size of the Artboard to include the graphic you are trying to slice out. This should fix the problem.

Load More Posts