Web Optimization
In this day and age, the prevalence of mobile devices using wi-fi or cellular service to navigate the web is huge. In web design, to not account for these devices and users will leave you at a severe disadvantage online. The two largest barriers for mobile devices are load times and screen sizes. Below, you’ll find tips for effectively managing both.
Load Times
The most data-rich items found on most, if not all, websites are images. With such an interactive medium, it would not be good web design to not include images on all pages of your site. However, with more images come larger file sizes, more data to transfer, and slower load times on devices bottlenecked by cellular transfer speeds. By using software such as Adobe Photoshop, saving your images as jpegs instead of the more ‘expensive’ pngs, gifs, bmps, or tiffs, you can save some data. Additionally, by lowering image quality, the same jpeg file can be reduced to an even smaller size, and the difference is mostly unnoticeable to the average eye. Also, using CSS as much as possible for design elements to set colors, borders, drop shadows, and other style elements, you’re using the power of the web browser to render impressive visuals instead of predesigned images, further reducing bandwidth usage.
Managing the number of images on one page must be considered also; for a gallery of images, the browser will try to download and display each image typically before allowing further navigation or use. Breaking galleries into multiple smaller pages or structuring your user’s clicks to where each image navigates to the next can ease load times and keep your customer interested.
Screen Size
In the early days of smart phones, screen size was severely limited. Even as recently as the iPhone 4, in portrait orientation the actual pixel count is only 640 across, constraining the viewable space width. For sites with large, detailed banner or background images, the majority of this content would be truncated or lost, rendering the site at best difficult to browse, at worst unusable. Additionally, with as many different types of devices that can be used to browse the web, poor planning would leave a designer with a full time job of factoring for each possible device. Using CSS properties, these images can be automatically scaled by the web browser to adjust to the size of the user’s screen. Instead of using fixed-pixel-width elements, percentages can be used to set sizes so that design elements move and scale as well to optimize ease of use on any number of devices.
Keep up with us at Ink and Link Creative with more useful articles to help you navigate the net; www.inklinkcreative.com
By utilizing these best design practices, you can ensure that your website will be easily viewable and accessible to many users.
Connect With Us