code.adonline (Adam Dimech's coding blog)

Breaking out of frames

Adam Dimech — Mon, 09 Apr 2012 05:53:19 +0000

Some websites link to external web pages but keep them trapped within a frame.

Such a technique can be used to continue serving advertisements to an audience that has left a website, to monitor the activity of those people, or otherwise try and claim ownership of content by masking the true URL. Most internet users find this practice annoying.

Additionally, most webmasters resent having their web pages served within someone-else’s frames. Examples of websites that employ this practice are paper.li, about.com and Google Images.

If you run a website and want to make sure that your content can’t be served within someone-else’s frame, you can use this simple piece of JavaScript within your site’s tags:

Whenever someone tries to access your page from within a frame, the page will automatically reload without the frame so that your website (rightly) occupies the entire browser window.

I find that the easiest way to deploy such a script is to create a file called noframes.js and insert the following:

if (top.location != location) { top.location.href = location.href; }

Then that file can be linked-to in the as follows.

If you want to confirm that your code is working, the TrafficHoopla Frame Breaker Test is excellent.

Note that this remedy won’t work for the small number of people who have JavaScript disabled.

Getting started with Responsive Web Design

Adam Dimech — Mon, 09 Apr 2012 01:09:41 +0000

To enable mobile devices to access websites, many web developers have historically created a fixed width web design (typically 980px) and then created a separate dedicated ‘mobile’ site for devices. By replacing the ubiquitous ‘www’ of the web address with ‘m’ (for example, m.adonline.id.au), this system of dual websites was seen as a good way of attracting mobile users to a website.

Unfortunately there are many problems with this approach, in particular:

Mobile websites are often designed to a (smaller) fixed width and so despite their purpose, still don’t look good in all mobile devices.
Having two websites dilutes ones SEO authority.
Browser (user-agent) sniffing is often used to redirect users to either the ‘www’ or ‘m’ website and this approach is highly unreliable.

In May 2010, Ethan Marcotte write an article for A List Apart about a concept he called “responsive web design“. In his article, he outlined a method for making a website ‘adapt’ to its audience by automatically resizing in response to the browser window in such a way that the same website (and markup) would work equally as well on a desktop as it would a mobile device.

I love both the concept and the philosophy of responsive web design (sometimes called adaptive web design), but it does have its critics and it’s not the total solution. In particular, some people have pointed out that one of responsive web design’s primary tools for resizing images for mobile browsers and devices are either bandwidth-heavy, code-heavy, memory-taxing or all three. One has even complained that it breeds boring websites.

There are also a number of arcane arguments about ‘responsive’ versus ‘adaptive’ web design, but for the purposes of this article, I shall steer clear of these debates and proceed with the assumption that the two terms are synonymous.

I will also make the assumption that readers of this post are interested in proceeding with a responsive web design, but don’t know where to begin.

Beginning a responsive web site can be tricky, and it took me ages to create this rather simple website using this new approach. Nevertheless, I learnt a great deal from this exercise and this article will serve as a good starting point so that designers can get their head around some of the key concepts and approaches.

Step 1: Change your thinking!

Many web designers have adapted to the changing demands of coding sites that validate with the W3C validator, rather than using proprietary code. Designers have also adjusted to CSS3 and HTML5. Responsive web design is another significant change from the old, familiar ways.

In the past, you would have set-up DIV elements with fixed width. With responsive web design (RWD), you will need to forget absolutes. Your dimensions will mostly be relative. Whilst this can be a big mental hurdle to leap over it’s integral to RWD.

In creating RWD site, you will need to envisage that a large proportion of your site’s users will be navigating with their fingers and not their mouse. Consequently, mouseovers out and some buttons, links, menus and features will need to be reconfigured.

Step 2: Bookmark some useful tools

Emulators make the testing of your website easy and allow developers to get a rough idea of how a site will look without having to purchase multiple devices or incurring data charges

Emulators aren’t foolproof but I have found these to be generally reliable and accurate:

iPhone emulator
iPad emulator (the iPhone emulator on this site doesn’t work reliably)
Opera Mini Simulator

For checking designs in older versions of Internet Explorer, I have always found that the NetRenderer to be reliable.

Step 3: Fix the viewport

The first practical step when creating a RWD site is to tell mobile browsers not to resize your website. Normally when you load a website on a mobile device, the page will be shrunk so that it fits into the browser window. The user then manually zooms in. This makes sense for a 980px-width website but many devices will even do this for your mobile-ready website.

The trick here is to add this line of code into your .

This piece of valid code tells mobile devices not to zoom out as a default.

Step 4: Install ImgSizer.js

These days, images form a major part of most website’s presentation. Unfortunately the bulk of images are too big to fit on a mobile browser. Thankfully Ethan Marcotte has developed a script called ImgSizer.js that will resize the images on your page relative to the browser window width. You can see it in action at adamdimech.com/english.

Marcotte has bundled his JavaScript code into a single file which can be downloaded from his site.

The code doesn’t work in IE6 or less, so I suggest the following conditionally-commented code in your be used to implement the JavaScript on your RWD website:

If you have a general hatred of IE6 (as I do), then you can dispense with the conditional comments.

Step 5: Install css3-mediaqueries.js

You will need to use CSS3 media queries, but many older browsers won’t natively support these. Thankfully, Wouter van der Graaf came to the rescue with his css3-mediaqueries.js code, which will allow all browsers to support media queries in CSS.

Wouter suggests that the JavaScript file be minified and added immediately prior to the tag within the . You can download it here.

Because IE9 fully supports CSS3, I use a conditional comment so that only older versions of IE will download the script.

Step 6: Commence with some CSS housekeeping

Before we begin our CSS formatting, we need to prepare our page for RWD.

The first part is to condition our tag in CSS so that there are no margins and the height will always remain 100% of the screen. This will ensure that the greatest amount of screen is available for use.

html, body {height: 100%;}
body {margin: 0px;}

In order for images to fit within any screen, they need to be scaled. There are several ways to do this (aside from using ImgSizer.js) but a good starting point is to make all images have a width of 100%. No height value is necessary; the browser determines the height that will proportionately constrain the image’s dimensions. As long as no other width-based image styles override this rule, every image will load to the width of its containing DIV unless the viewing area becomes narrower than the image’s original width.

Using a 100% image width in combination with a containing div and ImgSizer will ensure images scale beautifully.

Unfortunately, max-width is not supported in older versions of Internet Explorer, so a conditional comment is also included, denoted with an asterisk.

img {
	max-width: 100%;
	border-style: none;
}
*img {
	width: 100%;
	border-style: none;
}

The last step is to ensure that a vertical scroll bar is always displayed in the browser. Because the proportions of the website are all relative, the sudden appearance of a scroll bar (which could be triggered by an interactive component on your website) will cause your site to jump. In CSS, we can use this simple trick to ensure that the bar is always there, thus preventing jumping.

html { overflow-y: scroll;}

Step 7: Design your container

Whether you use Microsoft Expression Web, Adobe Dreamweaver or another programme for designing your pages, you may find that some of the following code does some strange things to your WYSIWYG interface. Of course these aren’t WYSIWYG design tools, so the golden rule is to test and retest within a server environment, using multiple browsers.

To design my website, I am going to use a fluid layout but I am also going to utilise the max-width feature of CSS3. This is important because once a page moves beyond a certain width, reading becomes difficult. So max-width shall be used to ensure that the site doesn’t expand to 100% on really large desktop monitors.

To begin my page, I shall create a container div, to which I shall assign the ID “#container”.

This is my complete page code so far:



 


Page Title

The CSS code for #container is thus:

#container {
	padding: 0px;
	margin: 0px auto 0px auto;
	width: 90%;
	min-height: 100%;
	max-width: 980px;
	min-width: 120px;
	position: relative;
}

When using a fixed-width design in the past, my #container

would be 980px wide. In this RWD code, you will see that I have used the max-width attribute to ensure that the #container

doesn’t exceed 980px but can be reduced to 120px. You do not need to set a max-width for a website (or an element), but if you have a lot of text, it’s worth considering to ensure the site’s readability. Ultimately this decision will depend on the nature of your site’s content. In any case, one doesn’t need to state the relative width of the #container

as the browser will assume that it’s 100% unless it’s specified by the max-width, where applicable. This enables the site’s fluidity.

You will also see that the #container

has automatic left and right margins, to ensure that it floats in the middle of the page.

Step 8: Design your structural
elements

From here, you can design the rest of the structural elements of your website. There are several approaches to this.

One method suggests that beginners create fixed-width

elements, then convert the fixed-widths to percentages. The logic behind this is very sound and I can say that I have used this technique with much success. That said, one will quickly develop the ability to work in percentages rather than pixels and it will all become second nature.

The following is some sample CSS code for creating two columns:

#two-columns {
	position: absolute;
	width: 100%;
	display: block;
	overflow: auto; 
}
.column-left {
	margin-left: 0px;
	position: relative;
	width: 70%;
	height: auto;
	float: left;
	display: inline-block;
}
.column-right {
	position: relative;
	width: 30%;
	height: 80%;
	float: right;
	display: inline-block;
}

Both columns are contained within the #two-columns

. This ensures that the column

elements are kept together and the 100% width ensures that they don’t break out of the #container

. The column on the left has a width of 70% whilst the one on the right has a width of 30%. Both of these widths are relative to #two-columns, which itself is 100% of the width of #container.

Step 9: Make your design more fluid with @media queries

The above design may look good on a desktop with a screen width of 1100px or 800 px or even on an iPad. But how will it look on an iPhone with a screen width of 320 px? An iPhone viewer would see the above website with a left column of 224 px and a right column of just 96 px, which is very small indeed.

One way to get around this is to change the presentation of a website, depending on the viewing size. To do this, we use @media queries in CSS3. Because css3-mediaqueries.js has been installed (as per Step 5), @media queries will be supported by all major browsers (including IE7 and above).

Using the above example, we may wish to tell the browser that we’ll display two columns where the width is greater than 450 px. If it becomes less than this, we shall stack the information into two blocks instead:

#two-columns {
	position: absolute;
	width: 100%;
	display: block;
	overflow: auto; 
}
 
.column-left {
	position: relative;
}
 
.column-right {
	position: relative;
}
 
@media screen and (min-width: 450px) /* Controls when screen greater than 450px */ {
.column-left {
	margin-left: 0px;
	position: relative;
	width: 70%;
	height: auto;
	float: left;
	display: inline-block;
}
.column-right {
	position: relative;
	width: 30%;
	height: 80%;
	float: right;
	display: inline-block;
 }
}
 
@media screen and (max-width: 450px) /* Controls when screen less than 450px */ {
.column-left {
	position: relative;
	width: 100%;
	height: auto;
	float: left;
	display: block;
	margin-bottom: 4%;
}
.column-right {
	position: relative;
	width: 100%;
	height: auto;
	float: left;
	display: block;
 }
}

If you look very carefully, you will see that the CSS code is broken into three sections:

Style information that applies regardless of the screen width (all of #two-columns and the position attribute of .column-left and .column-right.
Style information that applies where the screen is more than 450px.
Style information that applies where the screen is less than 450px.

You will notice that some of the attributes change because the layout has changed. In graphical terms, this is what we want to achieve:

You can see that by using the @media queries, one can re-organise the layout of elements to better suit the screen width. This need not simply apply to column sizes.

One can also use @media queries to change font sizes, depending on the screen width. In the example below, the font is 20px when the screen is more than 150px, 22px when it’s more than 600px wide and 30px when the screen width is greater than 750px.

@media screen and (min-width: 150px) {
.article {
    font-size: 20px;
  }
}
 
@media screen and (min-width: 600px) {
.article {
	font-size: 22px;
  }
}
 
@media screen and (min-width: 750px) {
.article {
    font-size: 30px;
  }
}

Or one can display or hide elements too. In this example, the ‘story’ element is hidden when the screen width is less than 500px.

@media screen and (max-width: 500px) {
.story {
    visibility: hidden;
  }
}

You can also hide images, but be careful because in most circumstances, the iPhone will still download a hidden image (thus increasing page load times).

The opportunities for creativity with @media queries are endless.

Step 10: Step back and analyse

Responsive web design is a brilliant tool for making websites universally accessible, but there are some limitations to its functionality.

For instance, many websites employ horizontal drop-down menus. Whilst these can be adapted for RWD, this can be a very complicated and tricky procedure that needs a lot of testing to ensure universal functionality.

In any case, and despite your best efforts, elements will compress differently as the screen width reduces and so the positioning of images may shift a bit. Therefore, you will need to test your website carefully and satisfy yourself that the images are in the correct positions for all screen widths and for all browsers.

Finally, one needs to be careful about bandwidth. Images make websites look great, but they vastly increase download times, which are even worse on portable devices. The creation of a RWD website gives one an opportunity to review what is and what isn’t important in terms of content on a page.

This article is designed to provide users with a beginning point for creating a website using Responsive Web Design principles. If you follow these 10 steps, you’ll be well on your way to creating an impressive RWD site.

If you have any comments or questions, feel free to leave a comment at the bottom of this page. Enjoy!

Use PHP to ensure a page can only be accessed via a specific URL

Adam Dimech — Fri, 03 Feb 2012 00:04:02 +0000

A situation recently arose where I wanted to redirect all traffic that accessed a certain URL (either directly or via an external site) unless that traffic arrived via a hyperlink on my website.

The following PHP script will perform the following functions:

Check the HTTP referrer to see whether the visitor has come from a page on an approved website (host)
If the visitor has come from an approved website, display the page content
If the referrer page is unapproved, redirect to another defined page
If a direct call is made for the page, redirect to another defined page as if the page was accessed from an external link.

This simple script is ideal for ‘presentation’ purposes but should not be used where security is an important concern as referrer data can be spoofed.

The following code should be added at the very top of a PHP file, even before the :


$referer = $_SERVER['HTTP_REFERER'];
$referer_parse = parse_url($referer);
 
if($referer_parse['host'] == "example.com" || $referer_parse['host'] == "www.example.com") {
     // Page content will display
} else {
     header("Location: http://www.example.com/redirected-page");
     exit();
}
?>

You will need to replace “example.com” and “www.example.com” with your website (assuming you only want to permit links from your own website). Otherwise add the hostnames of websites from which you will accept referrer traffic.

You will then need to replace “http://www.example.com/redirected-page” with the URL of a page that you wish to redirect people to if they enter the page’s URL directly, or access the page from an ‘unapproved’ link.

Now, if people try to access the page directly or via an external link, they will instantly be redirected to another page.

Renewing Avast antivirus

Adam Dimech — Wed, 25 Jan 2012 21:47:56 +0000

Avast is a free antivirus programme for home-use desktop computers. In order to use the programme, it requires annual registration.

Thirty days prior to the expiration of the programme’s registration, users will receive an email notice asking for the registration to be renewed. If, like me, you’d prefer not to follow email links for security reasons, you can update your registration manually using the following 5-step method:

Step 1:

Open Avast antivirus by going to Start > All Programs > avast! Free Antivirus > avast! Free Antivirus in Windows 7. Click on the “Maintenance” tab on the left-side panel of Avast.

Step 2:

Click on the “Registration” tab, then the “Register now” button in the middle of the window:

Step 3:

A new window will pop-up. Choose “Select” under “Base Protection” for the free version of the antivirus.

Step 4:

Enter your personal details in the registration form. Then press “Register for Free Licence”

Step 5:

After processing, you should receive a confirmation message as shown below. Simply close the smaller window by clicking on the red X at the top right-hand corner of the window to see Avast’s new registration expiration date.

Your copy of Avast is now fully-updated.

Create a clickable corner ribbon for your website

Adam Dimech — Sat, 21 Jan 2012 13:11:46 +0000

Sometimes the situation may arise when a website owner wants to add a promotional ‘corner ribbon’ or ‘corner banner’ to their website. This may be to promote a special event, a charitable cause or to generate sales during a special campaign.

This tutorial will show you how to make an unobtrusive but eye-catching promotional ribbon for your website that:

Is positioned in the top-right corner of the browser window.
Does not disappear when the person scrolls down (ie: it floats).
Will hyperlink to another internal or external page.
Will display correctly in all browsers.

Step 1: Create the ribbon

Using a graphic software programme such as Adobe Photoshop, Corel PhotoImpact or Gimp, create a transparent image measuring 170×170 pixels.

Create your ribbon to a design of your choice. The ribbon would normally be tilted at a 45° angle. Your ribbon might look something like this within your graphics package:

The chequered pattern represents the transparent area and the border the edge of the image.

Important: Save your image in PNG format. This preserves the transparency around your ribbon.

Upload your ribbon to your web server via FTP.

Step 2: Create your Style Sheet

Create a new CSS file and add the following code:

#ribbon {
position: fixed;
top: 0;
right: 0;
z-index: 10000;
cursor: pointer;
}

The class identifier has been named “ribbon” and the z-index value set to 10,000 to (hopefully) ensure that the ribbon displays above all other content on the website.

Save the file as “ribbon.css” and upload to your server via FTP.

Step 3: Reference your style sheet within your tags.

The following piece of HTML should be included within your tags.

Simply change the href value to point to the location of your ribbon.css file. You can use a relative or absolute link.

Step 4: Include the ribbon within your tags.

Include the following code anywhere within the of your HTML file.

The ‘ribbon’ class ID ensures that the ribbon is placed at the top right-hand side of the browser window. You will need to change the URL that the ribbon points to when clicked. You should also change the value to something more meaningful. If you don’t want the hyperlink to open in a new tab/window, delete target=”_blank”. Finally, check that the code correctly points to your ribbon PNG file from Step 1.

That’s it!

Your page should now display your ribbon in the top right-hand corner. When clicked, the browser should open a new window to a page of your choosing.

Variations

You can use a ribbon with different dimensions, but ensure you change the height and width values of the code in Step 4.

PNG Files and Internet Explorer 6

Internet Explorer 6 doesn’t display PNG files correctly (the transparent area will appear grey).

In 2012, I believe that Internet Explorer 6 is not worth concerning oneself with but if the prospect of PNG files displaying incorrectly for the few remaining IE6 users bothers you, simply use the SuperSleight jQuery script.

SOPA and PIPA: Taking Action

Adam Dimech — Wed, 18 Jan 2012 12:52:42 +0000

Today, many of the world’s biggest websites will be taking action to protest the proposed Stop Online Piracy Act (SOPA) and Preventing Real Online Threats to Economic Creativity and Theft of Intellectual Property Act (PIPA) bills which are being debated in the US congress.

Major websites taking action include Flickr, Google, TwitPic and WordPress. Wikipedia has commenced a 24-hour shutdown.

SOPA and PIPA are designed to prevent online piracy and copyright breaches by taking a heavy-handed approach to enforcement. This could have the effect of censoring many US websites.

Even for those of us in Australia, SOPA and PIPA could have the effect of reducing traffic from the USA and even lead to gaol terms for Australians.

In essence, the laws mean that:

Websites that host any material that is copyright can be taken down (rather than having the offending content removed)
Website owners who host unlicenced copyright content could face gaol sentences.
It would be an offence to link to a website with unlicenced copyright material.
Internet service providers will be required to take action against website owners who breach copyright.
American citizens would be blocked from accessing sites that are alleged or guilty of hosting copyright material.
Australian (and other citizens) who have affected sites could have them blocked to US-citizens, taken down (if hosted in the United States) or even face gaol terms if they travel to the US and are found to be guilty.

The websites who are protesting SOPA and PIPA believe that internet piracy and intellectual property theft are serious and legitimate issues that need to be tackled. I also support this position.

Whilst I am not directly affected, I can see the damaging effect these laws could have on freedom of speech, entrepreneurialism and information sharing globally. The Guardian newspaper provides a good explanatory video of how it will work.

Today, I am supporting the protests by adding a banner to my website so that more people may be aware of the implications of these draconian laws. I have also blacked-out my 10 most popular pictures on Flickr.

More information about the Stop SOPA/PIPA campaign can be found at AmericanCensorship.org.

Safely add any font to your website using CSS

Adam Dimech — Tue, 10 Jan 2012 02:45:12 +0000

It sometimes becomes desirable to include a custom font into a website’s design. Conventional wisdom says that this isn’t possible because the only fonts available are those on an end-user’s computer. This is not true.

It is possible to safely deliver a font from the server side, as long as the following workflow is followed:

Step 1: Consider the need to use a custom font.

In all honesty, I would carefully consider the following factors before using a custom font on your website:

Special fonts slow page loading times
A lengthy work-flow is involved
Some fonts will display sub-optimally in some browsers
Some fonts are copyright and require a licence fee to be paid (this is important!)

If you still believe that a custom font is required on your website, continue with Step 2.

Step 2: Convert fonts to browser-supported formats

Mozilla Firefox, Google Chrome, Opera and Apple Safari will all support True-Type (.ttf) fonts. Unfortunately, Microsoft Internet Explorer does not support the TrueType font format.

In order for your font to be visible in all browsers, you will need to convert your font to OpenType (.eot), and have both the .ttf and .eot files available on your server.

My favourite resource for conversions is the TTF to EOT Font Converter but you can also use ttf→eot. Add these sites to your bookmarks.

With both tools, simply upload your .ttf font file and it will return an OpenType font file to you within 30 seconds.

If you prefer to run things locally, you can download the TTF to EOT converter as a Windows-exectutable file via Google Code.

Step 3: Upload the TTF and EOT files to your server

Your two font files can be uploaded via FTP.

If you think you may want to use a lot of custom fonts across your website, consider a dedicated ‘fonts’ directory.

Step 4: Write your CSS style sheet

To incorporate the custom font, we shall use the @font-face attribute in CSS3. This is now a widely-supported specification across all modern browsers.

Our CSS file will firstly utilise the @font-face specification in the following format:

@font-face {
 font-family: 'CustomFont';
 src: url('fonts/MyFontFile.eot'); /* For Internet Explorer 6+ */
}
@font-face {
 font-family: 'CustomFont';
 src: url('fonts/MyFontFile.ttf'); /* For non-IE browsers */
}

Notice how the @font-face is added twice for a single custom font? This is to ensure that the custom font is visible in Internet Explorer and the non-IE browers by providing a link to both the .ttf and .eot files. You cannot combine this into a single piece of code or it won’t function correctly.

You will need to alter the following parts of the above code to suit your purposes:

Change CustomFont to a name that you can use to reference the font style. I suggest the actual name of the font.
Change MyFontFile to the actual name of the .ttf and .eot files. Don’t forget to change the paths to point to the location of your file on your server. (You can use relative or absolute paths at your discretion).

The second part of the CSS file will contain the style attributes for your website text, as follows:

.MyNormalFont {
	font-family: Arial;
	font-size: 30pt; 
}
.MyFancyFont {
	font-family: 'CustomFont';
	font-size: 30pt; 
}

In this example, I have used a common ‘web-safe’ font called “Arial” and my custom font (called “CustomFont”).

I have called the CSS declarations MyNormalFont and MyFancyFont, but these names can be changed to whatever you desire. I have expanded these declarations by adding a font-size attributes, but this isn’t necessary if it is specified elsewhere in your CSS file.

Step 5: Add your custom font styles to your HTML

The CSS classes can be referenced in your mark-up as you would normally apply font styles in HTML. You can change the type displayed within

as two examples.

In the example is shown below, the first sentence is written in Arial and the second is written with CustomFont.

This is not my Custom Font

This is my Custom Font

Note how the mark-up references the styles in the CSS sheet? It is important that the names match.

Mobile Browsers

TrueType fonts are supported by iOS 4.2+ and Android 2.0+. Older mobile operating systems have varying degrees of support for TTF. If you are creating a mobile-capable site, bear this in mind.

That said, the use of a custom font for mobile sites will cause your website to load very slowly in mobile browsers. Therefore, it is suggested that only ‘web safe’ fonts be used for mobile sites.

Licenced fonts for @font-face

As mentioned earlier, licencing is important. Two websites that offer downloadable fonts which can be used with @font-face without attracting a licence fee are Fontex and FontSquirrel.

Additional Notes

There are other font file formats that can be used, but these aren’t universally supported.

For example, the other OpenType font format .otf is supported by Google Chrome, Apple Safari and Mozilla Firefox but not Internet Explorer. The Web Open Fonts Format (.woff) is also available and will possibly become a W3C standard, but is currently only supported by IE9+, Chrome and Firefox.

One method for providing a catch-all is to upload .eot, .woff, .ttf and .svg font files and refer to them all in your style sheet, as follows:

@font-face {
    font-family: 'CustomFont';
    src: url('fonts/MyFontFile.eot');
    src: url('fonts/MyFontFile.eot?#iefix') format('embedded-opentype'),
         url('fonts/MyFontFile.woff') format('woff'),
         url('fonts/MyFontFile.ttf') format('truetype'),
         url('fonts/MyFontFile.svg#CustomFont') format('svg');
}

This will ensure that your custom font will display in the widest number of browsers and devices possible.

Use CSS to make a browser’s vertical scrollbar always appear

Adam Dimech — Mon, 02 Jan 2012 10:27:29 +0000

When using modern CSS-based design with fluid element widths, a website can sometimes appear to flicker if either:

A browser window is altered in size by an end user.
Hidden content on a page becomes visible, thus lengthening the page.
The end user clicks from a page with little content on a website to one with more content.

All of these problems arise because the browser is suddenly forced to display the vertical scroll bar where the previous state didn’t require it. The scroll bar ‘pushes’ variable-with content (and sometimes fixed-width content, depending on the design) a small fraction to the left, creating a “flickr”.

There is a very simple CSS-based fix that can be applied to XHTML and HTML pages that will cause all browsers to display the vertical scroll bar whether it is required or not. That way, when the scroll bar is required, it won’t ‘bump’ the content to the left.

The following code will force the scroll bar to permanently display in all modern browsers (including Internet Explorer 9.0.8, Firefox 9 and Chrome):

html {overflow-y: scroll;}

Where the scroll bar is not required, it will be blank.

Twitter gets a facelift with new functionality

Adam Dimech — Thu, 08 Dec 2011 22:00:27 +0000

Popular social media website Twitter has announced that they are in the process of rolling out a suite of new features which will be available within the next few weeks.

New features will make the website easier to use and provide a platform for other features to be added onto in future. The four new tabs are “Connect” (recent activities), “Discover” (latest information and news), “Profile” (including account settings) and “Write” which is represented with a quill and inkwell symbol.

Twitter have launched a new website with the details at fly.twitter.com and also released a short YouTube video that highlights the changes. There will also be more synchronisation with Twitter Mobile and TweetDeck will be updated to reflect the changes.

Enable your website to be pinned in Windows 7

Adam Dimech — Mon, 07 Nov 2011 21:52:43 +0000

Microsoft have launched BuildMyPinnedSite.com, a website that provides detailed instructions about enabling a website to be ‘pinned’ in Windows 7.

Microsoft have provided simple instructions and code snippets to enable websites to support this relatively new feature. The main tasks for web developers are creating a high-resolution icon, enabling a jump list and setting-up notifications so that website updates will appear on people’s task bars.

To enable these features for your website, go to www.buildmypinnedsite.com.