Basic, simple browser layout. So when you click on an image for an article it goes to another page with the actual article on it. There is a side-bar on the article page that when you hover over it, it grows bigger into a menu bar. Then you are able to navigate to next or previous article, or home... etc.

For the tablet version it is the same concept just that the article scrolls in from the left when you click on an image to go to whatever article you choose. It also has a sidebar menu for navigation.

The smartphone version the same, but the article will drop in from the top. The menu appears from the bottom when you touch the menu arrow button.

Here is my rough grid layout below. This view would be a desktop view. The menu bar at the side comes in when your mouse arrow hovers over the side button. The button would be pushed at the side on a tablet and at the bottom with a smart phone. My idea so far is to have the site to be responsive. Elements will shrink and get closer when the screen size gets smaller as in a tablet. They will stack if needed, especially on a smart phone. So for instance the search bar would go underneath the sign in section, the menu would be accessible at the bottom, and the images would be stacked on top of one another.

Some mock-ups of the news reader final site for web browser. When an article is clicked, the article appears as a modal window and is able to be scrolled down for more content. When hovered over to the left or right the arrow icons appear to go to the next or previous article. When the share icon is hovered over, facebook, icon and mail icons will appear.