# Article Design Options

## 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 example, [this page, which is post9](http://testcode.soupmode.com/article/post9.html), listed below.

## Previous Text Descriptions with New Links

Minimal layout.

Responsive Design.

Uses Google fonts or default fonts.

These four examples use the jQuery plugin [mmenu](http://mmenu.frebsite.nl) for the sliding menus.

• [Article One](http://testcode.soupmode.com/article/article1.html)
• [Article Two](http://testcode.soupmode.com/article/article2.html)
• [Article Three](http://testcode.soupmode.com/article/article3.html)
• [Article Four](http://testcode.soupmode.com/article/article4.html)

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.

• [Article Five A](http://testcode.soupmode.com/article/article5a.html) - Droid Serif, 1.2em
• [Article Five B](http://testcode.soupmode.com/article/article5b.html) - PT Serif, 1.2em
• [Article Five C](http://testcode.soupmode.com/article/article5c.html) - Merriweather, 1.15em
• [Article Five D](http://testcode.soupmode.com/article/article5d.html) - Merriweather, 1.2em
• [Article Five E](http://testcode.soupmode.com/article/article5e.html) - Open Sans, 1.2em
• [Article Five F](http://testcode.soupmode.com/article/article5f.html) - Open Sans, 125%
• [Article Five G](http://testcode.soupmode.com/article/article5g.html) - Open Sans, 130%

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.

• [Pizza 1](http://testcode.soupmode.com/article/pizza1.html) - Open Sans, 125%
• [Pizza 2](http://testcode.soupmode.com/article/pizza2.html) - Merriweather, 1.2em
• [Pizza 3](http://testcode.soupmode.com/article/pizza3.html) - Droid Serif, 125%

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](http://testcode.soupmode.com/article/tb1.html) - Open Sans, 125%
• [TB 2](http://testcode.soupmode.com/article/tb2.html) - Open Sans, 1.2em
• [TB 3](http://testcode.soupmode.com/article/tb3.html) - Merriweather, 1.15em
• [TB 4](http://testcode.soupmode.com/article/tb4.html) - Merriweather, 1.2em
• [TB 5](http://testcode.soupmode.com/article/tb5.html) - 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](http://testcode.soupmode.com/article/post1.html) - default web fonts Georgia and Arial, 1.3125em
• [post 2](http://testcode.soupmode.com/article/post2.html) - Libre Baskerville, Open Sans, 1.2em
• [post 3](http://testcode.soupmode.com/article/post3.html) - Droid Serif, Open Sans, 1.2em
• [post 4](http://testcode.soupmode.com/article/post4.html) - Open Sans, 1.2em
• [post 5](http://testcode.soupmode.com/article/post5.html) - Lora, Open Sans, 1.25em
• [post 6](http://testcode.soupmode.com/article/post6.html) - Open Sans, 125%
• [post 7](http://testcode.soupmode.com/article/post7.html) - Open Sans, 125%
• [post 8](http://testcode.soupmode.com/article/post8.html) - Open Sans, 125%
• [post 9](http://testcode.soupmode.com/article/post9.html) - Open Sans, 125% - FAV

Simple pages that uses Georgia and Arial:

• [simple 2](http://testcode.soupmode.com/article/simple2.html) - FAV
• [jr2](http://testcode.soupmode.com/jr2.html)
• [jr3](http://testcode.soupmode.com/jr3.html)
• [jr4](http://testcode.soupmode.com/jr4.html)

Slightly modified versions of this already-brilliant and humorous [web page](http://motherfuckingwebsite.com)

• [mfw.html](http://testcode.soupmode.com/article/mfw.html)
• [mfw2.html](http://testcode.soupmode.com/article/mfw2.html)
• [mfw3.html](http://testcode.soupmode.com/article/mfw3.html)
• [mfw4.html](http://testcode.soupmode.com/article/mfw4.html)
• [mfw4b.html](http://testcode.soupmode.com/article/mfw4b.html)
• [mfw4c.html](http://testcode.soupmode.com/article/mfw4c.html)
• [mfw4d.html](http://testcode.soupmode.com/article/mfw4d.html) - FAV