Missed the AMA? You can still connect with Brad Frost and ask questions on their Hashnode profile
Hello, Brad! Thanks for doing this AMA.
Progressive Web Apps; everyone says they are the future? What is your opinion on them, if any? Also do you believe that the emergence of Progressive Web Apps would shrinking the revenue of mobile app stores; as we see a shift from native to PWA?
Hey Consuelo! Thanks so much for your question.
I haven't personally dug into building Progressive Web Apps, but I'll say I'm really excited about them. They build on the foundation of the web and technologies like service workers give the traditional web experience super powers that gets the web a lot closer to the native experiences people expect today.
The truth of the matter is that mobile app stores are already seeing shrinking numbers. Let's take a look:
- The average number of apps people download per month is 0.
- users spend 84% of their time in just five apps
- 80% of apps never make it to 1,000 downloads
- 84% of users that download an app will delete it after only one use
It's not that native experiences are bad, it's just that it takes a lot of management and effort to download and maintain a ton of native apps. The web on the other hand is boundless and easily searchable. Today a web experience may not have the same stickiness as native apps, but that very well may change thanks to technologies like Progressive Web Apps. I'm a firm believer in the open web, so if we can build upon that foundation in order to give people better experiences, I'm all for it.
Hey Brad! Did you noticed any changes in amounts of bullshit since your last "Death to bullshit" talks? Or just any updates on the subject :)
Yes and no!
On one hand, it's been really promising to see things like Google moving to penalize bullshit popups: http://searchengineland.com/interstitialgeddon-google-warns-will-crack-intrusive-interstitials-next-january-257252
On the other hand, there's been a flood of fake news that's warped our discourse and democracy. That's bullshit, and is a hell of a lot more critical than some obnoxious overlay. So clearly there's still a lot of work to be done.
In the meantime, what I've said on the site (http://deathtobullshit.com/) still holds true for me:
- Respect people and their time.
- Respect your craft.
- Be sincere.
- Create genuinely useful things.
Do you believe Safari is a shitty browser?
WRT : Lea Verou's response in her AMA. https://hashnode.com/ama/with-lea-verou-cisurfxip04k5f953l6vd4qds#cisvlprbg08rrei530gob3lkj
Hahaha I can't disagree with Lea here. In my own work, I've been consistently surprised at how nicely my work looks and functions in Edge (and hell, even in IE 11). Safari on the other hand seems to have a lot of quirks or partially-supported stuff that ends up blocking things pretty dramatically. As Lea said, there's no getting around Safari on mobile, so those shortcomings are really highlighted as you test on mobile devices.
To add to Lea's grievances about Safari, it's extremely frustrating that Apple operates in such a black box. Every other browser manufacturer has extraordinary developer relations programs in place and do a fantastic job engaging with the community. Apple's culture is the exact opposite, which I think ends up being detrimental to the web's progress. I hope the competitive nature of the game forces them to rethink their approach.
Hi Brad,Just wanted to know your opinion on Angular 4 and would that beat the complexities that are prevalent in the web world.Also Would like to your opinion on whether React is slowly taking over Angular?
That said, I'm really excited to see more of these libraries move in the direction of being isomorphic (http://isomorphic.net/), meaning they can run on both the server side and client side. Tim Kadlec has a great article about how only rendering things on the client-side hinders performance https://timkadlec.com/2015/02/client-side-templatings-major-bug/ . So it's good to know frameworks are moving towards being isomorphic. From what I've heard of React, that seems to be a big reason people like using it.
Have you built anything that is a culmination of your love for Web Design, Music, and Art? :)
In your experience what is the most common excuse from companies and teams to not adopt the use of a system like atomic design and how do you help them overcome those obstacles?
Hey Israel, Great question! I wouldn't say there's one overly-common excuse I hear regarding adopting a more pattern-driven process. In fact, most companies and teams are on board with the basic principles of modular design. After all, there are a ton of benefits of this style of design and development (http://atomicdesign.bradfrost.com/chapter-4/#pitching-patterns). Sometimes I encounter skeptical teams who think they don't need to invest in a design system, but conducting an interface inventory (http://atomicdesign.bradfrost.com/chapter-4/#show-dont-tell-the-power-of-interface-inventories) with them usually sorts that right out!
It's one thing to say you're on board with modular design, but it's a whole other thing to make it a cornerstone of your process and workflow. I'd say the biggest hurdle I see companies face is entrenched processes and workflows. It takes a lot of effort to change your existing processes, and it's super easy to fall back into old habits.
A hugely fulfilling part of my job as a consultant is to work with companies to help adopt a more pattern-driven, collaborative workflow. That involves coaching them, leading by example, and letting them know when they're reverting back into old bad habits.
How is a good workflow around the media queries on atomic design?
Hey Manuel! Thanks for your question. Atomic design is a methodology for creating hierarchical UI design systems: http://atomicdesign.bradfrost.com/chapter-2/ which doesn't necessarily involve media queries.
However, I did write about what I consider 7 habits of highly effective media queries: http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/ They are:
- Let content determine breakpoints
- Treat layout as an enhancement
- Use major and minor breakpoints
- Use relative units
- Go beyond width
- Use media queries for conditional loading
- Don’t go overboard
Hope that helps a bit!
What is needed to make exceptional websites that make it in www.awwwards.com?
Hey Klevis, Thanks for your question. I guess my first reaction is "why are your trying to make websites that make it in Awwwards?"
I certainly have nothing against Awwwards or other design galleries, but I do think it's important to recognize that exceptional websites are ones that truly help users achieve their goals. That may be buying a new shirt on an e-commerce site. That might be catching up on the day's news. That might be commenting on their friend's photo. Whatever the task is, the design should aid in completing that task.
I come from an agency background where I worked with many creative directors who put their own design desires above the needs of our users. The results were always disastrous. Design is so much more than aesthetics, and includes things like accessibility, performance, flexibility, interaction, motion, ergonomics and so on. That's not to say our websites should be ugly or that we shouldn't push boundaries. There are certainly times and places to push boundaries and experiment with new tools, techniques, and paradigms. But it's important to discern when that type of approach is warranted.
So I do think it's important to strive to create exceptional websites. And I'd define an exceptional website as one that effectively and efficiently serves the needs of its users.
Thanks for doing this AMA.
What is your opinion on react native and native script?
What could be % of adoption of these going forward?
What's your take on CSS frameworks? Do you use one?
Hey Brent! Thanks for your question. I actually wrote a lot about frameworks in my book: http://atomicdesign.bradfrost.com/chapter-1/#ui-frameworks-in-theory-and-in-practice
Basically, CSS frameworks are great for a number of reasons:
Frameworks like Bootstrap allow designers to get ideas off the ground quickly, rapidly create prototypes, and launch sites sooner. Because the patterns provided by a tool kit are already cross-browser tested, developers can spend their time on more important tasks rather than beating their heads against a table testing some archaic version of Internet Explorer. And in case designers do get stuck, these frameworks’ communities can provide helpful support and advice.
BUT! There are limitations to these tools. Because they're so widely used, every site starts looking the same. I often say if Nike, Adidas, and Reebok all used the same framework, they would look substantially similar. And that's sort of not what they're going for. Frameworks give us a lot of stuff, but not all of it is utilized, leading to unneeded bloat that's passed on to the end user.
Or they might not go far enough, meaning developers have to end up writing a bunch of custom code anyways.
There's also the issue of naming. I've found in my work with teams that naming things makes a big impact on how components are utilized. Taking the time to establish frontend guidelines (https://github.com/bradfrost/frontend-guidelines-questionnaire/) together as a team may be more effective than blindly adopting a framework's naming conventions.
I'm a web developer in Pittsburgh PA. Could we meet up and have a cup of coffee sometime? I really respect the work that you do.
Would you consider uploading the Atomic Design logo to Stickermule so that people can order stickers by themselves?
There wasn't any with the books we ordered and we are so sad :(
Hey Frank! Thanks so much for supporting my book project, and I'm sorry I ran out of stickers. I didn't want to hold up shipping the actual book while I waited for my new stickers to arrive, so I made the decision to ship the books without the stickers. I'll happily ship you some!
How do you feel about the recent sentiment that design systems, pattern libraries and what have you detract from the creativity in web design? What are your thoughts on Andy Clarke's 'Purposeful Style Guide Templates'?
Hey Michael! Thanks for the great question. It's something I hear pop up from designers on a semi-regular basis.
The sentiment that design systems cripple creativity reminds me of similar moaning that responsive design is all boxes and grids and is therefore sucking the soul out of web design. Of course this is a load of garbage and we've seen some extremely beautiful, creative responsive designs crop up over the years.
The same holds true for pattern-based design and development. Is it possible to create a boring, sterile, and boxy design system? Of course! Does that happen a lot? It sure does! But is that the fault of pattern libraries? Absolutely not. I'm reminded of Tim Kadlec's wonderful article, Blame The Implementation Not The Technique: https://timkadlec.com/2012/10/blame-the-implementation-not-the-technique/ Creating well-crafted UI patterns that are versatile and interesting takes time and talent and effort, so let's roll up our sleeves and create beautiful
What a pattern-based approach to design does do is free up designers to focus on . Rather than having to mock up the same damn card component for the umpteenth time in Sketch, they can use their time to think about microinteractions (http://microinteractions.com/what-is-a-microinteraction/), introduce some thoughtful animation to their UIs (http://valhead.com/ui-animation/), iterate over components to make them more functional & beautiful, or do any number of other things that designers historically never had time to do because they too busy making
As for Andy Clarke's work to make style guides more attractive and purposeful, I'm totally on board: http://atomicdesign.bradfrost.com/chapter-5/#make-it-approachable
Do you think machine learning will dramatically influence web development and design in the future?
Probably! I'm certainly no expert on machine learning so I can't really speak to this in too much detail. But I'll say that as people interact with things that learn (Facebook's feed, Amazon's Alexa, Nest's thermostat, etc), they will have higher expectations for the rest of the experiences they encounter.
Ever worked with web audio and do you see online music production becoming more popular in time?
I haven't worked with web audio, but have seen some pretty dang cool things online (like this thing: https://io808.com/)
I would love to see music production find its way online more and more. I'd personally love to see a Github for music, that allows people to easily share snippets of songs and collaborate on music together. I've seen some music collaboration tools, but none of them seem to fit the bill for true decentralized collaboration.
Hi Brad! I'm a big fan of the Atomic Design principles and think you have a great approach to thinking about a design being comprised of smaller parts. In the future what role do you see element queries (and container queries) playing in building websites using this same philosophy?
Hey Tommy, Thanks for the question and I'm glad you find atomic design principles helpful.
Container queries (formerly known as element queries http://alistapart.com/article/container-queries-once-more-unto-the-breach) are the dream! The ability to create completely fluid, responsive components and drop them into any layout and have them Just Work™ is what pretty much everyone would love.
Apparently it's tough from a browser implementation side of thing, but I'm hoping it's not impossible. Until they become an official thing, I've been rounding up resources, tools, and articles on container queries here: https://bradfrost.github.io/this-is-responsive/resources.html#element-queries
Here's to the future of component-driven design and development!
Do you know of a project currently that is focusing on optimizing fonts? Or how fonts are affecting performance of a site? And what do you think about that?
I defer to Zach Letherman on all things font performance. He's dug into this stuff more than anyone else I know. See:
He even looked at each presidential candidate's websites and ranked them based on how well their fonts performed: https://www.zachleat.com/web/president-web-font/
It's extremely heartening to see organizations taking performance seriously. For instance, the team at Vox declared performance bankruptcy (https://product.voxmedia.com/2015/5/6/8561867/declaring-performance-bankruptcy), and have been sharing their updates as they fix issues. That includes improvements to how they handle their fonts: https://product.voxmedia.com/2015/8/13/9143805/performance-update-2-electric-boogaloo
I'm not sure of font-specific tools out there, but Web Page Test is a fantastic tool for all things performance: https://www.webpagetest.org/
Hope this helps!
What sort of bass do you play? My girlfriend plays a five-string. She's going for some sort of sludge metal sound.
Your girlfriend sounds awesome! If she's going for a sludge metal sound, I'd assume that 5th string is a low B?
My main bass is a Rickenbacker 4003 https://flic.kr/p/bE7D5v that was 13 years in the making. It was the very first bass I ever played, and I lusted over it until I finally acquired it after getting promoted at my old job.
I also play a 6-string Spector bass that's a ton of fun to play. I used to play in a three-piece band, so I had to cover a lot of ground. The extra strings allowed me to play chords like a rhythm guitar and have a lot of fun doing a bunch of huge runs over a bunch of octaves.
Thanks for doing an AMA. When is Atomic Design releasing? I have read a couple of chapters and they are really good. :)
Hey Brent! Thanks for the kind words.
Atomic Design is out now actually! You can get it in both paperback and ebook formats over at the shop (http://shop.bradfrost.com/) or continue reading it online here: http://atomicdesign.bradfrost.com/
I had a really great experience writing the whole book in the open, and I'm glad it gave people the chance to read the text as it came out. I love the ability to send people links to specific sections.