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

By Chris Converse | Thursday, August 14, 2014

Improve Website Performance on Mobile Devices

2014_08_14_slashHTTPone

When considering user experience for mobile, speed of download is a huge factor. People are typically using a cellular data plan when browsing on phones, and website performance is rarely optimal under these circumstances.

One factor in a web page’s download speed is the number of external file requests the HTML page needs. This includes CSS files (style sheets), JavaScripts, images, audio and video, applets, online feeds and services, and well … you get the idea.

Here are some techniques for reducing the number of times your web page needs to go back to the server to “ask for more” files.

By Chris Converse | Saturday, July 26, 2014

Optimize Graphics for the Mobile Web

mobile-web-hero

When creating graphics for the web, we walk a delicate line between file size and image quality. We want smaller files for faster performing sites, especially on mobile, but we also want beautiful imagery on today/s high-quality screens.

With nearly 20% of all web traffic coming from mobile devices, it’s important to consider the file size of your graphics. The irony of this trend is that mobile devices have higher quality displays and, typically, a slower internet connection. This challenges web designers to create high-quality graphics with smaller file sizes.

This is a pretty tough order, but I have some techniques that can help reduce sizes and optimize graphics for web delivery.

By Chris Converse | Wednesday, July 23, 2014

Optimize Web Content for Mobile

figure_3_loading_crop

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, June 25, 2014

Create a jQuery Carousel for Images

Displaying a series of photographs and images within a small area of a site can be challenging. The goal is to give folks a sense of the image while providing a navigation scheme to get a sense of the other images. Though this technique may be referred to as a carousel, or slider, the effect is the same.

A more literal navigation system for an image carousel is to align a series of images in a circle. This gives the user an interesting navigation experience in addition to getting a glimpse of the total number of images available.

figure_1_carousel-WEB

By Chris Converse | Thursday, June 12, 2014

Create a jQuery Slideshow

figure_1_slideshow_anatomy-600

The general goal of a web-based slideshow is to give your site visitors an optimized, easy-to-navigate image viewing experience. Since navigation can take up valuable screen real estate, many slideshows opt to use an overlay, or lightbox effect, to give users the option of viewing a larger version of an image.

By Chris Converse | Sunday, June 08, 2014

Use Photoshop for Web Design Comps

figure_2_layercomps_layouts-WEB

Creating design comps for responsive and interactive states of a website can be time consuming, regardless of the design app you’re using. Fortunately Photoshop contains a number of production tools that help when creating web design comps—in particular SmartObjects, Text rendering options, and Layer Comps.

By Chris Converse | Friday, May 09, 2014

Creating Responsive Images and Media

figure_1_percent_sizing

As mobile and tablet Internet usage continues to grow, responsive web design becomes more and more important. Some reports suggest that mobile Internet usage may actually surpass desktop usage this year. For any website not taking advantage of responsive design, this means a loss of traffic and fewer conversions.

When creating a responsive website, it’s especially important to know the best practices for images and media. In this article, we’ll talk about bitmap-based web graphics, including JPG, GIF, and PNG, as well as video.

By Chris Converse | Wednesday, May 07, 2014

Planning a Responsive Web Design

figure_2_alternate_content

As mobile web usage continues to rise, it’s increasingly important that your website functions across all types of devices and screen sizes. The smartest way to provide the best user experience (UX) for today’s technology is to create a website with a responsive design.

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.