Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Design and display your website in HD

Wednesday, June 26th, 2013 by Servage

Hello Retina! Apple’s Retina Display that is. With its high pixel density, it is a driving force in what is turning out to be another significant shift in the way websites are design. As other manufacturers follow suit with similar displays, the need for high definition site design is growing. Though Retina is just the tip of the iceberg for what this topic really entails.

In this article, we discuss considerations for pixels with regards to display formatting, the challenges for web designers and the current solutions being implemented. This is not a tutorial piece for how to implement those changes on current sites, but the information here is to help in understanding the scope of this topic that is growing in popularity by the day.

As a refresher, pixels (aka pictured elements) are the tiny cells that are formed into a grid on a computer display. The smaller and closer together the cells are, the better the screen resolution. Retina displays, fit many cells closer together, which means more pixels per inch (PPI), or put another way, higher pixel density. With over 300 ppi on Retina Displays, this means less chance for pixelation or the rough edges one might see around images. Retina Displays are essentially double density over its predecessors. A typical computer monitor (non HD) comes in at around 150 to 200 PPI.

While there’s more that goes into the science, and sampling, of pixels for device display, there’s also the notion of bitmap pixels. This represents digital graphics and essentially how software will render an image. Then there’s CSS pixels which are rendered for display on websites. Traditionally, or before high def displays, one CSS pixel was roughly equal to one device pixel.  Zoom in an image that is made up of CSS pixels and the resolution isn’t actually changing, as the display isn’t actually getting bigger, nor are display pixels moving / expanding. What’s changed to make the image appear bigger, is CSS pixels are overlapping with more device pixels. It’s still the same CSS resolution as that is just an abstract measurement so designers can render images in web browsers.

This can all be a bit confusing, but the important practical reality to realize is that displays do not change their physical size. Zooming in, or out, provides the illusion of increase in display size. But the reality for desktop users has been that there is little to no reason to zoom in. With mobile devices, zooming in and out was normal behavior prior to the advent of responsive web design innovations. Now, with high definition displays, and greater pixel density for smaller devices, the inverse is occurring at a technical level; where standard displays would have to zoom out to render images if they were solely designed for the mobile site. But designers aren’t solely designing for mobile, and instead use responsive design techniques. Or they may still create versions for the three general display sizes (smartphone, tablet, desktop). Or, as a last resort, they are still stuck designing for desktop browsers.

In the early days of computing, graphics were predominantly done in vector format. Shapes were made via lines and paths, and plotted on the screen via coordinates. In essence, it was mathematical. Then design became popular in computers and photographic images were normal to the medium. As photography relies on continuous tones, the art of graphic design was realized for computers. Digital images went the path of raster graphics, or bitmap, to fit in as much shading and color tone into pixels as possible. Now, we’ve come full circle where vector graphics are necessary for transition to a high definition world.

In 1999, the W3C developed a standardized format for vector graphics, known as SVG, or Scaleable Vector Graphics. This XML based format was adopted mostly to align the world’s popular web browsers with a format that can infinitely scale images, without a noticeable loss in content design. Besides that huge benefit, SVG has advantages of being ideal for print, ideal for advanced drawings, especially for 3D rendered objects, and the ability to be animated.

In 2003, the SVG format version 1.1 was recommended, or formally established, with 14 functional feature sets: Paths, Basic shapes, Text, Painting, Color, Gradients (and patterns), Clipping (masking and compositing), Filter effects, Interactivity (change in focus, mouse clicks, scrolling, zooming), Linking, Scripting, Animation, Fonts, and Metadata. While capable of being a highly relevant image format, it was not treated as such because of how popular digital cameras and video were in the early 2000’s.

Interestingly, SVG 1.1 is still the current recommendation, though it has evolved a bit. SVG has profiles for particular uses, such as SVG Tiny (SVGT) and SVG Basic which are intended for mobile devices, SVGZ for compressed, or zipped files and SVG Print (still a working draft). SVG Tiny, with its limited feature set, would go on to reach its own version of 1.2 (2008) allowing mobile needs to be met with a single profile. In 2010, Google includes SVG files as part of its index, and a searchable image format.

While you can use SVG wherever you might implement JPG, GIF and PNG, the reality is that SVG is still not practical for photo-quality images or complex graphics. And the bigger picture is that the web is currently dominated by graphics from users who believed bitmap images were all that is needed to share pictures and designs online, regardless of the device. Thus, a transition is underway to update things. And for that transition to be as smooth as possible, the following must occur at some level of collective action:

  • increased bandwidth – high definition displays require designs that are either smart (scaleable) or increase file size, the likely scenario in early going.
  • adherence to SVG as standard – SVG isn’t the only format for vector graphics. File sizes for smaller images favor traditionally popular standards like PNG, yet when scaled up, SVG file size is lower than its counterparts. A standard that includes compression, a la SVGZ, addresses file sizes.
  • Retouching completed websites – which is an unpopular choice and likely not plausible for the entire world wide web, nor necessary in many cases. But for current sites that were built years ago, the need to prep for higher PPI (as in high def display) is paramount.
  • browser support – most modern browsers are now on board with standard SVG format, though not with all SVG filters and effects. The establishment of “resolution media inquiries” must be implemented for designers to have sufficient development framework going forward.

The challenges for designers and developers currently is workable, even if not ideal. The recent trend of adapting within the Responsive Web Design paradigm is related to the high def situation. Media queries, via CSS rendering (device-to-pixel ratio), provide a solution in building and scaling images for high def displays; yet, presents challenges for bandwidth. Javascript (jQuery) and image source tags provide simplified solutions, but are not deemed best practices. CSS Sprites offer yet another option.

In the first paragraph of this article, we noted that Retina is the tip of the iceberg. Mobile devices with increased PPI are one, highly pertinent facet of this subject. Yet, we also wish to note that as there is current design need to scale images down for mobile devices, there is also a growing desire to scale images up for larger displays that will be found in various places already popping up. Big screen displays, that are flat, and can appear in any room of a home or building are just as likely to be high def, and present a whole other way of looking at this topic.

The important thing is to recognize this is part of a transition that isn’t merely a trend. High definition displays, like Apple’s Retina Display, are arriving by the truck full on a daily basis. It is the preference for most humans in how to view still and motion graphics. And the significant point of this  article is to have you realize the solutions and necessary formats have been with us for a long while. We don’t need to reinvent the wheel, we just have to recognize the windshield is getting a whole lot clearer. It would help that all our wheels are not deflated, and dragging us to our next destination.

Relevant Links

Design and display your website in HD, 3.7 out of 5 based on 3 ratings
Categories: Business, Tips & Tricks

Keywords: , ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.