“Just build websites”

Trying to learn as much as possible about the fundamentals of product design and front-end development, I talked with Dave Rupert about his thoughts on how web development fits into product design, and web development as a discipline in general.

How did you get started, and how did you get to where you are now?

Dave: I was making webpages when I was 15, so I’ve been making webpages for over 20 years now. I did that as a hobby as a kid, and didn’t think I could do what I was doing as a profession. In college, there was a dotcom bubble, but it burst. Then I was living in Japan and ran spare websites there. When I came back, I started Paravel about 10 years ago. We started with mom and pop websites and then grew and grew with bigger and bigger projects. We built a name for ourselves as “pixel perfect” in web design. And that’s when responsive web design kind of happened and kicked in, which changed the way we did everything. We’re very committed to pixel perfect perfection, and multi-device strategy ruined us completely. On the other hand, we figured it out, and were early adopters in figuring it out. So for example, we used RWD for Microsoft’s Build Conference in 2012. It’s sort of the big thing. Since then, we’ve worked with Starbucks, Wired, RetailMeNot, etc. We’ve done a couple of other really great projects too – Etsy was another client of ours. It’s been cool but also weird too because we started out 10 years ago in a nook in my closet and now we work with big clients, which is neat.

What are your thoughts on how front-end development fits into product design?

Dave: Product design is just a new name for an old thing – caring about how the user interacts with a product. I think there’s web design, and people switch to apps, and then it was app design, and then it was product design with a little bit of UX design. I kind of consider it all to be digital product design, and consider it all to be the same thing. I consider things to be more appy, like a chat app. Some things are more static like a blog. It’s all the same thing, but just a little bit of difference and nuance and activity. In terms of just code, you’d be surprised, how much code affects the overall look, feel and performance of a website. The quality of the underlying code, the consistency as its translated out to multiple pages… it affects the overall design of a product. I’ve been getting into video games, and there’s a term that Nintendo’s Shigeru Miyamoto uses – tegotae (手応え) – which means “hand response.” It’s how things feel as a video game. Anyone can make pixels move across a screen, but how does it feel? That’s how I feel about code.

Front-end code is a valuable discipline because… 80% of the time a user is waiting – let’s say the page loads in five seconds – four of those seconds are because of front-end coding. On a mobile phone, you have to load your website under three seconds or the user is gone, and an interactive widget under five seconds. It’s the job of the developer to render the page under three seconds, or at least lazy load some components so that the user doesn’t notice. In terms of performance, that’s huge numbers on the bottom line of a company. There’s a site call wpostats.com, which is a blog about web performance. If a website is taking a long time to load and is poorly coded, that’s half of your business falling out the window. So in terms of front-end in product design, I think it’s hugely important. The accessibility happens on that end too, and it’s a huge business impact – lawsuits for some people, even. It’s a very important thing that happens there. If you consider performance stuff, these things affect design decisions that happened earlier down the waterfall. Product people and business people hand something to design, and design hands what they have to development. There’s never a conversation of how it is going to work for the user. These are some of the reasons why front-end is a very valuable discipline. You get into style guides, which have gone into rebirth. Companies will have really good print style guides, and marketing agencies will prescribe web techniques in digital briefs, and they don’t fit the web at all. The style guide adds consistency – a designer will design one page, and then will design another set of pages. With a whole system of content, you can’t think from a page by page basis – a system of content.

What are some of your best experiences working with designers? What are some of your worst experience? 

Dave: It’s tough because I mostly work with Trent and Reagan. It’s good but we’re used to each other – we’re like old married folks. Some of the best things are when we work on things together. When we’re working and sketching ideas together, we can share ideas quickly and validate them between us and start building something together. It’s way better than when we’re handing things over the fence – when we’re building and sharing, that’s by far the best experience, and that’s what I live for. Sharing your work – I think that’s very important to both designers and developers so there’s feedback. The worst situations… there are dozens, but mostly it’s just that I’ve had designers treat design as gospel, and that “Here, code this,” attitude is very off-putting. This is a terrible phrase, but kind of being a code monkey for people – being responsible for someone else’s design problems – is the worst. You didn’t hand me any solutions. That’s probably the worst part.

What are some things that will help a developer grow? What are some things that will hold a developer back?

Dave: It’s interesting – I think keeping up with front-end development historically is tough. It changes every six months, there’s always something brand new and sometimes you can get caught totally off-guard. Sometimes it can be hard to keep on track for something that’s so high velocity. I spend a lot of mental time and effort to keep on top of things. I have a phrase on ShopTalk (my podcast) – “just build websites.” If you want to learn something, start solving a problem, and the things you’ll need to learn will start showing themselves to you. Maybe bite off more than you can chew, but you need to start somewhere and start something. That’s kind of the time-honored way of learning stuff. Genki Hagata did 30 days of “Hello World,” where he did 30 examples of a language or what not – something he was interested in – and would take  a couple of hours to learn something and get it off the ground. I’ve only read half of his documentation, but I think that’s a really great way to learn. Identify what you don’t know, and learn a little bit about it.

What are some trends to key an eye on for 2017?

Dave: The CSS grid specification. CSS has never had a great layout module. There have been tables and floats where you can send things left and right, there’s display inline and flexbox, which will take 100% of width and divide it up and flow content the best it knows how. It’s kind of a weird math engine that sometimes works and sometimes doesn’t. The CSS grid spec is really truly kind of a grid – there’s a grid cell and a gutter, and you can control not only the x-axis, but also the y-axis. Most engines only control one direction, but this can control 2D x and y directions happening in CSS. It lands in all major browsers in March of 2017.  I’ll let it blow up in other people’s faces first, and then I’ll do it. It’s interesting that we’ll have these advanced layouts. So there’s one thing. There are languages like JavaScript frameworks and things like that – they’re bad for performance but create a neat real-time experience. I think those are going to have their major problems fixed, as there should be a performant way to make interactive webpages. It’s available now, it’s good and fun and great but not the most amazing technology in my opinion. There are web VR specifications happening where you can make VR experiences using web pages. It’s interesting to think about, but maybe not practical yet. Those are my three things. Some ways it’s plateaued, and there are chunks of new tech that’s coming out to enable.

Thanks Dave!!

You can read all of Dave’s fantastic blog posts at his website, listen to his podcast, and see what the team at Paravel has worked on.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s