Infinite Parallax Experiment part 1: Setting up

I’ve always loved the cute little parallax effects GitHub has on their site.  The three I’m specifically talking about are their About, 404, and 500 pages.  Aren’t they adorable?  These are based on mouse position, where a lot of the common parallax effects seem to be based on the scroll bar.

I showed this to my friend Rosemary a few weeks ago, and she mentioned that it would be cool if it there was even more of a 3D effect by moving you “forward” infinitely, so that whenever you clicked, the front-most layer disappeared, the other layers moved forward, and there were new elements in the back layer.  It’s been on my mind since then, so I decided to play around with it and make it a quick little experiment.

So far it’s also been a good chance for me to become more familiar with GitHub (and Git!) and jQuery.  I’m putting the source for this experiment in this infinite-parallax GitHub repository, and you can see what I’ve done so far here: Infinite Parallax.

It isn’t much yet.  So far I’ve just made a test background image for the landscape, and had the image move around based on the mouse position.  When the mouse is at the top of the window, it shows the top of the background image, and as the mouse moves down, the background image moves up, so that when the mouse is at the bottom of the window, it shows the bottom of the background image.  The x-movement is kind of arbitrary right now, as I don’t know what the final image will be, and it will probably need to be tweaked based on that.

My scribbly notes

My scribbly notes

Clicking on the landscape just pops up a temporary alert I put in the function where I will be manipulating the different layers of images.  I still have my test numbers in there, so right now the landscape is showing mouseX, mouseY, and the x-position of the background image.

Next step I’m just going to put in three layers of images and play around with the x and y positions to see how far to move them for it to look okay.  Then after that, putting in random images with some random movement offsets on each, and finally removing/moving/adding layers on click!

The hardest thing will be deciding what to theme this experiment and what images to use.  I took a look at my Inspiration Pinterest board, and I think I’ve decided to use the color scheme in this pin.  Maybe a foresty theme with trees and bushes that have purple berries, and some grey bunnies or something.  Who knows!  Rosemary also showed me how to “draw” (…or rather, trace xP) in Illustrator, so I think I’ll sketch simple cute little images and trace them in Illustrator.

My first (messy) tracings!

My first (messy) tracings!

HTML&CSS by Jon Duckett, Above the Fold by Brian Miller

I was reading these two books at once and finished them around the same time, so I figured I’d write about both at once.

I found out about HTML&CSS by Jon Duckett because someone posted about it on Reddit.  Although I already knew HTML and CSS, I couldn’t help buying it – the photos on the website make it look so beautiful!  I figured that I would benefit from re-learning HTML and CSS in a structured way, since I had taught them to myself before.  It’s even more gorgeous in person!  The HTML and CSS are color-coded, each type of page (Introduction, Reference, Background, Diagram, Example, and Summary) has its own layout, and even the example pages (showing the result of the HTML) are beautiful.

It’s a beginner book, so it start off with just HTML.  It describes how HTML works, then goes into different tags, introduced in related categories.  It’s very simple and very clear, with lots of diagrams and examples.  The book brings up some older HTML practices that are no longer used, but it points out that they are old, and is explaining them in case the reader comes across them when looking around the internet – I really like that it does that.  Things change so quickly, but I think it’s important to still know where things came from and how things evolved.  It also goes into a few new HTML5 tags, but doesn’t delve into them too deeply, and just tells the reader to look out for them.  The examples of the HTML code are so pretty.  Instead of simply displaying what a browser would display, there are photos of a laptop or a monitor, showing the site in a browser.  The background of the photos are beautifully-decorated rooms, and it just makes looking at plain HTML a lot more enjoyable.

The second section is about adding CSS to the HTML that had already been taught.  It also introduces CSS in related categories, so it’s easier to digest, and easy to follow.  The example pages that are created slowly become more complicated and realistic.  By the end a full web page is created.  The relevant example code is color-coded and easy to follow, and the code is even available online (although I personally never checked it out).

The last section is some random website-related information, giving some quick information about the process of creating and maintaining a website, such as designing for the visitor, wireframing, visual design, and SEO.

Overall I think it’s a great book to learn HTML and CSS as a beginner, especially because it’s very visual and you are using HTML and CSS to create something visual, so it makes a lot of sense to present the material to you in well-organized and understandable visual examples.  The examples aren’t contrived and are real examples of situations in which you would utilize the code.  And of course, it’s so enjoyable to look at!  In general I think that it’s very hard to learn coding languages just from books without trying them out, so I think it’s awesome the examples in the book are available online to play around with and explore.  I didn’t check them out just because I was reading the book not to learn, but to refresh.

As I went through it, I actually learned that I lot of things I thought I knew are obsolete, and there are a lot of new tags and conventions used today that I had no idea about.  It was a great refresher, and it’s made me remember how interested I’ve always been in web design and web development.  I’ve decided to follow up with an HTML5 book and a CSS3 book to get caught up on the latest of HTML and CSS, and then take a look at both again from a design perspective.

I can’t remember how I found out about Above the Fold by Brian Miller – probably some Reddit post or Quora answer – but I’m really glad I found it.  Before I started working in my current team at work, I never too much thought to user experience and design, but I’ve come to realize that they’re really important, and if I don’t have to put much thought into them when interacting with a website they were probably well-done!

This book is also split into three sections.  The first is Design and Typography.  However it’s not limited to those topics and includes a lot of relevant information that’s useful and pretty interesting.  For instance, it explains how things such as a computer’s color depth, monitor resolution, operating system, browser type, and connection speed will affect how they see your site, no matter what you do.  Something I found really fascinating in this section was the Brief History of Web Design, split into Web 1.0 (1993-2002) and Web 2.0 2003-present).  It included screenshots of websites from those previous years – Yahoo in 1994!  Amazon in 1995!  Apple in 1997!  Google in 1998 (which, by the way, doesn’t look too drastically different)!  It’s cool to see how much things have changed.

The second section is Planning and Usability.  This goes backwards to what you should be considering before your design – the visitors, the client, wireframing, prototyping, and usability.    I think this is the kind of “background” stuff website visitors never see, and never really consider.  There’s a lot more that goes into a site than I thought!

The last section is Business Value, and is about SEO, ads, and marketing.  Since I’m reading this book as a personal interest, I didn’t pay too much attention to this part, even though it was very interesting.  For me personally, it’s good to know about, but I don’t think I would ever be making sites professionally in an environment where I would need to be an expert in these areas, just making sites in my free time for myself :)

I think this book was awesome.  I got a taste of all the important things to consider when designing a site, and it was all very well-presented.  Nearly every page has a screenshot of an existing site that exemplifies the concept being discussed.  Not only was I learning these concepts, I got a lot of ideas and inspiration from the screenshots.

One interesting thing I noticed as I was reading the book is that I get very different impressions of a site when viewing it in a browser versus the entire length at once in a book.  Seeing the entire length makes it feel more cluttered to me – a lot thrown at me at once.  However seeing it at once does give me a better sense of how elements of a site tie together into one experience.

I’d suggest both of these books to anyone interested in web design.  They’re both not only informative, but great to look at, easy to read, and well-designed.  I wish computer science textbooks were presented like this!

The book that started it all: How I taught myself HTML in 4th grade

I got my new book HTML&CSS in the mail yesterday.  It’s a very basic introduction to HTML and CSS, but I got it even though I know both because it is absolutely gorgeous.  I wish more books taught like this – I’ve actually been searching for more books on web design like this.

Anyway, as I started reading through it, I realized that a lot of HTML I thought I knew is obsolete.  For instance, apparently using <a name=”blah” /> is now obsolete in HTML5, and you should instead specify anchors for links with id attributes.  I didn’t even know you could specify anchors with id!  At that point I realized that my HTML is way outdated.

Why?  Because the HTML I know is what I taught myself from a book in 4th grade.  After this one semi-structured introduction to HTML, everything else I picked up as I needed it, and I definitely haven’t been keeping up with new specifications.  I have a very haphazard knowledge of HTML, with a lot of gaps.  Same with CSS – I don’t think I even bothered with CSS for years because that intro book never mentioned it.  I’ve definitely been able to get by with what I know, but I think it’s time for a more structured refresher – and to get myself updated to 2012!

I was surprised to find that I actually had that book from 1998 (14 years ago!) in my bookshelf.  I must have missed it when I was unpacking – otherwise I would have reminisced over it for hours.  Take a look at how awful it looks:

I got it from a book order in 4th grade.  Remember those?  I was always so excited to pick out new books to get.  I have no idea what possessed me to get this book, but I’m glad I did, because I’m pretty sure this book is the reason I’m a software engineer today.

Here’s the back cover.  I cringe just looking at that example site.

I’ve already checked, that website doesn’t exist any more.

I’ve been on a book-buying kick lately, mostly about web design.  I figure the money will be worth it in the long run since I’ll be learning something I have a lot of interest in, and I haven’t sat down and read for a long time.  I still have five or so fiction books in my bookshelf that I haven’t gotten to, but at this point in time I’m more interested in learning.  And reading is dying out!  Why don’t people relax and just read any more?  That used to be all I did when I was little.  Now instead of staying up really late reading I stay up really late browsing the Internet.

The HTML&CSS book is so pretty.

Even when they show the example pages that correspond with each code snippet, they don’t just show the page – they display them on different monitors in beautifully decorated rooms.  I’ve even been getting some book suggestions from the books they show in the background.

I also got Above The Fold a few days ago.  It’s also really pretty, and there’s a lot of fascinating background in it.  I never thought about the fact that tabbed browsing was based on file folders, although it seems obvious now that I know.  It talks about the structure of web pages, but it shows a lot of them full-length.  Web pages look so different when you look at them full-length versus the height of your browser.  They feel so much more cluttered to me when I see them full-screen – but then I guess that’s the whole reason the “fold” is important!

I’d also been reading The Design of Everyday Things before I got into this big book kick, because my user experience friend recommended it.  Before I started work on my current team I never thought about user experience at all – but now it seems so important.  I guess if I don’t have to think about the experience of doing something while I’m doing it, it was probably designed well enough that it was natural and made sense.  On the other hand, the book says that when something goes wrong, people tend to blame themselves rather than bad design.  I don’t think I believe that 100%, because some people are just retarded, but if the majority of people have difficulties, something is probably wrong.

Another book I recently bought but haven’t started is a little different… I got I Am Jackie Chan, for no reason other than that Jackie Chan is awesome.  Sadly, I had to get a used book because they apparently don’t print it any more.

I’ve decided to set aside a specific amount of money each month for my “splurgy” purchases, and these books fall into them.  I’ve already ordered Responsive Web Design – now that people browse from phones so much a responsive site is pretty much expected.  Here are some other books I’ve decided to buy so far, in the order I want to get them:

After I read more I’m going to stop being lazy and actually design BaconFriedRice instead of using pre-made templates.  Yes, I’ve been saying that for a long time, but now that I’m reading all these I want to do it right.  I’m excited to get to that point!  Now off to read some more!