hbharding / beautifulwikipedia

#Beautiful Wikipedia

Beautiful Wikipedia is a chrome extension which visually overhauls Wikipedia.

The priorities in the redesign are more legible typography, scannibility (not readability), and modularity.

beautifulwikipedia's Issues

Reference links hurt legibility

Add Contribute Section

Wikimedia's How to contribute: https://www.mediawiki.org/wiki/How_to_contribute

Design Process: https://www.mediawiki.org/wiki/Design#Process

Product Development: https://www.mediawiki.org/wiki/Product_development

Design Home Page

We need to do a design for the homepage. What should we prioritize on the page? Probably search... speaking of which we should probably make a separate issue for search functionality. Just getting the convo started.

Style blockquote

e.g.

on

https://en.wikipedia.org/wiki/Xeer

fix mobile view

do we exclude the mobile web experience? or give it the same treatment?

Search Article vs Search Wikipedia

working on the comps for the top bar and wondering if the ability to search an article vs wikipedia as a whole makes sense...

I guess people could just hit CMD+F, but maybe it's something to consider.

Make loading template/state

so the page doesn't flash the old style.

We should look at what Twipster does. there's no lag at all. (https://github.com/jxnblk/Twipster)

Add InfoBox

Columns

think about adding columns for large screens, better for scanning large amounts of text

Execution:
-webkit-columns: 2;
-moz-columns: 2;
-ms-columns: 2;
-o-columns: 2;
columns: 2;

Maximizing Image Size

Think I found something we might want to utilize. The images you see in most wikipedia articles aren't the original size that they were uploaded. They get converted into thumbnails for obvious performance reasons (i.e., phones don't need a 1200px wide image).

Example thumbnail:

http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg

Example original:

http://upload.wikimedia.org/wikipedia/commons/2/26/YellowLabradorLooking_new.jpg

If we remove '/thumb/' and everything after the first instance of '.jpg', I bet we would have access to the larger images to work with.

Of course, we can't really on every article having nice big beautiful images to work with. We'd have to use a conditional statement, and build css modules for small / medium / large images.

Add Table of Contents

Add Precedent Section

Internal Work
http://www.fastcodesign.com/3028615/the-beautiful-wikipedia-design-that-almost-was#4
Discussions
https://www.mediawiki.org/wiki/Talk%3ATypography_refresh#Dyslexie_.26_wrong_use_of_serif.2Fsansserif
https://www.mediawiki.org/wiki/Talk%3ATypography_refresh/Archive_2#image_thumbnail_styling

1910
http://blog.weare1910.com/post/75576312730/a-readable-wikipedia