Click on photograph to return to gallery
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.
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.
By James Romeo
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.
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.
<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>
#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 */ }
}
#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
) HTML EntityAs web designers, we have all worked with HTML Entities, such as & (&) and © (©). 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 . 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
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 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 ( ) 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 ( ) 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 °C)
M. Jean Dupont (M. Jean Dupont)
Comment
allez-vous ? Très bien, merci ! (Comment allez-vous ? Très bien, merci !)
By James Romeo