Category: Design
-
Earth to McDonalds.com: It's 2009
Last night I had an urge for a delicious caramel Sunday from McDonalds. Where better to find nutritional facts about MickyD's than McDonalds.com? So I visited and Ba da bum bum bum... I'm *not* loving it.
Surgeon General's Warning: The McDonalds.com home page may induce nausea and a loss of appetite. In other words, you might be seeing that Happy Meal again...
McDonalds.com Ingredients: a flash landing page, fixed-width tables used for layout, low-quality images, and a navigation bar outclassed by most homemade DVD menus.
@McDonalds:
It's 2009. Not 1999. Your website is as fashionable as trans fats and you are losing value because of it.
You're #17 in the world with ad spending. The world. 1.7 billion dollars on advertising a year. You're #1 amongst quick-serve restaurants in online marketing spending. That's 10 million display ads a day. These are impressive numbers.
Your website gets over a million unique visitors each month and you greet your visitors with a severely outdated, aesthetically nauseating, dysfunctional website. Your web strategy is lacking balance: extravagant ad spending is driving traffic to a website that tarnishes your brand when it should be polishing it. Large online ad buys demand a well designed website.
Let's try and put this in perspective. Imagine your monumental restaurant that opened on Times Square some 7 years ago. Sure, this isn't your busiest location in the world, but even if it were, it would see less visitors in a month than your website. Now imagine the owners of the Times Square location refused to clean or maintain it since it opened. This is what your website is doing for your brand.
Here are some quick ideas to improve your internet marketing strategy:
- Find a new internet team. It is hard to tell if the current site was designed by the CEO’s nephew or by an expensive, outdated ad agency that doesn’t get interactive. Either way, fire them. Find an agency or design firm that understands the web.
- Build a website for 2009. You're going to have a hard time convincing the iPhone generation McDonalds is worthy of "lovin' it" when your mobile site is designed for the WAP/WML phones of the early 2000s and lacks interesting content like nutritional facts. Get rid of the tables, inaccessible flash, and put as much effort in carrying your brand properly on your site as you do in your commercials.
- Pay attention to your social streams. There are 3 McDonalds Facebook Pages that collectively have 1.5 million fans and they aren't monitored. These are being used host radical political messages, and offensive photos and comments right beside of your golden arches. Get more involved with Twitter. Join the online conversation.
- Get some dynamic content! In the News section of your current site, there are literally no stories from 2008. You should even take the next step and add a Blog to your site. Give your famous brand an online voice by blogging about corporate news, trends, interesting facts, and McDonald's happenings. By putting your site on a Content Management System (looks like it currently isn't), you could easily have dynamic content on your site.
As we move into a new year, @McDonalds, consider bringing your website along for the ride. The internet is quite nice in 2009. With an improved site you'll see million of people a month smile... and we all know that's what you love.
-
Top 5 Improvements of ESPN.com Redesign
Today, ESPN launched a beta version of their redesigned website. The New York Times wrote about the site and the main goals behind it.
The new site is aimed at simplifying a visitor's experience by reducing the amount of clutter on the homepage. The goal is to encourage visitors to delve deeper into the site and view more pages. ESPN was concerned that the overflow of information on the old homepage led people to bounce off and not necessarily delve into the site.
The new beta site feels like a definite improvement over the previous version. Here are the 5 best things that ESPN did differently.
- Removed Automatic Playing Video - On the old site, a video of highlights in the top right would start automatically playing upon your arrival to the site - this was counter-internet. We use the internet to seek information, not have information pushed on us like television does. The video that played was not one that a visitor was likely to be looking for. Instead it stole attention from looking for the information actually desired. Also, even though it was a minor graphical element of the design in the top right corner, by playing media, it stole attention from the most important news highlighted in the middle of the page.
- Personalization of Information - Immediately available on the new site is an option for "My Headlines." This feature allows visitors to personalize the information they see, making it much easier to get the news they find important. By making this a prominent feature of the homepage, it entices visitors to click through to more interior pages and spend more time on the site.
- Simpler Navigation - The new site has streamlined the main navigation by hiding the inactive sports. The previous site had 36 links on the top block of the homepage; that number has now been reduced to 19, and the links have been cleaned up to better fit the design. It makes it easier to find and click on the news that a visitor cares the most about.
- Larger Feature Video - The new video is 16x9 and displayed as a central part of the homepage; this is key. It allows ESPN to editorialize on what is important (which is their purpose) and takes advantage of their audience's faster computers. They have traditionally been a leader in web technology and also led the way in the migration to compliant browsers.
- Cleaner Homepage Layout - Underneath the main video player and headlines, the new site has 3 more main columns and rows of information/ads. The sections are all lined up nicely and each content area in a given row is the same size. This makes it much easier to scan the homepage and find information than it was on the old site. Previously, the homepage was full of content boxes that varied in size and didn't line up to adjacent boxes, making it very hard for the eye to read over the page.
Overall, ESPN did a really great job with the redesign. Currently, the site is a traffic hub that captures nearly 50 percent of total minutes spent by Internet users watching sports video and the seventh most total video streams, according to Nielsen Video Census. So, you can be sure that other media companies will be taking close notes of the design and eagerly awaiting ESPN to report the new traffic data from the redesign.
In addition to improving the user experience on the site, there is also a more corporate goal - the new design gives advertisers eight options to purchase ads on the most popular pages rather than the three that the old site had. This increase in ads was one of the motivating factors for the redesign, as the NY Times points out that Disney, ESPN's parent company, was disappointed in soft ad sales by the channel in the most recent quarter. However, it seems that ESPN did not sacrifice tact for revenue, as the new ad placements are not distracting, and they even eliminated the distracting banner ad up top.
What are your thoughts on the design? Where does this design put the ESPN site relative to other media company sites such as the NYT or WSJ?
-
Gmail's New Default Theme is a Step Backwards for Usability
This week, Google has been rolling out a new theming feature into Gmail. This is likely a welcome and overdue addition for many people who didn't like the default look of Gmail. Unfortuately for everyone else, along with the new feature, users are automatically updated to a new 'Default' theme for Gmail. This has happened in the past, but for the first time, this default appearance change is a step back for usability.
Fortunately, the new theme selector allows us to select the 'Classic' theme which returns Gmail to its previous appearance. With this ability to switch between the new 'Default' and the previous 'Classic' we can look at some specific ways that 'Default' is less usable than 'Classic.'
Contrast is Reduced on the Important, Increased on the Unimportant
Menu Text and Content Borders
In the 'Classic' theme, text is darker and stands out more against the white background. Additionally the border that runs around the body of the page is lighter. It does its job, separating the dynamic content of the view from the static menus and gets out of the way. Since this border isn't directly useful, it should be subtle, deferring attention the content.
Email Listing Text
Here the text has been changed from black to gray and the background has changed to a gray as well. If we use a contrast calculator, we can objectively compare this change. From the 'Classic' to 'Default' themes, the foreground to background brightness difference and the foreground to background color difference is reduced by 28%!
By default, Google is pushing people to a new theme with much worse usability. The contrast of interface elements has increased while the contrast of text has been reduced by over 1/4. It is good that gmail allows users to return to the classic theme, but it should not be necessary. The new 'Default' theme should be opt-in instead of opt-out because of its reduced usability.
Update: (11/25/08)
Kevin Albrecht has created a Greasemonkey script to force the listing text to black. To see screenshots of the change and download the script, head over to his blog.
-
Raleigh Area Creative Agencies Are Thriving
Nov 17, 2008 by Clay Schossow | Filed in: Design | Comments (0)Our office is located in Carrboro, NC, our entire team lives in Chapel Hill, and we call ourselves a Raleigh web design firm - so, needless to say, we have a lot of pride in the Triangle area, especially when it comes to the creative, advertising, technology, and marketing sectors. So, we wanted to give a shout out to McKinney, a large advertising agency in Durham, for their recent work on the Gold's Gym Account.
McKinney's creative was recently featured in the New York Times, which is super cool. While many people consider Raleigh a small market, that doesn't mean the creative sector isn't booming. We have the pleasure to frequently work as a strategic web partner for ad agencies in the area, as they use our Content Management Software. Having been on the inside of their planning sessions and seeing the work they generate, I can definitively say that the creative coming out of Raleigh is as sharp as anywhere else in the nation.
Just in the area of Raleigh web design, we've seen a good number of competitors move to the area recently and set up a second office down here. This new competition doesn't frighten us, but rather excites us. More firms moving to the area is the ultimate affirmation that they see Raleigh as a center of innovation with great business opportunities. Also, as more firms come down, the tech community will only get stronger, leading us all to develop better work and release slicker applications. Of course, we also think that our combination of great design, affordable prices, and powerful technology also make us a more than formidable competitor to anyone who comes down to our neck of the woods. It's a really exciting time for the area.
Again props to McKinney and everyone else who works to make sure that the Triangle keeps churning out great work on the local and national levels.
-
When Companies Don't Fear Customer Support, Everybody Wins
Oct 10, 2008 by Clay Schossow | Filed in: Clients, Design, New Media Campaigns, Web Design Firms | Comments (0)We've been designing websites for a while and have seen how other firms approach customer support. Typically, customers to "pay as they go" on an hourly basis. So, after client X pays a hefty setup fee to have their site built, they're then stuck paying for customer support by the hour.This method can become quite expensive for the client and leads to a fair amount of tension and inefficiency. The client becomes hesitant to ask for help, afraid that they're "on the clock," straining what might be a good relationship.
At New Media Campaigns, we have a different approach to customer support. We think our method is pretty easy to grasp; it just relies on a little bit of trust. We never charge hourly for support or small changes to a client's site. How are "small changes" defined? They aren't really. Some people think that it's a dangerous offer and puts us at risk to needy clients. Recently, after hearing about our policy, someone commented:
No charge tech support via phone, unless you really screen your clients upfront can be a killer... Granted, your service philosophy sort of squares that up, but no where does it state when the project ends, free phone support ends as well.
In no way is this person's opinion ill-informed; in fact, it's extremely consistent with the mainstream view of customer support. However, while our choice is outside of the norm, it is also not ill-informed and is based on our corporate philosophy and other calculated factors.
Why we think avoiding hourly charges is wise:
First, we put all of our sites on our Content Management System.This allows our clients to be in full control of their content and dramatically reduces the numbers of calls/emails we get for small changes.If there is something small a client can't handle, or if they have a question that we need to hop on the phone to talk out, we're happy to do it. Willingness to provide support atno cost does two things:
- Encourages our clients to try things themselves, knowing we're just a call away. Our strategy reduces required support in the long run and educates our clients.
- Informs us when our software needs a tweak. If several of our customers struggle to accomplish the same task, it isn't their fault. It is ours.
Second, all of our clients pay a small monthly licensing and hosting fee to cover the unlimited use of the Content Management System and also the hosting of their site. To be clear, this is not a retainer. With that fee, we understand that there will be times when theclient needs support from us and needs to get us on the phone or shoot us an email. So, the monthly fee helps offset the cost of us helping the client out when they have questions or need some help with the CMS.
The typical reaction to this policy is fear that the clients will call and ask us for a massive project like a site redesign or to build them a social network for free. However, by building a relationship based on trust and free education, clients become aware of when a change would no longer be considered minor. They're also more receptive to charges after having dealt with our no-hourly service philosophy in the past.They understand that we onlycharge when it's necessary, and that leads to a much more friendly and productive relationship.
Think we're crazy? Haveyour own customer support policy that has had great returns for your firm andyour clients? Let us know by leaving a comment.
-
Important Criteria for Choosing a Web Design Firm
We recently posted an article on the benefits of investing online during tough financial times. Ron Amundson posted a comment in response and had a great question; since due diligence is a key part of this expense, what should people look for when choosing a web design firm?
This is the right question to be asking in the current economic client, efficiency is important. It doesn't make sense to hand your website over to your teenage nephew and it doesn't make sense to spend $40,000 dollars or more with an agency that delivers the first half of an abstract campaign. Finding the right fit means you must ask the right questions.
For those hiring their first web design firm or for those who have been burned before, it is difficult to know what exactly to look for. To help, we put together a list of some top criteria to consider when deciding with whom to invest your online marketing dollars:
- The Web Design Firm's Website - It's a shocking truth, but many web design firms have terrible websites. While it is fine for their site to look different than what you're looking for, the site should be well thought out and demonstrate capability. As a potential customer, if you don't get their site, how can you trust them with your marketing? Look for a firm with a clear website that communicates their philosophy as a company and as a web designer. Also, it is 2008; if they don't have an up-to-date blog, they probably don't understand the web.
- Diverse Body of Work - When looking at the website firm's portfolio, the designs should differ based on the needs of each organization. You do not want a firm that simply provides cookie cutter solutions and all of their websites look alike, or they are just literally using templates. Check out the firm's portfolio and see how they use different design techniques and different web tools they use to solve their clients' problems.
- Web Experience - There are plenty of good designers out there, however, not everyone has the skill set or experience to design for the Web. Web design presents a unique set of challenges that is best handled by designers experienced in interacting online. Expert marketer and blogger, Seth Godin, recently advocated for "looking for the guy with a hammer", meaning it is usually favorable to go with someone that excels in a specific field (web design) rather than just an excellent generalist (design).
- Service Guarantees - We've had many clients begin working with us after other leaving other web design firms, due receiving poor service from the first firm. This can be tough to avoid. One way to get an idea of their service is to check out their service philosophy. Every firm should post this to let clients know how they approach customer service and how they keep their clients happy. Our Service Philosophy outlines that every client has our cell phone numbers and we never charge an hourly fee for tech support or a simple phone call. If the firm you're looking at doesn't publicize their service philosophy, make sure to pressure them for specifics during their pitch and proposal.
- Technology Service Provisions - This criteria focuses more on the firm's technology service rather than its customer service. When visiting examples of the firm's work, be sure to note if the sites are running slowly, demonstrating that the firm put them on a slow server. Also, check with the firm to see their backup policy and security efforts. For example, we host all of our sites on a dedicated server with RAID and nightly and offsite backup.
- References - A capable and reputable web design firm should have no problem giving you references that can vouch for the firm's work. Some firms publish these on their site (we feature testimonials in sidebars throughout our site) and others choose to keep them out of the public domain; however, upon request, any firm should be willing to provide you with a list of at least 3-5 clients that can vouch for their work/service.
Each project has its own budget and specifications, which will require you to look further into each firm based on your requirement, but this post should serve as an overview for things that should quickly qualify and disqualify a firm. Too many times, we've had people come to us after wasting a lot of money on a firm that didn't deliver. By using these criteria, you should be able to curtail your risk and potential of having a bad experience. What are your thoughts? Do you have additional criteria you use when choosing a firm? Have you had a bad experience that you could have avoided? Comment on this post or get in contact with us. Hopefully, this post helps make you the decision that's best for your organization!
-
Access to Programmers Is a Necessity for Agencies to Design for the Web Correctly
Sep 26, 2008 by Clay Schossow | Filed in: Content Management, Design, New Media Campaigns, Technology Partner | Comments (0)Almost every agency sells interactive design as a specialty nowadays, however, many of those agencies are solely design shops without adequate access to real programmers. They can get the CSS and HTML hacked together and throw up a site at a domain, but they never have a real conversation with a legitimate programmer. I think in today's Internet Culture, there are many reasons outside of just implementation necessities that every design firm needs a reliable and trusted technology partner or programmers on their staff.
Today's web is all about functional web design and smart solutions, not heavy Flash sites that are confusing to navigate and that don't even work in some browsers. While having access to a skilled programming team is certainly a smart practical decision in regard to implementation, I also think programmers' unique view of the web is especially helpful, and almost necessary, when planning a design for the modern web. There are many benefits that come from having access to a talented programming team:
Also, just to be clear, when I say "programmers" throughout this article, I mean a legitimately talented team (could even be as small as two people) of technologists competent in several programming languages - not Joey, the intern who learned a little CSS and HTML in between making copies for the boss.- The first reason is the unique way that programmers approach problems. They're taught to cut through the extraneous crap to find clean and elegant solutions to very daunting problems. This approach is the breath of fresh air that many design firms need when staring down a site map that contains dozens or hundreds of pages for a client that needs an intuitive and easily navigable site.
- Next. Programmers are generally extremely diligent at following trends and upcoming technologies for the web. The programming community is extremely tight knit, and programmers typically do a great job of communicating with one another about what's going on and what's next in the industry. Designers have enough headaches in just following new design techniques and popular campaigns, it'd be almost impossible for them to also keep up to date on what's going on in the realm of technology. A good programming partner will be able to help an agency quickly find relevant and inexpensive solutions to their ideas, rather than having to re-invent the wheel, since they will know of the relevant techniques and products already in the space.
- Furthermore, programmers are in the business of innovating and this innovation is typically what agencies sell. However, one of the principles of an innovative company is fostering a culture of innovation within your firm. By nature, programmers are used to devising new and better solutions to old problems - it's very rare that you meet a programmer that doesn't have at least one side project to make their life, or in some cases, everyone's lives easier. While designers and creatives may consider themselves the aristocrats of the Creative Class, programmers are the ones that innovate truly for "love of the game" and deserve to share the same caste level as other creatives.
- Finally, programmers can brainstorm great ideas for a proposal or a new site that a typical creative would never have thought of unless they'd seen it done by someone else. Programmers are masters of their craft and often devise new, creative solutions to meet a client's needs. These solutions, ranging from simple to robust, can really improve a site and help deliver more value to the client. In the end, that's a web design firm's job: to deliver value. A team of programmers can be a significant piece to that puzzle, because they can think of new ways to deliver incredible value to clients that a typical agency may never have come up with.
While we most cerainly consider ourselves a full service web design firm, we also have a very legitimate claim to being a technology company full of programmers. The majority of our designers are also very accomplished programmers - they're as gifted in Photoshop as they are crafty with PHP, Rails, JavaScript, AJAX, and more; in fact, our programming team developed a proprietary system that serves as a Content Management solution for ad agencies. As a result, our team works as a technology partner for ad agencies around the country. By closely partnering with us and having a mutualistic relationship, these agencies are doing exactly what I'm advocating for in this article by giving their designers direct access to talented programmers.
I think all of our partner agencies would agree that we add beaucoup value on top of our CMS and our mad programming skillz. More often than not, our partners call us to discuss general strategy and get web advice rather than to discuss the specifics of an implementation - we're happy to act as a technology resource for ad agencies, and we think it's really critical that each firm find the right programming partner for their own agency. -
Growth of Online Ad Spending Re-Emphasizes Importance of Well Designed Websites
TNS Media Intelligence's recent report on US ad spending in in the first half of 2008 reveals that advertising expenditures are down 1.6% for the first half of this year. This should not come as much of a surprise considering the current state of the US Economy. The one medium that had signicant growth was the Internet, as online ad spending grew by 8.0%.
I imagine that many of our readers have engaged in some sort of online advertising this year, whether it be via Google Ads, Display Ads on a blog or news site, or another method. What is most shocking to me is the amount of ads that lead back to truly poor websites. Many times, the site won't even be optimized for my browser (Mozilla Firefox) and will look broken when I visit the site. It boggles my mind that people are willing to pour money into online advertising to push traffic to a site that does not speak well for their brand. If you were purchasing a targeted ad in a newspaper that would be seen by thousands of consumers, would you just let your next door neighbor's kid doodle on a piece of paper? Of course not! You'd make sure that the ad was a polished and distinguished representation of your brand. Why should it be any different when your advertising online?Your website is most likely the most important representation of your brand in today's marketing climate - it's critical that you make a great impression. It may mean that you have to spend a little more than you originally expected to get a great design and equip it with a powerful content management system. However, that cost becomes much more palatable when you think of the longterm implications of your online investment and the resources you will dedicate to driving people to the site.A good web designer will talk through your goals of your site with you to ensure it will engage your target and create leads for you. Some basic things to remember when launching a new site are:- It's important to be able to manage your website's content, as new content will engage visitors and encourage them to return.
- Functional web design and structure is always more important than being extra flashy - make it easy for visitors to get to the content that's relevant to them.
- Create good content! This is one of the pivotal things that distinguishes a good site from a bad one.
- Feel comfortable with your web design firm. You'll be working intimately with them and you are making a large investment in them; make sure to browse their portfolio as well as their service policy. Working with a good partner will make the experience much easier on you.
Well, those were just a few tips, but the most important takeaway here is the importance of having a well designed site. It only makes sense that your organization's most visible element also be its best. -
CSS Sprites2 Refactored: Building an Unobtrusive jQuery Plugin
Note:
This post is in reference to the recent A List Apart article in which Dave Shea expands upon the classic CSS Sprites technique by using jQuery. His technique allows for animations between the link states while still being fully degradable for visitors that do not run javascript.
In this post I am going to revisit the markup, css and javascript in the CSS Sprites2 article to address some of the concerns I had when viewing it. I will also clean up the function and turn it into a handy jQuery plugin that allows for more control over the animation while requiring less initial configuration. To start things off, here is the end product of this technique using either Dave's method or the method described in this post:
To set the stage for my plugin writeup, it is important that I first describe how this technique works and the ways I would like to change it. Below is a quick overview of the original technique along with some minor changes I made to the markup and css. If you would like to jump straight to the plugin writeup, click here.
How CSS Sprites Works
CSS sprites were written up in A List Apart back in March of 2004. The premise behind sprites is that instead of slicing up an image into each of its states, we are able to use the background-position declaration in css to just reposition one giant image.
Background image containing all states.
There are a couple of benefits to using this technique. First, there is no reason to worry about image preloading, since all of the states are loaded at the same time. When you mouseover a button for the first time, there will be no flicker or pause before the hover state is shown.
Second, and perhaps more importantly, only one image is downloaded by the browser instead of as many as 4 for each button. Had we sliced the above image and implemented the menu without sprites, there could have been as many as 16 images used. Each of those images would have needed a separate request to the server and hurt the performance of your site. This is such a big issue that the Yahoo developers site considers minimizing http requests the #1 thing you can do to your content to improve page load times. (Performance Factors, YSlow Firefox add-on)
What Changes with CSS Sprites2
CSS Sprites2 keeps all of the advantages of the original technique, and then adds animation. Rather than relying directly on CSS styles to immediately show the different states, instead it uses javascript to animate between the different states. Should a user not have javascript, the technique degrades gracefully.
The javascript adds animation to the technique by placing an invisible
over the original link, setting its background-position to show the appropriate state, and transitioning it in and out on the appropriate mouse events.Now that the technique has been covered, I am going to go over the quick changes I made to the original article and then walk through the creation of the plugin.
Change to the markup
A quick concern I had with the implementation was how an active list item was indicated. Rather than giving the item itself a class, the parent unordered list is given an additional class.
Original Markup
<ul class="spritesnav current-about"> <li class="home"><a href="#">Home</a></li> <li class="about"><a href="#">About</a></li> <li class="services"><a href="#">Services</a></li> <li class="contact"><a href="#">Contact</a></li> </ul>If this seems hacky, it's because it is. Essentially it avoids an IE6 issue with multiple classes on a single element. There is not a good way around this problem while maintaining semantically clean markup. My solution was to avoid the issue by using ids instead of classes to identify the individual nav items. This has obvious drawbacks, but the IE6 Deathmarch has begun and I consider this my small contribution to the movement.
New Markup
<ul class="nav"> <li id="home"><a href="#">Home</a></li> <li id="about" class="active"><a href="#">About</a></li> <li id="services"><a href="#">Services</a></li> <li id="contact"><a href="#">Contact</a></li> </ul>
Change to the CSS
Since I made a change to the markup, I also needed to make a change to the css. Below is the CSS for a single nav item using the original technique:
.nav .home a:link, .nav .home a:visited { left: 23px; width: 76px; } .nav .home a:hover, .nav .home a:focus { background: url(blue-nav.gif) no-repeat -23px -49px; } .nav .home a:active { background: url(blue-nav.gif) no-repeat -23px -98px; } .current-home .home a:link, .current-home .home a:visited { background: url(blue-nav.gif) no-repeat -23px -147px; cursor: default; } .nav-home, .nav-home-click { position: absolute; top: 0; left: 23px; width: 76px; height: 48px; background: url(blue-nav.gif) no-repeat -23px -49px; } .nav-home-click { background: url(blue-nav.gif) no-repeat -23px -98px; }Looking over this css, the purpose of most of it is obvious. It covers the LVHA states and treats the :focus state the same as the :hover state. Since the information about which state is selected is in the parent
-
- It pollutes the namespace with another function.
- All of the parameters are required, though they don't need to be.
- Passing in a selector for this purpose doesn't seem very "jQuery"
- The options for animation are unnecessarily limited
- allowClick - Allows click events to be disabled by setting this to false.
- show - A hash of animation options to be used when the hover is enabled.
- hide - A hash of animation options to be used when the hover is disabled.
- activeClass - The class the plugin should use to determine which nav items are active and therefore shouldn't have mouse events attached.
- clickClass - The class that should be added to the placeholder div when a nav item is clicked.
, you can see the .current-home selector at work. The last two handle the click states when javascript is enabled.
By pulling declarations upwards where possible and switching to ids, the following is the CSS for the same nav item with the new markup:
.spritesnav #snhome a:link, .spritesnav #snhome a:visited, .spritesnav #snhome div{ left: 23px; width: 76px; } .spritesnav #snhome a:hover, .spritesnav #snhome a:focus, .spritesnav #snhome div{ background: url(blue-nav.gif) no-repeat -23px -49px; } .spritesnav #snhome a:active, .spritesnav #snhome div.click { background: url(blue-nav.gif) no-repeat -23px -98px; } .spritesnav #snhome.active a:link, .spritesnav #snhome.active a:visited { background: url(blue-nav.gif) no-repeat -23px -147px; cursor: default; }Changes to the Javascript
The javascript code in the original article is well written and clean, but I believe it takes the wrong approach. Rather than use jQuery's defined plugin architecture, it is just a simple function call with a number of parameters:
$(document).ready(function(){ generateSprites(".spritesnav", "current-", true, 150, "slide"); });While this solution gets the job done, it has a couple of problems:
The obvious solution to these problems is to take the code that Dave wrote and turn it into a proper jQuery plugin. Once we are done with this, we will be able create the same sprites enabled menu using the following code:
$(document).ready(function(){ $('.spritesnav').sprites(); }By following jQuery's plugin authoring guidelines, I am making all of the parameters optional by supplying sensible defaults. When implementing a plugin, this is done by using the jQuery.extend() function. Additionally, I am following their animation guidelines which allows for any type of animation to be used that jQuery or its extensions support. Below is the plugin declaration and the jQuery.extend() call I use to set up defaults for all of my parameters:
jQuery.fn.sprites = function(settings) { settings = jQuery.extend({ allowClick: true, show: {opacity: 'show'}, hide: {opacity: 'hide'}, activeClass: 'active', clickClass: 'click' }, settings);The optional parameters above do the following:
With this set up I am ready to execute the logic of the plugin. I followed Dave's work pretty closely. The only place I parted was that I used chaining and traversal where I could rather than initiating a new selection. This probably makes the plugin (negligibly) faster while also making it a little bit easier to follow. I also kept everything in one function, eliminating a few more selections. Below is the rest of the code for my plugin with my comments stripped.
jQuery(this).children().each(function(){ if(!jQuery(this).hasClass(settings.active)){ jQuery(this).children('a').css({background: "none"}); jQuery(this).hover(function() { jQuery('') .prependTo(this).animate(settings.show); },function(){ jQuery(this).children('div').animate(settings.hide, function(){ jQuery(this).children('div').remove(); }); }); if(settings.allowClick){ jQuery(this).children('a').mousedown(function(){ jQuery(this).prev().addClass('click'); }).mouseup(function(){ jQuery(this).prev().removeClass('click'); }); } } });As you can see it is extremely compact and nearly everything has become an option. If you know just a little bit of jQuery, you might be wondering why the famous '$' isn't being used in the code above. When writing a plugin, it is important to be mindful of potential collisions with other libraries. For that reason it is recommended that you use 'jQuery' instead. If you really want to use the '$' or other alias in your plugin, you can wrap your plugin in an anonymous function:
(function($) { // plugin code here, use $ as much as you like })(jQuery);If you like this plugin and want to add it to your site, below is an example you check out and a zip file containing all of the files for this project.
-
-
New Media Campaigns Web Design Listed on CSS Divine
As you may have noticed, newmediacampaigns.com has a new look. Last week we launched a design refresh that focused on improving our homepage. Our main addition was the slideshow on the homepage that features some of the recent work we have done for clients. We have also improved other areas of the site and updated our cool sliding web design portfolio.
Using Google Alerts, we noticed today that CSS Divine had selected our new site design to list on their homepage. CSS Divine is a website devoted to beautiful web design that has been implemented using CSS.
It is an honor to have our work recognized for its beautiful design as well as its technical features. If you have any feedback on the refresh, let us know.
RSS Feed
Call: (919) 485-4118
