Smartweb is an annual event dedicated to designers, developers and entrepreneurs from South Eastern Europe. This year, Smartweb was held in Bucharest, organized by Evensys, and I had the chance to be there thanked to Today Software Magazine. The event is split in two parts lasting two days: on the first day, there are two parallel eight hour workshops, and on the second day, there is a conference with worldwide known speakers. This year, Jeremy Keith, Kaelig, Marko Dugonjic, Harry Roberts, Remy Sharp, Zoe Gillentwater, Ana Tudor and Bruce Lawson were present in Bucharest. Their presentations tackled themes like responsive design, Html, Css, Javascript and web standards.
Jeremy Keith is the author of the books "Bulletproof Ajax", "DOM Scripting" and "HTML5 for designers". He came with the proposal that websites don’t have to look the same on every browser. He sustains that it is acceptable that some elements appear different on some browsers, basically the older versions that will not be used for long time from now on. The developers should concentrate on a website’s functionality, then on its form. Users choose the browsers and devices based on their needs and we, as developers, should respect their decisions by building adaptive and responsive websites. He advises to invest out time in the newer versions, to be “future friendly” and he gave as example the first website ever. The website appeared in 1989 within a nuclear research institute in Sweden, and indeed the first web pages don’t have a modern design (in time, there were new pages added with a new design) but they work on today’s browsers with the same purpose they were built in the first place! He expects us developers to understand that the differences between browsers are a feature of the web and we have to accept it that way. The real problem is in understanding those differences, and the solution would be to convince our customers, even our project managers, of this. Good luck convincing the testing team! For this purpose, there is a site that can help us sustain our point of view.
Agreeing with Jeremy, I mention what Brad Frost wrote in an article on a similar subject: ”there are a lot of different Blackberry versions out there and there is not enough time in the day to make our website rock solid on every version”. Our duty as developers is to offer users a decent experience on our website on different browsers.
Kaelig was a front end developer at the newspaper The Guardian and the author of the book “Css maintenable with Saas”. Thirty engineers from different parts of the world are working on Css and Html at theguardian.com, and the Css code has about 25000 lines.
He told us how the communication gap between developers and designers was reduced at the guardian using Saas. Saas is a Css preproccessor that adds programming to Css by using functions, operations and variables. At the guardian there are so many fonts and colors that their use in Css can get difficult. By declaring variables as in the example below, in Saas you can define a font only once and later use the variable containing the font name without being necessary to remember each time the exact font name:
$font-stack: Helvetica, sans-serif;
body {
font: 100% $font-stack;
}You can nest selectors like in Html to have a better view of the elements hierarchy. Declaration blocks can also be reusable through mixins which can have input parameters and can be used later with the @include directive, for example:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}You can also create partial Sass files in which you can place a
reusable piece of style; the files will be preceded by _ and will
have the .*sccs* extension( for example _header.scss), and it can be
usable in your main Css file with the @import directive and the
partial name( example@import‘header';`). You can even use the advantages of inheritance in
Saas:
.message {
border: 1px solid #ccc; padding: 10px; color: #333;
}
.success {
@extend .message;
border-color: green;
}Theguardian.com has reached, from 20 deploys per year, to 4 deploys per day.
Within this context, an efficient and well organized communication seems more than necessary for the website’s success, so people working there made up a fonts matrix, in which they have, for each font used in different page sections (title, subtitle, article body), values containing: the font name in Photoshop , real Css font name, abstract name for developers, and a friendly name for meetings and discussions.
Marko Dugonjic from Croatia is the runner of the website creativenights.com, editor at Smashing Magazine and coauthor of “The Smashing Book #4”. His presentation targeted replacing lorem ipsum content with content prototyping. If we as developers don’t know the content our site is going to have, most probably the website will end up with a generic structure that is hard to modify afterwards and a generic design. The first step he recommends is to do anything to collect the content from: brochures, reports, FAQs from the domain of the company for which the website will be and to personally ask questions about the company. If we have the chance to pay the client a visit, he considers useful to take a camera to capture their physical logos that will help us establishing the design, the colors and can be used even as resources. He thinks it is a good idea to steal competition content so our customer will have a starting point in creating their own content: he will try to overcome his competition by coming up with a better content. He recommends early establishment of the content lifespan: there can be permanent content (profile, contact information) and there also can be temporary content formed by campaigns and sales. We can establish the skeleton of the future pages from the beginning, in CMS if we use one, and it would be important in this phase to leave aside any design, so the fact that certain pages still need work remains out there; otherwise if a page has a certain amount of design implemented, the client tends to consider that page as finished and he will ignore it even if the functionality behind it is not done yet. Implementing authentication could be of great help if you give the client some roles, by sharing with him the responsibility of browsing and filling the content gaps as soon as possible.
Once we have the above drafts, we can establish much easier the website’s architecture and design to better emphasize the content. We can, at this point, establish the content templates. Marko recommends the gradual distribution of the content on the page, depending on user experience. For new users the information should be grouped in the part of the page that is most accessible visually. For intermediate users he recommends a different part of the page. For experienced users that are already familiarized with our website and know where they can find the information, we can assign a less visual part of the page. For sorting the content we can also use the page meta data and include there the concise information for new users. For easier browsing, Marko recommends the creation of a user manual, with simple and clear steps, and if payment methods are involved, it would be good that we expose a clear explanation, so keep in mind as early as possible the templates for this type of content. We can think of a template for a glossary where we can have definitions for terms from the area of the website, and other templates to present the company’s time line. It is said that exposing employees profiles on the website with concise information about their activity, education and especially hobbies would humanize the company for which we create the website.
The usage of high resolution images and anticipated implementation of configurable content limits are the next recommended steps.
For temporary content for loyal customers he believes it would be optimal to establish as early as possible with the client:
the schedule for publishing the content of campaigns (Halloween, Christmas, etc.)
content, but hide / show it regularly (example: articles about cold)
the list of categories and possible future topics;
different typography per category; could highlight more the categories
charts needs
images size and variations
By having the content as early as possible we can achieve a stable architecture of the website, we can set customer expectations early and most importantly, we can create a specific design.
Remy Sharp is the founder of the UK conference on Javascript, Full Frontal, co-author of "Introducing HTML5" and one of the administrators of Html5Doctor.com. He made a small demonstration using NodeJS of a real-time application in which the audience was involved.
Harry Roberts , author of numerous articles on UI , made a presentation of the Css frameworkscomparing them to UI toolkits, they are often confused with. A CSS framework is obviously a framework that facilitates working with CSS by providing several tools to help, but not the complete solution. Examples of CSS frameworks are: Bootstrap, Foundation, and Inuit Css. He personally collected the reasons why Css frameworks are avoided: they have too many warnings, too many opinions, they don’t offer complete tools. Apparently the exact purpose of a CSS framework is not understood: a CSS framework is useful for a unique project for which we need to write from scratch a particular, unique solution, we therefore need just a "helping hand". If what is on the market regarding Css frameworksis not useful for us he recommends we implement our very own Css framework, instead of customizing an UI toolkit.
Zoe Gillentwatter from Booking.com talked about the advantages of CSS3 Flexible Box ( or flexbox ), a very effective way to place Html elements in a container, relating their coordinates and direction to it. Elements can expand or compress to fit parent container. Although it has a high enough coverage, not all browsers support it yet. It is implemented by FF18 +, Chrome 21+, IE11, 12.10+ Opera, Safari 6.1 and in some browsers it must be preceded by --webkit. She gave the example of a table header spacing with table-layout: fixed. As cells, the columns of the table are at an equal distance from each other. But if we look only at the text inside them, which obviously will not have the same length in each cell, the text will be at different distances.
Flexbox has the solution to this problem with the following two properties applied to the container:
display: flex;
justify-content: space-between;Ana Tudor was the only Romanian presenter at the conference. The title of her presentation was "Css use and abuse". Using Codepen, a "playground" for web designers, in which you can play with Html, Css, and Javascript, shemade several 3D animations in CSS3,without any Javascript. She reminded us of the example of Mona Lisa painting made entirely in Css with over 7000 lines of code:HYPERLINK http://cssdeck.com/labs/mona-lisa-with-pure-css. She implemented an expandable polyhedron, an icosidodecahedron, the 3D rotation of an elastic curvy surface, a seasonal animation: a figure that resembles a Halloween pumpkin that jumps on the x axis and expands and contracts when reaching axis limits. Her work can be found atHYPERLINK http://codepen.io/thebabydino/.
The last presentation was
a very funny one, by Bruce Lawson, who was also the host of the event.
He is co-author of “Introducing HTML 5” book, part of the organization
"Web standards project" and currently works at Opera. In his
presentation he made a summary of important moments in the history of
web standards in a very comic manner. He presented the moment in 2009
when HTML5 has won the battle with XHTML2 not because HTML5 is trying to
support old browsers but because it supports old content. He drew
attention to a strange error in HTML 3.0 in which appeared a new element
<figure> that included the element <caption> but it did not work.
The reason was that, in previous versions, <caption> was designed to
operate only within the <table> element, so it was replaced with
<figcaption> in Html5.
The entire conference was exciting, informative, well organized, and left me feeling that it is not addressed only to developers and designers, but there were useful information for anyone in the IT field. Sponsor from booking.com launched a challenge: the first to finish Amsterdam’s coat of arms in Css and Html won a trip to Amsterdam. I had the opportunity to exchange ideas with branch colleagues from Bucharest. The number of participants was very high, several hundred people, from where I understand it was a success in previous years. The speakers were relaxed, very well prepared with technical demonstrations and tips (which I try to apply on projects that I'm working), with clear and interesting examples, and latest trends in the industry. Thank you Today Software Magazine for the invitation to the conference and I recommend you all to attend the next edition!