Brad Frost
bradfrostweb.com · Personal blog · on HN since 2011
Brad Frost, a web designer, writes about responsive web design, interface patterns, and mobile browser behavior.
What HN saysHN links it for responsive design patterns and tools, such as his 'ish' viewport tester, and for mobile web usage discussions.
37HN people shared it
3linked it in comments
39stories submitted
351story points
12 years agolast shared
2011people per year2026
Most-shared posts
- 1Responsive Disco4 people · 3 points · first shared 2014 · discussion on HN
- 2Responsive navigation patterns3 people · 6 points · first shared 2012 · discussion on HN
- 3Single-Field Credit Card Input Pattern2 people · 6 points · first shared 2014 · discussion on HN
- 4Responsive Web Design: Missing the Point2 people · 5 points · first shared 2012 · 1 comments on HN
- 5Fixed Positioning in Mobile Browsers2 people · 2 points · first shared 2011 · discussion on HN
- 6Float Label Pattern1 people · 162 points · first shared 2013 · 33 comments on HN
- 7Redesigning Techcrunch1 people · 72 points · first shared 2013 · 18 comments on HN
- 8How much does a responsive web design cost?1 people · 40 points · first shared 2012 · 17 comments on HN
- 9“Fuck You.”1 people · 8 points · first shared 2013 · 6 comments on HN
- 10Mobile Web Problems and How to Avoid Them1 people · 6 points · first shared 2013 · discussion on HN
- 11Development is design by Brad Frost1 people · 5 points · first shared 2013 · discussion on HN
- 12On Progressive Enhancement1 people · 4 points · first shared 2013 · discussion on HN
- 13Designing In The Open1 people · 4 points · first shared 2013 · discussion on HN
- 14Performance As Design1 people · 3 points · first shared 2013 · discussion on HN
- 15Atomic Web Design1 people · 3 points · first shared 2013 · discussion on HN
What HN people wrote when they linked it
dredmorbius · 2014-01-02
I'm all about readable fonts, though mikeyanderson is going a bit overboard in the too big direction.
He's also committing the fatal sin of mixing ems (for his h1 title font size) and px (for his h1 line height). The result is overlapping characters: http://i.imgur.com/tEplJmv.png
I've griped on HN (and elsewhere) more than once about small fonts, low contrast (http://www.contrastrebellion.com/ can't get enough good words from me), and the reading-friendly tools such as Readability.com (despite some recent updates I'm not entirely happy with), InstaPaper, Pocket, etc. The latter are a great way to avoid this pain with minimal effort, and "read now" bookmarklets make this pretty near instant for most users. The styles presented by any of these services would do well as a default for virtually all content-rich sites.
I also have become all but obsessive in restyling sites whose CSS fails me. Which is to say, most of them (including Hacker News: http://stylebot.me/styles/2945). Using the Stylebot Chrome plugin, I've created, as of this writing, 819 stylesheets (some applied to multiple sites, some the same basic "unstyled.css" sometimes lightly modified). I think I've reached the point where I can make some fairly definitive statements, at least as far as UI/UX goes:
⚫ Use ems. Do not use px (graphics positioning excepted). NEVER mix ems and px.
⚫ Provide a high contrast between foreground and background. No, you're not limited to black on white (though it's a…
datashaman · 2014-07-23
Coincidentally, 'ish' is the name of a useful viewport tester for responsive design. http://bradfrostweb.com/demo/ish/
amirnathoo · 2012-04-30
The point is to get better results for the same effort.
Instead of having to spend time styling the top bar and tab bar to look native, and battling with fixed positions and mobile browser inconsistencies, you just drop a line into your config.
Many people seem to think fixed position elements and dealing with scrolling in mobile web views is a pain:
http://bradfrostweb.com/blog/mobile/fixed-position/
http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs…
http://blog.millermedeiros.com/ipad-is-the-new-ie6/