Redesign Idea

[mattrybin]

Design suggestion: http://crazystudio.co/bitcoin/
Best viewed on latest chrome over 1300px width (just a concept so I haven't tested it in other browsers or made it responsive)

issue
Bitcoin.org representing bitcoin do a great job offering technical information to visitors and allow developers to understand the technology.

But I do believe that the technical language and the design do make it harder for non-technical people to appreciate the future bitcoin holds.

Bitcoin.org being often the first impression people have when going out and learn about bitcoin, having an outdated design and being written in a non-practical language do lower the trust and adaptation of the technology.

Having just learned about bitcoin from Andreas M. Antonopoulos and Stefan Molyneux, I would love the contribute and help the community to grow and help more people understand what bitcoin is.

So may I ask if there any interest improving the design (which I'm happy to do)?

[harding]

That certainly does look very nice, and we always welcome pull requests to improve any part of the site---including design. What do you need from us to get started?

[mattrybin]

Just want to know that if there is an interest and that you don't have any other plans in place already to improve the look and feel.

I would like to know your browser statistics because I would like to use "flexbox", but Internet explorer 9 don't support it, and if a second style sheet is needed.

http://caniuse.com/#search=flexbox

And I do need some help with grammar and the spelling etc. Writing is certainly not my strength :)

If you have any request or ideas I would love to hear them.

[harding]

We don't currently have any browser statistics, see PR #1077 where we're considering collecting statistics. However, I'm pretty sure that we'll need to support IE9; here's the thread from the last time we tried to use flexbox (we decided not to use it in that case): #757

Also, FYI, we try to keep the number of JS libraries minimal so that we can security review them. We do currently us JQuery and JQuery UI, and we're not forbidding the use of others---it will just take longer to review pull requests containing those libraries.

There are currently no other site-wide redesign plans, although we may do something with the developer documentation.

We will, of course, throughly review your grammar and spelling, as well as the technical correctness of your content. (Don't worry, we're pretty nice.)

Please let me know if you have any other questions. Thanks!

[saivann]

@mateuszrybin Yes, redesign is welcome! Thanks for submitting this mockup!

Translations; if we could re-use existing texts as much as possible, and set priorities on what texts have good reasons to be changed so we can change them incrementally intead of re-writing everything from scratch, this would be very positive as we don't have the resources right away to re-translate everything, and translations are very important for accessibility.

Browser support: Current site has extreme compatibility with old browsers (IE6) and works on mobiles. Nowadays, IE6 support is probably not worth as this can be a lot of trouble and China seems to be migrating to modern browsers finally, but IE9 and mobiles should remain supported IMO.

[mattrybin]

@saivann @harding What is the number one goal for Bitcoin.org?

I understand that you are not tracking right now. but to understand your goals, could I ask if you were tracking, what would be the most important metrics?

I see a couple of possible answers, that may help you define and understand what I'm looking for in my question:

"Bitcoin.org number one goal is to take our visitors and as fast as possible allow them to experience and use the bitcoin technology. We do this by answering what bitcoin is, what bitcoin can do for them and how to get started using bitcoin in the most effective manner. We believe that that meeting other people in the community is the most effective way so we strongly encourage our visitors to go to local Bitcoin Meetups and we track this by offering the closest meetup in their area with the help of Meetup API and track the click-through rate."

"Bitcoin.org number one goal is to bring bitcoin technology to the public. When a young boy that have a passion for graphic design start to taking payments in bitcoins, and his mother express a strong fear and worry, he can point to us. He can trust that our goal is to make this new technology easy to understand so he can have an honest discussion with his parents and not a discussion based on lies and propaganda. We track our goal by our visitor count and how many different site link back to us."

"bitcoin.org number one goal is to be a reference for developers that work with bitcoin. Just like WordPress Codex, Developer.google.com, or jquery.com, our goal is to be the place that developers come back to when they need to understand the code better. We track how many people revisit our site."

Those three sites look and feel very different. And their impact is very different. With 7 million people per quarter, it can have a huge impact on the bitcoin community.

With a conversation rate of 2%, the first goal would mean that 140 000 more people would attend or at least go out and look for a meetup around the world. This would increase the adoption of the technology significantly.

The second goal would be a shield against lies and propaganda. Block Chain is here to stay, but the government have the power to slow down the adoption in the general population. We seem to underestimate the power that the media have. An attack could slow down the technology by years and bitcoin.org could play a major role in preventing it from happening.

And the last goal is easy to understand.

My point is that a redesign is hard and ineffective without a clear goal. A site can have a couple of goals, but knowing what world changing roll bitcoin.org wants to play and designing for that goal would help the community tremendously because millions of people per month is significant.

[harding]

@mateuszrybin this site has multiple contributors each with their own goals and goal prioritization, so I don't think there will ever be a canonical answer to your question. I know that makes things more difficult for you---it's certainly made things more difficult for me in the past---but I think that fulfilling the needs of a wide range of people is a characteristic worth preserving even if it makes the site less effective at any particular task.

Speaking only for myself, I really want Bitcoin.org to be the most trusted textual Bitcoin resource. The only thing that should better describe Bitcoin than Bitcoin.org should be the Bitcoin Core source code. That doesn't mean the site should only be for developers (or even primarily for developers) but, rather, that even the text we target at end-users or potential users should be as accurate as possible given the appropriate level of precision for the audience.

I don't know if that helps you, but it's the best I can offer at this time. Maybe other people will comment with their own visions for Bitcoin.org.

[mattrybin]

So the mobile and tablet menu is done on modern browsers.
http://mateuszrybin.github.io/experiment/
Works best on newest Chrome.

Always appreciate feedback 👍

I'm doing the development at:
https://github.com/mateuszrybin/bitcoin.org | branch: redesign

@harding Thanks for your answer. It helps to know the situation.

rereading my message, I would like to add a metaphor for others that I thought was great.

Imagine that I saw your cool car. Being a mechanic myself and having some time on my hand, I said to you that I could make it a little bit better. You like the idea, and you say 'sure, improve my car, thanks'.

This creates a problem, me being a creative person, as more I work on the car, as more ideas I have. So I go back to you and ask "hey man, I'm improving the seats, and making everything cosy inside and everything is great. This car really have a lot of potential, and I have some spare parts over at my shop. The problem I have is that I don't really know what you want to do with this car. Are you going to drive around off-road or maybe drive a lot around the city? Who knows, may you want to go racing. It would be really useful to know what this car will do".

@saivann I will first just redesign the site and working around the existing content. So no worries about translation. :)

[saivann]

@mateuszrybin Hey, thanks a lot for asking these refreshing questions, and it's super great that you're experimenting and pondering about the goals. I think my best reference to you would be this page:

https://bitcoin.org/en/about-us

But I agree with David that it's very hard to set single goals, and it's probably good to not limit ourselves. However, what goals we prioritize in cases X and X is a difficult question, perhaps one that needs continuous experimenting. However, if there is anything obvious to me since the time I contribute to bitcoin.org, it's that the site lives much better when it stays away from politics and controversial content of any kind as much as possible :) . And that's generally my advice to you. Everything else is more fun!

As far as I'm concerned, I spent a lot of time on bitcoin.org perhaps with a very simple goal; making it a good entry-level resource for newcomers that would help them in any way. I wanted bitcoin.org to help people having freedom of choice and right informations to avoid bad experiences.

[mattrybin]

@saivann There is this developing tool called www.browserstack.com that would be great help for browser testing. On their site they state that they give the tool for free for Open Source project.

I wonder if you could send them a message, you being the site owner, and ask of we could use it?

https://www.browserstack.com/accounts/subscriptions

[saivann]

@mateuszrybin Just sent them an email, good idea! Can you add your email address to your public GitHub account so I can send you the credentials if we're to get an account? I was personally using VMs most of the time, but this would be easier and give me better access to testing mobiles.

[saivann]

@mateuszrybin See #1089 about BrowserStack

[mattrybin]

@saivann Thanks :)))

Have added, to save you a click, here is my email ;)

workmateuszrybin@gmail.com

So guys what do you think?

http://mateuszrybin.github.io/

The "network status" link need to change color and the flags need to load correctly but other then that, the front page is finished.

Prefixer
I wonder if there is a reason why there is no prefixer in the build? And if it's possible to add one :)

[saivann]

@mateuszrybin Thanks!

Re prefixer: Not 100% sure about that, but nowaday, I think mostly, if not all prefixes we could be adding automatically (at least as far as the existing code is concerned) would just add support for extinct browser versions. But this said I don't think I see issue with using a prefixer.

Re preview: Other people will take a glimpse and leave comments (I hope!), but as far as I'm concerned: Very nice looking, I love the Bitcoin Core footer. Various comments for your consideration:

• The Youtube video ideally would only embed on click, not on page load (for both privacy and performance reasons)
• Several language flag icons are broken.
• On the mobile layout, bullet points under the video are not valigned.
• Regarding the menu, I feel a little hesitant about the use of javascript and flexbox (for IE9 compatibility). I don't know how much of an issue we should consider this to be, but we generally try to avoid javascript as much as possible.
• There is no :hover effect to ease navigation on links and the menu.
• In the mobile menu, perhaps we can display "Innovation" and "FAQ" like the other entries?
• The new line-height is pretty stretch, perhaps we can increase it to aerate texts?
• List entry items on the landing page have a smaller font size than texts.
• On the mobile layout, the bottom menu doesn't take all available space on screen.

[mattrybin]

@saivann Thanks for the feedback :))

You are right regarding youtube.

Menu and Js - Imagine yourself seeing the menu from touch perspective. For a mouse perspective the design pattern is problematic because you need to click to view the links and you need to relay on JS for the menu to function.

But this design pattern make sense in a touch world. Because using dropdown on a touch device is a horrible user experience. So thats the reason why I use this pattern.

Regarding flexbox, I'm designing header and footer with flexbox. I will provide a fallback for ie9.

I do disagree about "Innovation" and "FAQ". Because of the navigation structure, I think that its the best way to indicate that those are top pages and don't belong to any category.

I much appreciate the feedback. I will think the points over!

Ps. You will not see hover and animation for a long time because I add them last :)

[mattrybin]

Preview: http://mateuszrybin.github.io/

A couple of page are done:

Homepage (Need to redesign)

Introduction

• Individuals
• Businesses
• Developers
• Getting Started
• How it works (Need to redesign)
• You need to know

Resources

• Resources
• Community
• Documentation
  • Guide

So this week I will finish the rest of the site, but @harding @saivann I would like some feedback on the Documentation > Guide:
http://mateuszrybin.github.io/en/developer-guide

How should the sidebar work?

The problem I see with the current version is that it is hard to get a good overview. You probably don't read the docs for fun so I image that clicking around on the tabs is not the best approach.

Fully expanded is better from a user experience standpoint. Because the user can see all the content and headers without needing to click around.

My idea is to have the sidebar fixed at the top. When you scroll down beyond the sidebar two bars will popup on the left side. One bar is "Back to sidebar" button and the other is the disclaimer. Those two bars follow the users scrolling.

What do you think?

[harding]

My idea is to have the sidebar fixed at the top. When you scroll down beyond the sidebar two bars will popup on the left side. One bar is "Back to sidebar" button and the other is the disclaimer. Those two bars follow the users scrolling.

I don't think we need to display the disclaimer continuously, although I admit that I rather like having the disclaimer—it hopefully encourages people to realize how easy it is to screw up in Bitcoin where the system design includes many subtleties and real money is at stake.

I think a back-to-sidebar (or maybe "back to contents") makes sense. Maybe if there's room we can also have the search box float.

I would be curious how this will render on mobiles.

Thanks for continuing to work on this! Sorry @saivann and I haven't had time to give rapid feedback.

[saivann]

@mateuszrybin Really good looking!!! I am not sure that I understand your last comment though, but in general: why not having the table of contents always visible on the left as the user scrolls? This seems very common and functional layout nowadays. Having permanent access to the navigation is very helpful.

[mattrybin]

@saivann @harding So all the pages are done 👍

TODO

• Make the header responsive
• Add animation and transition
• Refactor one last time
• Merge with master
• And push :)

have not added animation but don't this look good? 😄
http://mateuszrybin.github.io/en/choose-your-wallet
http://mateuszrybin.github.io/en/developer-guide
http://mateuszrybin.github.io/en/about-us

[saivann]

@mateuszrybin That looks terribly good!! Did you get a chance to complete the last items in your TODO?

[saivann]

@mateuszrybin Which branch on your repository is the right one, can you open a PR?

[mattrybin]

Hey @saivann, at the start of the year a new client popped up that had an immediate problem he needed help with. I have not forgatton about bitcoin.org and plan to finish up at start of mars.

I should have informed you about it, just forgot, sorry.

[saivann]

@mateuszrybin I'm actually glad you were not waiting for me all of that time. Thanks for the heads up.