Jekyll Site Redesign #583

Closed
wants to merge 92 commits into
from
@cobyism
Jekyll member

I'm working on a redesign of the main Jekyll project site, so I thought I'd kick of a pull-request for this nice and early to start collecting feedback.

Here's a screenshot of the initial direction:

@mojombo I know you already mentioned that you weren't completely sold on the cursive font for the header, but I haven't got around to playing with other options for it just yet.

The current description of Jekyll that seems to be used in most places is that it is a "simple, blog-aware, static site generator" so I thought it would make sense to elaborate on those three aspects as their own brief headings/paragraphs on the homepage—thus the headings in the screenshot: Simple, Blog-aware, and Static. The copy for these paragraphs aren't visually even in length yet, but my goal is to have them be three equally short, punchy, and clear descriptions of what it is exactly that Jekyll is.

Further down the page, I'd like to include a section explaining the whole "Free hosting using GitHub Pages" concept, how people can use Jekyll for their new site and mention that it's the engine behind Pages and so forth.

Then, toward the bottom of the page, I imagine having a prominent invitation for people to take—such as continuing on to the docs, or going to a separate page of the site with clear instructions for installation/setup and maybe even a blankslate folder structure to get them started (with template/layout files and so forth). I'm aware that one of the design goals of Jekyll is that the file structure is reasonably loose—however it might be worth considering having a starter structure for people to get up and running quickly. I'd love to get some input into whether this is a silly idea or not.

There's obviously a lot more work to go into this, as I'm still at the stage of working out what information the landing page needs to have and the best way to explain it all—so all suggestions and feedback welcome!

@tombell

Really love this.

Maybe include the installation instructions which is pretty much gem install jekyll after the 3 initial sections, and a link to further instructions.

I think the idea of an initial directory structure and layout would help get people up and running quickly, it would also give users a nice visual indication when everything is setup correctly.

@parkr
Jekyll member

+1, this is awesome.

@inkredabull

Wow, looks great.

@XCMer

+1, looks great. I like the minimal, yet elegant design.

@sirbrad

Man this looks sweeeeet!

@cobyism
Jekyll member

Just pushed some more updates—I'm thinking a terminal prompt window might be a good way to do the install instructions. The screenshot below is using colors from the Desert Vim colorscheme, but can anyone suggest a colorscheme that might work better with the rest of the site's colors?

Still plenty to do—and again, any feedback welcome :)

@cobyism
Jekyll member

Latest changes. Full-page screenshot this time.

@parkr
Jekyll member

Very impressed. Nice work!

@jaysonjphillips

This is awesome. Great work.

@jaysonjphillips

This is awesome. Great work.

@ncraadk

Really nice, although it's a lot of action in the bottom compared to the top half (in my opinion) :)

@ejholmes

The terminal prompt feels a bit cluttered to me. Maybe changing my/new/site to just site?

@cobyism
Jekyll member

Started work on bringing the docs into the Jekyll site itself. Here's a screenshot of the initial look/feel of the docs section using content from the current wiki homepage. Would love to get feedback if anyone has thoughts!

@cobyism
Jekyll member

@ejholmes Yeah, I agree about the prompt being too busy. I'm thinking about killing the mkdir and just having:

~ $ gem install jekyll
~ $ cd awesome/site
~/awesome/site $ jekyll --server
# => Browse to http://localhost:4000/

... or something similar.

@Kristories

Awesome. Great work +1

@qrush

Wow. Have you tried this on other browsers? I don't care about IE8, but IE9 would be good.

@cobyism
Jekyll member

@qrush It should be fairly consistent in IE9:

... but not as pretty in IE8:

There's still a few cross-browser things that aren't ideal, but I'm slowly getting there :neckbeard:

@cobyism
Jekyll member

Also, didn't highlight this before, but I'm trying out an image-based logo with a bit of depth instead of being flat text. Any thoughts, anyone?

@qrush

Geez, this is gorgeous. Thanks for doing this. Hey @mojombo any objections to merging this? I need to try it locally still.

@cobyism
Jekyll member

@qrush No worries. The docs still aren't finished, and some pages are empty even—so just bear that in mind if you're going to merge this as-is. I imagined it would be better to finish reworking the docs in this PR, but I'm happy to kick off a separate one for further changes to the docs. Whatever works 😁

@parkr
Jekyll member

+1 million and three quarters. Much friendlier homepage.

@mojombo

SO MUCH LOVE FOR THIS as we've discussed a bunch already on campfire.

Not a huge fan of the 3D logo though. I prefer it with just the white lettering. Once the docs are ported over, I'm so totally +1 to merge.

On a related matter, I really hate the Jekyll wiki and want to kill it with so much fire and move the docs in-repo. Will investigate how this all works in a bit.

@parkr
Jekyll member

So glad to hear this. Nice work, @cobyism!

Re docs: I've seen Thor used a bunch in libraries I like, written by people I respect. Should help with automation of docs creation from code.

@natansh

+1. Absolutely love it! I agree with @mojombo though that the 3D icon doesn't feel right. I liked the earlier simple white lettering.

@cobyism
Jekyll member

Just adding some styles to use for helpful messages here and there throughout the documentation.

@kevinSuttle

This is gorgeous. Excellent work! Can't wait to see it live.

@cobyism
Jekyll member

Alrighty then—this should be pretty much ready to go now. It’s getting to the stage where I think it’d be better to have this merged in and do any subsequent changes as separate pulls. @mojombo, @qrush, can I get you guys to pull the new site down and have a poke around to make sure there’s nothing major that needs fixed first?

@cobyism
Jekyll member

Instead of pulling it down locally, you can also see this branch live on my fork’s Pages site if you want.

@mattr-
Jekyll member

👍

this is awesome.

@parkr
Jekyll member

Dude. This is unbelievably awesome.

@chrisfinazzo

Nice work.

I do think however that there may be a problem with layout on iOS devices. The entire site shows up as flush left in Mobile Safari. As a result, the logo appears to be clipped. Is anyone else seeing this? Want to be sure it's not just me...

@cobyism
Jekyll member

I haven’t put any time/effort into making this responsive at all yet. It wouldn’t take much work, but I’d rather do those changes as subsequent pull requests rather than just dragging this one out any longer than it is.

Also, I’ve always been slightly wary of relying on responsive site checkers in desktop browsers, as they won’t give you a true representation of how mobile devices zoom viewports and so forth.

@darth10

+1

@kevinSuttle

Yep, that's why building mobile-first saves so much time. No backtracking.

@tombell

Honestly, I don't think many people will be reading Jekyll documentation on the mobile device as you cannot even run Jekyll on a mobile device. So I don't think it's that big of a priority as people think. Just my 2 cents.

@emory

Most people are going to be creating responsive mobile-friendly content, the showcase site for Jekyll and other related glue should reflect that.

Peanut gallery comment:

if you don't want to use cursive up top, I suggest a monospaced font to hint around at the "publish like a hacker" premise

@mattr-
Jekyll member

Anybody know what it'll take to finish porting the docs over? Just migrating content from the wiki? or is it already done?

@parkr
Jekyll member

@mojombo's been working on that - not sure what he wants to do. He has a structure in mind, I think.

@parkr
Jekyll member

Yo @mojombo – let me know what docs I can write so that we can merge this in.

@mojombo mojombo added a commit that referenced this pull request Dec 31, 2012
@mojombo mojombo Update site dir with contents of #583 at rev cb19367.
This is the big site redesign by @cobyism. To work with the new
site deployment mechanism, it is being copied from the gh-pages
branch of that PR into the existing site dir. Before we finally
deploy the new site, we should remember to merge #583 so that we
keep all the history from that PR.
cc73f04
@mojombo

This redesigned site has now been copied into the site dir on the master branch in commit cc73f04. Further site changes should be issued as pull requests against the master branch. I'm closing this PR (to get it out of the way), but it will be merged into the gh-pages branch before final redesigned site deployment.

@mojombo mojombo closed this Dec 31, 2012
@cobyism cobyism pushed a commit that referenced this pull request Apr 4, 2013
@mojombo mojombo Update site dir with contents of #583 at rev cb19367.
This is the big site redesign by @cobyism. To work with the new
site deployment mechanism, it is being copied from the gh-pages
branch of that PR into the existing site dir. Before we finally
deploy the new site, we should remember to merge #583 so that we
keep all the history from that PR.
4b14eac
@parkr parkr added a commit that referenced this pull request May 2, 2013
@parkr parkr #583 has been merged, but should wait for #860. 4c7b9cb
@kingsidharth

The logo is very bad. It doesn't serve a purpose of a logo but an illustration, can we please do something about that?

@mattr-
Jekyll member

It is unfortunate that you don't like the logo. The Jekyll core team totally digs the logo. I would not anticipate a change any time soon.

@kingsidharth

Well it's not really as much about liking as it is about functionality of a logo. Unlike art, design serves a function or a purpose and not much about likes or dislikes.

The new logo is more of an illustration rather than a logo. A logo needs to represent a whole lot than it is (in this case, our beloved jekyll). That's why there is a certain way softwares logos (or any logos for that matter) are done. This one doesn't qualify a logo.

One can use a photo and call it a logo but a photo is worse example of a logo - illustration is bad as well.

I wonder what core team has to say about that.

@qrush
@kingsidharth

I appreciate the hard work, time and effort that everyone has put into it. Will try and get something better to show before I comment again.

I agree about what was there earlier wasn't good either.

Please don't get me wrong; I am not here to bash the work done. But just pointing what needs to be fixed and working on it at the moment.

@cobyism
Jekyll member

Please don't get me wrong; I am not here to bash the work done.

@kingsidharth ❤️ I totally get where you’re coming from, and I don’t take your criticisms personally at all, so don’t worry about that 😀. I don’t think anyone here would ever say this is the world’s best logo, and I’m sure everyone would be more than open to changing the logo if someone has the time to create a better one. I played around with the logo a bit as I worked on this, but my main focus was really the content, layout, and information architecture of the site—I’m definitely not 100% happy with the logo, but that should never be a reason to hold up something from shipping. The key to a good design process in my experience is iteration, and that’s what happened here. If you (or anyone else) ever wants to take what’s currently there and iterate further, that’d be

@kingsidharth

@cobyism I agree with each word you said there! And I love the way you've worked on information architecture. I was wondering if you'd want to work on the logo together? We could iterate?

@cobyism
Jekyll member

@kingsidharth 🆒 My time is limited, but I’d love to be part of the discussion if you want to kick things off! 👍

@SLaks SLaks added a commit to SLaks/SLaks.Blog that referenced this pull request May 26, 2013
@SLaks SLaks Use colors from new Jekyll site a8c49b9
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment