Frontend Developer Debbie Rouleau shares her experience.
If you are a frontend developer and you’re not familiar with Smashing Magazine, you’re either just beginning your career in this wonderful and crazy field, or you’ve been living under a rock
during the last Digital Age. It is, by far, one of the best sources of inspiration and knowledge for frontend professionals out there. So, when I learned that the editorial team behind it were launching their own conferences in different cities across
the globe, I vowed I would attend one day.
That day came in June, when I was able to attend Smashing Conference NYC.
Wow, I was not disappointed!
Having attended my share of conferences and meetup nights in the tech scene over the years, I was very much surprised by the quality and level of creative talks the Smashing Conference presented in just two days. I’m used to seeing panelists focus on
the code behind their ideas, showing off their skills in programming. Here it was different: barely any speakers focused on code, sharing instead their ideas through videos, images, anecdotes and emojis. While each talk presented a topic in frontend
design and development, the main directive was to show how ideas, design, user experience and frontend development all interact to deliver a better end product: how we as developers need to understand not only the code, but the design process behind
the concept. By understanding how a designer works, we are better equipped to bring their ideas to life using all the tools and tricks in our arsenal.
I found the talks had a perfect format: between 30 and 40 minutes long, very concise and to the point. A 15-minute Q&A gave us the opportunity to directly ask the questions we had during the talk. Not a lot of conferences allow this level of interaction
between speakers and their audience DURING a panel, so this was very much appreciated.
Attending a conference in a place other than your hometown (in my case, in a different country!) can sometimes be intimidating. Meeting new people can be hard (particularly if you are an introvert) and you miss one of the best parts of attending a conference
with your peers: networking! But at Smashing NYC, the event organizers prepared lots of fun activities outside of the talks: a Lego construction competition, a private party on a rooftop bar in Manhattan, and this…
A ‘wall of tweets’ was projected on stage between the talks, giving the attendees a chance to see what others had to say about the talk, and serving as an indirect way of networking with fellow attendees and speakers. It gave way to lots of inspiring
thoughts and funny ideas. That wall was also how I started interacting with other attendees, planning lunch breaks, and confessing my typo shame. 😉
The only negative I can point out was the lack of desk space in the New World Stages theater. A hot laptop on your legs ain’t the most comfortable setup for note taking in the world! I tried to go old school, but by the end of the day my hand was tired
– I’ve gotten too used to a keyboard! Oh well, I decided to listen to the talks, trying to soak up as much ideas and knowledge as possible!
Now, onto the 3 main points I remembered out of my 2-day experience:
Interactions with Interfaces, Devices and the Internet of Things
Seeing this image made me laugh so hard, but cry at the same time. Just thinking about all the devices and browsers that we frontend developers need to test makes me shudder! The state of QA and design testing in 2016 was already pretty intense, but a
whole new level up has been reached with the arrival of the Internet of Things (IoT).
At the beginning of the Web, most professional developers were only coding for desktop screens. But, as Jason Grigsby mentioned during his talk Adapting to Input,
“The web was never supposed to fit a fixed canvas.” With the introduction of the iPhone in 2007, a whole new world of possibilities, interface and web design, was introduced: the mobile world. (Yes, we can argue that it was present before with devices
like Palm Pilot, but it was a very niche toy for the tech elite, not widely used by the general population.) As we’ve moved to tablets in 2010 (Hello iPad and Android Nexus!), then game consoles, smart tv, smart watches, the game has changed and made
the frontend field more complex.
There is so much to consider now: making our products responsive from the beginning, and testing them on as many devices as possible to ensure users have a smooth experience. And that’s the thing: the user is not navigating the web on a desktop anymore.
Smartphones, tablets, televisions…there are so many devices through which a user can interact with the product, it is mindboggling.
At Plank, when I need to test our clients’ features and requests on their websites, I usually go through a long testing process. I first test on these devices: my laptop on Windows; a Mac laptop with iOS; iPad first or second generation; iPad of retina
generation; Android tablet (generally Nexus 7); iPhone (4, 5 and 6); and Android phone (with KitKat / Android 4.4 minimum). Then I have to test it on all these major browsers (depending of the OS): Internet Explorer 11 (and sometimes on IE 9 and/or 10);
Microsoft Edge; Safari on MacOS (normally the latest, 9, but sometimes 8 too); Chrome; Firefox.
Can you feel my exhaustion already?
If we add up all the new interfaces that will come up with the IoT era, even more design and testing will be needed, depending on the percentage of users coming from these new devices.
It follows that so many speakers at Smashing were pushing the following message: Simplification of your design process and interface will help you create a better product for your clients. Communicating your client’s brand, message and product in a very
simple yet beautiful way will make sure it will be well supported in the future on the unknown devices that are yet to come.
Patterns & Components library logic
One of the more technical themes that arose was the emphasis on an improved approach to CSS files and directory structure: instead of coding your style for pages and sections, why not divide it by components and patterns instead?
Right now, the way we at Plank divide our CSS files and directory structure in our frontend boilerplate is very much ‘pages/templates’ oriented: we divide our styling by page and section, creating classes for each template we will use in our project.
We do create component CSS files (for example, buttons, carrousel, typography, etc), but it is not our main focus when we code our styling. We focus on pages and sections a lot more than we should.
During Alla Kholmatova’s talk, Atoms, Modules and Other Fancy Particles,
she shared her techniques to break down and think through our CSS module design. First, find the similar patterns through our design to understand their key roles, then create a module for each of these elements. Then adapt these modules for different
layout contexts. Finally, loosely group these elements by function and improve your design as you integrate these modules into your templates.
With this approach, you preemptively consider how your module needs to react in different responsive layouts, contexts and output devices. Giving a name with personality to your module makes it easier to remember, and also explains its functionality in
your overall design.
While a descendant of the BEM methodology, Glen’s CSS modules give more flexibility to our CSS codebase, focusing on creating more
‘independence’ between your components. This removes the need to overrule when a style is too ‘stubborn’ and stick on your element – no need to overwrite with an “!important’ at the end of your property!
Designing CSS modules on a functional basis (instead of focusing on visual consistency) also makes for a faster transition when new developers and designers join a project. It is much easier to get a quick idea of each module’s purpose in the overall
design and architecture of your client’s project, and immediately pick up where things were left off.
The Impact of our Work
Espen Brunborg’s The Secret Life of Comedy: The Genesis of Web delved into the current reality of our work domain: clients often
do not understand how the Web works, so they are not ready to pay accordingly. They expect high quality products and services for a low price, but then are constantly disappointed because they aren’t delivered the ‘good shit’.
So I started reflecting on that question: “What can we do so our clients, and the general public, regain confidence in creatives and web developers? How can we make them believe in a good product, a good design, a good communication strategy? How can
we make them pay for our expertise without having them search for a cheap option that will bring them “badly shit” products in the end?” (Espen’s words during his talk, not mine 😉 )
One of the paths would be to start a storytelling discussion with our clients, introduce them to the power of good content, good visual design, and an overall positive message of worthiness: that our clients’ products and websites are worth the user’s
time and experience with it, and that there is a message to get out of this online experience we are creating. We are here to tell a story, to communicate our clients message and brand using engaging content, amazing design, and a user experience that
“The Web is not about connecting computers or devices. It’s about connecting people.”
— Brendan Dawes, Paper, Plastic, & Pixels
As Brendan Dawes mentioned during the opening talk: “Put things into the world that deserve to exist”. This way, we can assure the success of our products, and have the overall satisfied
feeling of bringing important useful work into existence.
Overall, I had a great time at the Smashing Conference meeting and chatting with designers and developers from around the world. It is definitely THE conference to attend for those of us interested in the intersection of frontend, web design and user
experience, and where the field is going. The future in frontend design and development just got really interesting, and I can’t wait to jump on board and play with all these new tools and ideas!
Useful Tools & Links
- The Smashing Conference videos are on their Vimeo account! And my favorite one: https://vimeo.com/173326452
- http://styleguide.mailchimp.com/ -> Presented during Kate Kiefer-Lee’s talk, Writing in the real world, Mailchimp has created an free online guide giving valuable tips on how to write
better content on the Web
- http://greensock.com/drawSVG http://codepen.io/sdras/ -> nice collection of SVG animations made by one of the speakers, Sarah Drasner
- http://www.marketingexperiments.com/blog/research-topics/landing-page-optimization-research-topics/radio-buttons-versus-dropdowns.html http://codepen.io/ricardozea/pen/mBbjs -> two links on how to make better forms
- https://www.w3.org/standards/techs/js#w3c_all https://www.youtube.com/watch?v=1yaLPRgtlR0 https://www.youtube.com/watch?v=eYveEdhTgBs http://realityeditor.org/ http://openhybrid.org/ All links related to the next era coming in web development,
Internet of Things, and the intersection between interface, input devices and coding the interactions of data and interface for the users.
All images by Debbie Rouleau unless otherwise credited.