Skip navigation

factory-1516381_1920-thumb.jpg

This article is also published in french - Installer et préparer Sass pour la production

 

Let us take a step back, and then gradually, let us run all the installations ... Attention: If you wish, you can install only Sass and Compass in order to follow this series of articles.

 

Compass

002-Sass-004-1.png

Compass, is often controversial, especially since the emergence of post-processor management, prefixing, as well as in the opinion of authors like Hugo Giraudel - Why I Don’t Use Compass Anymore.

 

However, Compass provides flexibility in the management of projects and especially through its famous config.rb configuration file. We will install it for this series of tests.

 

Installation of Sass and Compass under Ruby

 

Regarding the illustration of this series of articles, we will work under Ruby. Although in the previous article, at the chapter The compilation and tools available; Under Ruby, everything is already discussed, I suggest you quickly go around here and resume from scratch.

 

Windows

002-Sass-004-11.png

  1. Make sure you have run Ruby Installer,
  2. Once Ruby is installed, from the Start menu, launch Start Command Prompt with Ruby.
  3. We will use this command dialog to track and install the various necessary tools.

 

MacOS

002-Sass-004-12.png

  1. Ruby is present by default.
  2. Launch the Terminal.
  3. In the following commands, you may get a type error message « …ERROR : While executing gem … (Gem ::FilePermissionError) You don’t have write permissions for … ». You will need to use the command sudo.

 

In fact, you must precede the commands indicated by the command sudo.

 

For example, if the command is

 

gem install sass

 

It will then be necessary to type

 

sudo gem install sass

 

Your administrator password will then be requested, to confirm the installation process

 

Password:

 

Enter it (be careful you will not see the cursor move, it's normal) and validate. The installation process should then continue normally.

 

Verify if Sass is installed (Windows and Mac OS)

 

Now whatever your operating system,

  1 –  Check if Sass is installed by typing

 

sass –v

 

If Sass is not present please install it

 

gem install sass

 

2 – Check if Compass is installed by typing

 

compass –v

 

If Compass is not present please install it

 

gem install compass

 

3 – Sass and Compass should be installed

 

Would there be any unavoidable extensions ?

 

002-Sass-004-2.png

Irrespective of the type of project, are there any libraries are extensions that will have to be installed to complement Sass?

 

There is no one answer to this question. It all depends on the needs and the approach taken towards the project.

 

Let's quickly go around the main plugins available. (The following set of installations is provided for illustrative purposes only).

 

4 – Check if the extensions that follow are already installed

 

gem list

 

The list of already installed gems appears in your command palette.

002-Sass-004-13.png

Susy

002-Sass-004-3.png

Susy is recommended if you are approaching grid mode positioning. This plugin remains an indispensable tool to match your highest requirements.

 

It is true that from premium premises, it may seem a labyrinth, but think again, it is very easy to use and brings enough capacities under the hood in order to respond to the most complex layouts.

 

5 – If Susy is not listed in the gem list, please install it

 

gem install susy

 

Breakpoint

002-Sass-004-4.png

Breakpoint is an indispensable complement for a more flexible management of the break points between each display mode. This extension, which is often confused with certain possibilities integrated into the various grid modes, remains truly complementary and relaxes the writing of media requests.

 

6 – If breakpoint is not present in the list, please install it

 

gem install Breakpoint

 

Scut

002-Sass-004-5.png

Scut This SCUT library for Sass-CSS Utilities brings a lot of shortcuts and simplification of writing in general, both on the display and on typography.

 

  7 –  If scut is not present in the list, please install it

 

gem install scut

 

During this installation, you may receive an error message of type « … ERROR : Could not find a valid gem … ». No worries, default Ruby automatically adds https://rubygems.org, but not the unsecured version.

 

It is therefore possible to do it manually, taking the risk of course not to draw on a secure server.

 

gem sources --add http://rubygems.org/
Do you want to add this insecure source ? [yn]

 

You will have to explicitly validate this addition, confirming by y or refusing by typing n.

 

Typesettings

002-Sass-004-6.png

Typesettings is a plugin that manages typography in an almost intuitive way, respecting the ratios according to the device model, and, by bringing an integrated vertical rhythm.

 

Simple to use, this library becomes indispensable to who wants to work the text as well as the layout.

 

Unlike other plugins, it will be necessary to clone the github at the time of import. We will see this later at the time of the configuration

.

GitHub - ianrose/typesettings: A Sass or Stylus toolkit that sets type in Ems based on modular scale, vertical rhythm, a… 

 

Normalize

002-Sass-004-7.png

normalize-scss or compass-normalize… Before any intervention on the CSS, it is always strongly recommended to ensure the reset of the default values of interpretation for each browser.

 

You have the choice of two gems, knowing that the second has not been updated for nearly 6 years, and that Necolas offers you an alternative under Node, Normalize.css - A modern, HTML5-ready alternative to CSS resets.

 

In this workflow, we opt for the first proposed gem.

 

8 – If normalize-scss is not present in the list, please install it

 

gem install normalize-scss

 

And more…

 

If you work under Ruby, do not hesitate to visit the hosting platform of the Ruby Community, RubyGems, to find the various gems available, and, possibly supplement your work environment according to your own needs.

 

9 – Quickly redo a check of the gems that are installed in your environment

 

gem list

 

Commissioning and use

 

Once the environment is installed, and in order to work, we will have to create a project (if you do not have a project in progress), or to monitor it (if you are working on a project already created).

 

If Compass has been installed, it is possible to use its services to manage the various projects. We will see that there are various possibilities.

 

Creating a project

 

On its site, Compass offers a command line generator Tell us about your project and we'll help you get it set up.

 

002-Sass-004-8.png

This service generates the necessary commands directly, that we will only have to copy, paste in order to use them.

 

Whatever your needs, the mini form, put in place, goes to make it possible to define each of the necessary parameters, namely:

 

  1. Creating, or resuming, a project (install or create)
  2. If you choose New, you will have to enter the name of the project, which is the name of the folder that will be created to contain all the necessary files
  3. The acceptance, or not, of the implementation of a default startup template, (except in some cases, we will often opt for No and we will create a custom tree, see point 5)
  4. The syntax used by the project (Sass or SCSS)
  5. Customizing the tree to use, defining the naming of source folders, CSS destination, Javascript and images

 

On a traditional creation basis, the command line should look like:

 

compass create the_name_of_the_project_folder --bare --sass-dir "scss" --css-dir "css" --javascripts-dir "js" --images-dir "imgs"

 

Copy this command line and switch to the command console, or the terminal.

 

By default you should be in the home directory, that is your user session.

 

Move this pointer to your production folder. If you do not usually work with the console, or the terminal, rest assured, what we have to do is really not complicated.

 

Whichever directory you are in, enter

 

If you are on MacOs

 

cd 

 

And if you are under Windows

 

cd /d

 

Then,

 

In one case, as in the other, drag and drop just these prevous instructions, the folder in which you wish to create your project folder.

 

Let's say you have a folder called Production located at the root of your main hard drive.

 

If, therefore, you drag the Production folder following the previous instructions, this should give one of the following two lines

 

cd /Production
cd /d C:\Production

 

Make sure to give the focus to the command console, by clicking on it, and validate by pressing the enter key.

 

You will move the pointer of your console to the new location. The result should be, depending on your environment, one of the following two lines

 

YourSession :Production YourSession$
C:\Production>

 

It is then enough to paste, afterwards, the command line proposed previously by the site of Compass and to validate.

 

compass create the_name_of_the_project_folder --bare --sass-dir "scss" --css-dir "css" --javascripts-dir "js" --images-dir "imgs"

 

A series of information will then appear in the control console informing you of what has been achieved. Open the Production folder, where you will find your project folder, the_name_of_the_project_folder, which should contain :

 

  • A scss folder; which will be the source folder containing the various scss files
  • A config.rb file, which contains all of the configuration parameters defined through the command line

 

We will return later to this configuration file, let us continue for the moment, this first approach of commissioning and use.

 

Monitoring of a project, and compilation

 

Once the project is in place we will have to ask to compile our source files, *.scss and/or *.sass, into *.css file(s).

 

This is possible on a one-by-one basis

 

Using the command

 

compass compile [path of the project file]

 

Or by placing the command prompt pointer in the project folder and simply using the command

 

compass compile

 

This is also possible to automatically handle it

 

When working on a project, it is often much more flexible to ask Sass to monitor the working folder and compile each time that a source file is saved.

 

For this purpose, and in the same way as an ad hoc shot, it is possible to use one of the following two commands

 

compass watch [path of the project file]

 

Or if the command prompt already points to the project folder

 

compass watch

 

Alternatives through a system file

 

Whatever your environment, it is possible to create, compile, monitor your projects using files *.bat (under Windows) or *.command (under MacOS).

 

These files can be prepared in advance and reused across projects. They allow us to directly launch create, compile or watch instructions without having to go through command lines.

 

To use them, simply place them in the project folder (or upstream of the project folder to be created) and launch them by double-clicking them.

 

Under Windows

 

Two .bat files can be created, for example create.bat et watch.bat (the names used here are purely arbitrary). These files will then be used to manage the creation and monitoring of a project.

 

Their content is quite explicit since they are in fact the command lines used previously:

 

compass create

 

and

 

compass watch

 

Under MacOs

 

Like Windows, just create two .command files, for example create.command and watch.command, which will be set up and used as the previous two.

 

However, these two files will contain an additional instruction, cd `dirname $ 0`, which will allow to explicitly position the command line on the folder containing the whole script.

 

cd `dirname $0`
compass create

 

and

 

cd `dirname $0`
compass watch --force

 

The --force statement, as its name implies, forces the system to save the new file, overwriting the old file already present.

 

Then, and regardless of the operating system,

 

You can, of course, complete the command lines with any corrections you want to make, for example:

 

compass create --bare --sass-dir "scss" --css-dir "css" --javascripts-dir "js" --images-dir "imgs"

 

Then, in order to use these files, simply put the desired file in the project folder, (or upstream of the project folder to be created, if it is a creation and the project name is defined), and double click on it ... the magic of the command line will take care of the rest.

 

So in summary, if you create a project, use the file that contains create, if the project exists and you want to compile on demand, use the second.

 

The configuration file, config.rb

 

As soon as you work with compass, a configuration file, config.rb, is automatically created, (of course, if it is not already present in the project file).

 

By default, various configuration values appear with the values defined, either by the parameters of the command line (as we saw in the previous example), or data that is specified in the default values file located in the installation folder of compass :

 

{C:|Applications}\Ruby22-x64\lib\ruby\gems\2.2.0\gems\compass-1.0.3\lib\compass\app_integration\stand_alone\configuration_defaults.rb

 

In any case, and if necessary, the config.rb file can be reconfigured as required.

 

So by default, the config.rb file contains

 

require 'compass/import-once/activate' # Require any additional compass plugins here. # Set this to the root of your project when deployed: http_path = "/" css_dir = "stylesheets" sass_dir = "sass" images_dir = "images" javascripts_dir = "javascripts" # You can select your preferred output style here (can be overridden via the command line): … # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

 

Plus a number of lines preceded by the # sign. These are comments and can be deleted if you wish.

 

Depending on your needs, you can reset these values to

 

require 'compass/import-once/activate'
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "imgs"
javascripts_dir = "js"

 

As well as adding other values, drawing inspiration from the article Ruby-based Configuration Reference.

 

If you have installed plugins and want to use them in your project, you will also have to specify them by adding the appropriate commands to the file header. Based on the installations carried out in the previous article, here are the additions:

 

require 'susy'
require 'breakpoint'
require 'scut' 
require "normalize-scss" 


require 'compass/import-once/activate'
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "imgs"
javascripts_dir = "js"

 

Except for Typesettings which function differently, you will find the necessary instructions in the Github plugin.

 

GitHub - ianrose/typesettings: A Sass or Stylus toolkit that sets type in Ems based on modular scale, vertical rhythm, a… 

 

However, we will also discuss this in a future article.

 

Performance tests

 

Everything is ready ... launch the observation command, either on the command line compass watch, either from the file watch.bat or watch.command create previously.

 

Create a file test.scss, that you save in the folder scss and add the following content.

 

$couleur: #363;
.uneclasse {
  color: $couleur;
}

 

As soon as you save this file, you should see the file test.css in the css folder. This file should contain

 

.uneclasse {
  color: #363;
}

 

If this works, perfect ... so you can delete these two files, if not, go through the installation steps and see where it was possible to hook.

notes-933111_1920-thumb.jpg

This article is also published in french - Déployer Sass de manière efficace

 

As we saw earlier, writing in Sass does not mean writing traditional CSS, but it is incumbent on us to produce quality CSS, and, finally, to comply with a set of good practices.

 

I therefore invite you, before I begin, to bring you closer to Principles of writing consistent, idiomatic CSS.

 

Next, it is important that we are interested in some approaches, and methodologies, in designing CSS styles.

 

Each of them explores a way of using classes and sharing descriptions.

 

It is true that, at first glance, this may run counter to a certain idea of CSS, and in particular on the abuse of class, otherwise known as acute class.

 

If you take the time to analyze them one by one, you will quickly realize that whatever the nature of your project that the single use of selector can very quickly become blocking at the level of the specificities, and is relatively heavy to manage as to its scalability.

 

OOCSS (Object Oriented CSS)

002-Sass-002-7.png

The object-oriented approach OOCSS is a revolution in the basic approach of CSS.

 

The idea is simple. Just think about distinguishing the structure and the appearance, and therefore to separate the contents of the container. Not to use strong specificities, and thus avoid the ID, to continually think flexibility first, flexibility and responsive.

 

In addition, not to hesitate to minimize the impact of a single module on an element and thus, if necessary, to multiply the modules on the same object in order to apply several objectives.

 

It is necessary to favor the transversal re-use by avoiding falling into an excessive specificity, which would limit the cases of use. Think global and non-specific.

 

A small example ... let's say that the <h1> title of an article is styled in a certain way, and that the title of a <caption> table uses a large common base with the previous title, similarly for the title < h3> of a particular module ... The CSS approach could be

 

article h1,  caption, .module h3 {}

 

An OOCSS-style revision would be equivalent to implementing a specific rendering class of this title and adding it to each of the elements directly at the HTML DOM level

 

.title_emergeant {}

 

The obvious advantage is that it will not be necessary to isolate the caption selector, in case various modifications are necessary, and the evolution will be much more flexible, even if a particularity occurs on one of the elements, to add a class to this element

 

.title_emergeant_particularity {}

 

It is true that in Sass the use of inheritance, and / or placeholder, might suggest being a rather flexible alternative of use. Attention, as we shall see later, not to fall into this apparent easiest way.

 

%title_emergeant {}
article h1,  caption, .module h3 { @extend %title_emergeant; }

 

BEM notation, or SUIT CSS, methods

002-Sass-002-8.png

BEM (Block, Element, Modifier), is a methodology, or convention, for naming, and dividing by blocks, elements of the page. This does not provide anything at a purely structural level, although this specifies it. It however, allows to quickly defining a block, each of its elements and their possible states.

 

Contrary to OOCSS, BEM will rather integrate in a verticality specific to each module and less impose itself as element of transversality between the modules.

 

If we take the example of a module, BEM allows us to define various classes, having a first class to define the module itself, and, various classes which will qualify each of the elements the component, modify specifying the states, both of the module, and of its elements.

 

The classes corresponding to the various elements use a single hyphen separator, whereas the classes 'modify' use a double dash separator.

 

.module
.module-title, .module-icon, .module-bar, .module-button
.module--inactive, .module-button--inactive, module-button--on

 

Basic Approach

 

We will see that this can be improved by also using a dedicated @mixin. But, this kind of naming can be implemented quickly and easily within Sass, notably through the use of the parent's referential character, &.

 

.module {
     &-title {}
     &-button {
          &--on {}
     }
}

 

Using a name convention, BEM or SUIT CSS oriented, will give an architectural tree. Therefore, the main idea will remain to define a real BEM tree, in place of the classic tree of the DOM.

 

.module{}
.module-title{}
.module-button{}
.module-button--on{}

 

More Complex Approach

 

Since Sass 3.4, the enhancement of the parent selector (&) allows by coupling with the @at-root directive to use a real encapsulation. To highlight this point, let us support the excellent article by Marc Mintel - Pushing BEM to the next level with Sass 3.4

 

BEM and dedicated libraries

 

BEM does not stop to be just a naming convention, it can also be complemented by JavaScript libraries including i-bem.js, or component packages ready to be used, and some other works around jQuery.BEM or package like bem-js, as well as jQuery BEMHelpers.

 

If you wish, we could explore these uses in a forthcoming series of articles.

 

Suit CSS, another alternative

 

In parallel with BEM, we could also evoke SUIT CSS (Style tools for UI components), which is a method based on the same principle but which calls for a different division. We are talking this time about Component, Descendent, Modify, State and Utility.

 

SMACSS

002-Sass-002-9.png

Unlike the first two approaches, which propose a CSS implementation methodology, SMACSS (Scalable and Modular Architecture for CSS) redefine rather a methodology of work, (much of the work is free access).

 

Jonathan Snook delivers a large number of important keys that allow us to gather together to properly organize the deployment of CSS, but especially to guarantee its scalability and maintainability in a very simple way.

 

What we will retain, for our concern, is the declension of CSS into categories:

  • Base
  • Layout
  • Module
  • State
  • Theme

 

Sass, allows us to decline, and to increase, as much as possible, this granularity of cutting, because at the end everything can be very simply regrouped within a single file.

 

@import 'base';
@import 'layout';
@import 'module';
@import 'state';
@import 'theme';

 

Let us not forget that SMACSS, proposes an architecture that wants to be scalable and modular for our CSS.

 

ITCSS

002-Sass-002-10.png

ITCSS, (for Inverted Triangle CSS), proposes a distribution by degree of specificities and cascades, thus avoiding significant overloads, and often blocking.

 

002-Sass-003.png

  • Settings, allows grouping all the settings both at the level of the preprocessor (parameters, variables and map at the global level, environment ...), as well as the definition of typos and other colors used by the theme.
  • Tools
  • Generic, proposes the very first level of CSS with both the resetting of the default values of the browsers, the properties of boxes and the first definition of the different layouts specific to each device.
  • Elements
  • Objects, will group all the identifications by class, representing objects (in OOCSS philosophy), or molecules (Atomic Design).
  • Components, is a higher level of objects, also based on classes, with a BEM-oriented naming approach, and consisting mainly of organism (Atomic Design), complex objects (OOCSS) and interface components (UI)
  • Trumps, last level that can surpass previous and now mainly all utilities, helpers, states and other forces of the theme. Do not fear the use of the !important property for certain declarations.

 

Regardless of the layer, none of them must contain a selector based on the use of an id, #identifier.

 

Naming _partials.scss files can therefore use the root of these layers, for example:

 

_settings.colors.scss
_settings.sass.scss
_tools.mixing.scss
etc…

 

Do not hesitate to get closer to this github which offers a good starting tree https://github.com/mehmetkose/skeleton-itcss.

 

Moreover, if we want to go further by coupling for example BEM and ITCSS this gives BEMIT and there is an excellent article on the subject, BEMIT: Taking the BEM Naming Convention a Step Further.

 

Atomic Design

002-Sass-002-11.png

From 2013, Brad Frost, began to publish a work on a particular methodology, and close to the atomic constitution of the elements. He also gave this name to his study Atomic Web Design, quickly completed and expanded by his book Atomic Design.

 

Like BEM and SUIT CSS, Atomic Web Design offers a cutting starting from the atom, molecule, organism, model and page.

 

The metaphor is quite appropriate, and if we replace it with elements of content, we end up with:

 

  • A label, a button or a title (in the role of atoms),
  • A search tool component (on the molecule side)
  • A fairly comprehensive menu bar (at the organism level),
  • A filling template (to embody the model, and, bring together all the organisms)
  • Finally, a site page (being an instance from the previous template).

 

To support this principle of establishment and construction, Create atomic design systems with Pattern Lab proposes a set of tools (Node and PHP).

 

This approach allows us to encompass all the previous methods, namely OOCSS, SMACSS, ITCSS and BEM.

 

One can therefore resort to partials,

 

@import 'atomic';
@import 'molecule';
@import 'organism';
@import 'template';
@import 'page';

 

Conclusions

 

Through these various methodologies, we have seen that using a class notation work is therefore a solution, certainly a matter of debate among the most purist of us, but oh so adapted to the maintenance of a great flexibility in the daily management of our projects.

 

The modular approach and the cutting into several files _partials.scss quickly brings a great flexibility to the maintenance of the sites.

 

In conclusion, we can retain three key words,

 

  • Modules
  • Naming
  • Divided

 

In addition, it is well on these three points that we will have to focus our use of preprocessors.

eclosion-329085_1920-thumb.jpg

This article is also published in french - Sass – La compilation et les outils disponibles

 

In order to get traditional CSS, irrespective of whether the Sass syntax used Sass or SCSS, you have to compile them. For this, we have various possibilities that we will explore in the course of this article.

 

Note that when we are in the experimental phase, or, in development mode, it is sometimes very practical to have a standalone compiler on hand, and online.

 

The platform Sassmeister, allows us to quickly and simply test a combination. To highlight it, open the previous link, and in the left part paste the following code fragment;

 

$couleur: #363;
.uneclasse {
  color: $couleur;
}

 

See what happens in the right hand side. Do not hesitate to refine the parameters of use, according to your needs, from the Options menu.

You can also employ other similar tools that will directly integrate into your workflow. Depending on your needs, you will have access to various solutions.

 

Under Ruby

 

002-Sass-002-2.png

 

Because Sass is being written in Ruby, it may seem natural to use it with this environment.

 

On Mac, Ruby is already present natively. On Windows, it must be installed, and you will find all the versions, and necessary packages, from the site Ruby Installer.

 

Once you have installed Ruby, on Mac OSx everything happens from the Terminal, and, under Windows, you now have access to a new command prompt from the Start menu, which is Start Command Prompt with Ruby.

 

002-Sass-002-3.png

 

Then, whatever your environment, to install Sass, it happens in the command line, and in the same way:

 

gem install sass

 

In Mac, you will need to use a sudo. Nevertheless, that is all ... there is no need for more steps or installation.

 

You will find videos showing these facilities; On Windows Installation et prise en main de Sass et Compass and under MacOsx Installation de Compass sous Mac OS X.

 

After installation, it is simple to test the functionality.

 

Move your command line by pointing to the working folder you want.

 

In this folder, create a test.scss file that contains the following code fragment and save it.

 

$couleur: #363;
.uneclasse {
  color: $couleur;
}

 

From the command line, enter the following statement;

 

sass test.scss styles.css

 

Once validated, the styles.css file should be generated and contain standard CSS.

 

In order not to continually launch the compilation instruction, it is better to ask Sass, or compass if you have installed it, to monitor the work file in question, and to compile each time you save any *.scss document.

 

To do this, simply enter this command and validate it;

 

sass --watch sourcesfolder/sass:destinationfolder/css

 

On the Sass side, the first path, sourcesfolder/sass, corresponds to the location of the source files (.scss or .sass) and the second destinationfolder/css path, specifying the destination folder of the compiled files (.css ). Two points must separate the two paths:

 

Although this is not mandatory, if you work under Ruby, the installation of compass can be very interesting, would be only for the management of projects, and especially through its configuration file config.rb

 

http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "libs"
fonts_dir = "fonts"
relative_assets = true
line_comments = false
output_style = :compressed

 

So if you work with Compass, because the source folder (sass_dir) and the destination folder (css_dir) are already defined, you can simply request monitoring of the current folder from the command console

 

compass watch

 

LibSass

 

002-Sass-002-4.png

If you do not want to install Sass under Ruby, you can use LibSass, which is a library developed in C / C ++ and you can use the environment of your choice through a wrapper.

 

There are a large number of ready-to-use wrappers Ruby, Perl, PHP, Python, .NET, Java, JavaScript. But you can also develop a custom wrapper in order to implement your needs to the best of your ability, using libsass directly.

 

Due to the large number of wrappers available, we will not discuss here their installations or their uses. However, be aware that this library is used by code editors like brackets-sass.

 

Pay attention because notepad ++ only code coloring the scss syntax, and Dreamweaver is directly based under Ruby.

 

However, for each of the previous implementations, note that the ad hoc github offers you a topic, Getting Started, which allows you to quickly take charge of setting up the compiler of your choice.

 

Using PHP

 

Although this comes out of the Node approach, it is possible to opt for an alternative that consists of not generating the client side compilation.

 

One places, therefore, directly the entire necessary source files on the server, which will compile them on demand when the pages are distributed.

 

Several possibilities:

 

scssphp

 

To implement this type of use, and workflow, we will only address the approach made by scssphp.

 

First step, download the necessary files, and unpack the archive.

 

Among the recovered files, only the file scss.inc.php will be useful for this test.

 

Let us start by creating the base-1.php file that will contain the HTML structure. For this, two simple paragraphs of 'lorem ipsum' will do the trick. Let us add a class to each, respectively styles-tags and styles-link.

 

base-1.php

 

!doctype html>        

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quidem nulla nam dolorem nobis impedit harum autem, odio praesentium qui iusto perspiciatis. Animi ex atque tenetur accusamus numquam earum quas.

    

Repellendus voluptatibus praesentium, quaerat doloremque, non placeat. Assumenda facilis sint repellendus similique porro nihil quae explicabo eius, distinctio ea expedita, rerum sed nulla, tempora ut maiores a corporis minus deserunt.

 

There are various ways to use the compiler; we will approach two of them.

 

For the first one, we will compile CSS directly within the <script> tag of the page, the second will be to link, in a classic way, an external style sheet through a <link>.

 

styles-tags.php

 

  Let us put a <script> tag and quite simply, lets a PHP file that will compile the SCSS and return from the CSS

.

 

Then, just write PHP, you cannot do more classic.

 

compile('      $coul: blue;      .test-tags {         color: $coul;      }   '); ?>

 

  1. Import the previously downloaded file,
  2. We need to create an instance of the scssc class, which will allow us to compile the scss into css,
  3. Finally, through a simple echo instruction, we write the result of the compilation. Certainly, this compilation is very basic but it allows, by using a variable, to verify that everything works well.

 

styles-link.php

 

For this option, we will use a <link> tag, which we usually use to link CSS files.

 

This time, we will have to compile, on the fly, scss to css and the compilation being server side, we will have to create the CSS style sheet in PHP.

 

<link rel="stylesheet" href="styles-link.php">

 

On the PHP side, the source file will resemble the one used previously, except that the browser must interpret the PHP document as CSS. We must take care to modify the header of the file before compiling and returning it.

 

< ?php   header("Content-Type: text/css");   require "scss.inc.php";   $scss = new scssc();   echo $scss->compile('       $couleur: orange;       .test-link {           color: $couleur;       }   '); ?>

 

Go further

 

For more information on using this compilation method, please refer to the online documentation.

 

Grunt, Gulp or NPM

 

002-Sass-002-5.png

 

In our projects, we often use task automation to optimize certain mechanics such as concatenation, image optimization, sprite generation, file minimization, and many others potential.

We can therefore also entrust these compilers with the task of compilation. Whether we use Gulp, Grunt, NPM or directly Node, solutions are not missing.

There is even a parser SCSS for PostCSS.

In order not to deviate too far from the objective of this article, I propose that you bring us closer to a next series of articles concerning the task automation machines and, therefore, not to address their use in this this present article.

 

Visual applications

 

002-Sass-002-6.png

 

Finally, for the most recalcitrant of us to the code, there are solutions embedded in application form, which can sometimes be more transparent of use.

Thus we find Koala, Scout, CodeKit, LiveReload, Hammer, Prepros, Compass.app, Crunch… which offer user-friendly, intuitive interfaces, to quickly include some libraries, and compile a source folder to an output folder.

Of course, their extensibility is sometimes reduced, but in some cases, it can be a more flexible solution than to go through command lines.

Attention also to the maintenance of the application in time, some solutions can disappear as quickly as they have appeared, or often no longer be maintained.

 

Sometimes, even if they are based on LibSass, they can simply not keep up with developments as quickly as those that are directly available under Sass.

002-Sass-0002.png

This article is also published in french - Qu’est ce que Sass – Introduction et présentation

 

Presentation and state of play

 

Since the appearance of CSS stylesheets, it has always been frustrating not to be able to code like some other languages such as JavaScript or PHP (to name but a few), and therefore, to remain confined to a description language of properties / values.

 

Although W3C has thought about adopting certain notions such as CSS variables, or, functional notations. The browser companies have been slow in their implementation of these features.

 

It is somewhere in response to these few proposals that various families of CSS preprocessors, such as, Sass, Less, Stylus, PostCSS, CSSNext, Closure Stylesheets, CSS Preprocessor or Rework have appeared.

 

The principle of preprocessors

002-Sass-001.png

The principle of the preprocessor is simple; it is to write stylesheets through a syntax closer to a real programming language, than a description language.

This can be achieved by using variables, directives that are conditional, loop or control, functions, and sometimes even relying on structures specific to object programming, inheritance, encapsulation or polymorphism.

 

The goal is to be able to quickly compile all this, whether server-side, or client-side, into standard CSS stylesheets, which will be directly interpretable by browsers, and other devices, or user-agents.

 

This approach offers more flexibility for development, deployment, maintenance and evolution. Depending on our production environment, we can choose a preprocessor so that it can best respond to the context and to our situation.

 

There are many preprocessors to choose from, but this series of articles will discuss and illustrate the use of SASS, one of the more popular and powerful pre-processors.

 

However, whatever preprocessor you choose, it should be portable and adaptable to your situation.

 

Sass vs Sass

 

We not only often hear about Sass, but also about Sass or SCSS. What is it? Moreover, is there a difference between these three different names?

 

So, it's quite simple, on the one hand when talking about Sass (Syntactically Awesome Stylesheets), we speak of the language itself.

 

This language is based on two writing syntaxes. The first syntax writes in Sass, which is closer to the one used by Ruby. The second, SCSS (Sassy CSS), is closer to traditional CSS writing.

 

The first written in Sass

 

$couleur: #363
.uneclasse
    color: $couleur

 

or using SCSS

 

$couleur: #363;
.uneclasse {
  color: $couleur;
}

 

both will always compile to

 

.uneclasse {
 color: #363;
}

 

Then, it is only a question of personal choice and context of use ... Clearly, if we develop in Ruby On Rails, we will opt for Sass which is easier. If instead we work on the web in traditional HTML / CSS, or if we work frequently on already existing sites, one will then be more easily oriented towards SCSS.

 

Although both can be used together in the same project, the two syntaxes can’t coexist within the same file. SCSS files have to be saved with the .scss extension and Sass files with .sass extension.

 

Capabilities of Sass can be extended

 

002-Sass-002.png

 

The working environment, as well as the tools used, will inevitably differ as we work in PHP applications, for example Symphony, Laravel, Zend, Cake or others, or in a customer-oriented framework, with purely HTML & JavaScript.

 

In general, and whatever the working environment, we can add a set of add-ins, called extensions, plugins or libraries that will extend the native capabilities of Sass.

 

Some of the most popular Add-ins include Compass, Bourbon, Sprite factory, Breakpoint, Susy, CSS Sprite, Typesettings, Scut, Buttons, Saffron, Andy

 

These additions are very easy to use, generally by installing them under the production environment, and, then importing them into the main document used by Sass.

 

@import "compass";
@import "susy";
@import "breakpoint";

 

We will dig deeper, and demonstrate how to install and use them, in the next article.

002-Sass-000.png

This article is also published in french - Comprendre et utiliser Sass

 

This series of articles on Sass is designed to increase your understanding of Sass and how to use it in your web development. This article will cover Sass methodology and implementation that will assist you in developing a workflow process.

 

If you want to start with Sass syntax, it is strongly recommended that you read some online articles in order to understand and take into account the basics of writing syntax. Do not hesitate to explore the examples provided by official websites such as the links below:

 

Going deeper

 

In addition, you will find on the web a plethora of sites go to further with your understanding of Sass:

 

 

Let's go back to our series of articles on Sass

 

002-Sass-0001.png

 

This present series will not cover Sass syntax, but will look at how to use Sass and develop concepts allowing us to exploit the best of the possibilities Sass has to offers.

 

Let me begin with a summary of the articles that it contains and follow :

 

  1. What is Sass? Introduction and presentation
  2. The compilation and tools available
  3. Deploy Sass effectively
  4. Install and prepare Sass for production
  5. How to distribute partial files
  6. First steps and files
  7. Working with your mock-up

001-Dreamweaver-001-bando.png

This article is also published in french Dreamweaver continue son évolution au sein du Creative Cloud

 

Dreamweaver CC 2017.1

001-Dreamweaver-001.png

 

This new intermediate update, Dreamweaver CC 2017.1, could almost pass unnoticed, but to look more closely, it is strong in symbols and perspectives.

 

There are two new features that may not appear as being new, because they seem to have always been around and are an integral part of Dreamweaver.

 

On one hand the Find and Replace module, which was present since the earlier age of Dreamweaver, but which has been revamped since the integration of the new Dark UI interface, and now appears to be polished and complete.

 

An on the other hand, the full support of PHP 7.1, is now a common business and we will therefore be able to benefit from the help and information tools as it should be, depending if we use 5.6 or 7.1, and as a per site basis.

 

Let's also take a look back at some older features that stabilize but that still do not provide WYSIWYG support, but which remain however modifiable, such as coloring code.

 

Usual Precautions Before Updating

001-Dreamweaver-002.png

 

Although intermediate updates are fully integrated when using cloud-managed application flows, it is preferable to use best practices such as ensuring a final synchronization to the platform before launching the upgrade process.

 

This will ensure the backup of a number of items, including application preferences, site descriptions, code fragments, keyboard shortcuts, and workspaces.

 

When launching the application, it is therefore necessary to choose Retrieve synchronization information in order to reconfigure the application, as in the previous version.

 

Bug fixes

 

As with every improvement, whether intermediate or major, a large number of bugs have been corrected, and certain functionalities are improved or polished.

 

This concern both usability, ergonomics and integration within Dreamweaver’s IDE, particularly at the level of the Find and Replace tool.

 

001-Dreamweaver-003.png

Anyway, if you find a bug that has not been taken into account, or if you want an improvement of any kind, do not hesitate to put this information back to the development teams. Go to one of the following URLs: https://dreamweaver.uservoice.com/ and more information on https://forums.adobe.com/thread/878528

 

Coloring the code editor

 

This feature appeared with the previous version, but many expect that this intermediate version allows an ease in the choice of colors used by the editor, as it is true that the coloring of the code can become quickly frustrating.

 

001-Dreamweaver-004.png

By default, Dreamweaver offers two modes, Dark and Light, but on this update two new ones join the band, Raven Dark and Solarized Light, respectively on a Dark and Light basis. And then that's all ... but hey, we can still go further, and in different ways.

 

Find and add themes

 

To find a theme, nothing is simpler. Let's not forget that Dreamweaver uses Brackets as a code editor, and therefore it’s enough to approach a theme dedicated to Brackets directly from the ad hoc github, http://brackets-themes.github.io/.

 

001-Dreamweaver-005.png

Once there, make your choice from the visual catalog, for example NewtonLight-master, and by clicking on the link you will be redirected this time to the github of the appropriate theme.

 

Using the big Green button, you will have the choice to Clone or Download. Simply select Download ZIP, then unpack the download folder and place it in the right folder depending on your system.

 

Windows

C:\Users\{your session}\AppData\Roaming\Adobe\Dreamweaver CC 2017\fr_FR\Configuration\Brackets\extensions\user

 

Mac OSx

~/Library/Application Support/Adobe/Dreamweaver CC 2017/en_US/Configuration/Brackets/extensions/user/

 

Now by going to Dreamweaver Preferences in the Interface category, you will access this new Code Theme and you’ll can select to choose it.

 

Create your own theme

 

For the more adventurous among you, it is possible to create a theme based on a blank sheet ... why not? But, be aware that it is sometimes easier, and often faster, to start from a base close to the final expectations, and, adapt it.

 

Anyway, to create a theme it will be necessary to define a style sheet written in .less (or .css) and a json file that will set up the various necessary parameters. You will find all the information you need on the github Creating Themes.

 

Regarding the package.json file, three properties are particularly important for theme property: file, dark and addModeClass.

 

{
      "title": "Raven",
      "name": "Raven",
      "description": "Built-in dark theme for Brackets",
      "version": "0.42.0",
      "author": "Miguel Castillo <mahchagnu@gmail.com>",
      "engines": {
           "brackets": ">=0.42.0"
      },
      "theme": {
           "file": "main.less",
           "dark": "true"
      }
 }

 

The first defines the style file containing the set of properties, the second defines whether it is a dark or clear theme, and this is very important for all complementary palettes, (auto completion, tooltips, Help, etc ...) so that they use a color matching the theme and the last property addModeClass  (not present in the above example) is very useful if you use a coloring specific to each language like JavaScript, HTML, CSS ...

 

So, go to the Preferences, Interface Category and click + to add a new code theme, Dreamweaver will propose creating for you the base of these two necessary files, namely the file_theme.less and the package.json.

 

001-Dreamweaver-006.png

We must give a name to this new theme and specify on which theme it is based. This greatly facilitates the creation process, because we will then only have to modify the value of some properties.

 

Edit a theme

 

Once the theme is in place, it is possible to intervene and modify or refine a particular value. Again, Adobe has published a well-detailed nomenclature on its online help Customize code coloring and more specifically in the chapter about selectors.

 

Always from the preferences dialog you can edit the selected theme by pressing the pencil icon.

 

Find and Replace

 

It is true that one of the forces of Dreamweaver has always been its internal search tool, but since the adoption of the Dark UI interface, specific to the tools of the Creative Cloud, some compromises and remakes have been necessary.

 

The search tool, although extremely useful and functional, also had to mature and evolve, at least ergonomically compared to other IDEs, and code editors available on the market.

 

And so, no fewer than three new features that have come to enrich the offering in this sense;

 

  • A new menu completely autonomous on the search and the replacement,
  • Document Search Bar docked at the bottom of the document which acts as quick search
  • And a dialog, not dockable, proposing two possibilities between an advanced search and a search within the site files.

 

The Search menu

 

This menu, which has become independent and autonomous, is not really new there are a few builds of this since it appeared, but it is good to emphasize its presence because it makes the user interface even closer to what the “We expect from a code editor”, and especially a self-respecting IDE.

 

001-Dreamweaver-007.png

 

This menu offers a set of possibilities classically desired in any type of work of repossession of a site, or maintenance of a site with large volume.

 

As usual the keyboard shortcuts are juxtaposed to each action, and each action being sufficiently evocative, it is not necessary to dwell on their various possibilities.

 

"Find Previous" functionality was on the wishlist of majority of users. People wanted to have the capability to go backwards in the search results by looking for the previous element. This is now available, and whatever the mode of search is set to, you can move in both directions!.

 

Quick Find (Ctrl-F or Cmd-F, and, Ctrl-H or Cmd-H )

 

One aspect of this feature, which may surprise when it first appears, is that this type of search cannot be performed if no document is opened, and therefore, instead of any dialog, you’ll gets an alert message informing us.

 

001-Dreamweaver-008.png

 

You can also search inside a text block or within a specified code snippet. If the content portion is selected, search will be limited to that selection or the entire document. Finally, whether it is code or text block, the search may include [any tag], or any defined tag set.

 

Using the filter allows you to combine various classic parameters such as Case-sensitive, Use Regular Expressions, Match Whole Word, Ignore White Spaces, and focus the search only on the selected text.

 

The advanced search, and / or, search in files (Ctrl-Shift-F, ou, Cmd-Shift-F, et, Ctrl-Shift-H, ou, Cmd-Shift-H)

 

Having been one of the forces of Dreamweaver, this dialog is now declined in two tabs, elementary and advanced. These two search modes allow you to search and sort items contained in specific tags by specifying, or not, certain attributes. It is possible to nest as many specificities as necessary.

 

001-Dreamweaver-009.png

001-Dreamweaver-010.png

 

The actions are not limited to replacing a string, but it is possible to modify or remove the framing tag, add or remove attributes, modify their values, in short, ... a great tool in our daily developer and web integrator workflows.

 

To the right of the search buttons you will find an "Exceptions" checkbox. If this option is checked, and if you choose to "replace all", the result panel will then list the matches along with a check box next to it.

 

001-Dreamweaver-008-2.png

 

You will also find, in this panel, a menu to navigate among all these occurrences with the capability of unchecking matches that you did not want. The "replace" button will then only change the occurrences that you had selected above;

 

Save and Load Queries

 

In old versions of Dreamweaver, it was possible to load or save requests. Tasks very practical since repetitive when taking over an old site, or setting up a serious and advanced maintenance.

 

Do not worry, to reactivate these missing features by default, just make a simple change at the registry level. From the taskbar, launch regedit.exe and select in the tree view

 

HKEY_CURRENT_USER \ SOFTWARE \ Adobe \ Dreamweaver CC 2017 \ Advanced Find And Replace

 

then create a new ShowHiddenOptions string and set it to true.

 

001-Dreamweaver-014.png

No need to restart Dreamweaver, as soon as you invoke the search in the files both options will appear at the top of the dialog. This change shouldn’t be considered for all minor Dreamweaver updates.

 

Integration and PHP 7.1 support

 

PHP is clear, http://php.net/supported-versions.php, only the latest version of the 5 range, 5.6, will be supported until the end of 2018, but whatever, the major players in CMS, and other applications developed in PHP are moving more and more towards the use of the range 7 and in this case version 7.1.

 

Dreamweaver therefore had to endure the use of these two versions, which are still likely to cohabit over the next two years.

 

Global management within the application or site definitions

 

A new category has appeared in Preferences, PHP. At the moment, only one drop-down menu is proposed and allows to define the version of the PHP used, that is to say between 5.6 and 7.1, at the application level, that is to say when no site is defined.

 

001-Dreamweaver-011.png

Similarly, in the definition of the sites, appeared the same category, PHP, in the part reserved for the Advanced Parameters.

001-Dreamweaver-012.png

Hint Code and other writing aids

 

By having previously specified the version of PHP used, this allows to obtain the aids, and hints, to the writing and other relative information adapted to the version of the language that is used.

 

001-Dreamweaver-013.png

An important note to take into account is that, henceforth, if the PHP code does not contain closing tags ?> an error will be detected and displayed. It is therefore important to think about changing your habits if you did not systematically use this closure.

04-Technical serve Pixabay ux-787980_1920-bando.jpg

This article is also published in french Part IV - Transposer le contenu vers une présentation

 

Before bringing the content to design, we need to think on two separate issues, which are shared between the technical aspects of the Responsive Web Design and the design being oriented and guided by the previously defined Content Strategy.

 

We must decide: « What do we display? » and « How do we display it?»

 

Depending on the context, here are some of the key behaviors which interact between RWD and content strategy. These must occur, depending on the device and the context, without affecting the completeness of the content:

 

  • The font size should be adapted depending on the screen size, large type for big screens and smaller type on small screens, to give more visibility,
  • Depending on the device type, the font family must respond to a better readability, usually serif for printing destination, and non-serif for screen,
  • The menu bar and the navigation tools must be reduce to an icon on a small device, and completely removed when printing,
  • In a more general way, when printing the content, we need to remove all unnecessary parts of the page, like the footer, the navigation tools, the animations, and we need to be sure to not over-use colors that will consume too much ink, and think that most users can print in black and white,
  • When displaying images, their size have to be adapted to the screen’s resolution depending on the displaying screen: is it a Retina screen or high definition or a traditional 72 ppi screen,
  • Whenever data sheets and large tables have to be displayed on small screens, we definitely need to rethink their display,
  • Web, mouse, and multimedia teach us the hovering state. Sometimes that display has crucial information and a mechanism to redistribute it, depending on the device, which must be applicate,
  • We need to remove the large galleries of images that are bandwidth greedy when viewed from low connection networks, or displayed on devices which are low battery power, or beeing a screen reader,
  • Think in terms accessing the necessary information and navigation tools when content is viewed from a screen reader,
  • Set an editorial direction which provides your content in a genre: masculine, feminine, both? Do we use acronyms? Rely heavily on schema? All this, of course, in a concern of accessibility and presentation,
  • Always provide not only subtitles but also a transcription when using video. Think also of the establishment of cue-points,
  • Provide multiple pages, and interactive forms, which can be adapted to the platform of distribution between screen and mouse, touch and smartphone, and braille, voice, or printed documents
  • Build the text breakpoints. They, they are dependent on number of characters per line, device orientation, user experiences and preferences, not on pure technical landmarks,
  • Regarding technical breakpoints, we must include the technical aspects of the linked contextual use, like low battery level, low bandwidth connections, the sun or strong light, reflections on the screen, the geolocation of the user, and the relay obtained by a third party operator. In short all these technical aspects are not directly linked to the device itself,
  • The major point with a large amount of content is to avoid anything being downloaded without being absolutely necessary to the use. We need to think how to replace each element that is not necessary for the specific use, or be displayed by the device, as an alternative solution,
  • The final aim is that action, interaction, and information shouldn’t be blocked, or driven by a different use-case. just because the user visits the page, or uses the content, from a different device.

 

The list does not stop here, but it allows us to consider and better understand the necessity of this previously discussed content strategy whenever we consider a web design’s responsive appearance.

 

How to Programmatically Port and Handle Content?

 

A pure code-approach is not the goal of this series. I invite you to join us in another place, where we can study each technique vertically through dedicated training to better explore what these tools are and how to use them.

 

The point here is to focus on each tool’s families that can help us to better handle the RWD techniques:

 

  • The Media Queries themselves link different CSS files depending on the context, and the type of device and its capabilities,
  • Combine the page’s Media queries. Use strategies for major content breakpoints and sub breakpoints to split between layout displays, and eventually load new complementary content,
  • Multiple source assets correspond to various image qualities and sizes, using the srcset="" attribute,
  • The new tag <picture> can also help us, as the previous item, on presentation strategies,
  • The native support for JavaScript statement, matchMedia() can interact with the data, depending on the device, and that allows us to load only usable datas using AJAX's techniques,
  • The use of many Shim and Polyfills to replace the shortcomings of some old browsers,
  • Use a JavaScript mechanism to serve infinite scrolling. That way, when on low bandwidth, we can load the bare displayable necessities, thus avoiding loading what will not be seen,
  • Revisiting the accordion mechanism that could load data on-demand without changing the page, depending on the bandwidth,
  • Optimize the website in: subsetting fonts when possible, compressing data on the server side, concatenate and minimize scripts, and CSS, removing all unused line of code and comments, using CDN when needed, batching all the image file in the reduced-size process,
  • Optimize the management of cache. This often refers to the Service Worker API that will help us to minimize the use of bandwidth and data transfer when using the same device and resizing windows,
  • If possible, get analytics for your target audience to help in prioritizing approaches,
  • And as many of the above points refers to the use of Javascript, we definitely need to provide an alternative use based on the <noscript> tag.

 

And now?

 

This final installment of the four part series, concerning the implementation of a responsive approach is now complete. Remember that the use of the RWD must go through a content strategy, with a strong consideration for the context of the use, and not rely on a pure technical approach.

 

The main objective of this series was to lead us to think and ask ourselves the right questions on how to succeed more easily in this type of implementation for all our projects.

 

I hope that this will provide you with tools you need to be for or against this exploration of RWD and I invite you to continue this thread on a forum, providing comments of any other project you have.

 

The series :

03-Writing content for context smart-watch-821571_1920-bando.jpg

This article is also published in french Part III - Quelles sont les attentes de l’utilisateur pour votre site Web? Cela dépend du contexte.

How Do We Know What Interests a Website’s Visitor?

 

We must consider different points before opting for one solution over another;

 

Half of the world’s population accesses the Internet using a mobile device. Does the other half a desktop computer or views Internet pages on TV? It is easier to point to a QR code with a smartphone to get more information on the subject than to have to type a complex URL into a field, character by character.

 

It is important to consider that globally, 3% of people have severe handicap and 15% have a moderate to severe disability, not to mention that these figures respectively increase to 10% and 46% when we focus on the population aged at least of 60 years old.

 

Disability is not exclusive to a physical state; we must extend the idea to many problems... such as watching a video without a helmet or without speaker that necessarily requires access to subtitles sometimes written in an unknown language.

 

Did know that if 25% of the Chinese-speaking and 27% of the English-speaking public uses the web? French, Portuguese, Russian, Korean, Arabic, German, Japanese, Spanish speaking Internet users each represent about 3% to 8% of users, making 32% of all, who do not necessarily speak neither Chinese nor English. So, if a website has subtitles, what languages should they be? And what do we say about the 16% of users not represented in the above mentioned figures?

 

As developer or designer/developer, you must be equipped with the latest computer technology or browse the web using the latest browser software update. But what about your users? Maybe they are using an outdated version of browser and in this case how are your web pages displayed? What do the older browser users see?

 

Another significant figure we must also take into account is when we distribute content. Many pages are printed. In Europe alone, more than 33,300 pages are printed every second.

 

Now let’s say that the user has one of the latest fashionable smartphones; it can access a consistent bandwidth; it does not encounter problems of readability or ergonomics and, it has all the time necessary to find the information that it wants, but (and there will always be a but), the user can run out of battery power and that does not allow all content to load and execute properly.

 

This creates a paradox. First, it is not possible to deliver a different and reduced content based on a device. Second, it is also not possible to deliver global content, ready for anything. The only reference must be the device’s capabilities, the tolerated and available bandwidth, and ensure that the user can access a content that matches the same information quality regardless of those access realities.

 

How to Serve the Correct content in Responsive Web Design?

 

The media queries and breakpoints are the keys. Those queries and breakpoints are used to indicate when one layout must be applied instead of another. But besides those situations, we also need to use a more advanced code for specify when the appropriate content must be delivered, not only shown or hidden.

 

It is true that many blog post often associate breakpoints, or at least their triggers, to the display the size of the device. But we must of course understand that if the switching points, between different distribution options, can certainly be defined by a width. They can equally detect other parameters, such as: screen resolution, the screen orientation, the type of device, the color depth or monochrome management, the spoken language, etc. So there many other possibilities that enable us to adapt the layout and the presentation based on device capabilities and the users’ context and not only based on the size of the screen.

 

What Should be Displayed… What Shouldn’t, and… How?

 

An important question about the content will arise regarding its nature.

 

  • Does it contain animations which will be difficult to print?
  • Does it rely on a plenty of images that would adversely affect the visually impaired and secondly require special attention to serve the different screen resolutions?
  • Does it uses specific technologies like the SWF Flash format, which won’t play on IOs based devices?
  • Does it display large titles, on two lines intended for large screens, that then wraps to 5 or 6 lines on small devices? If the device is in portrait mode, does it become unreadable?

 

Many of these situations require distribution inequality in different contexts.

Back to the heart of the problem: should the content be different because it is on different platforms?

No!

 

If it is identical in both cases, how will we handle the unusued, or hidden part, and avoid unnecessary data transfer?

It’s quite a paradox.

 

How to Precisely Write, and Define the Content ?

 

We must also understand that often the developers of information systems and content strategists are neither the authors nor integrators that will publish content.

Developers and content creators must take into account the adaptive appearance of publications.

 

Authors must be trained and sensitized to those adaptive appearance reflows.

 

All that said, we must address the technical part of this series of articles about RWD and understand all the tools that will help us to distribute the same great content whatever the context in which it is used.

 

And for this, I invite you to join us a few times to continue this exploration on applying RWD to our contents.

 

The series :

02-Content Strategy Pixabay work-791218_1920 - Bando.jpg

This article is also published in french Part II - Pourquoi une Stratégie de contenu doit précéder la mise en place d’un site Responsive Web Design?

 

Before defining a content strategy for Responsive Web Design, we probably need to first define what we do understand about Content Strategy. What do we understand about a Content Strategy in a general internet usage and what does it have to do with Responsive Web Design?

 

Whatever the content, we need to know if it is responding to an expectation, an expressed need, whether for a forum, a social network, a blog, or for other websites or applications, or if it is a production of the mind, a story or a creation following an analysis or a philosophical reflection proposed to readers.

 

Today the web is full of content, so why add some more? Are we sure that it interests the reader? This is one of the main questions to ask before going further.

Define how and why should we produce content and make sure it will be served in the most optimal manner, to the user, whatever his or her device, are some of the main objectives of the content strategy.

 

Content copywriting tools

 

All content goes through the first writing phase, followed by the presentation. In the world of printing, since the time of Gutenberg and even before, tools have improved in the universe of copywriting.

 

Whether titles, paragraphs, insets, notes, footers, annotations, quotes, block quotes, images or illustrations, drop caps etc. but also typography, fonts, size of fonts, colors, frames, all of which allows us to quickly understand what we are expressing to the reader, and which way we can address this content to get the main point.

It is important to define an editorial line and to specify the way we must write content, the tone that we will use, the way we address the reader, through language which is very be specific or very generic, and finally how we illustrate it.

 

Give a hierarchy to text, find name labels, implement a taxonomy, use a controlled vocabulary, rely on a thesaurus, define key words to use when writing content, all this precious items that will allow to get a true architecture of information and so to give meaning and an organization to content.

 

what else ?

 

In the multimedia field, and mainly the web, new tools are available which have shaped the publishing world into where it is today.

 

While the media, such as audio, video, or the animations, seem obvious, other equally now common vehicles are part of the range of those innovations like hyperlinks, user interactions with flyovers, switch, tabs, pop-ups, or exchanges with other users, and more generally with databases.

 

We could think that everything is there, to help us to create and transmit web content, and we could stop here, but that would cover only a portion of the content, and the perceptible aspect of that content. There are other types of information that define the content and further refines it, such as metadata relating to the structure, to the semantic and to the accessibility.

 

These new publishing opportunities are extremely important especially when it comes to search engines. These engines ingest the important information in the text and metadatas, to respond to the needs of the search engine user.

 

So far, we have explored a content strategy.

 

We have tools to help us define how to communicate the content, we also have tools to learn about the characteristics of the structure and descriptions of it.

First, formalize the text and be sure that it is understandable with no confusion, without any ambiguity. Ask yourself, is it useful and usable by the reader, or the search agent?

 

Another issue is how the reader, or the agent, will find this content, which can be from a direct link on a newsletter, from a search engine, or after someone surf the web.

 

Finally, who's going to write the content, maintain it, and remove it when if it’s no longer relevant. The author must be especially careful and insightful, since most writing tools doesn’t offer a friendly user interface that enables to organize and define all the necessaries information proper to content writing.

 

These questions lead to a multitude of opportunities for content strategy to be analyzed before displaying it in a Responsive Web Design, or not.

It's time to explore your content strategy. Please join me, in a few days, as we visit a new article in which we will discuss what are the expectations on each device, and how the content should be sent and presented to those devices in relationship to responsive web design.

 

The series :

01-Responsive Websites Pixabay macbook-577758_1920 - Bando.jpg

This article is also published in french Part I - Pourquoi les sites Web réactifs ne sont-ils pas une simple étape lors de la construction de sites Web?

 

Responsive websites are often described as a way of development which allows to content to be visualized whether viewed at the office, on a very large screen, behind an optical fiber connection, seen from a mobile phone, using very low bandwidth, printed on an ink jet printer, read by a screen reader, or perhaps watched on an Ultra High Definition 5K TV. The use cases are so vastly represented that one can’t know where, when, on what, and by who the content will be viewed.

So, we can say that creating a responsive website means that one has to be prepared for each situation.

 

That is mainly the case, and based on the information sent by the user agent, at its http request, the content will be presented and formatted in accordance with defined breakpoints, or will adapt continuously depending on the space available. We are respectively talking about the display being adaptive or responsive.

Based on this finding, most developers have responded with an optimal solution which starts small and add more and more information, depending on the available room. That concept was called, Mobile First.

 

Some other developers responded differently, in fact inversely, starting with a full page width and then reducing it, depending on the possibilities.

That gives birth to two concepts with evocative names, called Progressive Enhancement and Graceful Degradation.

 

So far so good.

 

We also must not forget the bandwidth issue, and take that into account. Whatever the approach, developers often show or hide the content based on the device. Whether the content is displayed or hidden, the agent will always download everything.

 

In the same way, with the layout, depending on the device, we now have to face the issue of network speed, be that of optical fiber or the slow drip of low capacity connections.

 

If we do nothing, first the website owner will pay for unused bytes uselessly transferred, and secondly the user will have to wait a long time before to access information that all unnecessary data have been recovered.

 

This brings us to a fundamental, often forgotten issue: websites are primarily made up of content. So before thinking about how to present it, which is responsive or adaptive, it may be important to ask the question of what we want to present. And of course, taking into account the type of device on which this information will be distributed.

 

So, we must first consider a true content strategy. But, I propose that the next discussion on the implementation of such a strategy may be the subject of another article.

 

The series :