Posts Tagged ‘Responsive design’

Using high-definition (retina) graphics with CSS

Published by | Wednesday, January 8th, 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

Standard definition graphics can appear soft or blurry when viewed on a high-density display.

Creating a Responsive Web Experience

Published by | Wednesday, December 18th, 2013

Simply rearranging your web design across screen sizes isn’t enough to assure a smooth, natural experience for all the devices that will view it. In order to truly optimize the user experience, we must alter the content and behavior as well. This means loading alternate HTML content, suppressing animations, and collapsing navigation for small screens.

FIgure 1
Navigation on small screens is collapsed into a single button, which expands into the global navigation when clicked or tapped, providing an optimal experience for small screens.

In this course, we’ll explore altering the user experience based on screen size. This approach will allow us to increase the user experience and download speed for larger screens, while delivering smaller-sized files and targeted experiences for smaller screens. Learn how to combine jQuery with your HTML and CSS to alter experiences across screen sizes.

Responsive download, not just responsive design

Published by | Monday, November 19th, 2012

When considering a responsive design for a website, many web designers and developers only consider the layout. While it is key to ensure the layout and composition make use of the user’s screen size, the download time should also be considered as part of the user experience.

To really understand the concept of designing for responsive download, we first need to take into account that CSS can be used to add imagery to HTML elements of webpages. From there it becomes more apparent that CSS3 media queries can be used to alter imagery, as well as layout, based on a user’s screen size.

With this in mind, the <header> is one HTML5 element to focus on when planning a web layout. Typically the header area of a website is used for corporate branding, navigation, and imagery that sets the tone of the design. When creating a responsive web design, three or more sets of CSS rules will need to be specified based on the user’s screen size. These CSS rules will then in turn make adjustments to the sizing- and layout-based properties of the header elements based on available screen real estate. If we use CSS to specify imagery to be used in the header area, we can also drive more of the design tone with CSS.

Example of CSS driven imagery

Now, with CSS driving the imagery for the header element, combining CSS3 media queries with image assignments allows the imagery to adjust based on screen size. This allows designers to use larger, less compressed images for larger screens, while smaller screens reference smaller, more compressed images.

The ability to call on CSS referenced images that have varying dimensions and compression settings results in reduced download sizes and times for devices with smaller screens. This means the same HTML and CSS files will call on files for small- and large-screen devices, but the files called on for small-screen devices will be up to one-fifth the size of those called on for large-screen devices.

Three different images sizes created for a responsive web design with responsive download

This technique can be used in many elements of a responsive website, including photography galleries, graphics and diagrams, and even navigation or promotional elements. The amount of compression you apply to smaller images can be greater due to the higher pixel density of modern tablet and phone screens. That being said, compression versus quality has always been a trade-off on the web, so experiment with settings that will decrease file size while still maintaining the integrity of the original image. Also, make sure to always test your work on multiple devices if you get the chance.

If you’re interested in learning more about responsive web design in the lynda.com library, consider checking out Creating a Responsive Web Design from Chris Converse, or Responsive Design Fundamentals from James Williamson.

 

Interested in more?
• All web design courses on lynda.com
• All courses from Chris Converse on lynda.com

Suggested courses to watch next:
• CSS: Core Concepts
 CSS3 First Look
 HTML Essential Training

 

This week’s featured five: Going mobile! From using your device, to developing applicatons

Published by | Wednesday, May 30th, 2012

It’s no secret that computer engagement is going mobile, with access via mobile devices predicted to surpass desktop computers in the next two years. So for this week’s collection of featured videos, I’ve chosen five free movies that focus on the theme of mobility, whether it be creating a WordPress site that behaves properly on mobile devices, learning to use your mobile phone or tablet more productively, or learning to develop your own mobile applications.

 

1. Customizing WordPress for smartphones and tablets
In this video from chapter nine of the WordPress Essential Training course, Morten Rand-Hendrickson shows you how to use built-in responsive themes and useful plug-ins to ensure that your content is presented in a usable form, regardless of screen size. The main takeaway? With a bit of appropriate planning, you can greatly improve your overall user experience by saving your viewers from the pain of having to zoom or scroll to view your carefully constructed content.

 

2. Accessing Evernote on a mobile device
Evernote is a great application for organizing and accessing your electronic notes, links, and other bits of critical information. (Admission: I use Evernote to collect interesting free movies from the lynda.com library that I want to use in my featured five blog posts.) In this movie from chapter one of Up and Running with Evernote for Mac, David Rivers shows you how to get Evernote set up so that you can add notes via your mobile device. If you’re primarily working in a Windows environment, there’s an analogous movie in chapter one of David’s Up and Running with Evernote for Windows course, as well.

 

3. Using the iPhone and iPod Touch Maps app
Admittedly, using the iPhone (or iPod Touch) Maps application is a fairly straightforward proposition, but in this excerpt from chapter nine of iPhone and iPod touch iOS 5 Essential Training, Garrick Chow shares some insights into using the compass feature that I always found confusing. Not only can the Maps app help you discover what is around you, and how to get there, it can also help you orient yourself by showing you which direction you are facing in your current location. After all, it’s always good to start out heading in the right direction!

 

4. Identifying the four pillars of iOS development
For the developer types who have already figured out how to use their mobile devices, going mobile is more about focusing on the creation of mobile applications. As with any metaphorical or physical journey, it’s always good to have a scope of where you will start, where you will end, and how you will get there. In this excerpt from chapter one of iOS SDK Essential Training (2012), Simon Allardice shows you how to approach your iPhone application development, and elaborates on why tools, language, design, and process are the four pillars—or, the four important areas of content—that you need to have all together in order to build the applications that you want to make.

 

5. Exploring the lynda.com mobile site
Finally, a lynda.com collection of mobile tutorials wouldn’t be complete without a look at how you can take the lynda.com library with you wherever you go via your own mobile device. In this movie from chapter one of the How to Use lynda.com course, Garrick Chow demonstrates the features and functionality of our new mobile site, so you can get to learning wherever you are:

 

We’d love to know more about how you are using your mobile devices, and how mobile technology is changing the way you work, and play. Which activities have gone mobile in your computing life? Are there some jobs that still feel best done at your desk? Tell us a little about your relationship with your mobile devices in the comments section below.