Website Performance Tips: Five (5) Ways To Optimize Images

Posted on October 28, 2013. Filed under: website performance tips | Tags: , , |

If you are familiar with online tools that assess the performance of a website, you’ll notice that image is one of the determining factors that create a huge impact to its loading time. Google PageSpeed Insights for one, includes Image Optimization as one of its major requirements among other rules such as removing landing page redirects, leveraging on browser’s caching and minifying CSS/HTML/Javascript deliveries just to name a few.

ways ways waysHow To Optimize Images To Improve Load Speed

Give your visitors an excellent user experience (UX) by resolving delay issues on your pages. Here are five (5) ways to optimize your pictures.

  1. Apply the correct format. You have at least four popular formats to choose from during the web design stage. Stir away from BMPs and TIFFs. Use PNGs for transparency purposes and if you do not intend them to be displayed on mobile devices. Save as JPGs if your photos have millions of colors and if you need photographic images. If your graphic is less than 10×10 pixels or your palette is composed of less than 3 colors, opt for GIFs instead. You can also go for the latter if your photo is animated.
  1. Resize. Learn to scale them down based on their usage on your site. Crop the excess corners and extraneous background as necessary. Ensure that all pictures are resized to the exact dimension to save digital resources. If it is essential to have both big and small versions of them, do not shrink the large ones through your source codes. Create a second copy for smaller graphics, e.g. thumbnails, and provide an option to view the larger ones in a pop up format or a separate tab or window.
  1. Compress. If you’re using Photoshop on your web design tasks, select the option “Save for web” with 70% as standard quality. Otherwise, there are some online compressors that you can check out to help you with the compression.
  1. Specify the width and length during coding. Similar to how alt tags are applied to improve global and Philippine SEO rankings, putting in the dimensions in the properties can enhance the speed of your page as well. Example:

<img src = “my-picture.jpg” height=”200” width=”350” />

  1. Use CSS Sprites. Combine multiple icons into one graphic – i.e. backgrounds, corners and menu items. Define each picture based on their exact pixel position through CSS and reference them correctly on the body.
Read Full Post | Make a Comment ( 1 so far )

Mobile Optimization: How To Make Your Existing Website Mobile-friendly

Posted on March 4, 2013. Filed under: seo | Tags: , , |

Now that you have a fair idea of the differences among Responsive Design vs Mobile Site vs Mobile App, let’s proceed to the next stage which is to make your site engaging to the consumers who utilize mobile phones. Read on to learn more.

Mobile-Friendly vs Mobile-Optimized.

Mobile-friendly shows the site exactly the same as how it is shown on desktop or a handheld phone. Although it is viewable on the latter, it is not truly optimized because the viewer has to pinch-to-zoom or scroll left, right, up or down to view everything. Mobile-optimized, on the other hand, is specifically designed for phones and tablets. This is like the second version of your main website, only, it is more condensed in terms content and graphics.

You can choose to maintain your current and modify to turn it mobile-friendly or opt to create a second copy mainly intended for smartphones. Whichever it is, below are seven (7) tips to achieve your goal – that is, to reach out to the mobile client.

  1. Mobile compliance. Check if your website is already mobile-compliant. You can either test how it looks in different gadgets or try a web tool to receive recommendations. A good tool is Gomometer by Google.
  1. Platform.
  • Compatibility. If you have plans to revamp such as employ a web design professional in the Philippines, consider a platform that is compatible to mobile. If you’re using WordPress, either apply a responsive theme or install a WPtouch plugin.
    • Technology. As much as possible, do not use Java as it loads a lot of codes. Flash is a big NO as Apple products do not support them. Stick to the HTML-based or CSS.
  1. Design and Layout. Take note of the following.
  • Screen. Study the range and size of various screens so that UX (user experience) won’t be compromised.
  • Navigation. Simplicity is beauty! Not too complicated, keep them large and easy to navigate with both via web and mobile.
  • Buttons. Follow the size of an average finger tip, at least 40px.
  • Small graphics. Stick to slideshows and image rotators that function without Flash.
  1. Content.
  • Key information. Focus on the chief content then de-prioritize those that are not.
  • Minimum typing. If you opted on a mobile-optimized site, maximize drop down menu and check box when user is asked to enter data. If you have a search bar, instead of letting your visitors type in the words, show the top 5 results where they would just click on the checkbox next to the most searched word.
  1. Call to Action.
  • Text-based contact information.
  • Address. Have an extra button that will link to the directions app
  • Phone numbers. Add a link that can easily direct the visitor to make a call simply by clicking on the number.
  • No to pop-up windows.
  1. Loading speed. One of the most integral factors to consider is how fast your website loads on a mobile phone. Design with small images and program with not too many scripts to improve load speed.
  1. SEO/Search Engine Optimization.
  • Mobile Sitemap. Just like the regular SEO web practices in the Philippines and around the globe where you normally include a sitemap for Google robots to read, a mobile sitemap is important too for mobile search engine index.
  • Mobile redirects. Code with mobile redirects so it will automatically redirect to the correct site based on the device you used. Always give the reader an option to go to the web version.

Learn how to market your mobile website on the next post.

Read Full Post | Make a Comment ( 1 so far )

Mobile Web Development: Responsive Design vs Mobile Site

Posted on February 28, 2013. Filed under: seo training, web design company | Tags: , |

Last time, we introduced four (4) ways to tap your potential mobile clients. On this post, let’s analyze Responsive Web Design and Mobile Optimized websites to help you choose which is better suited for your business.

Responsive Web Design. Often abbreviated to RWD, it’s an approach that is aimed to provide optimal viewing experience. Users across a broad range of devices (from desktop computer monitors to mobile phones) and browsers will have access to a single source of data, laid out so it’s easy to view and navigate with a minimum of resizing, panning, and scrolling. Example:

Mobile website. It’s a website formatted and specifically intended for mobile gadgets. The layout comprises of icon, simple text, and big navigation, all perfect to fit the screen that there’s no need to zoom in just to read the words. Example:

Below are their seven (7) key differences:

1.      Display Flexibility.

  • Responsive design: more flexible to the visitor because it can respond to the orientation and dimension of the device screen and browser automatically. He can easily resize Firefox window and it will still show accurately without him/her needing to scroll left or right.
  • Mobile site: less flexible for the developer for the reason that although it can detect the type of gadget used, he needs to create two separate websites with at least three screen (one for desktop, one for tablet, one smartphone) and two orientation layouts (one for landscape, one for portrait).

 2.      Content Creation.

  • Responsive design: needs one (1) content. Whatever is on the web, it’s exactly the same as the one on mobile.
  • Mobile site: requires two (2) contents. This means you can create custom details more suitable to customer’s needs.

 3.      SEO-friendly.

  • Responsive design: more seo-friendly because

Domain: maintains only one (1)

Redirects: almost none due to one content

Web traffic: centered to the main site

  • Mobile site: less seo-friendly because

Domain: keeps two (2); the second one is either or

Redirects: multiple redirects and canonical URLs needed. Any SEO training modules in the Philippines and around the globe reveals the negative impact of duplicate texts in search engine index. Having such can hurt your rankings.

Web traffic: Different domains break up web traffic hence the two versions will compete with one another.

 4.      Updates and Maintenance

  • Responsive design: easier to update and maintain because there’s only one copy
  • Mobile site: harder due to the volume of copies

 5.      Development Time

  • Responsive design: As this is one of the newer trends, it may take longer for a web design professional in the Philippines to complete and have this running.
  • Mobile site: Development time is shorter due to the technologies utilized, most are no longer new and not as complicated as RWD.

 6.      Cost and Affordability

  • Responsive design: more time to design and develop, more expensive
  • Mobile site: less development and design work, less expensive

 7.      Load Time

  • Responsive design: Since the elements are the same on both web and mobile, the information associated with the earlier is an exact replica of that in the latter. Since mobile has slower net connection, load speed may suffer.
  • Mobile site: The elements on a mobile website are normally optimized to accommodate fast loading of objects.

Still undecided? Tune in next for an in-depth comparison between Mobile Site vs. Mobile App.

Read Full Post | Make a Comment ( 2 so far )

Liked it here?
Why not try sites on the blogroll...