dding an image to a web page is fairly straightforward. While the img element has its own alignment attribute, it’s now better practice to control image alignment through CSS. You can use CSS to control where the image appears in relation to other elements using relative positioning, floats, and margins. Alternatively, you can control an [...]
e are in a time where the web browser is ubiquitous. People now have many devices connected to the Internet and each one with their own browser and screens for browsing. This multiple user experience is bringing up more challenges for crafting images than ever before.
or designers, the abundance of web access devices creates an abundance of opportunities for potentially awkward interpretations of our web pages. Luckily, CSS floats, CSS frameworks, and responsive layouts enable us to separate the presentation of a web page (what it looks like) from the content (images and text). That’s a good thing. When content [...]
utting basic link tags around an image makes the entire image a link. Alternatively, an image map, created by web pioneer Kevin Hughes in 1993, allows for multiple links at predefined areas within an image. Back then, you had to use server-side programming to get image maps to work. Eventually, though, the browser vendors programmed [...]
mages made the web boom. In its early days, the World Wide Web was about colleagues sharing scientific papers written in text so dry it would make Shakespeare weep. If it wasn’t for the simple img element, a once nonstandard bit of HTML proposed by Marc Andreessen and coded into the now-relic Mosaic browser, we’d [...]
eople seldom read the web. Studies have found that people skim. Visitors to your website are experts at scoping out a web page. Their eyes dart from one corner to another looking for words and high-contrast imagery to determine if they’re in the right place. They look for what user experience researcher Jared Spool calls [...]
website’s brand goes beyond inserting an img element in the top left corner of the page. The logo can also be placed throughout a visitor’s browser or mobile device in the form of a favicon, a small image or icon often found in the URL bar that represents the website. To get the icon to [...]
For practical purposes, let’s think of pixels as squares. Images made up of these square building blocks can only have edges with right angles, and can only have smooth-looking edges when they’re rectangles. Working with rectangles leads to boxy layouts. Web designers use transparency to break out of this boring, boxy mentality; with transparency, they [...]
In this chapter, we first cover tips and techniques to prepare images for web delivery while still in imaging software like Adobe Illustrator or Photoshop. Then, we go over steps to export images into various file formats. Finally, we look at ways of optimizing and compressing images for snappy web browsing.
olor is the first item by which one can judge a site. It’s the splashes of color and an eye-grabbing design that a visitor to your site sees. Better use of color means a better website. If you can carry a color scheme to every page, you’ll automatically create a cohesive look and feel for [...]