Abdullah Yahya

Let’s face it. The biggest loads and cause for slow performance of most websites comes from images. While there are many projects that offer automated ways to optimize and process CSS like Sass and Less, these optimizations result in a much smaller performance gain compared to what you get from optimized images. The problem with optimizing images is finding a balance between optimization and maintainability. You want to use sprites to minimize the number of requests but you want to reuse images in multiple pages to simplify maintenance (not have multiple copies of the same image). Assuming that most people view 2 or 3 pages per website during any visit, following is a proposal for an image optimization algorithm. This algorithm would generate two types of image sprites as follows:

• global.png / global.jpg (for images that appear in all pages, e.g. in the header and footer like the website logo)
• page-path.png /page-path.jpg (for images that appear in a single page, e.g. about-us.png, about-us.jpg, products-computers.png, products-tvs.jpg, etc)

If a web page is at the URL www.somedomain.com/products/computers/index.html, then the sprite for that page would have the file name products-computers.png and/or products-computers.jpg (slashes are converted into dashes). Continue reading Website Image Optimizer / Pre (post?) Processor

Images in websites help break up long, boring passages of text and make websites look nice. But, they’re also the heaviest resources you can include in your site.  Let’s take the home page of techcrunch.com as an example. With the Google Chrome inspector open to the Network tab and the Images label selected, we load the page and scroll all the way to the bottom (because images are load dynamically as they appear in the viewport). The result in 6.5 MB out of a total of 7.3 MB of data to load the home page came from images alone. That’s a whopping 89% of the page load. Because the images are loaded dynamically as needed, techcrunch.com doesn’t load too slowly. However, there are still many websites that are image heavy and don’t do a good job at optimization or caching at all.

Recently, I upgraded my version of PHP from 4.6 to 5.5.6. I had been using the PHP APC cache to improve performance. I’m using the Yii PHP framework and the settings I had in main.config were

‘components’=>array(
‘cache’ => array(
‘class’ => ‘system.caching.CApcCache’,
),

PHP 5.5+ now includes a built-in Zend Optimizer opcode cache so the APC cache is no longer supported. As such, my Yii main.config settings needed to change to

‘cache’ => array(
‘class’ => ‘system.caching.CDummyCache’,
),

in order to work.

When building a website, you’ll often encounter situations where the title of a section would be just a little too long causing the last word to wrap. Furthermore, this wrapping may only occur in some browsers. You may be inclined to put a BR tag before two or more words so that the title doesn’t look bad but there’s a better way using the CSS whitespace rule.

Create a CSS class as follows:
[cc lang=”css”]
span.nowrap {
white-space: nowrap;
}
[/cc]

and then use it where you would otherwise put a BR tag, e.g.
[cc lang=”html”]
This is a long title where the last word sometimes wraps.
[/cc]

Continue reading Handling Wrapped Words Using whitespace: nowrap

When viewing a website, you may sometimes come across a warning about mixed content. This “mixed content” is the loading of some resources encrypted over SSL and some not over SLL (unencrypted / cleartext). This only happens when the URL of the page you are browsing to is secure, e.g. https://abdullahyahya.com but some of the resources like css and Javascript files it references are not secure, e.g.  https://abdullahyahya.com/style.css or http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js. The mixed content warning doesn’t appear when the URL of the page you are viewing is not over SSL, e.g. https://abdullahyahya.com, even if the resources it includes are secure.

To prevent mixed-content warnings, you can do the following:

• Use protocol-less URLs when referencing resources, e.g. //ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js. This way, the protocol (http or https) used will match that of the parent page’s URL. In this case, you need to make sure your included URLs are accessible over both http and https.
• Always use secure https URLs when reference resources

Sometimes you may come across a need to show part of a web page inside another page. iFrames can be used to embed websites inside another site but they’re often used to show all of a page’s content. If you only want to show part of a page like in the bottom right corner, one approach is to use an overlapping div with hidden overflow and absolute positioning of the iframe within it. Consider the following code. Copy it, replace the URL, and adjust values as necessary.

[cc lang=”html”]

[/cc]

[cc lang=”css”]
div.iframe-container {
overflow: hidden;
margin: 15px 0 0 0;
width: 318px;
height: 488px;
position: relative;
}
div.iframe-container iframe {
position: absolute;
top: -128px;
left: -623px;
}
[/cc]

If you’re iframe contains a page that you don’t want users to see within the iframe, you can use a technique called framebusting to have your iframed page bust out of the iframe.

If you’re developing a site from a Photoshop PSD file but find that things like font sizes, e.g. 12 pt, don’t look the same size in your browser where you’ve set the CSS font size to 12 pt, then you probably need to adjust your PSD file’s resolution.

To determine the resolution of your screen, you can go to

http://www.infobyip.com/detectmonitordpi.php

Mine says 96 dpi. Then, in Photoshop, go to Image > Image Size and set the resolution to 96 and uncheck the “resample” checkbox.

<blockquote><span>“</span>Some quote</b><span>”</span></blockquote>

[cc lang=”css”]

blockquote span.quote-mark {
font-size: 3.688em;
font-family: “Times New Roman”, serif;
line-height: 1;
font-weight: 600;
margin-top: -0.1em;
height: 0.4em;
display: inline-block;
vertical-align: top;
}

span.quote-mark.start {
margin-right: 0.1em;
}

span.quote-mark.end {
margin-left: 0.06em;
}

[/cc]

“Some quote”

1. Plan web page  file names /  URLs
   • Group common pages in a folder and name each page using only descriptive keywords in lowercase with dashes, where applicable, e.g.
   • https://www.site.com/products/iphone-cases/index.html
   • https://www.site.com/products/ipad-cases/index.html
   • Use Google Adwords Keyword Planner to find keywords that are frequently searched to improve SEO
2. Prepare images, sprites
   • If image has a transparent background and is shared across multiple pages (e.g. icons), save as a PNG (24) sprite, e.g. sprite-products-common.png
   • If image has a transparent background and only appears on a single page, save a a PNG (24) sprite, e.g. sprite-products-iphone-cases.png
   • If image doesn’t have a transparent background and is shared across multiple pages, save as a JPG sprite (80% quality), e.g. sprite-products-common.jpg
   • If image doesn’t have a transparent background and only appears on a single page, save as a JPG sprite (80% quality), e.g. sprite-products-iphone-cases.jpg
   • If image needs to appear when web page it is on is printed, save it as a standalone image as either PNG or JPG (depending on transparency) and insert it using the <img> tag, e.g. iphone-case.jpg
   • Save images in sprites using a 50px x 50px grid and snap the top left corner of each image to the grid
   • Don’t save images with styles that can be applied using CSS, e.g. if an image has borders, remove the borders and use CSS borders to apply a border to the image
   • Save all images in /asset/image/ Continue reading Website Development Process