A New Year, a New Design

A New Year, a New Design

Tuesday, July 9, 2013

It's been a while since I've updated. I've since gotten very involved in school; trying to better myself and the people around me. In doing so, I was introduced to a concept called responsive web design. Considering all the different types of devices people can now use to view a web page, it's now very important to ensure a page is designed to look sound on all these devices, including new ones to come. That is the reason for this new design which brought some new challenges to overcome.

Responsive design is generally activated with something called media queries; they are conditional statements looking for the viewport size. Basically, if the window you are looking at a webpage is a certain size, then apply these changes. A common change from a desktop viewport to a mobile viewport is from a defined content width to a percentage based one. The defined width is fine for large viewports and you can easily control how elements are placed in the space. The percentage based one for mobile allows the page to adapt to the size of the viewport. For example, if the width of the content is 100% and seen on a mobile device, a person wouldn't need to scroll to the right in order to see the content. It will simply move to fit inside the viewport. If this was a defined width and the viewport isn't as large as that distance, you'd need to scroll over to see content. There are many things to keep mind when designing a responsive web site and it really comes with experience in building a few of them that you understand what needs to happen.

But this design is different and a huge personal leap forward in terms of my ability to create functional designs for the web. My goal was to build a horizontal scrolling responsive website. As you can see (hopefully), I have achieved this goal.

The first major hurdle to overcome is to make the posts go in a horizontal line. Most people who deal with CSS know that the way this is accomplished is by floating the elements. However, this only works if the container for those elements is wide enough for them to line up in. Otherwise, this will just drop underneath. Almost how when you write a paragraph, the words will have to drop down to the next line because otherwise you'd go off the page. I'd need to make the width of the container very wide to accomodate the floated posts. However, the problem is I don't know how many posts will be on any page. That number is generated dynamically depending on several different factors. I would need the code to determine how many posts are on the page first before I could assign the width. This meant it was time for me to finally tackle JavaScript / jQuery.

The first thing I knew I wanted to do is only show one post within the desktop viewport. That means the margins between the posts would need to change depending on the width of the post and the width of the browser window. For example, if my browser window at one moment is 800px wide and a post is 600px wide there will be 200px of empty space. I'd like the space to be equal on both sides of the post, so I'll take the empty space value and divide it by 2 to get a new margin value of 100px. Now let's say there's 4 posts on this particular page. That means that the width of the container for the posts needs to be at least 600px times 4 (2400px) plus 100px times 4 (400px) + 100px; or 2900px width for the posts to line up correctly. To explain this a bit further, let's say a post in a window seems to have a left margin and a right margin. However, it could be said that the right margin of the first post could also be used as the left margin of second post and so on. So technically, all these posts need is a left margin of 100px each except for the end which will need its own right margin of 100px. So the formulas are:

(windowWidth - postWidth)/2 = newMargin
(postWidth * postCount) + (newMargin * postCount) + newMargin = containerWidth

Throwing these in a function that executes on resize of the browser, the values are calculated if the window size changes so the width of the container changes to fit the new dimensions. The next thing I wanted to do is make buttons to scroll directly to the next post. Many of the solutions I read about this used jump links to get to the next post. I just needed to have the button scroll horizontally a set distance; the distance of a post width and a new margin. So using a scrollLeft function and adding the postWidth and newMargin values together, the distance to scroll is generated depending on the window size and post size.

So with these two elements I thought I was pretty much done with coding the JavaScript (except for some cosmetic animations for the header and footer that activate when the vertical scroll bar reaches the top or bottom). But I overlooked a few things that I needed to fix. One of these things is something that probably wouldn't be noticed but I wanted to create a solution for it anyway. Here's a scenario: a person comes to the website and hits the button to scroll right to the next post. Now on the second post, the person resizes the browser window (for whatever reason) horizontally larger. The code will resize the margins to fit the new window size but it does not affect the scrollbar position. In other words, the posts will move to the right, offsetting the distance that was just scrolled to and thereby not keeping the posts in the center of the page.

The remedy for this was a bit tricky. First, I needed the value of the horizontal scrollbar using scrollLeft. I also needed the scroll distance; the one from the previous function adding a post width and a new margin together. Now I needed to know how many posts I was away from the scrollbar's starting position of 0. Generally it should be some whole value number of scroll distances away, since I should only be scrolling using the buttons. If I divide one scroll distance into the distance the scrollbar is, I'll get the number of posts that has been scrolled. So for instance, using the pixel values from before if I'm on the second post I should be 700px away from the starting point of 0. The third post is 1400px and so on. If I divide by one scroll distance unit, in this case 700px, then the answer will be the number of times scrolled or the post number that is currently in the frame. So if I'm on the third post or 1400px in, then my output would be 1400px / 700px or 2. The 2 here means that you are 2 scroll distances away from the starting point of 0. Now all you need to do is multiply the number of scroll distances by one scroll distance to get a new scrollbar position. Here's what the formulas look like:

postWidth + newMargin = scrollDistance
round(currentScrollPos / scrollDistance) = distanceNumber
distanceNumber * scrollDistance = newScrollPos

I round the division to get the nearest whole number and remove any remainders to keep everything centered.

The last new concept that I wanted to include was a design for the number of people who disable JavaScript. I used the noscript tag in the header with an additional stylesheet to simply design the site as a regular vertically-scrolling blog in the event a person's JavaScript is turned off. Yahoo! reported that about 6 million people who visit their site don't have JavaScript enabled. I felt this number was fairly significant and also a good concept to keep in mind about preparing the web for all different types of users with different types of devices.

It took about a week from concept to conclusion but now I'm very happy with the result of this hard work as it displays what I am capable of.