You're viewing old version number 21. - Current version

9 min

Article Design Options - README

Mar 2017

I used my Wren static site generator to create more test pages at my Wren test site. I didn't copy all of the HTML pages into the directory for this repository. Instead I assembled the links to the pages in this one post:

The links to some of the pages:

Safe fonts

Mostly safe fonts

Verdana and Courier New did not exist on my Linux Mint Ubuntu desktop system. I had to install a font package or something to enable those fonts.

Even the CSS that I use at my Wren-built sites http://wren.soupmode.com, http://birdbrainsbrewing.com, and http://boghop.com feels like it could be simplified. This test page attempts to do that, but I always want additional formatting. It's hard to resist adding more CSS.

The above test page included the following CSS:

font-size:       1.2rem;
line-height:     1.62
font-family:     sans-serif;
color:           #222;
letter-spacing:  .5px;
word-spacing:    1px;

Feb 2017

Recently, designers met to re-imagine how news might look for newspaper websites. Some thinking included the design for the single article page.

I used Zeldman's recommendations with some adjustments to create this test page. Both pages were created, using my Wren static site generator.

And since my last update here 13 months ago, I assembled a few years worth of thoughts, rants, and links into a series of posts that begin at this page: Manifesto for Lightweight Web Pages - My screed against web page bloat.

My http://boghop.com site attempts to apply ideas espoused by others and myself in that manifesto mess. Currently, the Boghop default font type is Verdana with Helvetica and sans-serif as backups. The font size is defined as 21px, which is a bit large-ish, and that's fine by me, across all devices. I used to use a light grey background, but I switched back to an all white background with the text color defined as #222. High contrast. At other websites, I get annoyed at the text that is too light grey and the text that displays tiny on phones even though the sites were responsively designed.

Jan 2016 Update

In March 2014, I began trying to create my perfect or preferred article page. I've added new options since. And in January 2016, I added a few more versions.

Starting in 2015, I moved away from using any JavaScript on an article page for a user who is not logged into the site, and that includes no JavaScript-based hamburger icon menus.

I simplify the navigation options. Now I prefer to restrict the links to the home page that contains the stream of posts, and keep the article page as simple as possible with nothing extra except a link to the home page.

I don't see the point of cluttering the top nor the bottom of an article page with header and footer links for navigation or additional info. I say leave that to the home page stream.

For an example of my most recent thinking, I refer to this page, which is post9, listed below. In a month or so, I'll probably prefer something else, such as using no outside fonts and staying with fonts like Georgia and Arial. Fickle.

Sep 2015 Thoughts

In a Sep 2015 comment at my message board toledotalk.com, I expressed my prefs for what I would like to read at a newspaper's website.

BEGIN:

I'd pay nice money for a Blade subscription if the article pages looked something like this:

http://toledotalk.com/last-alarm.html - (blatant copyright violation. will remove later.)

... instead of this:

http://www.toledoblade.com/Police-Fire/2014/01/31/Last-Alarm-rings-for-fallen-heroes.html

... and instead of this:

http://m.toledoblade.com/Police-Fire/2014/01/31/Last-Alarm-rings-for-fallen-heroes.html

I don't need a printed paper version. I don't need an app. I prefer one website that responds comfortably on all devices and loads fast with no mountains of JavaScript bilge, no huge irrelevant images, no ads, and no trackers and other gobbledygook that bog down page load speed.

It would be nice if the article page contained a large-ish font size and a lot of negative space. I don't understand why some responsively-designed websites use a tiny, uncomfortable font size on mobile.

I see no need for a bunch of navigation links in the header and footer areas of an article page. No fixed areas. No hamburger or similar menu icons, like I use here. The only link needed is a link to the home page. The reader can find all the site's link cruft on the home page.

Outside of links contained within the article, the only other acceptable link would be to a separate page that contains the Facebook comments, pertaining to the article. If I'm a buying a subscription, I do not want to see Facebook comments loaded on the same page as the article because that slows down the page load and fouls the overall look of the page.

On an article page, I want at least 99% of the page to focus on the article: Title, secondary title, author, contact info, publish date, and content.

Give non-paying customers the hideous views, and give subscribers something worth buying. Until this utopia exists, I'll continue reading with JavaScript disabled, which improves the web-viewing experience a lot.

END:

The number of responsively-designed websites built by big publishers that use a tiny font size for the phone display is alarming. This bad design produces a miserable reading experience. It makes no sense, unless it's intentional to encourage people to download yet another app.

I don't know why it's a trend to reduce the font size as the screen size gets smaller. Why not keep the font size the same all the way through? Vox.com provides a comfortably-large font size when reading the site in portrait mode on the phone. I wish more sites did the same.

It's also irritating when web designers prohibit zooming in and out of the page and prohibit the ability to read the site in landscape mode.

Some of these uncomfortable, responsively-designed sites would provide a better user experience if they were built like it was 1995. At least I could view the site in landscape mode on the phone and zoom into the page for easier reading.

No CSS and no JavaScript is actually an improvement for some overly-engineered sites. In my opinion, the problem is that too many website publishers/designers/developers focus on extravagance instead of elegance.

Older Text Descriptions with New Links

Minimal layout.

Responsive Design.

Uses Google fonts or default fonts.

These four examples use the jQuery plugin mmenu for the sliding menus.

I prefer the article page not contain a menu navigation area nor a hamburger icon menu selection. And I now prefer that the header area not be fixed. I want the article page to focus on the content. The article page can contain a home link at the top and maybe a search link. The site's menu options can be listed on the home page. I'd like to see the article page kept clean.

These pages use Font Awesome icons for menu links at the top corners. Google Fonts are used. The font family and the font size for the main content area for each article are listed below. More font information is contained at the bottom of each web page.

These pages use real text from my pizza-making blog post, except that the text contained within the sample pages below is incomplete and out of order. It's not the entire post. It's just placeholder text. The same photos are used as placeholders too.

These sample pages contain an actual Toledo Blade news story. I do not have their permission to reproduce the content, so this may not stay here. I wanted an example of real news story. I would pay for content displayed like this.

Here's the Toledo Blade story
http://www.toledoblade.com/Police-Fire/2014/01/31/Last-Alarm-rings-for-fallen-heroes.html

My examples:

  • TB 1 - Open Sans, 125%
  • TB 2 - Open Sans, 1.2em
  • TB 3 - Merriweather, 1.15em
  • TB 4 - Merriweather, 1.2em
  • TB 5 - Droid Serif, 1.2em

I like the font family and size setup for numbers 2 and 3 the best. I think that site owners should include a text-resizer option on their sites, so that users can adjust the text size, according to their eyes and the devices that they are using.

It's easy to change the font size for a web page when using a browser on a desktop or laptop, but most reading today is done on a mobile device. Site owners should make it simple for users to change the font size when the page is being viewed on a phone or tablet.

More examples:

  • post 1 - default web fonts Georgia and Arial, 1.3125em
  • post 2 - Libre Baskerville, Open Sans, 1.2em
  • post 3 - Droid Serif, Open Sans, 1.2em
  • post 4 - Open Sans, 1.2em
  • post 5 - Lora, Open Sans, 1.25em
  • post 6 - Open Sans, 125%
  • post 7 - Open Sans, 125%
  • post 8 - Open Sans, 125%
  • post 9 - Open Sans, 125% - FAV

Simple pages that uses Georgia and Arial:

Slightly modified versions of this already-brilliant and humorous web page

From JR's : articles
1632 words - 9712 chars - 9 min read
created on
updated on - #
source - versions



A     A     A     A     A

© 2013-2017 JotHut - Online notebook

current date: Nov 16, 2024 - 1:32 p.m. EST