What Happened to HD Web Design?

Posted in Web Design • Posted on 17 Comments

In this article, we will be sharing with you about how HD web design changed the world. Why do people love or hate it? Are web designers excited about it? Do people even notice? How did it change the workflow? What are the some tips and tricks that web designers can do to make their lives a bit easier when it comes to web designing for high resolution screens?

It is undeniable that Apple is a great influence and mover in technological innovations. These days the popularity of gadgets with retina displays changed the way designs are made. This new advancement requires increase in every bit of pixel used in a design. Mass production of high resolution screens, tablets and smartphones demands web designers to catch up.

01-What-Happened-to-HD
Photo by Lucas Reinds

People love the thought of a High Definition experience because of great quality images. They like to zoom in without having the photos or elements distorted into pixel bits and pieces. As a web designer, if you don’t mind using elements with massive pixels in your designs, then, you can say it’s just a walk in the park. To accomplish a great HD web design, it takes more work than the usual and it may also cost more than the usual.

Is HD Web Design so bad?

The first issue that web designers would want to resolve is the design compatibility to all kinds of screens. Not everyone is a Mac user, nor does everyone have high resolution screens and an Internet connection strong enough to handle high definition displays. Web designers need a solution to these problems. But the first question is, can HD web designs possibly cater to everyone?

02-What-Happened-to-HD

When Apple launched the iPhone 4 in mid 2010 it came with something totally new, the “Retina” screen. This new introduction took users by storm. They designed it to have the old resolution doubled, with an astounding 326 pixels per inch. And to think that a 27″ iMac had only 109 ppi. For the users, it’s not bad at all. They will be able to view images in a very clear image, of course granting that they are looking at an HD proof design. But, for the Web Designers, it may push them a little further than the usual. It’s quite a list of disadvantages for High Definition Web Designs. But let me just break it down to some most common and very difficult to miss points on having an HD design.
First of all, high-res layered PSDs can make your computer load as if it’s going to take forever. Because of the heavy files, it will be as if your machine is crawling just to get it up. Then there are high-res stock photos. Those that may cost more damage to your budget. More quality, more money. And of course, unless all of the people gets the fastest internet connection like that 75 year-old Swedish woman, high resolution images may just take so long to load up on the web.

What Can Web Designers Do?

03-What-Happened-to-HDPhoto by Joe Luna

There is quite a population of Mac users; however, it is also a fact that not every capable being in the world can use or afford to buy Apple’s somewhat overpriced products. High resolution images and graphics would mean an attack to low resolution screens, phones and tablets. That would also mean that not everyone can visit your HD web page in such a breeze. If they don’t mind loading up images with doubled resolution, they might need to wait a while. So, how can you make a good HD design that would not leave the other population out of your web page?

Use Scalable Vector Graphics (SVG)

04-What-Happened-to-HD
Image by deadPxl

Always use vectors in your HD web designs. It is quick and easy to scale your artwork to different dimensions without losing the quality of your work. SVG files are always stored as XML, and not bitmap. For vector-based graphics, using Adobe Illustrator does the perfect job for great scalability.

Use CSS to Render Elements

Designers have predicted this movement towards HD. Using CSS3 to render user-interface elements is also very important when doing a high resolution design. CSS3 has box-shadow and border radius properties that work pretty much the same way as vector graphics.

Smooth Responsive Layouts

IPad and iPhones have the capacity to switch from portrait to a landscape view, depending on how the users are holding their gadgets. This would make your web page almost impossible to view when you have it on a fixed layout. Having a fluid and adaptive layout will allow the users to be able to see your web design even when they’re moving about.

High Resolution Images

Sad but true, there is no way around this one. Good quality images and photos are made to be dependent on resolution. To get your images HD-ready, you need to amp it up with the resolution, meaning you have to double the number of pixels per inch. High resolution images to an HD web design is a must, for now. The best option is to use fewer images on your design as possible. Hopefully, in the nearest future there comes a solution to this dilemma.

Retina Ready Websites:

Apple

06-What-Happened-to-HD

On the 8

05-What-Happened-to-HD

Trendtation

07-What-Happened-to-HD

Do People Notice or Care?

High resolution designs get the attention of most users when they realize that it isn’t compatible with their screens. Do people care about HD web designs as a whole? The answer is NO. Majority of the users wouldn’t even know the technicalities of a high resolution design. What they mostly care about is they are able to open the web pages smoothly.

Majority of web designers use the Mac in doing their jobs. However, you have to consider other designers that doesn’t use high-resolution screens or “Retina” display screens. According to about.com – web browser window size matters more than monitor resolutions. For Mac users with handheld “Retina” screens like iPads and iPhones, another possible solution to the issue would be to make a separate or a different page for them if they need a high resolution display that they can zoom in and out of.

Ultimately…

There are ways to prepare your site for “Retina”. Although we are being pushed into the future of high definition experience, not all of us are ready. When it comes to catering the needs of Mac users, as web designers, you need to step-up your game. Thanks to Apple, HD web designs are now in high demand. At this point you may love or hate how they have affected the jobs of web designers, but it still won’t stop the demand for HD web designs. Apple maybe the first to come up with the “Retina” display, but, rest assured, the others will follow. Let us just hope with this change, new kinds of software and apps will be available to cater to the need for producing great HD web designs.

23 Written Articles

17 Comments Best Comments First
  • Tim

    Thursday, August 15th, 2013 12:14

    2

    I will never, and I mean NEVER, display high-res retina graphics on my website. I am an artist and I’ve already had more problems than I care to admit with people stealing my images and using them. They will use them without my permission not only on other websites, but also to print flyers and PRODUCTS on sites like CafePress and Zazzle. They will removing my watermark images and do whatever they want.
    It is unbelievably amazing to me how little copyright matters to humans. Or how little someone else’s hard work matters.
    If people are using 72dpi images to print stuff, I can only imagine what they’ll do with retina graphics.

    +5
  • Ashlee J. Williams, Print + Web Design

    Thursday, August 15th, 2013 15:42

    3

    There’s always a cost/benefit analysis to be done when considering how to design and build a website, and at present I think retina-ready design is an unnecessary expense for the average clients. As noted in the article, the majority of end users don’t even notice the difference between retina and standard design, and retina design requires additional work to make it perform as well as standard design does. In addition, retina-ready sites target a comparatively small slice of the device market. That being true, I think that until the desktop and device markets outside of Apple begin to shift towards screens with high pixel density, retina-ready design is best reserved for businesses targeting the Apple market, and other businesses can safely go without it.

    +2
  • Adorn Consultants

    Thursday, August 15th, 2013 01:32

    1

    Good article. People do notice HD web designs. SVG and CSS3 help a lot to balance both clarity and load optimization for HD designs.

    +1
  • Nimrod

    Saturday, August 17th, 2013 02:29

    4

    Some designers have actually found a way around the images issue. I’ve read an article somewhere (can’t remember anymore), talking about how they store different sizes and resolutions of the same images on a site. When a user goes to a page, the site detects the screen size of the user and displays the appropriate image with the appropriate resolution.

    The only downside to this is the space requirement for the site. But I think it’s usually not an issue so I’d rather go with such an idea..

    +1
  • Ankita Mehta

    Friday, October 11th, 2013 14:26

    15

    Yes !! Agreed with Aparajita because designing tool is one of the important factors of web designing. It makes your design better. Keep Sharing Dude :)

    +1
  • Parul Mehta

    Friday, October 18th, 2013 05:32

    16

    To make your Website more advance, it is important to use some tools for designing. It will make website very attractive. Nice Article Keep Posting :)

    +1
  • Kshitij Jain

    Tuesday, August 20th, 2013 10:12

    7

    Hi Sheena Cavazos

    I think there is a great demand of designers these days, using SVG and CSS3 will definitely help to maintain hd factor.

    Regards
    Kshitij Jain

    0
  • Dev

    Sunday, August 18th, 2013 19:13

    6

    I can understand, you also understand but …other field clients will not understand this thing.

    0
  • Tim

    Saturday, August 17th, 2013 15:38

    5

    By the way, the fonts in this comments section keep reloading and cause a “flashing” effect on all the text. It’s quite annoying and you should fix it. It’s been like this since you redesigned the site.

    0
  • Rushin

    Wednesday, August 28th, 2013 00:32

    9

    Great! I just applied it to my websites brochure.!

    0
  • KevinJohnson

    Sunday, August 25th, 2013 08:04

    8

    Hey Nimrod, you have given really best option to load images on website. Today HTML5 and CSS3 help to create elegant HD design.

    0
  • Sam

    Saturday, October 5th, 2013 20:54

    14

    The future resides in HD content, well all thanks to Apple……

    0
  • Sneha Malika

    Monday, October 28th, 2013 12:27

    17

    HD Designs are the actual design that describes the quality of the Website. Most of talked about CSS3, can anyone explain me – what is CSS3 ?

    0
  • Monika Thakur

    Monday, September 9th, 2013 11:43

    13

    Great Post admin, thanks for sharing this post, SVG and CSS are two important thing in HD designing :)

    0
  • Aparajita

    Monday, September 9th, 2013 11:41

    12

    I think along with CSS3 you must have knowledge of designing tools in order to make your design attractive. Great post worth reading :)

    0
  • Codemonkey86

    Friday, August 30th, 2013 08:30

    10

    “Majority of web designers use the Mac in doing their jobs.”

    I can’t relate how you can claim this. Do you have any statistics or sources for this?

    This poll btw. seems more realistic, and covers my personal experience in webdesigners prefered os:
    http://webdesign.about.com/b/2009/11/05/poll-what-operating-system-do-you-use.htm

    0
  • Rohit Singh

    Monday, September 9th, 2013 11:40

    11

    Agree with you Kshitij Jain, CSS3 is one of the most important factor in HD web design. Nice post thanks for sharing :)

    0
  • Sneha Malika

    Monday, October 28th, 2013 12:27

    17

    HD Designs are the actual design that describes the quality of the Website. Most of talked about CSS3, can anyone explain me – what is CSS3 ?

    0
  • Parul Mehta

    Friday, October 18th, 2013 05:32

    16

    To make your Website more advance, it is important to use some tools for designing. It will make website very attractive. Nice Article Keep Posting :)

    +1
  • Ankita Mehta

    Friday, October 11th, 2013 14:26

    15

    Yes !! Agreed with Aparajita because designing tool is one of the important factors of web designing. It makes your design better. Keep Sharing Dude :)

    +1
  • Sam

    Saturday, October 5th, 2013 20:54

    14

    The future resides in HD content, well all thanks to Apple……

    0
  • Monika Thakur

    Monday, September 9th, 2013 11:43

    13

    Great Post admin, thanks for sharing this post, SVG and CSS are two important thing in HD designing :)

    0
  • Aparajita

    Monday, September 9th, 2013 11:41

    12

    I think along with CSS3 you must have knowledge of designing tools in order to make your design attractive. Great post worth reading :)

    0
  • Rohit Singh

    Monday, September 9th, 2013 11:40

    11

    Agree with you Kshitij Jain, CSS3 is one of the most important factor in HD web design. Nice post thanks for sharing :)

    0
  • Codemonkey86

    Friday, August 30th, 2013 08:30

    10

    “Majority of web designers use the Mac in doing their jobs.”

    I can’t relate how you can claim this. Do you have any statistics or sources for this?

    This poll btw. seems more realistic, and covers my personal experience in webdesigners prefered os:
    http://webdesign.about.com/b/2009/11/05/poll-what-operating-system-do-you-use.htm

    0
  • Rushin

    Wednesday, August 28th, 2013 00:32

    9

    Great! I just applied it to my websites brochure.!

    0
  • KevinJohnson

    Sunday, August 25th, 2013 08:04

    8

    Hey Nimrod, you have given really best option to load images on website. Today HTML5 and CSS3 help to create elegant HD design.

    0
  • Kshitij Jain

    Tuesday, August 20th, 2013 10:12

    7

    Hi Sheena Cavazos

    I think there is a great demand of designers these days, using SVG and CSS3 will definitely help to maintain hd factor.

    Regards
    Kshitij Jain

    0
  • Dev

    Sunday, August 18th, 2013 19:13

    6

    I can understand, you also understand but …other field clients will not understand this thing.

    0
  • Tim

    Saturday, August 17th, 2013 15:38

    5

    By the way, the fonts in this comments section keep reloading and cause a “flashing” effect on all the text. It’s quite annoying and you should fix it. It’s been like this since you redesigned the site.

    0
  • Nimrod

    Saturday, August 17th, 2013 02:29

    4

    Some designers have actually found a way around the images issue. I’ve read an article somewhere (can’t remember anymore), talking about how they store different sizes and resolutions of the same images on a site. When a user goes to a page, the site detects the screen size of the user and displays the appropriate image with the appropriate resolution.

    The only downside to this is the space requirement for the site. But I think it’s usually not an issue so I’d rather go with such an idea..

    +1
  • Ashlee J. Williams, Print + Web Design

    Thursday, August 15th, 2013 15:42

    3

    There’s always a cost/benefit analysis to be done when considering how to design and build a website, and at present I think retina-ready design is an unnecessary expense for the average clients. As noted in the article, the majority of end users don’t even notice the difference between retina and standard design, and retina design requires additional work to make it perform as well as standard design does. In addition, retina-ready sites target a comparatively small slice of the device market. That being true, I think that until the desktop and device markets outside of Apple begin to shift towards screens with high pixel density, retina-ready design is best reserved for businesses targeting the Apple market, and other businesses can safely go without it.

    +2
  • Tim

    Thursday, August 15th, 2013 12:14

    2

    I will never, and I mean NEVER, display high-res retina graphics on my website. I am an artist and I’ve already had more problems than I care to admit with people stealing my images and using them. They will use them without my permission not only on other websites, but also to print flyers and PRODUCTS on sites like CafePress and Zazzle. They will removing my watermark images and do whatever they want.
    It is unbelievably amazing to me how little copyright matters to humans. Or how little someone else’s hard work matters.
    If people are using 72dpi images to print stuff, I can only imagine what they’ll do with retina graphics.

    +5
  • Adorn Consultants

    Thursday, August 15th, 2013 01:32

    1

    Good article. People do notice HD web designs. SVG and CSS3 help a lot to balance both clarity and load optimization for HD designs.

    +1

Comments are closed.

54.161.214.221 - unknown - unknown - US