Start of a new online presence

It's time for more web design work and since I don't have a paying client right now I'm going to reinvent my own website. I've been studying reponsive (fluid) design and after spending hours looking at really cool websites I've set my mind on a new direction.

As I'm a visual person I'm still going to make graphic mock ups in Photoshop. Three in total; Each mock up will be set to a predetermined (pixel) width; 960, 768, and 480. These widths will be a milestones, breaking points of sorts. Using CSS media queries I will be able to check for viewport dimensions and display the appropriate layout.

This is a screenshot of a Google Chrome extension called "Window Resizer" it allows me to view any website at predetermined widths. It's a great tool for getting an idea of what a website might look like in different viewports. As it would be extremely tedious to create a layout for each one. I will only be focusing on three, the true responsive work will come later. Time for the mock ups.

Linking my Website to my Blog

When I first started designing the PSYPHER101 blue site. I created a blog layout. It looked nice, but then I came across the challenge of populating it with content and realized that I am ill equipped to create a blog that could even come close to offering the features I've grown accustomed to with blogspot.

The fact of the matter is that blogspot is my favorite blogging site. It works well and offers me a ton of features and the back-end is tried and true. Why re-invent the wheel?

So today I linked the blog via a URL link to my main nav. Then I went through the process of making it look like my own website. Imagine how surprised I was to find that blogspot features full HTML and CSS support! That's right. I was literally able to import the main navigation from my site and with a bit of modification I now have a blog that is linked to my site forward and backward.

I didn't even know it was possible to connect them like this. It's extremely useful as I will be able to recommend this approach to any client that wants to feature a blog on their site.

Now all I have left to finally call this project done is to write copy for my Privacy Policy page and the last 3 sliders on my home page. Today was a good day.

Oh... And the 49ers beat the Pakcers 34 - 28. A good day indeed.

The MySQL debacle

Yesterday I walked upstairs and skimmed my bookshelf for a book I haven't read in a couple of years. The title of the book is "PHP and MySQL Web Development" by Luke Welling and Laura Thompson 3rd Edition. I dusted off the 900+ page tome and brought it downstairs with me, with every intention that it would be my companion for the next few days... After nearly half a day of reading it, in a failed attempt to adapt the information to my own ends I closed it and thought... "Maybe later."

To be specific; The reason I went in search of this book was because I wanted to achieve a very technical, and very specific function for a page on my new site. The PSYPHER101 blue site. Allow me to explain. My site features a portfolio page. As of this writing the portfolio is still lacking in content. I have made an online portfolio before, a few times actually.

This time, however, I decided to challenge myself; as I have been doing from the inception of this project. Anyone who has been following the development of the "blue site" will know it started as a Photoshop layout tutorial and soon became an exercise in the conversion process. Once I achieved that goal I decided to evolve the project into a full fledged website and lately I've been allowing Web Design ideas to surface in my mind and trying to implement them on my own site.

All of this was happening dynamically and with great success; albeit not without some frustration. To be honest, I'm somewhat surprised that I've successfully deployed a considerable amount of JQuery plugins and PHP functionality, and that brings me back to the topic of this blog. The MySQL debacle.

For those of you that don't know MySQL is a database management system. It's extremely flexible and probably the most commonly used among well versed Web Developers. My goal with MySQL was to create a web gallery that would pull image locations from the database and populate the portfolio galleries dynamically. I know it's possible. I know it's been done before and I found a plethora of examples that made use of similar functionality.

Unfortunately, all of these examples and tutorials seemed geared toward developers with a considerable amount of experience working with MySQL, something I do not have. Now that I think about it, I don't know that I even got that far in the book in the first place. And this is why I decided to put this effort off until later. Mark my words; I will create a portfolio with dynamically generated content... Just not right now.

Torn Paper

Something I forgot to mention in the last post was that I swapped out the triangle pattern graphic that I used for the top and bottom edges of the content block with a graphic of torn paper. Along with swapping the image out, I improved the relative position. Before doing so I had 2 blocks of CSS code to manage the height of the content background. In those blocks of code I had a specific min-height attribute assigned.

The problem with the min-height was that if ever there was more content, extra text, or anything; the content would exist outside of the background and push the edge graphic (torn paper) down. effectively breaking the aesthetic of the site. I needed to find a way to make the content block scale automatically. I found out that by using the overflow property, and setting it to auto, with CSS, the block would scale on it's own.

This allowed me to remove the second chunk of CSS code.

The next challenge popped up when the overvflow property of the new content class selector caused the contact page to display a small scrollbar within the div. I dove back into the markup to try and identify the issue. My best guess had to do with the embedded Google map. I cleaned up some unecessary code and that seemed to fix it. I still don't know exactly why it happened, but I'm glad it's gone.

Now. The next problem I have to address deals with browser compatibilty.

Most web designers will agree that Microsfot Internet Explorer is considered the most archaic browser of the bunch.  It is always last to adopt new standards and for this reason, designers consider it the "lowest common denominator." As such, any website under development, needs to be previewed in Internet Explorer often.

I don't do this nearly enough. Instead, getting tunnel vision and forgetting all about it while I work out some new challenge. So today I checked the latest build in Internet Explorer and I've noticed a bunch of issues. First of all. The CSS3 animated elements don't work at all. I could go back and use JQuery to fix it, but I won't. They still have rollover swaps, just no fluid transitions. I'll consider that a win. Second, rounded corners on some boxes don't show up... I'm guessint that's also a CSS3 thing. Again, I'm ok with it as it's not a deal breaker.

The real issue is that the quickform (contact form) in the footer no longer has a placeholder. Anyone looking at this with Internet Explorer will not understand what each field expects. They might be able to figure it out, but it's not a good habit to assume these things. So I'm going to find a JQuery solution to this. I need to generate a dynamic placeholder that dissapears when focus is placed on the input. If I can do this then everything should work fine.

I added some web graphics to the services page. Next I will populate the portfolio section with a lightbox and then move onto writing copy for the categories.

Scrubbing the Markup

Yesterday I spent most of my day getting the contact form to function properly. A midst that effort I refined the appearance. It was not essential to modify the appearance, but more an exercise in CSS styling. Since this project is entirely my own, with no paying client, I take the liberty off experimenting.

I will say that I wish I had gone with the "one page" approach. This layout style is becoming more popular among developers, but it does have it's drawbacks. For now I will simply be content with the blue site.

Anyway... Scrubbing the Markup? Yes. Cleaning, more like. What I mean by this is that I broke each of the HTML pages into PHP segments. The header, content, and footer. The actual browsable pages will in fact be the middle, content, segments. The header will contain the navigation and all the traditional HTML elements that exist, including the head, title, and links.

The only drawback to this is that I now need to create a dynamic way for PHP to contain the appropriate title for the content page that is loaded. I'm sure there is a way I can declare a variable early and then define it depending on which navigation button is clicked, but not today.

What else did I do? Ah yes... So the contact form was more frustrating due to the fact that it exists in the footer of the website. A lot of what I worked on was a validation check, which ensure the information submitted at least matches traditional data conventions. For example, if someone wrote "blablabla" in the field designated Email: my form will return a message to them saying it's not a valid email address. The problem was that the error message existed directly above the form itself. It was absolutely possible for a visitor to miss unless they scrolled back down to the footer again, which is highly unlikely.

So how did I solve it? Simple; by using a cookie. What I did was download the JQuery Cookie plugin and then create a scroll position cookie that automatically sets the top of the page to scroll all the way down to the footer automatically. Then the next problem popped up. The cookie was persistent and when a visitor would click to go to another page, the footer would be automatically shown... Backwards.

I struggled with this, then stumbled on a solution last night. Delete the cookie as soon as it is read. Tada, no more cookie. So it is created, the page is reloaded, the cookie is read and the page scrolled, then the visitor can see the form error or success message, then the cookie is deleted, and the visitor can click to another page and read it normally.

The Contact Form

I found a high quality tutorial for creating an HTML5 contact form.

http://net.tutsplus.com/tutorials/html-css-techniques/build-a-neat-html5-powered-contact-form/

The tutorial makes use of HTML5 boilerplate, which is apparently a very flexible bare-bones template for web designers. I will definitely look into using this if there's any chance it could save time and lower development costs for me and for my clients. But, as with anything else that deals with web technologies, learning how to use it effectively will take time.

Regarding the contact form. I will follow along with the tutorial and make a functioning stand alone contact form page that isn't connected to the PSYPHER101 blue site (the name I've given the the project), but it will be connected to my info@psypher101.com email address. Once I get it to work I will attempt to peel away the layers of code and adopt form functionality to the blue site quick form, located in the footer.

In the mean time I will simply get the rest of the buttons throughout the site to animate like the ones on the homepage.

You can view the latest build of the blue site here: http://www.psypher101.com/web%20templates/portfolio2/

Rollover Dichotomy

The latest changes to the site/template have been extremely subtle and easy to miss. Yesterday I shared a CSS trick for creating rollover images. Then I did some research and found a way to animate specific attributes of a CSS class using JQuery and the color 2 plugin. I did that, spent a couple hours learning, and then, almost by accident, learned that CSS3 supports some animation functions of its own. These animation functions are called easing.  I’ve copied and pasted the code from the style.css file.

/* Rollover buttons */
.blue_button {
            color: white;
            padding: 7px 12px;
            text-align: center;
            border-radius: 5px;
            border: 1px solid #1e30da;
            background-color: #1e30da;
            box-shadow:  inset 0px 1px 1px rgba(255,255,255,0.5), 3px 3px 3px rgba(0,0,0,0.3);
            -webkit-transition: all 0.8s ease-in-out;
       -moz-transition: all 0.8s ease-in-out;
        -ms-transition: all 0.8s ease-in-out;
         -o-transition: all 0.8s ease-in-out;
            transition: all 0.8s ease-in-out;
}
.blue_button:hover{
            color: white;
            text-decoration: none;
            background-color: #333;
            border: 1px solid #fff;

}

This allowed me to remove the image buttons altogether and go with an optimal solution. Firstly, the new animation is fluid and looks amazing. It's not a toggle swap like the rollover. A CSS3 transition controls to animate the inner glow on social media buttons in the footer. Now it’s time to create a nice focus animation for the contact and newsletter form.

The WOW Slider Conundrum

Next on the agenda was the "Latest Works" column on the home page. The goal was to get it to animate in a similar fashion as the graphic slider, but not identically. This area of the website will feature the 4 most recent projects.  The challenge was to see if I could animate it using the existing code that I used on the graphic slider. I knew I would have to customize it, but wasn’t sure if I would have to make changes to the Javascript file. As it turned out I definitely would have and that is something I am not quite prepared to do.

I had my goal all but complete when I decided it wasn't good enough. The problem had everything to do with how the WOW Slider affects the HTML content differently from images. Images will fade into one another whereas text elements fade away before the new text fades it. This was inconsistent and jarring, to be frank. So I scrapped it and decided to start over. One thing I can be proud of is that I did not feel compelled to keep any of the HTML or CSS code intact. I did not even comment the code to disable it. I simply deleted it. Knowing full well that I would be able to start fresh and not be intimidated.

After a long break I downloaded the JQuery Cycle2 plugin to handle the animation effect I wanted for the latest works column. I was absolutely blown away by Cycle2. I had only been working with it for about 10 minutes before having the content animating exactly the way I wanted!

Open Source or Bust!

With Superfish installed it was time to get the navigation animated. There is a chaotic elegance when it comes to open source plugins. On the one hand, they are absolutely free and that counts for a lot. The downside, however, is that a lot of these plugins do not come with proper documentation to help someone less experienced make sense of what they are doing and that is where the beauty of the internet takes center stage.

When using an open source plugin it’s a good habit to do a group of searches and try to find websites, blogs, or forums that discuss the plugin. More often than not someone else, somewhere in the world, has run into the exact same problem you are having and yet another person has come along to aid them.

Regarding Superfish; Joel Birch is a genius. He wrote the plugin and is surprisingly helpful. I scoured the web for working examples of Superfish menus, inspecting elements and analyzing the code to try and make sense of what I was looking at. During this process I found numerous forums and blog post where Joel Birch himself chimed in to help shed some light on the plugin.

With the navigation menu finished I found the time to start on the graphic slider at the top of the home page. For this I used a plugin called WOW Slider. Unlike Superfish or other JQuery plugins, WOW Slider is a stand-alone application with a cost for using. The developer offers a free version, but this version has the logo and a link plastered all over the output. What I did instead, was use WOW Slider to create the look and feel I wanted. Then I dove into its source code to study the implementation. It took a few hours to get right. Eventually I got it done.

I decided I'm going to introduce a recurring theme to the graphic sliders of my website. It has been a couple weeks since I painted anything. I can justify doing a painting for the sake of my website. I am going to do a matte painting of an airborne vehicle superimposed over the majestic vistas that are now in the graphic slider. I am considering the Daedalus airship from my novel.

A Footer to Gather a Thousand Words

I decided to switch up the footer section from the original Photoshop layout. I removed the contact form from the contact page and created a new miniature form to exist in the footer. By being there it will persistent on every page. This will in turn allow people to contact me whenever they want. There is no way to predict when someone might feel compelled to do so and I would rather offer them a faster means to do so

The contact page will have physical contact information, but visitors will no need to go to that page to get in touch. I also added some social networking links. Another thing I have neglected, historically, is the use of social media. I use Facebook about as much as any other responsible adult. And given the flexibility and power of social media in today's commercial climate, I've reactivated my Twitter account and am making an active effort to "tweet" often. Oddly enough tweeting is not much different from posting a status update on Facebook. I do understand the impact of such social portals and any working professional would be wise to make the most of their network.

Re-designing the footer set me back a couple hours, but I think it is better this way. Sometimes a person has to take a couple steps back to take a few steps forward.

It took me a few days to finish the layout, including the home page. I contemplated adding content, but opted instead to focus on enhanced functionality. Using Javascript (JQuery to be precise) I plan to animate the graphic slider, all the form elements, the main navigation submenus, the "Latest Works" column of the home page, the buttons throughout the site, and clickable images. Tha will probably take me a couple days of work to finish.

I downloaded the JQuery Superfish plugin, to use for the dynamic animated main navigation. It is always difficult to customize someone else's code without notes. This is why programming, regardless of the complexity is mostly trial an error.

PSYPHER101 website facelift

Any of you that follow me on Facebook will know that I'm going through the process of completely redesigning my official website. The entire project is more about the journey than the destination. Granted, I want the final result to be absolutely functional and hit on every mark, it's the process that is the focus here.

I am an artist who is familiar with Web Design, but have never actually touted myself as an actual Web Designer. Now, however, as I am preparing to return to school with Web Design & Graphic Design as my focus; the technologies and commonly used practices are ebbing to the surface of my schedule.