Auto scroll to:

Templates? We don't need no stinking templates...

This website itself is the most technically advanced website I've created because of its responsive design, conditional loading, and an animated interface. It creates a User Experience (UX) through a simple User Interface (UI) with the implementation of smooth animations, mobile support, and diversity while maintaining a memorable experience.

This website was created entirely from scratch (well, excluding the animation libraries used, but hey, that's just to save time, and time is money!) and most of it was hand-written. Whoa, wait, hand written you say? That's correct, tools like Adobe Dreamweaver can make life a lot easier; however, when push comes to shove, nothing beats the freedom of typing out exactly what you want and knowing that it will work the way it should. Let's face it, no client or business is the same – each has its own brand, image, and personality. Those pre-packaged "one template fits all, make your own website in 10 minutes or less!" advertisements that seem to be so prevalent these days just can't cut it for a real professional that truly cares about his or her web presence and its importance. Those drag-and-drop websites are overly simple and extremely limited. To really show off your assets, you must go with full customization to meet every single one of your needs.

Responsive Design = Mobile Support

This website is built using a responsive layout that automatically changes based upon your screen size. This means that when you view this website, regardless of whether it's on a tablet, smartphone, or computer, it will look as it should. The use of native CSS3 media queries means that no JavaScript device-detection is needed; this decreases load times and eliminates the need of a "mobile version" website. Many websites have a redirect script that determines a visitor's device and redirects to the mobile site, which can use up more of the user's mobile data plan. This site is, in fact, the "mobile version." Bet you couldn't tell, eh? Try it out yourself: shrink this window down and it will automatically reformat itself based on window size to make the UX as clean, simple, and easy as possible. The only difference is that when you load the window on a desktop, it keeps all the scripts needed to continue to make it look great on a monitor, even though the layout changes. Conversely, if you load the website on a mobile device, the amount of JavaScript needed to run is significantly less, so offering two versions of JavaScript files, one for desktop and one for mobile, the site can load much faster on mobile devices and conserve the user's data plan.

Getting flashy without Flash

Flash is out. Rarely will you see a web developer that builds a site entirely with Flash these days. It's slow and incompatible with too many different types of technology. The truth is that the things developers previously went to Flash for, particularly fancy-shmancy animations, is now built in to modern standard code. Even your smartphone's internet browser can handle these animations. They're simple, light, and they do the job. With more and more JavaScript libraries being developed constantly, things like a 3D internet are not too far off; in fact, many websites, including this one, already use 3D elements.

The majority of the animations seen on this website are created using an animation-specific library called Greensock. Greensock is extremely powerful, significantly faster than any other JavaScript based animation library, and is very simple to use with its concise markup. The same kind of CSS3 code which defines the way every modern web page looks also contributes a tiny bit to the animated flow of this site. The navigation menu flips out at you in 3D, includes a blur effect when you hover over the respective thumbnails, and when you click a link, they all run away. As you've probably noticed already, every page loads elements sequentially with animated fades or movement. The subheader includes a small script that causes each letter to run away from the cursor, then return to its original place. These animations can keep the user amused, immersed, and interactive with the site without distracting from content.

Images attract, text informs

It's important that the UX of this site maintains a balance between attention grabbing-graphics, animations, and useful, easily comprehensible information. These days, it’s not enough to simply present information, even if it’s styled nicely; instead, modern expectations of technology demand that the experience should also be interactive. This fact dictated my approach toward the home page of this website. The images stand out from the rest of the page through both brightness and color differentiation and use attention grabbing animations that pique a visitor's curiosity.

It is important that the results don’t fall short of the user's expectations. Instead, similar animations and a slightly different layout type are presented in the sub-pages, which again bring out the curiosity in the visitor to discover new things. What they find is a smoothly animated navigation menu that is reminiscent of the home page, creating cohesion in the site. People tend to like things that are familiar, while also enjoying the adventure of new experiences. This feature should entice the visitor to visit multiple pages before leaving the site.

Sidewayzine.com

Sidewayzine.com started as my senior capstone project in college, although I continued to maintain it for a period after graduation as a vehicle for practicing and refining my web development skills. I built it to be a platform to share not just videos and news about various different board sports, but also original articles, interviews, videos, and photography galleries. Many individuals that enjoy one boardsport also enjoy other board sports, which made Sidewayzine a central hub for board sports media.

The initial process of developing the website started with paper-and-pencil sketches of the layout. I wanted it to be bright and appear 3D. I then moved to Adobe Illustrator, keeping in mind that every single element would have to be converted to HTML and CSS already in mind. At the time, mobile support wasn't as common so I gave it a static, two-column design.

The navigation menu is designed to pop but also contribute to the flow of the website. It initially used a CSS drop-down menu, which was later scrapped in favor of using 3D tile-flipping to add to the sensation of a 3D environment.

I decided to use the Content Management System (CMS) Joomla! to manage all my content. While I have experience using the CMS Droopal, after extensive research I decided that Joomla! would be a better solution for my needs. I chose Joomla! because of its ease of use, customization abilities, and its plethora of available plugins. Joomla! relies on PHP to dynamically populate the pages with content, so the template that I created contains HTML, CSS, JavaScript, and a lot of PHP.

Using my professional connections within the board sports community, I was able to develop a link-share program in which my partners and I would trade traffic.

Google Analytics was a must-have tool for this project; not only had I invested a very large amount of time into developing it, I also started Google AdSense and AdWords campaigns to increase traffic flow and revenue. Using Google Analytics to measure this progress was a natural fit.

Click on the image or here to see Sidewayzine.com.

FMQB.com Newsletter Template Design

I have designed a number of newsletter templates for my employer, FMQB.com. FMQB relies on these newsletters to continue exposure, making them a valuable asset. Each of these newsletters is sent to thousands of FMQB clients, which include radio-station programmers and the largest music labels in the country.

Having a design that stands out from the competition was imperative. All of my templates are coded using tables and inline-CSS to maximize compatibility within the various algorithmic rules of different webmail and email software clients. Like this website, I hand-coded these templates from scratch and thoroughly tested them for compatibility to ensure proper reception. My designs gave the old ones a total overhaul with a modern facelift while still allowing practicality.

CHR (Contemporary Hits Radio)

These are the songs that one would consider "pop." They are the songs that you hear on the radio every time you turn it on, these are the ones that all your friends know the lyrics to. They are songs like Psy's "Gangnam Style," or they are by musicians like Imagine Dragons, Ke$ha, Bruno Mars, P!nk, Pitbull, and so on. Just about everyone has head these songs at least once.

I wanted a design that really stood out and exemplified the energy that these songs represent. My final creation involved a completely original header, colorful background, and transparent foreground. It creates the sensation of being at one of the visitor's their favorite concerts with of bright spot-lights in the header, and vivid color all throughout the template.

Click on the image or here to see the full .html template.

---

Rhythm/Crossover

Rhythm/Crossover is a format that's slightly slower than most pop music, but still maintains its roots of hip-hop and R&B. These songs can definitely be danced to, but they will have you moving a little slower with less beats per minute (BPM). The previous template was very flat and used outdated graphics. Unlike many of the other old templates, this one relied on HTML and CSS styling to differentiate sections of the newsletter. This however meant that the layout was rather flat and unenthusiastic.

My design was initially created in Photoshop. I hand coded this template and implemented the graphics to ensure that each table fit properly and that the text would be properly legible. My design was again a total overhaul and complete redesign from the ground up. I wanted the content to pop more so I placed the sidebar on the right, instead of the left where it was in the old template. The layout is a slate metallic and shiny, including reflected text subheaders that are reminiscent of the Mac application dock. This design is intended to reflect the attitude of the radio format, being modern, cool, crisp, and the metallic feel reflects a certain hardness that many musicians like to portray of themselves.

Click on the image or here to see the full .html template.

---

Submodern Rock

The SubModern Rock template was one that was created using almost entirely HTML/CSS. Other than the header and subheaders, the layout is not dependent on loading images. The color scheme was mostly maintained from the old version, but my update (again, built from the ground up) made a few subtle changes to the layout. The same left column layout was kept, though I was aware that no content would be added into the column, so I opted to have it only included at the top, with all other layout tables spanning the entire width of the container.

In an attempt to make the newsletter appear more modern, I added the CSS3 style border-radius to each subsection, which acts as modular elements. When the old layout was designed, CSS3 didn't exist (yup, it was that old!), which means the border-radius property also did not exist. Each section, or module, is differentiated by either color or by objects with borders. The end result is a template that's easy on the eyes, is relaxing like the music format itself, and easy to navigate through. It's a much simpler – and perhaps more professional – template, compared to the previous ones.

Click on the image or here to see the full .html template.

---

Dance

This design is the simplest of my FMQB templates for a number of reasons. The first being is that FMQB wanted the template to remain simple, but still wanted the graphics and color scheme to be changed around a bit. Due to the massive amount of information included in this specific newsletter, it was necessary to keep it clean and minimal to prevent from obstructing the data.

Like all of my other Email newsletters, it was necessary to create the layout using tables because email clients tend to be very picky about what is allowed to pass through to the user for security purposes. With as much data as we were sending, it was necessary to organize it all in tables as well, resulting in multiple nested tables. We did still use images, but they served only as branding mechanisms for various radio stations that we reported for, rather than use images as a means of layout design.

Click on the image or here to see the full .html template.

Web App - ClickHere Generator

To help FMQB.com modernize its online presence, I undertook a side-project to develop a better audio player for the company. Thirty-second audio clips are made available for free to sample new songs that are available for radio airplay. The previous approach was to export the clips as an .mp3 file and create an .m3u playlist file, which required software like iTunes to be already installed to stream the song.

This approach disrupted the flow of the UX and forced users to leave the website and rely on external software. To keep the user on the website, I used the jPlayer framework and added FMQB branding imagery. The player pops up in its own fitted window. To bypass manually creating every player HTML page, I wrote a web-app that does the time-consuming work.

Using a find and replace script, all the creator has to do is copy and paste the artist and track names in the text boxes. An HTML file is automatically generated, along with the inline JavaScript to call the popup code. The entire process is very simple and saves much time, making it a perfect example how coding can streamline an employee's workflow.

Click on the ClickHere Player Generator image or here to try out the web app, or click on the player image to see the audio player. Any file output must be saved to your own local drive and will have the FMQB branding.