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 :

 

airbnb : a community marketplace for unique spaces

Posted on by

airbnb website

Airbnb connects people who have space to spare with those who are looking for a place to stay. Guests can build real connections with their hosts, gain access to distinctive spaces, and immerse themselves in the culture of their destinations. Whether it’s an urban apartment or countryside castle, Airbnb makes it effortless to showcase your space to an audience of millions, and to find the right space at any price point, anywhere.

The following topics are published ont the Airbnb website: about, news, blog, golden rules, testimonials, press, safety, founding team, contact, help, affiliates.

Fiddler : Web Debugging Proxy

Posted on by

Last update : May 22, 2015

Building web applications is hard work and most people remain unaware of how their web application is interacting with the web browsers that their clients have installed. Fiddler,  a free web debugging proxy created by Eric Lawrence, helps to simplify the analysis process substantially by logging all HTTP(S) traffic between your computer and the Internet. Fiddler is a transparent proxy that automatically adds itself to the WININET chain so that it can see every request being made. It logs those requests and the responses to allow you to see what is working and what isn’t working.

Fiddler allows you to inspect all HTTP(S) traffic, set breakpoints, and “fiddle” with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language. Fiddler is freeware and can debug traffic from virtually any application, including Internet Explorer, Mozilla Firefox, Opera, and thousands more.

The developper, Eric Lawrence, was Security Program Manager at Microsoft for Internet Explorer. After over a decade of working on the web for Microsoft, Eric joined Telerik in October 2012 to enhance the Fiddler Web Debugger on a full-time basis. Telerik is devoted to making software development easier and more fun and has committed to keeping Fiddler free and expanding its value by further investing into the tool.

A quick summary of getting started with Fiddler has been published at Developer.com. A detailed documentation is available at the Fiddler website. A discussion forum and a developer section are available at the same site. Various addons and third-party extensions have been developped.

Fiddler can be configured to analyse the http traffic of iPad’s, iPhone’s and other web devices.

A simular tool called Charles is available for Mac Computers.

Some related tutorials about Fiddler and HTTP debugging are listed hereafter :

Time to Live (TTL) of objects on Amazon Cloudfront

Posted on by

Time to live (TTL) is mechanism that limits the lifespan of data in a computer or network. In HTTP, TTL is expressed in the response header as a date and time on which a record expires.

On Amazon Cloudfront, the default TTL is 24 hours. In April 2010, Amazon Cloudfront announced that it will honor shorter TTL’s down to one hour. The HTTP header can be set in the Amazon AWS Management Console.

To refresh a specific file on Amazon Cloudfront, you can use the Invalidation API. The Bucket Explorer has a UI that makes Invalidation pretty easy. Informations about an Amazon CloudFront – PHP Invalidator are availble at the subchild website.

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 :

Responsive, adaptive and reactive web design

Posted on by

Last update : June 25, 2014

Responsive web design is creating web layouts that can adapt to a multitude of displays and devices. Using this technique, you can eliminate the need to create device-centric designs and allow your content to be displayed from a single source, on an unlimited number of mediums.

Web designers often transform their desktop layouts into something optimized for devices with smaller screens by adding additional javascript and additional css code. That’s not the right solution for mobile devices with less powerful CPU’s and slower network connections where speed and low roaming charges matters more than on desktop PC’s. Simply resizing the same application to fit on multiple devices doesn’t necessarily ensure the best experience for users.

The main objective of responsive web design is to load only those files to the device which are really displayed and to minimize the file size of the downloaded elements, including images. Responsive web design is the practice suggesting that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. Adjusting images to make them context-aware, according to the different screen widths or devices is another important aspect of responsive web design.

The pioneer of responsive web design is Ethan Marcotte, a web designer, developer, speaker and author, living in in Boston, Massachusetts. His blog is called Unstoppable Robot Ninja.

The technical ingredients for responsive web design are :

  • fluid grids
  • media queries
  • adaptive images
  • viewport settings

Some web designers prefer the term adaptive instead of responsive for these technologies, other call it reactive.

A recommended approach to start with responsive web design is to start with a mobile first layout. You have to keep in mind that most internet users do not keep a browser open full screen.

Links to some useful documentation and scripts about responsive web design are shown in the following list :

Books :

Scripts :

Blogs :

 

Scroll content on the iPhone and iPad

Posted on by

To scroll content inside a fixed width-height element (e.g. div) on an iPhone or iPad, the user must use two fingers to scroll any area on a page that is not the entire page. One way to work around this ‘feature’ is to implement a touch event handler that moves the div up when the user touches it.

A better way to add one finger scrolling to divs on iPhone’s and iPad’s is the iScroll4 script developed by Matteo Spinelli. This script provides the following features :

  • Pinch / Zoom
  • Pull up/down to refresh
  • Improved speed and momentum
  • Snap to element
  • Customizable scrollbars

3D Printers

Posted on by

Last update : May 15, 2013
3D printing is a form of additive manufacturing technology where a three dimensional object is created by laying down successive layers of material. 3D printing is  considered as e-manufacturing. A list of available industrial and home 3D printers is given below :

Home 3D printers :

ReplicatorG  is a software that will drive your home 3D printer or generic CNC machine. You can give it a GCode or STL file to process, and it takes it from there. It’s cross platform, easily installed, and is based on the familiar Arduino / Processing environments.

Industrial 3D printers :

The following  3D printing providers offer web based services for private customers :