Welcome to the home of artist James Romeo

James Romeo Logo

Thank you for your interest in my work. My name is James Romeo. I earned a BFA from the Savannah College of Art and Design. My work is a mixture of technical skills and creative design. People are at the heart of everything I create. I am an advocate, an inspirer, an entertainer and an educator. It is my passion to leave a positive mark on the way people view, interact and experience everyday life. Through interaction design, video production and utilizing the power of the internet as a communications and education tool, I believe my work continues to achieve that every day.

Make webpages load faster by considering image Metadata

Photoshop CS5 Save for Web & Devices

When you create web images in Photoshop, if you already use "Save for Web & Devices", and set Metadata to "None" as demonstrated in the image to the right, read no further, give yourself a satisfying pat on the back because you understand the importance of efficient web design! However, if this discussion piques your interest, you'll definitely enjoy this tip. Removing Metadata, when it is not necessary, can save tens of kilobyes in the total page size and loading time for your users, notably for those on mobile connections.

The way in which you save images has a direct effect on the total size of a web page and the time it takes the page to load. In Photoshop, when saving the final image, you should always use the menu option labeled "Save for Web & Devices". The window that appears has a plethora of powerful options. If this is new to you, I highly recommend learning it in depth.

The difference in file size between JPEG, GIF, and PNG is well documented. You should also consider the JPEG quality settings or efficient use of the Color Table. I won't discuss those topics today. In this post, I will focus only on Metadata.

The choice to include or exclude Metadata from your image should always be deliberate and in consideration of the project needs. If there is not a specific reason you are including Metadata, it should be set to "None". There is usually no reason to include Metadata in layout graphics and navigation icons. Does the user need to know that a happy face icon was saved with "Adobe Photoshop CS6" on "Windows"?

On the other hand, photographers or web apps that deal with photographs may find it valuable to include certain metadata for certain images in order to share information about how a photo was taken, such as shutter speed and aperture settings.

You can easily view image metadata in Adobe Bridge.

The example below shows two identical images, saved in Photoshop CS5. The one on the left was saved with metadata and the one on the right was saved without metadata. The difference in file size is 4.317KB. This image is from a web-based hockey team management game that I created for mobile and tablet platforms. In the game, there are 17 of these images on a single page, representing the players on the team roster. Not including other images that appear on the page, the total savings would be 73.389KB (4317 x 17) by removing metadata on these 17 images alone.

image with metadata

With Metadata
File size - 14,383 bytes

image without metadata

Without Metadata
File size - 10,066 bytes

By James Romeo

Pure CSS Animated rollover effect with unlimited color possibilities using a single transparent PNG image

When creating websites with dynamic user experiences, especially web-based games, we may be challenged to change the color theme of our navigation menu to best communicate certain information to the user. Traditional rollover image sets, taking into account a new set of images for each color theme, will increase the total size of the website and the time it takes to download with each color theme required. This is especially concerning on a mobile connection. Imagine a site where each user profile has a different user-defined color theme or a sports site where each team page is displayed with a unique color theme. This applies to other graphical elements of the page as well, not only the navigation menu.

The other challenge is how to present our rollover button with a nice animated transition, such as a color fade-in, on mouseover. A simple color fade does not warrant creating a CSS sprite animation. Again, the total size of the website and download time would be negatively affected.

The solution is to separate the effect from the image! We can handle the effect with CSS, and using a transparent PNG, we can mask the parts of the image where we wish the effect to show through. The technique I describe utilizes a layered appraoch.

By separating the effect from the image, we only require the user to download one PNG image per navigation button. This image should then be cached locally for use on subsequent pages, regardless of the color theme of that page. Less to download means faster loading times and happier users.

Behind the transparent PNG image, we have a div. With CSS, we have total control over the background-color of this div. We could even use a background image here for a more complex layered effect. In the demo below, I am changing this color every three seconds to help you visualize the simplicity of this technique. When we layer the transparent PNG over this div, the color of the div always shows through the transparent areas of the PNG according to the alpha channel defined in the image.

In order to achieve a rollover color change, we give the img an initial background-color that is the same as the base color in the button image itself. This example uses a grey button with an RGB value of R102 G102 B102, or HEX value 666666. This is our initial background-color. We change this background-color to transparent with the pseudo-class :hover, giving us our rollover effect.

In short, we are displaying a default color behind our transparent PNG, and then making it transparent on hover, so that the background-color of our div will show through. It is kind of like opening venetian blinds to reveal what is outside your window. In this example, I have animated this change using CSS animation. Furthermore, I have also provided a more simplified block of CSS code which does not make use of CSS animation.

This technique is demonstrated by the navigation demo below.

Demo

Mouse over the menu to the far left.
To demonstrate that this rollover effect is purely achieved by the background-color of the div that contains the transparent PNG image, I have cycled the background-color every three seconds. The current color is indicated by the color swatch to the left.

This navigation menu is from a web-based hockey team management game that I created for mobile and tablet platforms. Each user manages a different team in the game world and each team has a different color theme. The rollover color in the navigation menu coincides with the currently selected team. The use of color here reinforces the user's confidence that their team selection was recognized and navigation flow has shifted to a specific hockey team in the game world.

This technique enhances the visual experience for the user while maintaining a low bandwidth, highly efficient design. I independently discovered it in the autumn of 2012. If you know of anyone else who has been using a similar technique, please let me know so I can compare notes!

The code is presented below. Please use it and let me know if it helps. I truly appreciate hearing from you! Click here to contact me.

HTML

<nav><div id="navbar">
<a href="#"><img class="navimage" src="info.png" width=70 height=70 alt="info button"></a>
<a href="#"><img class="navimage" src="roster.png" width=70 height=70 alt="roster button"></a>
<a href="#"><img class="navimage" src="strategy.png" width=70 height=70 alt="strategy button"></a>
</div></nav>

CSS (with animated fade effect)

#navbar {
 overflow: hidden;
 background-color: #ffcc00; /* rollover effect color */
}

.navimage {
 float: left;
 margin: 0;
 background-color: #666666; /* default color */
 cursor: pointer;
}

.navimage:hover {
 background-color: #ffcc00; /* rollover effect color for browsers that don't support animation */
 animation: navimagefade .5s ease-out;
 animation-fill-mode: forwards;
 -webkit-animation: navimagefade .5s ease-out;
 -webkit-animation-fill-mode: forwards;
}

@keyframes navimagefade {
 0% { background-color: rgba(102,102,102,1); /* default color opaque */ }
 100% { background-color: rgba(102,102,102,0); /* default color transparent */ }
}

@-webkit-keyframes navimagefade {
 0% { background-color: rgba(102,102,102,1); /* default color opaque */ }
 100% { background-color: rgba(102,102,102,0); /* default color transparent */ }
}

CSS (without fade effect)

#navbar {
 overflow: hidden;
}

.navimage {
 float: left;
 margin: 0;
 background-color: #666666; /* default color */
 cursor: pointer;
}

.navimage:hover {
 background-color: #ffcc00; /* rollover effect color */
}

By James Romeo

An important use of the non-breaking space (&nbsp;) HTML Entity

As web designers, we have all worked with HTML Entities, such as &amp; (&) and &copy; (©). The use of these entities, to represent these characters, ensures that they will properly display for all users on all platforms. One character that is not always understood is the non-breaking space, represented by the HTML entity &nbsp;. Using a non-breaking space, rather than a regular space, will ensure that the text separated by it will not wrap around to the next line with a line break.

One of the most important uses for the non-breaking space is when working with French Language websites. In French typography, there are many cases, including the labeling of units, currencies, abbreviations and certain punctuation, when these are separated by a non-breaking space. To avoid this text from becoming separated on a new line after a line break, it is important to use the HTML entity &nbsp; to define the behavior of this space.

As native English speakers, we may not work with multilingual websites often, but when we do, it is important that the copy we are given will be elegantly displayed for our international users. Unless there is a process automatically doing this for us, we need to hard code the non-breaking spaces using the &nbsp; entity. We cannot rely on the default web browser behavior. It will not render the page as expected using standard spaces. The non-breaking space (&nbsp;) HTML entity must be used. It is our responsibility as web designers to ensure that the website respects the typography constructs of whatever language we are working with.

In the French language, non-breaking spaces are called "espaces insécables". In French typography, they are used to enhance readability between words and symbols or abbreviations. I encourage you to research this for a thorough understanding of "espaces insécables".

For example, when using the question mark or exclamation mark in standard French, a non-breaking space (&nbsp;) is used to separate the last word from the punctuation. In Canadian French, there is no space between the word and the question mark or exclamation mark, as it appears in English. For this reason, it is important to know if you are designing for a specifically Canadian audience.

Regardless of whether your audience will be viewing the site in standard French or Canadian French, using the appropriate typography standrds regarding the non-breaking space will ensure that words, symbols, abbreviations and punctuation are never separated to the following line due to the browser's word wrap behavior. Using the non-breaking space, the browser will keep this text attached, even if it falls on a line break.

37.2 °C (37.2&nbsp;&deg;C)
M. Jean Dupont (M.&nbsp;Jean Dupont)
Comment allez-vous ? Très bien, merci ! (Comment allez-vous&nbsp;? Tr&egrave;s bien, merci&nbsp;!)

By James Romeo