New PSYPHER101 Business Card

There has been a specific plan laid out since I decided to renew my personal brand, PSYPHER101. The entirety of which revolves around marketing myself to new local clients. I knew it all started with the web site. I did not, however, know what my new site would look like. Not until recently, that is.

So the site is done. You're actually looking at it now. No... Not blogger or blogspot. But scroll up and you'll see the navigation. Go ahead, click something. I've integrated the navigation to my blog and as such have effectively added a dynamic blog management system, if not the most dynamic blog system, to my site.

Now comes the printed collateral. The brochure will obviously reflect the site in terms of content, but I digress. The name of this post is "Business Card." So let us talk business card.

The business card concept began with the front, or is it the back? I'm not sure. Anyway. It started with this side. A simple texture with a lighting effect applied. The same grey texture from the main background of the website. I then added the PSY101 logo and applied a mask in which I stamped a moon texture. This in turn inspired a myriad of filters to further communicate the idea that the logo itself was illuminating the card. The drop shadow contradicts any suggestion that the logo emits light, but helps pop it out for the initial read. There was no set goal. I simply wanted this side of the card to look cool. Originally I had my web address underneath the logo, but I felt it detracted from the simple clean look that you now see here.

Upon completion of the front, or back, or whatever, I moved onto the business end of the card. I looked at a few references and found a layout that I really liked. In keeping with the theme of the PSYPHER101 "blue site" I applied a light blue overlay to the noisy background and then changed the color of the overlay on the logo to match the blue from the header on the website. Overall the two sides complement each other while featuring reversed contrast.

GiGi's Bridal 2013 Website Case Study

The Overview

GiGi’s Bridal is a small boutique style shop located in downtown Fairfield, CA. The business specializes in wedding apparel including; Bridal Gowns, Brides Maids Dresses, Mother of The Bride Dresses, Flower Girl and Special Guest Dresses. GiGi’s Bridal also sells various Accessories including; Veils and Jewelry.

Other types of events that GiGi’s provides apparel for include Quinceañera and Sweet Sixteen celebrations.

GiGi’s Bridal has been open for over a decade and has a steady stream of customers. It does not, however, compete with larger chain stores.

The Challenge

I was brought on to remedy a poorly executed website. Nothing about the existing site met web design standards. There was no clear artistic direction, content was dated, and current web design trends were not employed. There were even some vendors and dresses featured on the site; that GiGi’s Bridal no longer dealt with or offered.

Furthermore Guadalupe Ochoa, owner and Operator of GiGi’s Bridal, had no access to her own web server. The domain was registered and owned by the previous web designer. Guadalupe had no contact information with which to reach the previous web designer. This presented a significant logistical problem I had to resolve.

The Solution

The website needed updating. Simply changing content and updating lists would not be enough as the site failed to engage an audience. I needed to start completely from scratch and deliver an aesthetic that could accomplish this.

The Process

Below is the plan for the site development:

§ Conduct a preliminary interview of the client’s goals and establish an accurate needs assessment.
o  The needs assessment informed me of the look and functionality that Guadalupe wanted. She showed me some examples of competitors and what she would like to see reflected on her own website.
(Approx development time: 1-2hrs.)

  
§ Purchase a non-exclusive licensed website template that met most, if not all, of the desired visual and interactive elements for the client.
o  Non-exclusive template licenses usually cost less than $100, exclusive template licenses range from $1,000-$3,000. Based on the needs assessment I was able to offer the client a choice from 3 different templates.
(Approx development time: 4hrs.)

§ Customize template to fit the desired color scheme and content layout, using the 960 grid.
o  During this phase I manipulated the CSS style sheet, which affects the entire website; setting font type, header style and many other visual elements. 
(Approx development time: 15-20hrs., 30hrs including proofs and revisions)

§ Establish a standard page layout and add content.
o  The page layout was handled through applying the 960 grid. I requested content from the client. In most projects it is the responsibility of the client to provide that content, but Guadalupe had a difficult time. She supplied a handful of books that contained images. I scanned and downloaded, from the internet and vendor websites, over 100 images. I resized the images and created thumbnails for them to deploy in a JQuery powered FancyBox gallery viewer.
(Approx development time: 80-90hours)

§ Design a functioning contact form that allows clients to select the date of their event.
o  Using JQuery and a calendar Plugin from the JQuery website, I was able to develop and deploy a working contact form that would allow GiGi’s Bridal to gather and organize website generated leads more effectively.(Approx development time: 6-7hours)

The Result

This project was finished with great success. The client was extremely pleased and now, proudly shares her website with customers.

Syria

I'm curious... A lot of people have been arguing that we shouldn't attack Syria. I saw the video of who we would be allying ourselves with out there and I agree those guys look crazy. Some have claimed we would be helping Al Qaeda and if that's true then I agree we shouldn't be involved in any conflict where we would give aid to the organization that murdered 3000 innocent people almost 12 years ago... But is that the only argument?

Allow me to play Devil's Advocate for a moment. How can we, the United States, be OK, as one of the most enlightened nations in the world, with allowing thousands more innocents to be murdered. Granted they are not Americans citizens, they are humans. And then there's the potential threat of allowing the use of chemical weapons to go unchecked. Is there not a "lesser of two evils" here?

I guess at this point we will see how things play out. Congress knows where it's constituents stand and President Obama has a clear goal; time for some politics.

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.