Category Archives: Web Design

Polyfills and Hacks for older browsers

Posted on by

Last update : June 25, 2014

Polyfills, or polyfillers, are pieces of code that provides the technology that a developer expects a browser to provide natively. Paul Irish has given the following definition: A shim that mimics a future API providing fallback functionality to older browsers.

Alexander Farkas (author of Webshims Lib, a modular capability-based polyfill-loading library) says : Every polyfill is a hack! innovative frontend development is hacky and always will be hacky!

Polyfills are especially relevant in the context of responsive web design.

A list of HTML5 Cross Browser Polyfills is available at the Modernizr GitHub website. The HTML5Please website provides look up tables for HTML5, CSS3, etc features to know if they are ready for use, and if so, to find out how you should use them : with polyfills, fallbacks or as they are.

Links to more useful informations about polyfill’s are listed hereafter :

Hide text with CSS

Posted on by

Sometimes you need to use an image, with text, for the background of an input button or an image link. This can be the case when you want to have a regular value in a button so that screen readers and people surfing without CSS can still figure out what the input says.

To hide the text with CSS, there are several possibilities :

  • set the font-size value to zero : the CSS specification does not indicate how browsers should display text when the font-size is set to a value of zero; many browsers handle it unpredictably
  • set the color of the text to transparent : it works in new browsers, including IE 9, but not in older IE versions
  • position the text out of the screen with left:-9999px or text-indent:-9999px
  • set the text invisible with span {display:none;} or span {visibility:hidden;}

The W3C published a technique using CSS to hide a portion of the link text as part of Techniques and Failures for Web Content Accessibility Guidelines 2.0.

Breadcrumbs

Posted on by

Breadcrumbs are navigational links that appear usually below the page header. They provide a hierarchical path that can assist users in orienting themselves within a site.They do not necessarily follow the directory structure. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.

Facebook HTML5 Resource Center

Posted on by

In 2011, Facebook launched a HTML5 web portal to show developers how to build amazing products.The following topics are covered :

  • Build : Learn the tricks of the trade to building the most compelling experiences
  • Test : Utilize a wide array of tools to help ensure your experiences are consistent across browsers
  • Distribute : Utilize Facebook and other channels to distribute your app to a large audience
  • Showcases : View examples and learn how to use web standards such as HTML5, CSS3, and Javascript to deliver rich experiences in your website

Accesskey’s

Posted on by

Accesskey’s allow a computer user to jump to a specific part of a web page or to a link via the keyboard. In most web browsers, the user invokes the access key by pressing Alt (on PC) or Ctrl (on Mac) simultaneously with the appropriate character on the keyboard. The acceskeys are declared as follows :

<a href="index.html" accesskey="h">Home</a>

The use of the following key-mapping is common :

  • S – Skip navigation
  • 1 – Home page
  • 2 – What’s new
  • 3 – Site map
  • 4 – Search
  • 5 – Frequently Asked Questions (FAQ)
  • 6 – Help
  • 7 – Complaints procedure
  • 8 – Terms and conditions
  • 9 – Feedback form
  • 0 – Access key details

WordPress WPtouch Pro Plugin

Posted on by

Last update : May 22, 2013
WPtouch is a free WordPress plugin that automatically transforms a WordPress website for mobile devices. The admin panel allows you to customize many aspects of the mobile theme appearance and allows visitors to switch between the mobile view and the site’s regular theme. The latest version of the plugin is 1.9.6.3, updated May 3, 2013. WPtouch is a trademark of BraveNewCode Inc., a small Canadian company established in 2008 by Duane Storey and Dale Mugford.

WPtouch pro is the enhanced version of the WordPress Plugin. I subscribed to the “old” pro version in December 29, 2010 for the current website. The latest version of this old plugin is 2.8.2, support will continue until July 5th, 2013. On May 22, 2013 I purchased a license for the new WPtouch pro 3 plugin for my family website blog.

WPtouch Pro includes a unique feature called Developer Mode. When Developer mode is enabled WPtouch Pro will load on ALL browsers. You can enable Developer Mode for your Mobile theme or your iPad theme via the menu General > Tools and Debug.

 

CSS Mediaqueries

Posted on by

Last update : June 26, 2014

The CSS3 module that defines mediaqueries reached the W3C Recommendation status in June 2012 and offers introspection into the browsing environment based on the following factors:

  • browser dimensions (width, height and aspect-ratio)
  • device dimensions (device-width, device-height and device-aspect-ratio)
  • browser orientation
  • colour information (color, color-index and monochrome)
  • device-specific details such as its resolution, whether its display is grid or bitmap-based, and the scan type (progressive or interlaced … applicable to televisions)

Not all of these properties are currently supported, but many are. Additionally, most of them support min and max prefixes like the one used below, enabling you to tailor your queries very specifically.

@media screen and (max-width:480px) {
background-color:red;
font-size:1.5em;
}

This set of styles is only applied to a screen which is 480 pixels wide or less.

A mediaquery test capabilities, not individual devices or browsers, so it’s future proof. There is no redirection to a different page, it’s one page for all. The mediaquery is tested before any assets are downloaded, saving bandwith and speeding up the display.

Some useful tutorials about mediaqueries are listed hereafter :

HTML5 Structure : Semantic Webdesign

Posted on by

Last update : August 30, 2012

HTML5 is work in progress and is going to stay that way for some time, but that’s no reason not to start using it right now. HTML5 added some very important new, semantic elements. To care for older browsers, use graceful degradation techniques. To be up to date with the latest trends, use progressive enhancement technologies.

HTML5 is not based on SGML, and therefore does not require a reference to a DTD.

The website When can I use provides compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.

The following list provide links to some useful blogs and tutorials about HTML5 :

The following list provide links to some useful HTML5 tools :

 

screen.width & screen.height for iOS devices

Posted on by

You can detect the screen dimensions of a web device via JavaScript by using screen.width and screen.height.

For an iPad one would think that screen.width would be 768 when being held vertically and 1024 when held horizontally. However, screen.width is always 768 regardless of the way you’re holding the iPad; likewise, screen.height is always 1024. The same is true for the iPhone/iPod Touch. screen.width is always 320 and screen.height is always 480.

The iOS devices support however the window.orientation property, so if necessary, you can use that to determine if the user is in horizontal or vertical mode.

  • window.orientation is 0 when being held vertically
  • window.orientation is 90 when rotated 90 degrees to the left (horizontal)
  • window.orientation is -90 when rotated 90 degrees to the right (horizontal)

There is also the orientationchange event that fires on the window object when the device is rotated.

The mediaquery “orientation” works also in current versions of Safari and Firefox on a desktop machine. Simply change the size of your browser window until the height is longer than the width and you get “portrait”.

CSS Positioning

Posted on by

Last update : November 24, 2014

The layout properties available in CSS are :

  • position : static
  • position : relative
  • position : absolute
  • position : fixed
  • float : left or float : right

The default CSS positioning for all elements is position:static; the element is not positioned and occurs where it normally would in the document. With position:relative, elements are moved relative to where it would normally occur in the document with the parameters top, bottom, right or left. With position:absolute, the element is removed from the document and placed exactly where the parameters top, bottom, right or left tell it to go.

A combination of a relative and absolute positionned div’s allows to make a two-column layout. An advantage to using absolute positioning is that we can position the elements in any order on the page, regardless of the order they appear in the HTML. A disadvantage is that other elements are obscured by the absolutely positioned elements. This can be avoided if a fixed height is set on the absolute positionned elements, but if the text displayed in this element is longer or the font size is changed, new problems appear. A better solution for variable height columns is to float an element to push it as far as possible to the right or to the left, and allow text to wrap around it. Two elements floated to the same side will push up against each other. To push down the rest of the content the floats can be cleared after the floating elements.

Position:fixed behaves like position:absolute, but it will position an element in reference to the browser window as opposed to the web page. Fixed elements should stay exactly where they are on the screen even when the page is scrolled.

There is a divide between web designers saying you should use absolute positioning and web designers saying you should use floats, both claiming that the other method breaks faster. Both are right, it depends on the situation. There is a simple rule :

If elements should not interact, use absolute positioning, if they should, use floats.

Another benefit of floats is the progressive downloading; as the text is loaded it is displayed onto the page immediately.

Links to examples of layouts with different positionned elements are listed hereafter ( look at the sourcecode of the webpages to view the CSS code) :

Links to some useful tutorials about CSS positioning are shown in the following list :