Totally Smashing

Totally Smashing

Historical Merchants' Hall

A recap of our visit to Smashingconf 2013

In September 2012 we attended the first Smashingconf, in Freiburg - Germany. This was the first conference promoted by Smashingmagazine, a well known online magazine that addresses subjects related to web design. The conference gave us so many insights and tips about the industry that we could not miss this year’s edition!

Although Smashingconf could be considered a small conference, with around 300 attendees, it hasn't been scarce on high quality speakers. A few of them (Jeremy Keith and Brad Frost) showed up on both editions, but this year we did not get to hear Brad as a speaker but as the host. Nevertheless, we had a nice talk with him. We looked forward for Jason Santa Maria, Dan Mall, Addy Osmani and Luke Wroblewski sessions, and they really met our expectations.

A good thing about attending a small (on track) conference is that you can easily get in contact with the other attendees and with the speakers. A few german beers at the bar in the evening kept the conversation going...

[scald=60:sdl_editor_representation]

 

Many of the speakers approached similar topics on their presentations, each talking about their past experience and the way they now undertake projects. The main subjects that called to our attention were: Visual Design ProcessPerformance and Progressive Enhancement.

Visual Design Process

The last couple of years there has been more and more people talking about "Designing in the browser", but from a "photoshop" designers standpoint this has not always been an easy thing to get around. Indeed there are many really good reasons for designing in the browser like:

  • Designing in the environment it's gonna end up on;
  • The ability to test different screen sizes;
  • Nicely rendered web fonts;
  • Demonstrate transitions, states or any other interaction;

…among many others you’ve might have heard or read about.

Notwithstanding, there is a creative constraint when dealing with code. Therefore, Dan Mall suggests we rephrase this concept from "Designing in the browser" to "Deciding in the browser".

Truly the basic idea is to use the right tool at the right situation. We still should go as fast as possible into writing code to get the real feeling of the visuals. Yet, sketching on paper and testing the ideas in a graphic tool is a far easier way of experimenting and being creative. In the end it is inevitable to find yourself iterating between code and static design comps as a way of testing and polishing your design ideas.

Later in this process, when one has enough elements and a design system, a final sprint at coding takes place in order to build the layout, thus the pages. All of this based on the previous work.

[scald=61:sdl_editor_representation]

 

Performance

Websites are getting fat! Today the average weight of a page is 1.5MB, and it increases by 21% every year. 1.5MB is maybe not a big deal on a laptop connected to a broadband wifi, but it is a different story when using your phone on a mobile connection.

Everyone wants speed, and by ignoring this fact your website or service depends on your users patience. Large companies have done several studies in order to check what this represents in revenue, and Amazon found out that every 100MS they could improve in speed ment 1% more in revenue.

Performance budget

Prevent ending up with a “mammoth” by setting up a “Performance budget” - a tool that we can use together with a website owner. When planning a site, setting a budget in MB will help us decide what to prioritize. As a result, at the end we will not be surprised with a heavy site. Mammoth are extinct and you do not want the same to happen to your website.

Bad performance is bad business, and by having a light website you’ll respect your visitors time and money.

Progressive Enhancement

Lately progressive enhancement has been discussed a lot in our industry. To illustrate it, think of escalators which are progressive enhanced stairs, if the power fails, it falls back to being normal stairs. An elevator on the other hand has no fallback function when the power fails.

On the web, progressive enhancement is the idea of having key content and functionality accessible to all users on all devices. If your user happens to have a new device, with a modern web browser, their experience will be progressive enhanced, and we can use all the new and great technology to make their visit even better.

Jeremy Keith puts it this way:

The best way of being future friendly is to be backwards compatible.
- Jeremy Keith

See you next year?

[scald=62:sdl_editor_representation]

 

Getting to know other designers and developers is refreshing and inspiring, and we recommend everyone with an interest for web design to attend Smashingconf or a similar conference. People in the web community are really nice and friendly, and everyone seems happy to share stories from their own experiences. Both good and bad. We already look forward to next year in Freiburg.

Hélder Mendes

Hélder Mendes

Les flere artikler fra Hélder Mendes.

Head of Frontkoms office in Madeira. Frontend developer and designer.

Frank Gjertsen

Frank Gjertsen

Les flere artikler fra Frank Gjertsen.

Jobber i Frontkom. Frontendutvikler og designer. Spesielt ansvar for universell utforming.