By Morten Rand-Hendriksen | Thursday, July 24, 2014
Responsive layouts have become commonplace in today’s web experiences, but the current HTML <img> element still has a fundamental flaw when used with responsive designs: It assumes uniformity in the screens it’s displayed upon, a uniformity that doesn’t exist in today’s mobile-saturated world.
Consider an image on a web page from the viewer’s perspective. Although it appears to be part of the page, it’s actually a replaced element: The code of the page cuts a hole in the page big enough to contain the image, and then retrieves it from its remote location to fill that hole. In some cases the hole has a specified width and height; in others the hole is built to be flexible and scale to a percentage, or proportion, of the screen size.
By Chris Converse | Wednesday, July 23, 2014
Your site’s performance can make as much of an impression as its content. When considering the many ways users will be accessing your site, it’s also important to consider what content you show, based on screen size. The two techniques discussed below will allow you to tailor content, animation, and overall user experience.
By Chris Converse | Wednesday, January 8, 2014
Responsive web design techniques aren’t just for changing the layout and composition of your web designs; they can also optimize your project’s imagery for high-resolution screens. CSS3 media queries include properties for detecting the pixel ratio of a device’s screen—and when the pixel density value is two or greater, we know the device has a high-density display, and can use high-definition graphics.
Standard definition graphics can appear soft or blurry when viewed on a high-density display.
You can change your email preferences at any time. We will never sell your email. More info
Thanks for signing up.
We’ll send you a confirmation email shortly.
Sign up and receive emails about lynda.com and our online training library:
Keep up with news, tips, and latest courses with emails from lynda.com.
We've updated our terms and conditions (now called terms of service).Go Review and accept our updated terms of service.