A view on coding trends and development methods brings a perspective on our own work in the web arena. Improving methods is key to the quality of work. Succeeding to strengthen our work cycle and simplify it is an incentive for us.
The way we work
Fluid layout is an older technique that adapt to the visual space available. It uses relative units: %, em, px (the last, relative to the screen), and relies on flowing content according to the available width of the container.
Due to important differences between browsers, many coders used to offer dedicated stylesheets through the Media type attribute. Media queries are an extension to media types. They give the ability to specify different styles for various environments, orientations, width. Different method allow to use Media Queries; using the @media rule offers the benefit to avoid extra HTTP calls.
Fluid grid design
Fluid design adapt to the user environment, without regard to the screen size, browser, tablet or mobile used. Formerly many coders used fixed grids for a given screen size. Further on, they used grids for different screen sizes. Fluid design introduced layouts based on percentage. Fluid design grids use pixel-based sizes, flowing within the sizes of the parent container.
Responsive design is a main trend in 2016. Responsive web design means building web sites that adapt to any environment, regardless to what the visitor or customer uses to browse the Internet: mobile, tablet, desktop PC with any browser. The main ingredients of responsive web design are: 'fluid design', 'media queries', 'grid design'. Designers and developers widely adopted these techniques, in all or in part.
An alternative to feature detection exists: 'graceful degradation'. The idea is to provide two declarations, one for older browsers and one for new ones. For example, when giving a size, we can use first a value in pixel (understood by all) and immediately after a value in rem (a relatively new unit). As the last declaration takes precedence, new browsers will use it; as older browser do not know rem, they will use the pixel value. This is simple, seductive, but cannot provide a generalised solution.
Modernizr & other libraries