10 ms·

Show HN: Web Design in 4 minutes

1624 points by bbx 10y ago

int_handler 10y ago
> Long lines of text can be hard to parse, and thus hard to read. Setting a limit of characters per line greatly enhances the readability and appeal of a wall of text. I agree with this 100%. What I don't understand is why many developers argue that this principle does not apply to code and that we shouldn't have line length limits "because it's not 1970 and we have large monitors." If long lines of prose is difficult to parse, then long lines of code are even more cumbersome to parse, especially when you are either 1) slowed down by having to scroll horizontally all the time or 2) distracted by the awkward naive line wrapping done by the editor.
willemwijnans 10y ago
Like the simplicity of this, also nice work on Marksheet.io!
reimertz 10y ago
Ha, such a smart way of introducing web design for a novice. Nice work homie!
aban 10y ago
Beautiful. Personally, I would've probably stopped at the "Custom font" step (I don't really like header images and the share buttons) to keep it simple, but hey that's just me. Nice work!
dwenzek 10y ago
Thanks. Nice, simple and useful !
mknocker 10y ago
Clear, quick and simple. It would be interesting to have such elegant introduction for other topics. Well done !
mattherman 10y ago
Love it. One typo I noticed in the image section, "Graphics and icons can be used either as ornaments to support your content, or take actively part in the message you want to convey".
konschubert 10y ago
The back button is broken. Also, not sure if changing the fragment identifier is the right abstraction.
- tantalor 10y ago
  While clever, there's a few problems with the navigation on this site. 1. The back button doesn't undo the changes. Abstractly, clicking on a link performs some navigation which the back button is supposed to reverse. That doesn't work here. 2. Fragment links don't work. http://jgthms.com/web-design-in-4-minutes/#centering http://jgthms.com/web-design-in-4-minutes/#centering should take me to the 3rd step. Instead it just dumps me on the first step.
ChicagoBoy11 10y ago
Brilliant
Cbeck527 10y ago
Reminds me of a Motherfucking Website[1], and a Better Motherfucking Website[2] [1] - http://motherfuckingwebsite.com/ http://motherfuckingwebsite.com/ [2] - http://bettermotherfuckingwebsite.com/ http://bettermotherfuckingwebsite.com/
- seang 10y ago
  This is exactly what I thought, too. BMFWS pretty much covers this whole article, minus the color and images.
- exolymph 10y ago
  Don't forget Best Motherfucking Website! https://bestmotherfucking.website/ https://bestmotherfucking.website/ (It's my favorite.)
Frank2312 10y ago
FYI, in IE 11, only the header gets centered and not the whole body. I'm not sure if this was intended or just a bug with IE though. Nice intro to web design. I love the simple presentation.
- addedlovely 10y ago
  Needs to add width: 100% to the max-width statement. Annoying nuance.
deleted 10y ago
[deleted]
johnm1019 10y ago
Love this! Step by step explanation of how to do something which literally shows rather than tells.
drchiu 10y ago
Sort of reminds me of what Bob Ross from the Joy of Painting does in a couple of strokes... :)
K0nserv 10y ago
Lovely! Definitely like the style here and the focus on content first. Like other people have said it's similar to Motherfucking Website[1], and a Better Motherfucking Website[2]. I'll need to start including this when I link to those two. For my website[3] I'm really trying to keep weight on the wire down too so I am opting to skip the custom font and header image. It's quite nice to have 10-15kb pages in the age of the web obesity crises[4]. A header image and a custom font does have a big effect on how personal the content ends up though. [1] - http://motherfuckingwebsite.com/ http://motherfuckingwebsite.com/ [2] - http://bettermotherfuckingwebsite.com/ http://bettermotherfuckingwebsite.com/ [3] - https://hugotunius.se https://hugotunius.se [4] - http://idlewords.com/talks/website_obesity.htm http://idlewords.com/talks/website_obesity.htm
- Normal_gaussian 10y ago
  Nice website! I particularly like the simple links at the top, but found the list of articles confusing - it took a while for me to realise that the articles weren't just one paragraph filler texts.
  - K0nserv 10y ago
    Thanks and you are absolutely right about the list links not feeling very clickable. I'll add some hover effect to make it more clear. Thanks for the feedback.
    - Siilwyn 10y ago
      Underlining links always help.
    - Normal_gaussian 10y ago
      I first viewed on my mobile so hover won't work. I couldn't think of a good solution so didn't give one, sorry.
- jff 10y ago
  Congratulations on not using any Javascript on the front page, except for what looks like the same email-obfuscating JS that Cloudflare injected on my site until I disabled that. In my mind, external JS is one of the worst things you can do to a website, and even self-hosted JS is bad if it's affecting layout/behavior much: people without JS enabled get a crap experience. Your site looks great!
pitchups 10y ago
Wonderful! For a moment at the start though, I wondered how such a poorly designed page, could teach anything about web design. Then I clicked the first link... :)
- GrinningFool 10y ago
  By way of contrast, I first looked and thought holy crap, someone made a clean, readable site!
primigenus 10y ago
This is a pretty nice demo of the process of turning a basic page into a "design" (in the sense that applying positioning, spacing, contrast, and things like typography is visual design - I might call it layout instead). However, if you run Chrome's Accessibility Audit (https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en https://chrome.google.com/webstore/detail/accessibility-deve...) on this page, you get warnings about low contrast for 100+ elements and a link to https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_color_01 https://github.com/GoogleChrome/accessibility-developer-tool.... So although you claim black text is harsh on the eyes and gray is more comfortable, it in fact is not - it just makes it harder to read. The very first time you load the page and see black Times New Roman on a white background is actually a better user experience for a larger number of people, purely from the point of view of legibility. Try having someone with less than stellar eyesight look at this page. Or someone who's trying to read it on a smartphone outside in sunlight or with the brightness of their screen set at less than maximum. Design isn't about what looks nice, it's about what works well - pages that a portion of your audience cannot read don't work well.
- K0nserv 10y ago
  I noticed this too, it's easy to fall into the trap of subtlety when designing. Subtle often ends up as low contrast which can definitely hurt accessibility. I think the first body color #555 was nice and it gets a good accessibility score too[0] whereas the second edition of the body color #566b78 is a bit too low contrast and subsequently gets a non perfect accessibility score[1]. > So although you claim black text is harsh on the eyes and gray is more comfortable, it in fact is not - it just makes it harder to read. The very first time you load the page and see black Times New Roman on a white background is actually a better user experience for a larger number of people, purely from the point of view of legibility. I'd say this is a half truth. Yes completely black text feels unnatural and a bit off, but done correctly you can pick a color that's still legible without being #000. There is an intersection of legible black on #FFF that's not pure black. [0] - http://webaim.org/resources/contrastchecker/?fcolor=555&bcolor=ffffff http://webaim.org/resources/contrastchecker/?fcolor=555&bcol... [1] - http://webaim.org/resources/contrastchecker/?fcolor=566b78&bcolor=ffffff http://webaim.org/resources/contrastchecker/?fcolor=566b78&b...
chejazi 10y ago
Love it except when I came back here to upvote the navigation was totally broken!
rsyntax 10y ago
Very well done! kudos
ajroas 10y ago
Awesome... nicely done.
virtualized 10y ago
> Black text on a white background can be harsh on the eyes. Opting for a softer shade of black for body text makes the page more comfortable to read. No, it doesn't. The low contrast text is definitely harder to read in direct comparison with black. This is the point where I suspected that the page might be a parody of modern web design. Unfortunately it seems to be serious. The syntax highlighting is similarly awful and the grey background makes it even worse.
- Tloewald 10y ago
  Yeah I found this assertion pretty troubling too. The "black" on most displays is already "soft" since even black pixels are leaking light. I've never read a page in a book and thought "you know, this ink is too black, it's straining my eyes".
  - NoGravitas 10y ago
    I've never thought the ink in a book was too black, but once in a while, I do think the paper is too white. Usually actual paper is a lot more friendly than #FFFFFF, though.
    - Tloewald 10y ago
      You should be able to turn down the brightness of a display to comfortable viewing levels.
- Silhouette 10y ago
  It's not as simple as that. For one thing, there is a wide range of different screens used to display text, and each screen may exaggerate or reduce contrast to a different degree. It's also important to remember that very high contrast such as pure black on pure white can cause serious problems for dyslexic readers.
achairapart 10y ago
Good work! This is when you design in the browser with the medium in mind. Problem is when someone gives you a PSD made by someone who badly ripped off someone else website with no idea about what the box model actually is, asking you to make a 1:1 replica in the browser. Oh, and of course it should work on mobile too!
JustSomeNobody 10y ago
Nice. But, wait! Where's all the javascript? Don't you need React?
thenewregiment 10y ago
good job!! My fundamentals are strong now.
TheMagicHorsey 10y ago
That was beautiful. Thanks for sharing. I wish there was a similar simple demo showing how to style mobile apps.
webscalist 10y ago
Can't go back. Usability points: -1 Why not make it into multiple web pages?
- kolme 10y ago
  Indeed! Shame, it's absolutely trivial to implement with a bit of JS. Actually one could do it with pure css using ::target, but that would scroll the page back to the top every time.
- chestervonwinch 10y ago
  This was the first thing I tried on the first CSS update to compare the changes. Still - a cool idea!
- random28345 10y ago
  On the plus side, they didn't break the scrolling.
noisem4ker 10y ago
>Providing space [...] around [...] your content can increase the appeal of your page. Just like black bars when the aspect ratio of a movie doesn't match that of my monitor increase the appeal of said movie. I find margins on mobile pages a complete waste of horizontal space. My device screen is only 6cm wide and already surrounded by plenty of space in my field of vision. Why make it even narrower?
SonicSoul 10y ago
um, nice but the title is misleading. It took me only 1 minutes. 40 seconds of Times New Roman related profanities followed by 20 seconds of clicks :)
tracker1 10y ago
Please, do not specify "Arial" or "Helvetica" in your font-family... just use "sans-serif" by itself... Just use sans-serif as your main fallback font after specific web-font. This will use the browser default (often Arial in windows, Helvetica on OSX) which is usually the best looking Helvetica-like font, or the user's preference. Yes, sometimes it's a different font, but usually a better looking default. Helvetica looks hideous on windows, which is why it's often "Helvetica Neue", Arial, sans-serif... that said, just use sans-serif unless you want a specific font (with webfont option). /rant -- edit to be less inflammatory.
- Nadya 10y ago
  >Gah... Do NOT specify "Arial" or "Helvetica" in your font-family... just use "sans-serif" by itself... In windows this will be an Arial font, and in OSX "Helvetica" and on other platforms the closest default alternative You aren't wrong - but this isn't exactly true. It will be the browser default font which the user can change themselves [0]. Which is even better! For the small group that don't force their font choices by default yet change their default font settings, it is better to use serif/sans-serif instead of specifying a font family to respect the user's choices. I force my font choices to be used everywhere, so any CSS that specifies a font-family is just mild bloat on the CSS file in the end. I understand people like to take into consideration the font choices for their design, but it really should be in the user's hands without having to jump through hoops. [0] http://i.imgur.com/HSocAdt.png http://i.imgur.com/HSocAdt.png
jyotiska 10y ago
I have created a static site generator "minni" that powers my blog at - http://jyotiska.github.io/blog/ http://jyotiska.github.io/blog/. It is super simple, has less than 10 CSS declarations and no JavaScript. I don't really expect anyone else to use it since it was created according to my own design preferences. Here is the link in case any one wants to take a peek - https://github.com/jyotiska/minni https://github.com/jyotiska/minni
- qznc 10y ago
  Me too. Here is a snapshot: https://gist.github.com/qznc/6fbdc37ad33e6853911a https://gist.github.com/qznc/6fbdc37ad33e6853911a I made my own due to some very unusual choices. For example, publishing a post is done by adding a line to a collection file. Posts not in there are considered drafts.
gabrielcsapo 10y ago
Very cool, nice job Jeremy!
muhammadusman 10y ago
This is great! thank you for sharing!
bttf 10y ago
Cute.
cloudjacker 10y ago
Web design in 1 minute: Bootstrap template #581 Stripe ... profit.
cel1ne 10y ago
A good framework to help you build response, accessible design with proven typography: http://tachyons.io/ http://tachyons.io/
qwertyuiop924 10y ago
MFW and BMFW did this better. Why? because most of the stuff this added over BMFW is actively user hostile. Besides, I just want my freaking content to look good, with minimal page load. Don't add any unecessary weight. If your content (not SPA, not "web 2.0," CONTENT, the stuff that actually makes up most of the web) takes longer to load than HN, you're doing it wrong. Thankfully, this site seems to understand that. As for colors, just leave them the user's default, set black on white, or use Solarized or another high-contrast theme.
deleted 10y ago
[deleted]
kylemathews 10y ago
I've been working on a related project — Typography.js that vastly simplifies web design. It ships with 30 pre-built designs and I'm working on tools to make it really simple to create custom typography themes in-browser. CSS is a very low-level language for expressing design intent. It's great if you want to set the background color but if you say: "I'd like to add white space to my typography" — it could take dozens of recalculations + css changes to test your idea. Typography.js's goal is to create the most elegant/powerful API possible for defining your site's typography and remove a lot of the tedium/difficulty around experimenting with your design. Would love feedback / help! https://github.com/kyleamathews/typography.js https://github.com/kyleamathews/typography.js http://kyleamathews.github.io/typography.js/ http://kyleamathews.github.io/typography.js/
- dengar007 10y ago
  This is incredible!
  - kylemathews 10y ago
    Thanks! Just a note, the design tools on the website are only 1/2 baked. Still need to add support for manipulating remaining options + way to export your designs. That being said, the core engine is quite solid and the themes are ready to be used.
- splatcollision 10y ago
  Thanks for making the correct UX on the numerical inputs!
  - kylemathews 10y ago
    Credit goes to this awesome project! https://github.com/tleunen/react-number-editor https://github.com/tleunen/react-number-editor
- andrewmcwatters 10y ago
  I don't understand. This is just CSS in JavaScript, and writing themes on elements, sans classes.
daveheq 10y ago
"Times" font isn't "unstyled", it's styled to a newspaper, which I've found o be easy to read in a newspaper and hard to read on a website, I don't know why, but it has nothing to do with one being "styled" and another not; in fact, serif is more "styled" because of the serifs.
- mbrock 10y ago
  I think Times New Roman, if you just fix the line height and page width, can be beautiful, legible, and familiar. Random example: Frank Chimero's site renders with Times New Roman body text on my Mac, since I don't have Minion Pro or Calluna which are prioritized before Times in the stylesheet, and it looks lovely. http://www.frankchimero.com/writing/the-webs-grain/ http://www.frankchimero.com/writing/the-webs-grain/
- kqr 10y ago
  Times is designed to fit many characters into narrow columns (think newspaper), and that's the layout it's most legible in.
- fiatjaf 10y ago
  That's not what he meant. He said people have learned to relate Times New Roman with unstyled websites, so when they see it, they think "unstyled".
Procrastes 10y ago
Interestingly, I can't reach the site because our corporate security software (Sophos) categorizes this site as "Weapons." I suppose, in a sense, good design can be a secret weapon... :/
SmellTheGlove 10y ago
For a web noob like me, I thought this was pretty awesome. I'm trying to build myself a website now, in 2016, when the last time I legitimately did it was 1999. This actually helped quite a bit with the way I think about it. Sure I'm using a Bootstrap template, but this made me think about why things are the way they are by default, and why I might want to consider some changes.
chm 10y ago
Hi OP! These were the best spent 4 minutes of my day :) At first I was confused but you really presented it well.
TheAceOfHearts 10y ago
I've wondered this for a while: does actually ever actually use those share buttons at the end? I don't think I've ever seen anyone using em. The way I see it... You can just share the URL. And if you're the type of person that frequently shares content, presumably you'd use a browser plugin of some sort, just so you can get a consistent experience across sites.
- exolymph 10y ago
  I literally just used one of the share buttons, and I frequently use them on news sites, blogs, etc. But I might be in the minority. It never even occurred to me to use such a plugin, but that's a good idea!
- mjrbrennan 10y ago
  I think there's no harm in adding them, some people may use them even if they are just a reminder to share. I think they should be kept fairly simple though, no JS etc.
  - GrinningFool 10y ago
    I'd agree - except for the tracking behaviors that come with the most common solutions - copy paste a line of js, or enable a plugin that has the same js, etc. Simple self hosted share links that were just links would be reasonable, but it seems not many take that route.
- soared 10y ago
  From a single user's perspective its very easy to see how no one would use them. But yes, plenty of people do. Go to a random buzzfeed article and you'd be amazed at the numbers.
DLA 10y ago
Impressive work to say the least. Can't wait for the etcd integration. Bravo for nice build instructions on you github page - if only more projects did that. Love the choice of SQL and JS, and the native HTTP interface. And, for a beta, the documentation and architecture information is solid as well. High quality work. Keep going! And THANK YOU for releasing this to the world.
baliex 10y ago
"What is the first thing you need to work on?" – Apparently the first thing is to enable Javascript... not quite what I had in mind.
vegabook 10y ago
Very nice, but I have to disagree on two points: First using grey blocks for code, while widespread, in my opinion is a visual interruption to reading flow. Indentation is preferable (and using the courier/monospaced font). Second sans-serif. I understand the history - serifs are delicate and look clunky on <200 dpi screens. But as we move to widespread retina displays, isn't the old lesson of typography, namely that serifs help legibility and convey an image of "seriousness", about to make a comeback? Some will argue about the legibility point, but even from a styling standpoint, aren't we getting just a little bit tired of helvetica and its brethren everywhere?
baliex 10y ago
"What is the first thing you need to work on?" – Apparently the first thing is to enable Javascript... not quite what I had in mind.
abglassman 10y ago
His longer tutorial http://marksheet.io http://marksheet.io is great, and his CSS framework, http://bulma.io http://bulma.io, is also really handy.
- soared 10y ago
  bulma.io looks similar to bulimia. But yes, great resources!
qznc 10y ago
My litmus test for web design typography is mixing fonts. For coding-related things especially mixing fixed-width with normal fonts. This page clearly fails [0]. Not even the baseline aligns due to 2px bottom padding. Usually only the x-height mismatches, which means "<code>x</code>" (fixed-width) does not have same height as "x" in normal font (serif or sans-serif). Here is a good example from my website [1]. Note how "use" and "mu" have the same height. It is not perfect, but matching cap height as well is maybe impossible without buying fonts. [0] https://imgur.com/a/Qs6dJ https://imgur.com/a/Qs6dJ [1] https://imgur.com/a/ij1uI https://imgur.com/a/ij1uI
asp_net 10y ago
Not perfect in every detail, but absolutely lovely. Well done!
Capira 10y ago
Awesome Job!
rralian 10y ago
This is really well done, kudos! It actually feels a little like I'm learning by doing here as the design firms up in place as I proceed. Very cool idea!
vanglen 10y ago
nicely!
skaplun 10y ago
really great story telling. Changing font color mid way was a mistake, it's breaking too many discreet conventions, sfart with the grey and it will be much easier for the user.
atoko 10y ago
I'm a big fan of Bulma, and used it to get started on a project http://pokestop.help http://pokestop.help Thanks for the write up, with CSS I never know where to start, this helps to think about it.
daxro 10y ago
Neat! Thanks!
tugberkk 10y ago
This is very good, thanks and congrats.
juanuys 10y ago
I've been trying to find some opinions on the "first rule", i.e. "Centering". Phones and tablets are already a book-like viewport. Desktop browsers are a different matter, for these presumed reasons: - most monitors in 2016 have lots of pixels along the X axis - most browsers are maximised or run in full-screen mode Joe Designer also has lots of pixels and/or a maximised browser, hence squashes content into a column. Some do it wrong, which means some websites end up looking like a thin column of text on your cinema display. What I'm getting at is this: I run my desktop browsers already in a book-like viewport (using Spectacle.app on Mac and XMonad on Arch Linux, or a simple resize-with-trackpad when I don't) so I'm a few keystrokes away from having to parse long lines of text. I don't really like it when website authors choose my viewport width on my behalf. Choosing your own typefaces and colours - fine. Layout? Not so much. What do others think?

1624 points by bbx 10y ago

> Long lines of text can be hard to parse, and thus hard to read. Setting a limit of characters per line greatly enhances the readability and appeal of a wall of text. I agree with this 100%. What I don't understand is why many developers argue that this principle does not apply to code and that we shouldn't have line length limits "because it's not 1970 and we have large monitors." If long lines of prose is difficult to parse, then long lines of code are even more cumbersome to parse, especially when you are either 1) slowed down by having to scroll horizontally all the time or 2) distracted by the awkward naive line wrapping done by the editor.

willemwijnans 10y ago

Like the simplicity of this, also nice work on Marksheet.io!

reimertz 10y ago

Ha, such a smart way of introducing web design for a novice. Nice work homie!

aban 10y ago

Beautiful. Personally, I would've probably stopped at the "Custom font" step (I don't really like header images and the share buttons) to keep it simple, but hey that's just me. Nice work!

dwenzek 10y ago

Thanks. Nice, simple and useful !

mknocker 10y ago

Clear, quick and simple. It would be interesting to have such elegant introduction for other topics. Well done !

mattherman 10y ago

Love it. One typo I noticed in the image section, "Graphics and icons can be used either as ornaments to support your content, or take actively part in the message you want to convey".

konschubert 10y ago

The back button is broken. Also, not sure if changing the fragment identifier is the right abstraction.

tantalor 10y ago
While clever, there's a few problems with the navigation on this site. 1. The back button doesn't undo the changes. Abstractly, clicking on a link performs some navigation which the back button is supposed to reverse. That doesn't work here. 2. Fragment links don't work. http://jgthms.com/web-design-in-4-minutes/#centering http://jgthms.com/web-design-in-4-minutes/#centering should take me to the 3rd step. Instead it just dumps me on the first step.

ChicagoBoy11 10y ago

Brilliant

Cbeck527 10y ago

Reminds me of a Motherfucking Website[1], and a Better Motherfucking Website[2] [1] - http://motherfuckingwebsite.com/ http://motherfuckingwebsite.com/ [2] - http://bettermotherfuckingwebsite.com/ http://bettermotherfuckingwebsite.com/

seang 10y ago
This is exactly what I thought, too. BMFWS pretty much covers this whole article, minus the color and images.
exolymph 10y ago
Don't forget Best Motherfucking Website! https://bestmotherfucking.website/ https://bestmotherfucking.website/ (It's my favorite.)

Frank2312 10y ago

FYI, in IE 11, only the header gets centered and not the whole body. I'm not sure if this was intended or just a bug with IE though. Nice intro to web design. I love the simple presentation.

addedlovely 10y ago
Needs to add width: 100% to the max-width statement. Annoying nuance.

deleted 10y ago

[deleted]

johnm1019 10y ago

Love this! Step by step explanation of how to do something which literally shows rather than tells.

drchiu 10y ago

Sort of reminds me of what Bob Ross from the Joy of Painting does in a couple of strokes... :)

K0nserv 10y ago

Lovely! Definitely like the style here and the focus on content first. Like other people have said it's similar to Motherfucking Website[1], and a Better Motherfucking Website[2]. I'll need to start including this when I link to those two. For my website[3] I'm really trying to keep weight on the wire down too so I am opting to skip the custom font and header image. It's quite nice to have 10-15kb pages in the age of the web obesity crises[4]. A header image and a custom font does have a big effect on how personal the content ends up though. [1] - http://motherfuckingwebsite.com/ http://motherfuckingwebsite.com/ [2] - http://bettermotherfuckingwebsite.com/ http://bettermotherfuckingwebsite.com/ [3] - https://hugotunius.se https://hugotunius.se [4] - http://idlewords.com/talks/website_obesity.htm http://idlewords.com/talks/website_obesity.htm

Normal_gaussian 10y ago
Nice website! I particularly like the simple links at the top, but found the list of articles confusing - it took a while for me to realise that the articles weren't just one paragraph filler texts.
- K0nserv 10y ago
  Thanks and you are absolutely right about the list links not feeling very clickable. I'll add some hover effect to make it more clear. Thanks for the feedback.
  - Siilwyn 10y ago
    Underlining links always help.
  - Normal_gaussian 10y ago
    I first viewed on my mobile so hover won't work. I couldn't think of a good solution so didn't give one, sorry.
jff 10y ago
Congratulations on not using any Javascript on the front page, except for what looks like the same email-obfuscating JS that Cloudflare injected on my site until I disabled that. In my mind, external JS is one of the worst things you can do to a website, and even self-hosted JS is bad if it's affecting layout/behavior much: people without JS enabled get a crap experience. Your site looks great!

pitchups 10y ago

Wonderful! For a moment at the start though, I wondered how such a poorly designed page, could teach anything about web design. Then I clicked the first link... :)

GrinningFool 10y ago
By way of contrast, I first looked and thought holy crap, someone made a clean, readable site!

primigenus 10y ago

This is a pretty nice demo of the process of turning a basic page into a "design" (in the sense that applying positioning, spacing, contrast, and things like typography is visual design - I might call it layout instead). However, if you run Chrome's Accessibility Audit (https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en https://chrome.google.com/webstore/detail/accessibility-deve...) on this page, you get warnings about low contrast for 100+ elements and a link to https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_color_01 https://github.com/GoogleChrome/accessibility-developer-tool.... So although you claim black text is harsh on the eyes and gray is more comfortable, it in fact is not - it just makes it harder to read. The very first time you load the page and see black Times New Roman on a white background is actually a better user experience for a larger number of people, purely from the point of view of legibility. Try having someone with less than stellar eyesight look at this page. Or someone who's trying to read it on a smartphone outside in sunlight or with the brightness of their screen set at less than maximum. Design isn't about what looks nice, it's about what works well - pages that a portion of your audience cannot read don't work well.

K0nserv 10y ago
I noticed this too, it's easy to fall into the trap of subtlety when designing. Subtle often ends up as low contrast which can definitely hurt accessibility. I think the first body color #555 was nice and it gets a good accessibility score too[0] whereas the second edition of the body color #566b78 is a bit too low contrast and subsequently gets a non perfect accessibility score[1]. > So although you claim black text is harsh on the eyes and gray is more comfortable, it in fact is not - it just makes it harder to read. The very first time you load the page and see black Times New Roman on a white background is actually a better user experience for a larger number of people, purely from the point of view of legibility. I'd say this is a half truth. Yes completely black text feels unnatural and a bit off, but done correctly you can pick a color that's still legible without being #000. There is an intersection of legible black on #FFF that's not pure black. [0] - http://webaim.org/resources/contrastchecker/?fcolor=555&bcolor=ffffff http://webaim.org/resources/contrastchecker/?fcolor=555&bcol... [1] - http://webaim.org/resources/contrastchecker/?fcolor=566b78&bcolor=ffffff http://webaim.org/resources/contrastchecker/?fcolor=566b78&b...

chejazi 10y ago

Love it except when I came back here to upvote the navigation was totally broken!

rsyntax 10y ago

Very well done! kudos

ajroas 10y ago

Awesome... nicely done.

virtualized 10y ago

> Black text on a white background can be harsh on the eyes. Opting for a softer shade of black for body text makes the page more comfortable to read. No, it doesn't. The low contrast text is definitely harder to read in direct comparison with black. This is the point where I suspected that the page might be a parody of modern web design. Unfortunately it seems to be serious. The syntax highlighting is similarly awful and the grey background makes it even worse.

Tloewald 10y ago
Yeah I found this assertion pretty troubling too. The "black" on most displays is already "soft" since even black pixels are leaking light. I've never read a page in a book and thought "you know, this ink is too black, it's straining my eyes".
- NoGravitas 10y ago
  I've never thought the ink in a book was too black, but once in a while, I do think the paper is too white. Usually actual paper is a lot more friendly than #FFFFFF, though.
  - Tloewald 10y ago
    You should be able to turn down the brightness of a display to comfortable viewing levels.
Silhouette 10y ago
It's not as simple as that. For one thing, there is a wide range of different screens used to display text, and each screen may exaggerate or reduce contrast to a different degree. It's also important to remember that very high contrast such as pure black on pure white can cause serious problems for dyslexic readers.

achairapart 10y ago

Good work! This is when you design in the browser with the medium in mind. Problem is when someone gives you a PSD made by someone who badly ripped off someone else website with no idea about what the box model actually is, asking you to make a 1:1 replica in the browser. Oh, and of course it should work on mobile too!

JustSomeNobody 10y ago

Nice. But, wait! Where's all the javascript? Don't you need React?

thenewregiment 10y ago

good job!! My fundamentals are strong now.

TheMagicHorsey 10y ago

That was beautiful. Thanks for sharing. I wish there was a similar simple demo showing how to style mobile apps.

webscalist 10y ago

Can't go back. Usability points: -1 Why not make it into multiple web pages?

kolme 10y ago
Indeed! Shame, it's absolutely trivial to implement with a bit of JS. Actually one could do it with pure css using ::target, but that would scroll the page back to the top every time.
chestervonwinch 10y ago
This was the first thing I tried on the first CSS update to compare the changes. Still - a cool idea!
random28345 10y ago
On the plus side, they didn't break the scrolling.

noisem4ker 10y ago

>Providing space [...] around [...] your content can increase the appeal of your page. Just like black bars when the aspect ratio of a movie doesn't match that of my monitor increase the appeal of said movie. I find margins on mobile pages a complete waste of horizontal space. My device screen is only 6cm wide and already surrounded by plenty of space in my field of vision. Why make it even narrower?

SonicSoul 10y ago

um, nice but the title is misleading. It took me only 1 minutes. 40 seconds of Times New Roman related profanities followed by 20 seconds of clicks :)

tracker1 10y ago

Please, do not specify "Arial" or "Helvetica" in your font-family... just use "sans-serif" by itself... Just use sans-serif as your main fallback font after specific web-font. This will use the browser default (often Arial in windows, Helvetica on OSX) which is usually the best looking Helvetica-like font, or the user's preference. Yes, sometimes it's a different font, but usually a better looking default. Helvetica looks hideous on windows, which is why it's often "Helvetica Neue", Arial, sans-serif... that said, just use sans-serif unless you want a specific font (with webfont option). /rant -- edit to be less inflammatory.

Nadya 10y ago
>Gah... Do NOT specify "Arial" or "Helvetica" in your font-family... just use "sans-serif" by itself... In windows this will be an Arial font, and in OSX "Helvetica" and on other platforms the closest default alternative You aren't wrong - but this isn't exactly true. It will be the browser default font which the user can change themselves [0]. Which is even better! For the small group that don't force their font choices by default yet change their default font settings, it is better to use serif/sans-serif instead of specifying a font family to respect the user's choices. I force my font choices to be used everywhere, so any CSS that specifies a font-family is just mild bloat on the CSS file in the end. I understand people like to take into consideration the font choices for their design, but it really should be in the user's hands without having to jump through hoops. [0] http://i.imgur.com/HSocAdt.png http://i.imgur.com/HSocAdt.png

jyotiska 10y ago

I have created a static site generator "minni" that powers my blog at - http://jyotiska.github.io/blog/ http://jyotiska.github.io/blog/. It is super simple, has less than 10 CSS declarations and no JavaScript. I don't really expect anyone else to use it since it was created according to my own design preferences. Here is the link in case any one wants to take a peek - https://github.com/jyotiska/minni https://github.com/jyotiska/minni

qznc 10y ago
Me too. Here is a snapshot: https://gist.github.com/qznc/6fbdc37ad33e6853911a https://gist.github.com/qznc/6fbdc37ad33e6853911a I made my own due to some very unusual choices. For example, publishing a post is done by adding a line to a collection file. Posts not in there are considered drafts.

gabrielcsapo 10y ago

Very cool, nice job Jeremy!

muhammadusman 10y ago

This is great! thank you for sharing!

bttf 10y ago

Cute.

cloudjacker 10y ago

Web design in 1 minute: Bootstrap template #581 Stripe ... profit.

cel1ne 10y ago

A good framework to help you build response, accessible design with proven typography: http://tachyons.io/ http://tachyons.io/

qwertyuiop924 10y ago

MFW and BMFW did this better. Why? because most of the stuff this added over BMFW is actively user hostile. Besides, I just want my freaking content to look good, with minimal page load. Don't add any unecessary weight. If your content (not SPA, not "web 2.0," CONTENT, the stuff that actually makes up most of the web) takes longer to load than HN, you're doing it wrong. Thankfully, this site seems to understand that. As for colors, just leave them the user's default, set black on white, or use Solarized or another high-contrast theme.

deleted 10y ago

[deleted]

kylemathews 10y ago

I've been working on a related project — Typography.js that vastly simplifies web design. It ships with 30 pre-built designs and I'm working on tools to make it really simple to create custom typography themes in-browser. CSS is a very low-level language for expressing design intent. It's great if you want to set the background color but if you say: "I'd like to add white space to my typography" — it could take dozens of recalculations + css changes to test your idea. Typography.js's goal is to create the most elegant/powerful API possible for defining your site's typography and remove a lot of the tedium/difficulty around experimenting with your design. Would love feedback / help! https://github.com/kyleamathews/typography.js https://github.com/kyleamathews/typography.js http://kyleamathews.github.io/typography.js/ http://kyleamathews.github.io/typography.js/

dengar007 10y ago
This is incredible!
- kylemathews 10y ago
  Thanks! Just a note, the design tools on the website are only 1/2 baked. Still need to add support for manipulating remaining options + way to export your designs. That being said, the core engine is quite solid and the themes are ready to be used.
splatcollision 10y ago
Thanks for making the correct UX on the numerical inputs!
- kylemathews 10y ago
  Credit goes to this awesome project! https://github.com/tleunen/react-number-editor https://github.com/tleunen/react-number-editor
andrewmcwatters 10y ago
I don't understand. This is just CSS in JavaScript, and writing themes on elements, sans classes.

daveheq 10y ago

"Times" font isn't "unstyled", it's styled to a newspaper, which I've found o be easy to read in a newspaper and hard to read on a website, I don't know why, but it has nothing to do with one being "styled" and another not; in fact, serif is more "styled" because of the serifs.

mbrock 10y ago
I think Times New Roman, if you just fix the line height and page width, can be beautiful, legible, and familiar. Random example: Frank Chimero's site renders with Times New Roman body text on my Mac, since I don't have Minion Pro or Calluna which are prioritized before Times in the stylesheet, and it looks lovely. http://www.frankchimero.com/writing/the-webs-grain/ http://www.frankchimero.com/writing/the-webs-grain/
kqr 10y ago
Times is designed to fit many characters into narrow columns (think newspaper), and that's the layout it's most legible in.
fiatjaf 10y ago
That's not what he meant. He said people have learned to relate Times New Roman with unstyled websites, so when they see it, they think "unstyled".

Procrastes 10y ago

Interestingly, I can't reach the site because our corporate security software (Sophos) categorizes this site as "Weapons." I suppose, in a sense, good design can be a secret weapon... :/

SmellTheGlove 10y ago

For a web noob like me, I thought this was pretty awesome. I'm trying to build myself a website now, in 2016, when the last time I legitimately did it was 1999. This actually helped quite a bit with the way I think about it. Sure I'm using a Bootstrap template, but this made me think about why things are the way they are by default, and why I might want to consider some changes.

chm 10y ago

Hi OP! These were the best spent 4 minutes of my day :) At first I was confused but you really presented it well.

TheAceOfHearts 10y ago

I've wondered this for a while: does actually ever actually use those share buttons at the end? I don't think I've ever seen anyone using em. The way I see it... You can just share the URL. And if you're the type of person that frequently shares content, presumably you'd use a browser plugin of some sort, just so you can get a consistent experience across sites.

exolymph 10y ago
I literally just used one of the share buttons, and I frequently use them on news sites, blogs, etc. But I might be in the minority. It never even occurred to me to use such a plugin, but that's a good idea!
mjrbrennan 10y ago
I think there's no harm in adding them, some people may use them even if they are just a reminder to share. I think they should be kept fairly simple though, no JS etc.
- GrinningFool 10y ago
  I'd agree - except for the tracking behaviors that come with the most common solutions - copy paste a line of js, or enable a plugin that has the same js, etc. Simple self hosted share links that were just links would be reasonable, but it seems not many take that route.
soared 10y ago
From a single user's perspective its very easy to see how no one would use them. But yes, plenty of people do. Go to a random buzzfeed article and you'd be amazed at the numbers.

DLA 10y ago

Impressive work to say the least. Can't wait for the etcd integration. Bravo for nice build instructions on you github page - if only more projects did that. Love the choice of SQL and JS, and the native HTTP interface. And, for a beta, the documentation and architecture information is solid as well. High quality work. Keep going! And THANK YOU for releasing this to the world.

baliex 10y ago

"What is the first thing you need to work on?" – Apparently the first thing is to enable Javascript... not quite what I had in mind.

vegabook 10y ago

Very nice, but I have to disagree on two points: First using grey blocks for code, while widespread, in my opinion is a visual interruption to reading flow. Indentation is preferable (and using the courier/monospaced font). Second sans-serif. I understand the history - serifs are delicate and look clunky on <200 dpi screens. But as we move to widespread retina displays, isn't the old lesson of typography, namely that serifs help legibility and convey an image of "seriousness", about to make a comeback? Some will argue about the legibility point, but even from a styling standpoint, aren't we getting just a little bit tired of helvetica and its brethren everywhere?

baliex 10y ago

"What is the first thing you need to work on?" – Apparently the first thing is to enable Javascript... not quite what I had in mind.

abglassman 10y ago

His longer tutorial http://marksheet.io http://marksheet.io is great, and his CSS framework, http://bulma.io http://bulma.io, is also really handy.

soared 10y ago
bulma.io looks similar to bulimia. But yes, great resources!

qznc 10y ago

My litmus test for web design typography is mixing fonts. For coding-related things especially mixing fixed-width with normal fonts. This page clearly fails [0]. Not even the baseline aligns due to 2px bottom padding. Usually only the x-height mismatches, which means "<code>x</code>" (fixed-width) does not have same height as "x" in normal font (serif or sans-serif). Here is a good example from my website [1]. Note how "use" and "mu" have the same height. It is not perfect, but matching cap height as well is maybe impossible without buying fonts. [0] https://imgur.com/a/Qs6dJ https://imgur.com/a/Qs6dJ [1] https://imgur.com/a/ij1uI https://imgur.com/a/ij1uI

asp_net 10y ago

Not perfect in every detail, but absolutely lovely. Well done!

Capira 10y ago

Awesome Job!

rralian 10y ago

This is really well done, kudos! It actually feels a little like I'm learning by doing here as the design firms up in place as I proceed. Very cool idea!

vanglen 10y ago

nicely!

skaplun 10y ago

really great story telling. Changing font color mid way was a mistake, it's breaking too many discreet conventions, sfart with the grey and it will be much easier for the user.

atoko 10y ago

I'm a big fan of Bulma, and used it to get started on a project http://pokestop.help http://pokestop.help Thanks for the write up, with CSS I never know where to start, this helps to think about it.

daxro 10y ago

Neat! Thanks!

tugberkk 10y ago

This is very good, thanks and congrats.

juanuys 10y ago

I've been trying to find some opinions on the "first rule", i.e. "Centering". Phones and tablets are already a book-like viewport. Desktop browsers are a different matter, for these presumed reasons: - most monitors in 2016 have lots of pixels along the X axis - most browsers are maximised or run in full-screen mode Joe Designer also has lots of pixels and/or a maximised browser, hence squashes content into a column. Some do it wrong, which means some websites end up looking like a thin column of text on your cinema display. What I'm getting at is this: I run my desktop browsers already in a book-like viewport (using Spectacle.app on Mac and XMonad on Arch Linux, or a simple resize-with-trackpad when I don't) so I'm a few keystrokes away from having to parse long lines of text. I don't really like it when website authors choose my viewport width on my behalf. Choosing your own typefaces and colours - fine. Layout? Not so much. What do others think?