Smashingconf 2015 day 0 – workshop


Being mostly a backend web developer dabbling with frontend stuff, I found this workshop really good. There were smaller bits and pieces that I didn´t follow coming from a server side point of view. Andy took us through the concepts of flexbox and some image processing done with CSS. What struck me the most is that there are several parts of HTML5 + CSS 3 that can be helpful when trying out a new design together with the customer or another stakeholder. Suddenly, many partsof Photoshop are now redundant since the designer or developer can pretty easily mock up the web application in HTML and try out new stuff.

Time to market

CMS developers should really make use of the content editable property in HTML. This makes every element editable and the customer can put in text on the fly to try out a new design. This makes the implementation and feedback loop really short. Secondly, when structuring a web application layout using flexboxyou have complete control of the layout. Together with the customer or stakeholder, you have the possibility to rearrange elements, resize columns and make elements change positiondepending on different browser layouts etc just by using the developer toolbar in your favourite web browser. No need to wait for new PSD files from the designer!

The specific parts of flexbox that caught my eye were:

The width of each box or column using flexbox is now relative to the others in the same group. Previously, you had to give the width in a measurement relative to the full width of the surrounding container. Ability to make use of a correct semantic structure within the HTML document even though the design requires different placements between different browser widths or devices. This way screen readers and older browsers can still understand the page even though the menu is sometimes located on top and sometimes in the bottom, visually. Pagination Equal heights in parallel columns – sweet when implementing blocks of information where the content can be of equal length.

A word of caution – the flexbox is not supported in IE8. Display table is that case a good fallback.

Image processing

So Adobe apparently has had a huge influenceon the image processing.The standard filters from Photoshop such as saturation, hue, sepia and so forth are now part of the CSS spec. I think they are also called blends in CSS..?

Another cool thing is regarding how text floats around images. For instance, an image depicting a complex shape can now have text floating around closely to the object itself. This can be done bedone in two ways as far as I understand. The first is to manually tap in the coordinates in CSS for how the text should float using CSS shapes. The other is much more dynamic as you can specify two urls to the image itself. The first being the image that the user should see. The secondis for a black and white mask image from which the browser reads the alpha channel. From that information the browser knows where the boundaries are and can float the text around. There are some limitations regarding CORS that you may want to lookup beforehand though.