Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

By Chris Converse | Friday, May 02, 2014

Build Interactive Websites with jQuery

Building Interactive Sites with jQuery

If you want to capture your audience’s attention, you have to provide a great user experience. An interactive website is one of the best ways to keep your users engaged and returning to your site. While interactive websites may look impressive, they don’t have to be difficult to create. With jQuery, you can achieve an interactive web experience rather easily.

Designed to simplify JavaScript scripting, jQuery is the most widely used JavaScript library in use today. You can quickly incorporate dynamic and interactive content into a webpage with just a few lines of code. jQuery simplifies JavaScript by providing shorthand commands for more complex functionality. In other words, you can get more functionality with less coding.

By Chris Converse | Wednesday, January 22, 2014

Is Email Ready for Video?

Embedding video responsibly

Explore this course at lynda.com.

With so many people now reading email on mobile devices that support the HTML5 standard, it’s becoming easier and easier to incorporate video into emails. Even better: Mobile and desktop email clients that don’t support HTML5 video will fall back to a user-friendly, clickable link, so no one is left out.

By Chris Converse | Wednesday, January 08, 2014

Using High-Definition (Retina) Graphics with CSS

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.

By Chris Converse | Wednesday, December 18, 2013

Creating a Responsive Web Experience

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 1Navigation 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.

By Chris Converse | Wednesday, October 09, 2013

Creating a responsive HTML email design

Over 40% of email is read on mobile devices.

Many online sources claim that over 40 percent of email is now read on a mobile device. The email you design for your customers has nearly a one-in-two chance of being read on a smartphone or tablet.

Now the real question: Will it be a good reading experience?

By Chris Converse | Tuesday, December 11, 2012

Converting Photoshop designs to HTML

For many designers, the process of designing a website ends with a series of mock-ups that represent how the website should look in a browser. While this is a necessary aspect to web design, it is only part of the design process. Translating the web design to HTML and CSS is as much an art form as it is a technical achievement.

It is my belief that web designers should be responsible for getting their design to the browser. Imagine hiring a print designer to sketch out a design, then provide Adobe Photoshop and Illustrator files to a printer, and expecting the pressmen to do the layout in InDesign. This print workflow is unthinkable. Just as a print designer is responsible for getting the design to the plate, a web designer should be responsible for getting the design to the browser.

While I’m not suggesting designers need to code every page of an entire website on their own, translating the design into HTML and CSS ensures the integrity of the design. Once the design works in a browser, web developers can use that HTML and CSS as a starting point as they implement their responsibilities to the project.

Creating the containers When evaluating your desired layout, one can imagine the structure, or “containers,” that will be needed to replicate the layout in HTML.

Responsive design strategy illustration

Once the HTML structure is in place, CSS is used to assign style and layout to the structure. The combination of HTML and CSS provides the presentation experience of your website. This process is not too far removed from other design methods, and can be mastered by designers in a few months.

Creating your web graphics The process for cutting up small graphics from your Photoshop, Illustrator, or Fireworks document is referred to as slicing. Many web graphic tools have a slicing tool, or something similar, which allows you to specify a portion of your canvas as a slice.

Slicing a Photoshop document for the web

Once portions of your design are specified inside of slice regions, exporting your main canvas results in individual web-ready graphics being created based on the pixels contained within the slice regions.

Assigning layout and style with CSS Cascading Style Sheets (CSS) allow us to give dimension, position, and style to HTML elements on our webpage. CSS is unique in that it accounts for the layout of our page, in addition to typographic style. Another great feature of CSS is the ability to assign images to the background of HTML elements. This gives us a unique opportunity to drive imagery in our design with CSS, instead of HTML. Combine this with CSS3 media queries, and we can change our images, as well as layout, based on the user’s screen size. For more on responsive download and design, see the blog post “Responsive download, not just responsive design”.

If you learn best by doing, my Creating a Responsive Web Design course shows you how to take a design mock-up into HTML and CSS. Learn a start-to-finish process for creating a responsive, CSS-based, backward-compatible HTML5 webpage… all in 91 minutes!

Suggested courses to watch next: • More courses by Chris ConverseCSS: Core ConceptsCSS: Page Layouts

By Chris Converse | Monday, November 19, 2012

Responsive download, not just responsive design

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 ConceptsCSS3 First LookHTML Essential Training

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

Featured articles

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

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:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.