Redesigning 晋江文学城

晋江文学城 (Jinjiang Literature City) is the most important women's-oriented web-literature platform in China, and its desktop homepage is a 984-pixel fixed-width float layout serving 12px 宋体 across 2,016 links with no viewport meta tag. I like the first thing a great deal. This page is about the second.

Visit the real site → www.jjwxc.net

Why this organisation

Jinjiang was founded in August 2003 and is operated by 北京晋江原创网络科技有限公司. It reports over 78 million registered readers, 7.19 million works and 3.16 million registered authors. (Those are the platform's own published figures, not independently audited ones — I am attributing them, not vouching for them.) Since 2005, more than 600 works first serialised there have been adapted for screen or had their rights sold, which is why a site most Western readers have never heard of sits underneath a decade of well-known Chinese television.

But the reason I wanted to redesign this site rather than any other is a paragraph in its own mission statement:

尊重和守护每一位作者的创作初心，让每种类型的文章都有生存的空间；不推波助澜，不强求作者追逐热点……提供便利条件，让小众读者也能够找得到小众文章。

"Respect and protect every author's original intent, so that every kind of writing has room to survive; do not amplify trends and do not push authors to chase them … make it easy for readers of niche work to actually find niche work."

That is an unusual thing for a commercial platform to commit to in writing, and it is a design constraint, not just a slogan. A platform whose stated purpose is helping minority tastes find each other cannot be redesigned into a recommendation feed — the long tail is the product. It rules out the obvious move of replacing the taxonomy with an algorithm, and it is why the redesign below keeps Jinjiang's own classification system and attacks only the way it is presented.

What is actually wrong

Everything in this section was read directly out of the live site's HTML and CSS on 8 August 2026. One clarification first, because it changes what there is to criticise: www.jjwxc.net is a thin splash portal with no search box and no book listings. The page readers treat as the homepage is the 言情 channel at /fenzhan/yq/, and that is the page measured below.

It ships a megabyte to show you thirty rows

• The 言情 homepage is 1,044,629 bytes of HTML containing2,016 links to 785 distinct novels and 409 authors.
• The 最新更新 module alone is 376,393 bytes — 37.4% of the whole document: 600 novel links across 310 rows and 10 tabs, all rendered into the DOM up front and hidden with JavaScript. Roughly nine-tenths of it is downloaded and parsed so it can be not-shown.
• The header region carries 65 links, and the main menu expands to 68 more on hover — about 130 targets before any content, with no skip link.

It is 12px 宋体 in a 984px column

• body { font-size: 12px; font-family: "宋体"; }. In the live stylesheet 12px appears 14 times against three uses of 16px — it is the site's normal size, not an exception.
• Layout is #top, #main, #footer { width: 984px } withfloat: left/right — a 2010 float layout under an XHTML 1.0 Transitional doctype, not the table layout it is often accused of. On a 1920px display it is a narrow column between two empty margins.
• The document is charset=gb18030, not UTF-8, and the homepage still branches on $.browser.msie for IE6 and IE7 — a jQuery API removed in 2013.
• List rows are height: 22px and channel buttons are60×21px. WCAG 2.2 SC 2.5.8 asks for 24×24 CSS pixels; Apple and Google ask for considerably more.

The search box is 94 pixels wide and searches for an advert

The keyword field is literallystyle="width: 94px" — about six Chinese characters, narrower than many novel titles. Its placeholder is not an instruction but a rotating promoted title, and the site's own script does this:

if(!$('#autoComplete').val()){
  $('#autoComplete').val($('#autoComplete').attr('placeholder'))
}

Press enter on an untouched search box and you search for whatever novel is being promoted that hour. The most common task on a reading platform is served by the smallest control on the page, and its empty state is an ad.

The accessibility floor

• No lang attribute on <html>, so a screen reader guesses which language to pronounce 2,000 links in.
• No viewport meta tag — on any of the four channel homepages. Phones render at a ~980px virtual viewport and zoom out. Mobile is served by a separate m.jjwxc.net site instead.
• 16 <h1> elements and no <h2>or <h3> at all. Heading navigation is flat, so it conveys nothing.
• 90 of 156 images (58%) have no alt attribute — and images here are book covers, the primary content.
• Zero aria- attributes, zero role=attributes, and one <label> on a page with 2,016 links and eight form controls.
• <base target="_blank"> makes every link on the document open a new tab. Back does not work; tabs accumulate whether you wanted them or not (WCAG 3.2.5).
• Links are distinguished from body text by colour alone (a { text-decoration: none }), and red means "hot" with nothing else carrying that meaning.

The brand green cannot carry text

This is the finding that most changed my design. Jinjiang declares its theme colour in a custom property:

:root {
  --highlight-text-color: var(--theme-color-3, #009900);
  --hightlight-color-1: red;
}

#009900 scores 3.78:1 against white. At the 12px it is used at, WCAG AA wants 4.5:1. The red used for urgency scores 4.00:1, and the metadata greys score 3.36:1, 2.32:1 and 2.14:1. The two colours doing the most semantic work on the site are the two hardest to read. (The misspelt --hightlight-color-1, and the fact that it is set to the keyword red rather than a token, are fair evidence that the colour layer was never systematised.)

There is also no single brand green. The logo is a two-colour mark — a chartreuse #7abf00 and a forest #0e8239 — and neither colour appears anywhere in the site's CSS, which instead uses #009900, #336600, #006633, #009933, #339900, #0f8107, #038139 and #3f751c.

What I changed, and why

The one thing I refused to replace

Jinjiang's bookbase.php filter offers a seven-dimension controlled vocabulary: 范围, 原创性, 性向,视角, 时代, 类型, 标签. 性向 (romantic orientation: 言情 / 纯爱 / 百合 / 无CP / 多元) and 视角 (narrative point of view: 女主 / 男主 / 主攻 / 主受 / 双视角 …) are facets no Western reading platform offers, and they are exactly what "让小众读者也能够找得到小众 文章" requires in practice.

The information architecture is better than the interface it is trapped in. That vocabulary fails not because it is wrong but because it is delivered as unlabelled 12px dropdowns next to a 94px text box, where almost nobody finds it. In "Browse by category" on the homepage the same vocabulary becomes labelled chips at full tap size that filter the shelf live and announce the result in words. I kept the taxonomy and threw away only the widget.

Usability principles, and where each one landed

• Recognition over recall — every book is a card with a cover, not a line of 12px text; the same card shape is reused in every section so it only has to be learned once.
• Clear system status — "Add to shelf" updates the count in the masthead from anywhere on the page, filter state is stated as a sentence as well as a green outline, and every mock action writes to an aria-live region.
• Never colour alone — 连载/完结 carries a word, saved state reads "On shelf", reading progress shows a percentage beside the bar, and each ranking tab states what it measures.
• Target size — one --tap: 44px token sizes every button, chip and tab, so none can quietly drift under the threshold. The original's rows are 22px.
• Progressive disclosure — nine categories behind "Categories", five update rows before "Show all", two tags per card instead of nine pieces of metadata.
• Focus visibility — a 3px focus ring in blue, not green, precisely so it stays visible on the green buttons that need it most.

What is and isn't built

This prototype is the homepage, a detail page for each of the 25 novels, and this rationale — 27 pages. It is honest about the edges rather than faking depth.

• The reader journey is walkable end to end. Discover or search → evaluate a card → open the detail page → "Add to shelf", and the shelf count in the header follows you across all of it. Every book link goes to a real page: the live homepage has 14href="#" links and one href="javascript:" — focusable targets that go nowhere — and shipping that while criticising it would be incoherent.
• The reader itself is not built. Chapter lists are generated and say so on the page; pressing "Read chapter one free" reports that rather than pretending. Login and payment are mocked the same way.
• All content is invented. Every novel title, author name, blurb, chapter title and statistic is fictional. No text, artwork or data from the real platform is reproduced. Covers are generated from a per-novel hue in CSS rather than fetched, both to avoid infringement and because hotlinked images are how a deployed prototype dies.
• The category names and the 性向 / 视角 facets are Jinjiang's own, reused deliberately — they are the part of the design worth keeping.
• Search, filtering, ranking tabs, the bookshelf and the account menu are real and run on the mock data — search matches on title, author and tag, and "Browse by category" filters by category, 性向 and 视角 together.

What I could not verify

Rather than smooth these over: the founding month (August 2003) comes from Wikipedia and anniversary coverage, not Jinjiang's own page, which says only 2003. Tencent's stake is indirect, via 阅文集团 → 盛大文学 → 上海宏文, and the 50/30/20 ownership split comes from business-registry aggregators rather than a filing I read. The user and work counts are self-reported. I measured declared CSS values and byte counts, not rendered pixel geometry — so "37.4% of the document" is a share of bytes, not of screen. And I confirmed there is no HTTP-level redirect sending phones to m.jjwxc.net, but a client-side one could still fire in a real browser.

Nothing on this site is affiliated with or endorsed by 晋江文学城. It is student work, made because I like the platform enough to want its interface to be as good as its editorial values.