Tyler Wolff » projects http://tylerwolff.com Tyler Wolff's web design portfolio site. Includes examples of current work and future concepts. Sun, 07 Nov 2010 20:59:08 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 New INK Design Website http://tylerwolff.com/2010/07/new-ink-design-website/ http://tylerwolff.com/2010/07/new-ink-design-website/#comments Sun, 04 Jul 2010 22:31:37 +0000 Tyler http://tylerwolff.com/?p=533 During the past few days I had the chance to remake the INK Design website for my good friend Kamran Samimi, a printmaker and graphic designer from Honolulu, Hawaii. We brainstormed on a bunch of out-there ideas to present his work but eventually settled with something somewhat similar to how this site is laid out. Kamran had already been putting some of his work on a Cargo Collective site, one of the coolest web frameworks out right now, but he had reached the limit to posting as a free user and he didn’t want to pay for it since he has his own website. I thought why not take the code base from my current site and modify it to make it more project based, similar to how many cargo collective sites are. This is how it turned out:

INK Design Website

How it was made

Just like this site, the INK Design website is powered by WordPress and the Carrington framework. WordPress handles all the content and Carrington handles how the content is put together and displayed to the user (more about Carrington in this post). Since my site already has many of the features Kamran wanted in his site like in-page ajax loading of posts I built upon what I already had, changing some CSS here and modifying some Javascript there. Getting a test site up was a fairly quick process. The good thing is, while I was creating the theming for the site, Kamran could post projects to the site simultaneously.

INK Design website ajax loading

In-page loading of project posts

Once the site was functioning well enough I decided to give it some INK Design flavor. One of the original concepts for the site was to have one giant canvas that moved around depending on what type of projects you wanted to see and for this Kamran created a huge spaced out image of blending colors and designs to act as the background. I took this giant image and cut it up into ten smaller ones to use for the background of the site design we had created. I found a pretty nifty plug-in, jQuery Backstretch, that provided exactly what I needed to display a fixed full screen background at various screen resolution sizes. I used this to create a randomized full screen background generator. If you refresh the page or navigate to other pages you’ll see it in action. The good thing about the backstretch plug-in is that it loads up the image after the page has rendered decreasing page load time.

The one big problem in this site is that it uses a couple fixed position elements which do not work well on mobile devices like the iPad. For instance the background will scroll up on mobile safari revealing a basic gray colored background when it should remain fixed. Also, the layout gets squished together a bit more than it should on mobile browsers. Hopefully one day when I have more time I’ll be able to fix these issues.

All Tools Used

Update: this site is also featured on the Carrington framework’s homepage!

]]> http://tylerwolff.com/2010/07/new-ink-design-website/feed/ 3 New Project: BraxtonsDiary.com http://tylerwolff.com/2010/03/new-project-braxtonsdiary-com/ http://tylerwolff.com/2010/03/new-project-braxtonsdiary-com/#comments Mon, 08 Mar 2010 01:36:52 +0000 Tyler http://tylerwolff.com/?p=460 I just finished setting up a photo / music journal site for my friend Braxton Olita. Check out the site, or learn more on the projects page.

]]> http://tylerwolff.com/2010/03/new-project-braxtonsdiary-com/feed/ 1