CSS Image Hover, No Blinking

Okay, how many of you have ran into the issue with the hover state of an image and it flickers or blinks?

I’ve ran into this issue a few times and a great way to fix this is to use one image that has both the off and on states in a single image file. Let’s get started!

For this example I will be using an image from a previous project of a map, to download the image, right click here and “save link as” or “save image as” to your computer.

Step 1.

First open the image in Adobe Photoshop.

Step 2.

Next we need to create a hover state for this image so when a user mouses over the image there’s an indication that the button is active. To do this, we need to duplicate the image layer. Make sure the layer is selected and then hit Ctrl + J. Then double-click on the new layer and rename it to “hover”.

Step 3.

So for this next step we want to add some sort of hover effect to the image so that it looks active. First create a new layer in your layers palette by hitting Shift + Ctrl + N. Next make sure your “hover” layer is selected and using your Marquee tool make a selection like the one in the image below. Make sure that you do not select the stroke/outline of the image because we want that to stay the same color.

Step 4.

Select the Paint Bucket Tool, have your foreground color set to white and in the settings at the top navigation set the opacity to 35%. Then fill in the selected area by clicking inside it.

Step 5.

Now merge this layer with the “hover” layer by hitting Ctrl + E.

Step 6.

The next thing we want to do is double the height of the canvas size to make room for having both the regular and hover states of the image on the canvas at the same time. So either select Image>Canvas Size or use the keyboard shortcut Alt + Ctrl + C to open the “Canvas Size” Dialog Box. Since the height of the image is 110 pixels we want to double that so set the new height to 220 pixels. Also, in the Anchor section select the middle square in the bottom row. This will make the canvas add space only to the top of the image.

Step 7.

Next make sure you have the Move tool selected and select the “hover” layer. Then with your keyboard use your up arrow key to nudge up the “hover” layer till it lines up with the top of the image.

Step 8.

Now select File>Save for Web and save your file as “terminalWidget.gif”. Now you are done with Photoshop and we can start using some HTML and CSS!

Step 9.

Below is what the HTML code will look like. We have an anchor tag wrapped in a div tag with an id of “LocateTerminal”.

Step 10.

After we have our HTML, the last thing we need to do is to set up our CSS for the different states of the button. Remember the original image’s height? It was 110 px and we’ll use that height in our CSS declaration for our #LocateTerminal a id’s width. Also notice that we have the background image set to our terminalWidget.gif image and we have the background position set to 0 and -110px. This will only allow the bottom part of our image to show while hiding the hover state section of the image.

Then in the next CSS rule for the id #LocateTerminal a:hover we simply use the background selector with the same image but this time we set the background position to 0 0. So now when a user hovers over the image, the on state will be shown thanks to the wonderful magic of CSS!

To see an example of this button’s functionality in action click here.

That concludes this tutorial. Thanks for reading through it and visiting us. Stop back again soon!

Happy Trails!

- Dan O.

Website First Impressions

Think the way your website looks doesn’t matter? Web users form first impressions of web pages in as little as 50 milliseconds (1/20th of a second). In the blink of an eye, web surfers make nearly instantaneous judgments of a website’s “visual appeal”. First impressions can affect subsequent judgments of perceived credibility, usability, and ultimately influence purchasing decisions.

Below is a list of things that you and your designer need to take into account when designing your website’s First Impression.

• Load Time – Most of us are very impatient and slow loading pages will not make us want to return. On the other hand, pages that load quickly will encourage visitors to navigate through your site knowing that they won’t have to wait very long for each page to load.
• Colors – The colors of your website have a huge impact on the overall attractiveness of the site. Choosing the right color combinations can be difficult but taking the time to get it right is very important. If you are unsure at all, take the time to get a professional designer to help with this.
• Logo/Branding – One of the most important parts of your website will be the use of your logo and the overall brand of the site. Most importantly, the logo should help to brand your business in the way that you want visitors and customers to think of you.
• Typography – Don’t discount the subtle influence typography and fonts. Typography is the art and technique of arranging type and type design. A change in the typography may not be a drastic change, but it can make all the difference. Think about how beautiful all of Apple’s products are. If you have never noticed their use of Typography before, go back and look again!
• Layout – One of the most important design elements is the layout. Whatever layout you use should draw the reader’s attention to those items and services that are most important. Layout should be used not only to create an attractive design, but also to make the site easy for visitors to use.
• Ease of Navigation – We’ve probably all been at websites that looked like they had great content that we wanted to read, but just couldn’t find what we wanted. I’m not sure if there is anything more frustrating on a website than poor navigation. On the other hand, well-constructed navigation can help visitors to have a very positive experience on the site.
• Clarity of Purpose – Web visitors to your site should be able to quickly determine the purpose of your site and the services you offer.
• Unprofessional Items – Some items like low-quality animated GIFs and hit counters can give a negative first impression. Generally anything that makes your site look like it was designed 10 years ago should be avoided.
• Quality of Images and Photos – It’s amazing how much impact a high-quality photo or graphic can have on a design. Fortunately, there are plenty of resources online for getting high-quality, low-cost photos, and some are even free. Personally we recommend www.istockphoto.com.
• Popups – Most internet surfers now have some sort of popup blocker, but some websites are still using them. Most visitors don’t appreciate popups that aren’t blocked, and this can create a bad impression.
• Video and Audio – Video has its place and can be very useful for conveying your message. You need to make sure you have a way to stop the video and audio. It needs to be very easy to find and quick to respond or you will have people jumping off the site quicker than they got there. Think about that page you pull up at the office and next thing you know music and video audio is blasting out of your speakers. What do you do? You close it as fast as possible. Remember that when you think you want it on your site.
• Flash Intros – Positive or negative, flash intros will impact the first impression of your web visitors. These need to be carefully thought out and only used if appropriate. Flash intros ran wild on the net for a while and they turn a lot of people off. What ever you do, make sure you give your visitors a way to “skip” the intro and get to your content.

—————————-

radius180 can help you make the most of that First Impression. At radius180, we provide you with a dedicated team of professionals who always provide you with what you want, on-time and within your budget. Contact us today about your next Web design project – 856.975.0180 or info@radius180.com.

Small Businesses: Back Up Your Data!

This is one of the most important, and yet also one of the most neglected areas of business networks. We all assume our data drives and storage devices will run forever. They won’t. As a matter of fact, 100% of all drives will fail at some point – they are simple machines that break down over time. With that in mind, backing up your data should be at the top of your computer maintenance list (with virus protection a close second). Without having full backups of your data, you are running the risk of losing that data forever.

Business Statistics

• According to the National Archives & Records Administration in Washington, D.C., 93% of companies that lost their data center for 10 days or more due to a disaster filed for bankruptcy within one year of the disaster. Of those companies, 50% filed for bankruptcy immediately.
• According to the Access Markets International consultancy, more than 40% of small businesses rank automated data backup and recovery as their primary IT need.
• A Price Waterhouse Coopers survey calculated that a single incident of data loss costs businesses an average of $10,000.
• Human error is the cause of 32% of all data loss.

———————————————

radius180 provides managed services that will ensure your data is backed up properly. Our team of professionals can also help create a Disaster Recovery Plan in the event disaster should occur. Contact us today for a free consultation – 856.975.0180

Twitter 101: The Basics

So you are ready to start using twitter. You have signed up for your account but you aren’t sure how to use it. We have outlined the basics you will need to get started below.

1. Tweet: First, you only have 140 characters that you can put into the “What are you doing?” textbox. Then, once you hit “Update”, your message is blasted out to everyone who is following you – that’s a tweet.

2. Following/Followers/Tweets: This is pretty simple. You will see three counts on your twitter account (upper right corner): (1) Following – these are the people that you have signed up to follow and you get notified of their tweets. (2) Followers – these are the people that are following what you tweet. You want peolpe to sign up to “follow” your twitter posts. The more people you have following you, the broader your reach when you tweet about your business and products. (3) Tweets – this is a count of the number of tweets you have put out there.

3. @ Replies If you follow a decent amount of people you will find that there are a lot of updates that you want to reply to that person on. If you start a tweet with @username it will appear in that person’s replies tab.

4. @ Mentions A mention is any twitter update that contains @username in the body of the message. These “mentions” will show up in that user’s replies tab also. You can put multiple @usernames in the body of a message

5. Hashtags This is a way of grouping tweets. Basically, when you put a hashtag (#) in front of a word you are making a category and when you click on the tag you will get a grouping of all tweets using that same hashtag.

6. Re-Tweets: If you see an RT in a tweet that means that the person is “Re-Tweeting” it. So if you want to pass on some information that you have received from one of the people that you are following, just copy and paste it into your “What are you doing” textbox but remember to put the RT in front of it. The RT marker does not do anything dynamic on twitter, it is just a convention that the twitter community has adopted.

7. Don’t Be Afraid: Lastly, don’t be afraid of not saying the right thing, or not having anything to say. Just jump in!

———————————————

To learn how radius180 and Twitter can help your business – please call us at 856.975.0180 or email us at info@radius180.com

Create A Business Facebook Page

Creating a Facebook page for you business is a great step to furthering your corporate Web 2.0 makeover. You will need a personal Facebook account to setup a business page. The reason is that business pages are managed and created from within your personal account as well as accessed via your personal login. So if you try to setup a business page first–which you can–you will actually be going through both setups at the same time. Our advice would be to setup your personal page first then add your business page afterwords.

1. Go to the facebook login page and instead of logging in, go to the link for Create a Page for a celebrity, band or business (under the Sign Up button).

   

2. Follow the instructions on the Create New Facebook Page
   (Note: once you chose your service or brand the box for “Name of….” gets populated with what ever service you have picked (i.e. Name of Professional Service). You do not want to put your professional service here. You want the name of your business to go here. Otherwise you will create a page called, “Network Management Services” for instance. So, enter your business name here.

   

3. Create a Facebook Account – again, you will need a current facebook account, otherwise you can create one now. Login using your information.

   

4. Your account is now created. Copy the URL of your page a past it somewhere in a document you save. It can be a little tricky finding your page if you accidentally click off it until it is published. This little copy/past could save you a lot of frustration.
5. Find the link for you to become a fan of this page and click it. Your page will not show up until you are a fan.
6. Next, begin with editing your Info page – fill in all information (location, phone, hours, website and description).
7. Now let’s add a profile picture. We suggest you put your logo here (unless you are really as good looking as you think you are). Adding a picture is not hard, but getting it to look just right with the proper background color and thumbnail image can take some time. You may want to have your advertising department play with this part.
8. Edit your Information, description and start adding albums and photos. Branding, brochure images, corporate outing photos… all good ideas for your albumns.
9. Publish your site – when you are ready go ahead an publish your site by clicking the link above your company name.

   

There you have it… it’s not that hard and should take you about 30 minutes to get it right.

———————————————

To learn more about how Web 2.0, or to see how radius180 can help your business make the leap to Web 2.0 please call us today at 856.975.0180 or email us at info@radius180.com

Web 2.0 – What does that mean?

The internet continues to evolve. Ten years ago the Web approach to a corporate Web site was static. Companies gathered their information, posted it online with some basic information – - about, services, contact us. Web traffic was slow and visitors who did find your site quickly stopped returning because it was the same site, same information. Corporate sites (especially those for small and mid-sized business) laid dormant with the same content for years.

Web 2.0 is alive! Web sites of today are living breathing marketing machines, constantly changing information, bringing new content, fresh ideas and instant communication. In contrast to the “old” internet, Web users constantly return to sites and gain new and fresh information.

How can my company use Web 2.0?

Now that we understand that the old internet was static and the new internet is much more dynamic, lets look at how your business can leverage the powerful movement of Web 2.0.

• Authoritative Branding: social media sites like Facebook, Twitter, LinkedIn, Youtube, as well as the interactive features of blogs and forums allow you to grow your brand. You can establish your name, your expertise, and position yourself as an authority in a certain market and build credibility in your prospects’ minds.
• Connect With Your Prospective Clients: when you’re delivering up to date information across the various Web 2.0 platforms, you’re delivering value to your prospective clients first. They begin to trust you and seek you out online when they have questions or need your services.
• Mass Communication and Increased Exposure: anyone can leverage the reach of Web 2.0 to create global marketing platforms without an advertising budget. Web 2.0 has the tendency to create viral marketing – videos posted to Youtube can show up across thousands of other websites in a matter of hours. Your messages are online and working for you 24 hours a day, 7 days a week, and all of your communications should be pointing back to your website and bringing targeted prospects to you.

In the past, the marketing rainmakers were in charge. They employed methods that could effectively convince people to buy their products or use their services. Today however, consumers are far more educated and aware of the techniques marketers use and are therefore more resistant to these older methods of advertising. Consumers are in control now. A savvy business owner realizes that understanding what people are thinking and saying about your brand is useful to connecting with your prospects – and influencing sales. Web 2.0 is the most effective marketing tool available today to reconnect with those lost consumers.

———————————————

To learn more about how Web 2.0, or to see how radius180 can help your business make the leap to Web 2.0 please call us today at 856.599.8226 or email us at info@radius180.com

Avoid Cheap Web Design

So you are looking for a site designed by a professional designer with a great portfolio under their belt… problem is you only want to spend in the $500 neighborhood.

Any Web developer worth their salt will RUN, RUN, RUN!!!! Unless of course this is a site for someone in your family, in which case it is just better to pretend like you don’t do Web design at all. Perhaps if the family thought you were a carpenter or accountant, or whatever – at least then they would leave you alone at family gatherings. And maybe, just maybe, next Thanksgiving dinner you will not end up in front of Aunt Betsy’s computer cleaning spyware off while the family enjoys its turkey!

Back to the point of this posting – - You need a website, you know you need a website. You “googled” around and found someone that will do it for you for about $500. You think, “Great!”. But only to be let down. Within in days you realize that you haven’t heard back from them, you wonder if they just took your money and ran, but finally they get back to you and they are asking the same probing questions again. Its obvious to you that they did not take copious notes the first time you talked. They make you promises that the site will be ready within a couple days… in actuality, weeks go by. You start to get frustrated. You call back… no answer/no return call.

Finally weeks later you get your site delivered. Its not what you wanted but you don’t say anything because you just want this to be over. You immediately start looking for someone to re-design your “new” website…

Its a sad story, but one we hear over and over. See, we are that next call. We are the pro’s that come in and fix it.   The way it should have been done the first time. Will it be more expensive? Yes. But do you want to waste a month of time to get something you don’t want or invest the right time and money and get the proper return on your investment?

So if you still think you can do it yourself or cut some corners to get a cheaper rate, just know that this story was about you.  We understand that sometimes your budget will only allow for that $500 site.  At radius180 we will work within you budget – it is not uncommon for us to offer payment plans.

———————————————

radius180 provides you with a dedicated team of professionals who always provide you with what you want, on-time and within your budget.  Contact us today about your next Web design project – 856.599.8226