20 Comments

1. 

   Chatman Richmond Jr.

   06.10.13

   I’ve long thought about designing from components, and had a few methods thereof, but I never thought about it in terms of a unifying theory. Atomic Design may be that unifying theory. I’ve been interested in design systems since I first dabbled with Samantha Warren’s Style Tiles and front-end style guides.

   I’ve also had the opportunity to play with Pattern Lab over a weekend, and even wrote a post about how easy it was to extend (http://chatrjr.name/2013/06/atomic-design-makes-me-feel-like-a-chemist/). I’m hoping my enthusiasm doesn’t outshine how practical working in a team would be with this tool. I’m having a lot of success using it as the foundation of my next project. In all honesty, Pattern Lab and having a concept that fleshes out almost everything in my process I took for granted, makes me feel like a kid in a candy store.

2. 

   Jason Pamental

   06.11.13

   Great post Brad! It’ definitely one I’ll be directing clients and colleagues to in order to better understand the design process, particularly in an age of responsive design. It’s a far easier way to explain a design system and how it behaves across screen sizes and device capabilities!

3. 

   George

   06.11.13

   If you are too afraid of making changes on your site because there are too many templates, or too many differences in layouts and templates, and modifications are too sensitive, and in practicality your website is too unmanageable, you can throw all of the theory and abstract thinking at it as you wish. It won’t help you a single bit. It will just make you look cooler because you can call something with a cooler new name. But your website will still be a mess because you have no idea what is under that hood and are too afraid to look under because the duct tape might rupture when you pop the hood open.

   Can anyone list me all of the pages / tempaltes on AMAG? ACOM? MT?

   It’s the same with responsive and adaptive. Just because we call something that’s been around in the 1990s (20 years ago, we’re past 2010) made available with framesets and tables something different doesn’t mean it’s a better idea or theory or abstract method to use. If that was the case, all of the websites out there would have been awesome! But they’re not. Why? Because while we were busy thinking of ways to call things cooler names, we forgot to actually keep a track of what we’re building, constantly painting over the old paint without removing the old paint, causing us rust spots to re-surface, time and time again. Not only do we need to remove the old paint (lots of work and time invested), but we need to re-prime the whole darn thing. And only THEN can we say that we’re ready for responsive, adaptive, molecular, frameworks in the backend and frontend, and many other wonderful things.

   As I once discovered, OOP doesn’t make your site better if you don’t do OOP properly from the start.

   And this whole method of replacing one part of the website at a time, well, it will look like this:

   http://2.bp.blogspot.com/-EufeLj7Sf64/T1_ka3llLiI/AAAAAAAAJPM/6fG3FeHC44I/s1600/golf%2Bharlequin.jpg

   My two cents. Feedback welcome.

1. 

   Vedran

   06.19.11

   Excellent post! I’m using this approach to build a webshop! Responsive web design should always start small and enhance, and not the other way.

2. 

   Chris

   06.20.11

   Very well written. Gave me a lot of things to consider for my website redo.

3. 

   Tom

   06.20.11

   Nice article Brad.

4. 

   Dave

   06.20.11

   (Of course the user has a strong connection! Of course they have AJAX support!),

5. 

   bob asbile

   07.07.11

   i really like this idea/direction. but at the same time even just using HTML5 with video and some enriched css methods, i still have issues with backwards compatibility [ IE7, IE8 ] so this direction [ responsive, mobile-first ] does indeed scare me. i appreciate your effort and sharing your experiences. enjoy.

6. 

   Espen

   07.07.11

   Starting on mobile and working your way up might create great results for mobile devices, but my hunch is it leads to the same (but opposite) problem as going desktop first: the content will be created for one device/size and restyled to fit another, not to mention the pain of having to scale all your graphics up when enhancing for larger devices. Maybe it would be better to work on the content specifically for both ends of the scale, then use clever responsive techniques to cover the middle ground?

• 

  Dp

  07.12.11

  I agree. I’m not convinced about this model. When sculpting in stone you chip away, when sculpting with clay you build. Which is better?

  So it goes…

  -dp

7. 

   Jerrold Maddox

   07.07.11

   How far does this miss what you are looking for?
   http://s3.amazonaws.com/all-in/index.html

   Simple, low bandwidth, with almost no chance of breaking for lack of support.

8. 

   Aaron Gustafson

   07.07.11

   Thanks for the wonderful mention of my book!

• 

  brad

  07.07.11

  I’m so glad you consider my use of “metric shit-tonne” wonderful in describing your book. Thanks for putting out such a wonderful book.

9. 

   John Pitchers

   07.11.11

   “77% of the world’s population has a mobile device”. I don’t think so. That is a ridiculous statistic. Think about it.

• 

  Lucas

  07.11.11

  It may be a poor rephrasing of “here will be 5.3 billion mobile subscriptions by the end of 2010… That is equivalent to 77 percent of the world population.” (http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats)

10. 

    Barbie Almanza @Web Design

    07.28.11

    I think that web design is very essential in a website. As important as its content.

11. 

    Hendro Prayitno

    07.29.11

    That’s great i use for my web.
    whether to adjust the image file will be too big a file is given when the screen is small

12. 

    jason

    10.09.11

    Thank you for the information, Brad. But I really applaud you for keeping your paragraph fonts large enough for me to read. My eyes say thank you too 🙂

13. 

    Emma Dong

    11.03.11

    Brilliant post! Got a lot of information. Gonna recommend it to my classmates!!

14. 

    john

    11.10.11

    love this article

15. 

    ich_bin_ein_sheepdog

    11.22.11

    A couple of points.
    1. About 95% of those 5.3 billion phones are _really_ low-end dumb devices which are built to make/take calls and send SMS text, so they’re just not truly in this picture (yet).

    2. Whether you build down from the browser, or build up from the phone, you _still_ risk developing a lowest-common-denominator experience.

16. 

    Chris

    12.27.11

    I guess most naysayers would have a different view once they read Ethan Marcotte’s responsive web design book

17. 

    Web Design Schools

    01.20.12

    Excellent post. I’ve been looking around on the internet for this kind of information, and I’m glad I landed on this blog. Thanks for sharing it!

18. 

    Mickey

    02.16.12

    Great article. This issue I have with this is that I am still a desktop user (as is the corporate world) and nothing bothers me more than a mobile first site that is 90% white space on a 1600*1200 (or larger) monitor. So many site these days (especially cookie cutter wordpress, etc) Have little of anything on display, much less usable content, so your comments on content are very important adn true.

19. 

    Rebeen

    03.07.12

    That’s great i use for my web. Thank so much! 🙂

20. 

    Simon Wallstrom

    05.05.12

    Hi Brad!
    just a quick thought / question about the mobile first approach. I´m currently developing a framework with the mobile first approach but are still starting at desktop sizes. I think this way I get the benefits of not loading big images on mobile but still gets around the awkward feeling that is designing for mobile first. I generally put all my desktop-specific styles in a media query with min-width of 900px.

    My question is: Does mobile first mean you have to start at mobile sizes or does it simply mean that you use min-width instead of max-width in your stylesheets?

    Thanks for a great site!

21. 

    Snapper

    05.10.12

    Been reading and studying all sides; progressive enhancement, responsive design, etc. Seems that it falls under the same categorical answer ALL designers and developers should be adhering too…your client’s user base.

    I can agree and very well know the increase in mobile internet use, but it’s still in it’s infant stages. To me this means that you can still experiment to find best solutions. I like the above idea, but I think it could end up like everything else on the web…generalized.

    We are trying a solution with all of our newest clients to ask those that come to our client’s websites what they would like to see in a version on their mobile devices when the visit. Rather than guess, as a lot of designers do at what users want, we are finding out straight from the horses mouth. We think it’s a much better approach than what’s currently being offered…over the next few months however, we shall see!

    Excellent post!

22. 

    Web Design Bristol

    10.16.12

    Great Article, please keep up this great work.

23. 

    Damu

    11.06.12

    That’s gr8 and thanks for the user (powerbuoy) at http://stackoverflow.com/a/10027160/534525 for the link to this great post.

24. 

    rumahcitra

    11.14.12

    Clean explanation, but where can i download mobile first templates as example?

25. 

    leon

    12.05.12

    => John Pitchers I am suprised you find that 77% stat rediculous. I spend a good deal of time in subsistance farming areas in Asia. While very very few have computers and no one has a land line .. “everyone” has a cellphone.

    consider this article for instance
    http://dsc.discovery.com/technology/tech-10/cell-phones-help-nations.html

26. 

    Dam Dixon

    12.10.12

    Thanks for this, I build websites for fun and have had a go about building my first responsive website. I think in the next 2 years all major websites will be built like this.

    Thanks

    Dan

27. 

    team tweaks

    03.04.13

    Progressive enhancement design is very popular now. Thanks for the information

28. 

    Monk

    04.15.13

    I enjoyed your presentation at this year’s SXSWi and look forward to learning more about RWD and using it in future projects.

    During the event I also went to Adobe’s preview of Edge Reflow, a tool for building RWD layouts. I’m wondering if you’ve had a chance to check it out and what your thoughts are on the software.

    I personally tend to prefer having a more hands-on approach with my front-end development. I don’t like mystery page layout tools that crunch out an indecipherable page of code that then requires the tool to make any future changes or edits, I’d rather understand how the layouts work at the code level and build directly to it.

    I’m just now finding your site and digging around, thanks for sharing some of your knowledge and experience within the responsive layout world.