Online multimedia
12 views | +0 today
Follow
Your new post is loading...
Your new post is loading...
Scooped by Marco Stazi
Scoop.it!

CSS Sprites: Image Slicing’s Kiss of Death

CSS Sprites: Image Slicing’s Kiss of Death | Online multimedia | Scoop.it
Say goodbye to old-school slicing and dicing when creating image maps, buttons, and navigation menus. Instead, say hello to a deceptively simple yet powerful sprite-based CSS solution.
Marco Stazi's insight:

In this "historic" artcle from the online magazine A List Apart, we have a discussion about a peculiar but widely used technique. CSS sprites are a technique where the designer creates a large image which contains several little icons (see image in the article), and then displays only  the part of that image that is needed in every single case (using custom css, see snippet 4 in the article). The advantage of having all the icons in a single image is that the browser only has to download one picture, so this technique increases loading speed of complex interfaces. Nowadays this technique is being partially replaced by Icon Fonts (see article on this board) but it still has an advantage compared to icon fonts: it is possible to have multi-coloured icons whereas icon fonts can only be monochromatic, because of the way text colour works on the web (i.e. a single character can only have one colour). 

more...
No comment yet.
Scooped by Marco Stazi
Scoop.it!

The Smashing Book - The Ultimate Guide to Fantastic Color Usage | Smashing Magazine

The Smashing Book - The Ultimate Guide to Fantastic Color Usage | Smashing Magazine | Online multimedia | Scoop.it
How can color in Web design focus attention, inform decisions, inspire action, organize information, highlight elements, balance composition and enrich experiences? We’ll explore answers to these questions in this chapter and look at several examples of good color usage in websites.
Marco Stazi's insight:

This is a fantastic article by Smashing Magazine (a specialised web design online publication) about colour theory and the use of colours in web design. It explains many details such as RGB synthesis, primary vs complementary colours, HEX colour codes etc.

more...
No comment yet.
Scooped by Marco Stazi
Scoop.it!

HTML5 Boilerplate: The web's most popular front-end template

HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites. Spend more time developing and less time reinventing the wheel.
Marco Stazi's insight:

HTML5 Boilerplate is a front-end web template i.e. is not a full-featured framework like bootstrap, but it's more lightweight and leaves more freedom to the designer. I have used it in the past and in my opinion the two main advantages are the "Modernizr.js" library, which is useful if you want to preserve some minimum functionality even on very old browsers, and the "Normalize.css" stylesheet, which makes sure that default values (text size, margin, padding etc.) are consistent on every browser (Explorer, Chrome, Mozilla etc.).

HTML5 Boilerplate has been developed, among others, by Paul Irish, a front-end dev who works at Google and who is, in my opinion, a very important figure in the most recent history of web design.

more...
No comment yet.
Scooped by Marco Stazi
Scoop.it!

Taking A Second Look At Free Fonts | Smashing Magazine

Taking A Second Look At Free Fonts | Smashing Magazine | Online multimedia | Scoop.it
The quality of available free fonts has increased dramatically. To be frank, free fonts don’t have a good reputation, and often they are knock-offs of thoroughly crafted, already established typefaces. So is it time for professional designers to take a second look?
Marco Stazi's insight:

One of the limitations that web developers used to have was that up to 3/4 years ago, there was no way to embed fonts in a web page: the result of this situation was that in order for a font to be correctly displayed in a web page, it had to be already installed in the client computer's operating system, so web designers were forced to use fonts that were likely installed on most if not every computer (such as "Times New Roman" or "Arial". There were even (very short) lists of so-called "web safe" fonts.

The situation has dramatically changed since the introduction of web fonts, where the developer can link a font which is downloaded alongside the page as a separate resource (just like images appearing in a web page are downloaded alongside the html page itself).

Obviously this system can work only if those fonts are freely downloadable, this has led to a renaissance of open source fonts (vs. proprietary fonts).

more...
No comment yet.
Scooped by Marco Stazi
Scoop.it!

Why Japanese Web Design Is So... Different

Why Japanese Web Design Is So... Different | Online multimedia | Scoop.it
In the mind's eye of many people Japan is a land of tranquil Zen gardens, serene temples, and exquisite tea ceremonies. Both traditional and contemporary Japanese architecture, books and magazines ...
Marco Stazi's insight:

Japan is famous for the elegance and simplicity of its design traditions (think about Zen gardens) but, at least to a westerner's eye, most Japanese websites look crammed and messy. This article explains why that is the case.

more...
No comment yet.
Scooped by Marco Stazi
Scoop.it!

The Era of Symbol Fonts

The Era of Symbol Fonts | Online multimedia | Scoop.it
Welcome to the third epoch in web performance optimization: symbol fonts. Everything from bullets and arrows to feed and social media icons can now be bundled into a single, tiny font file that can be cached and rendered at various sizes without needing multiple images or colors. This has the same caching and file size benefits as a CSS sprite, plus additional benefits we’re only now realizing with high-resolution displays. Discover the advantages and explore the challenges you’ll encounter when using a symbol font.
Marco Stazi's insight:

This article, from the online web design magazine A List Apart, is about Icon Fonts. Icon fonts are specialised web fonts (see article about web fonts in this board) that are made of symbols and icons instead of letters - a typical example is the Emoji font which contains emoticons and is mostly used on mobile phones.

more...
No comment yet.
Scooped by Marco Stazi
Scoop.it!

Foundation | The Most Advanced Responsive Front-end Framework from ZURB

Foundation | The Most Advanced Responsive Front-end Framework from ZURB | Online multimedia | Scoop.it
Foundation from ZURB is the most advanced responsive front-end framework in the world.
Marco Stazi's insight:

Foundation, like Bootstrap, is a front-end framework and it very nicely complements Bootstrap since it uses alternative technologies. For example developers who prefer Sass to LESS might prefer Foundation to Bootstrap.

Note: Sass and LESS are "CSS preprocessors", i.e. programs that automatycally generate css files based on rules decided by the developers. They overcome some limitations of the CSS language itself, such as the fact that in the CSS language the concept of inheritance is only partially implemented.

more...
No comment yet.
Scooped by Marco Stazi
Scoop.it!

Bootstrap

Bootstrap | Online multimedia | Scoop.it
Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
Marco Stazi's insight:

Bootstrap is a CSS and Javascript UI framework which I have used in the past to build user interfaces. It is the most widely used front-end web framework and in my opinion the best features are a flexible css grid system (i.e. you can rapidly prototype multi-column layouts), the responsive layout (mobile friendly) and the vast array of javascript HTML5-powered UI elements (such as slideshows, accordion menus etc).

more...
No comment yet.
Scooped by Marco Stazi
Scoop.it!

Responsive Web Design

Responsive Web Design | Online multimedia | Scoop.it
Designers have coveted print for its precision layouts, lamenting the varying user contexts on the web that compromise their designs. Ethan Marcotte advocates we shift our design thinking to appropriate these constraints: using fluid grids, flexible images, and media queries, he shows us how to embrace the “ebb and flow of things” with responsive web design.
Marco Stazi's insight:

This is the original article by Ethan Marcotte where the responsive design idea was first discussed: before responsive design, most websites used to have a special version for mobile devices, with limited functionality. Thanks to responsive design, instead, you use the same website for mobile and desktop devices, even though the elements on the page are reorganised depending on how large is the screen that is being used to display the page. In other words, the layout "responds" to the screen size (hence the term "responsive". Nowadays a large majority of websites have adopted responsive layouts. The whole technology is made possible by conditional stylesheets (using "@media" statements).

more...
No comment yet.
Scooped by Marco Stazi
Scoop.it!

Tim Berners-Lee: 25 years on, the Web still needs work (Q&A)

Tim Berners-Lee: 25 years on, the Web still needs work (Q&A) | Online multimedia | Scoop.it
The World Wide Web is a smashing tech success. But its inventor wants it to break down more cultural barriers, thwart government snooping, and run apps, not just house documents. Read this article by Stephen Shankland on CNET News.
Marco Stazi's insight:

25 years after creating the world wide web, Tim Berners-Lee reflects on the state of the web today, online freedom, net neutrality and future challenges.

more...
No comment yet.