Use CSS Grid and Flexbox to build a responsive interface

[Rss Bot 1]

What's it like moving from an agency to a start-up? Creative developer Steven Roberts joined Asemblr, a start-up in the corporate events space, in February after working at an agency. In his new role, he's focusing more on the user as head of user experience. We catch up with him to discuss the difference between startup and agency culture and preview his Generate London workshop, which will look at building a web-based music player.

How’s your new role going and how does working at a start-up differ from an agency?

It’s going great. We’re currently designing the next generation of the platform, which will be launching in the summer. While my previous roles were primarily advertising-based, now I’m designing software as a service (SAAS). The platform has a lot of moving parts, which have been a challenge to design.

There’s been a huge difference in the transparency of the company in terms of involvement. I know what I’m going to be doing for the next few months, whereas in an agency setting it could be day to day. 

Working within a SAAS company, there’s one single focus instead of a number of projects flying around, which has been a change of pace for me. I’m also getting to be more of an advocate for the user in my new role, primarily because I’ve had far more time to learn and discover who the user is.

Have you discovered any cool tools along the way?

I’ve not had a lot of time to use many new tools but the standout for me at the moment is Spirit. It gives designers and developers the ability to create animations in the browser using a timeline, similar to Flash. The animations are running on GSAP in the backend, so the animations are really smooth and cross-browser compatible. Although currently in beta, the developer is hopeful for a full release soon. I’ve created a quick example of what you can do with it in just five minutes over on CodePen.

What’s the web-design scene like right now in the North-East of England?

It’s exciting. There are a number of companies in the Middlesbrough Boho Zone producing some wonderful work and working with high-profile clients. Hopefully this will attract and keep new and upcoming talent from leaving the area. There are also a number of great companies in Newcastle and a couple of conferences. Frontend NE, which is a local meetup, successfully put on its first conference this year. Design It; Build It (DIBI) runs events in Newcastle too.

How important is music in your life and why do you think so many web designers are in bands?

Music plays a huge part in my life. I’ve played guitar since I was 14 and have been in a number of bands. I find listening to music while I’m working to be productive, although sometimes I find podcasts to be good for concentration too. I think many of us are in bands because it’s another outlet for creativity. Being in a band also promotes teamwork, discipline, leadership and ownership, all of which are part of our jobs, so it’s easy to adapt to the band environment.

Tell us about the workshop you’ll be giving at Generate London.

I’m really looking forward to it; it should be a fun day. We’re going to be building a web-based music player interface inspired by the likes of Spotify and Google Music. I’ll be teaching the new CSS layout properties – CSS Grid and Flexbox – as well as utilising SVG as an icon system and, to top it all off, we’ll style the interface using custom properties in order to provide themes. We’ll be using very little JavaScript and concentrating on CSS and HTML to build a responsive interface for modern browsers.

This article was originally published in issue 309 of net, the world's best-selling magazine for web designers and developers. Buy issue 309 or subscribe to net.

Want to hear more from Steven Roberts on harnessing the power of the grid?

Steven Roberts is giving his workshop How to Build a Music Player Interface at Generate London from 19-21 September 2018

If you're interested in learning about how you can become a Flexbox aficionado or CSS Grid sensation, make sure you've picked up your ticket for Generate London. 

A frontend designer and developer currently working as creative developer for Asemblr.com, Steven Roberts will be delivering his workshop – How to Build a Music Player Interface – in which he will show you how to build a Spotify-style music player that will scale to any screen size, as well as giving you a firm grounding in Flexbox, CSS Grid and SVG sprites.

Generate London takes place from 19-21 September 2018. Get your ticket now.

Related articles:

• The web designer's guide to Flexbox
• Fashion flexible layouts with CSS Grid
• Create a responsive layout with CSS Grid

View the full article