15 Feb Steve Weeks Music Redesign – The Right Tool
So far in my effort to re-design my web site, I had put together and followed a mobile-first methodology that started with defining requirements and creating a site inventory and then moved through design steps for layout, color and type.
At this point I had a pretty good idea of the goals for the site, what elements would be used to accomplish these goals, wire-frames defining how the elements would be laid out on mobile and desktop devices, color and type strategies, and even the beginnings of a few of the building blocks I would need to actually implement this vision.
The plans were drawn. Now it was time to start gathering the tools.
So before I talk about slinging code, I’d like to share a few thoughts about the framework that I was going to use to implement my design. This is not to say that these decisions were made at this point in the process. Much of the architecture was predetermined by my existing site, my own technical expertise, my desire to learn certain technologies or by the implications of my design.
In a nutshell, here are a few of the components that I decided to use and a short explanation of why I chose each.
SERVERS
UNIX / Apache/ MySQL
These choices were pretty much a no-brainer because my current site was already running on them. I wasn’t looking to change my ISP hosting, and I did want to be able to reuse some of the code I had developed over the years.
LANGUAGES
PHP
Again, the decision to use PHP for the server-side code was mainly based on the fact that my existing site was already written in it. This would allow me to refactor and reuse some of the back-end code instead of a compete re-write. Plus PHP is easy to use …and free!
JQuery
For my client-side functionality, I decided to incorporate JQuery instead of sticking with straight JavaScript primarily because its use is wide-spread and also because it’s a technology that I wanted to learn. It’s required by Bootstrap, which I wanted to use, anyway, so as long as I was going to have to incorporate it, I might as well use it right? It turned out to be a good decision. For those of you who hate working in JavaScript, JQuery makes things a little nicer.
RESPONSIVE LAYOUT
Bootstrap
The Bootstrap framework was one that I really wanted to immerse myself in. It implements a fluid grid system for making web pages responsive on mobile devices, seemed easy to get up to speed on, and has lots of built-in and pluggable components (e.g. navigation menus, slide shows, and forms). It’s not rocket science, but I wanted to become an expert in this area.
STYLES
CSS3
It would go without saying that I would use CSS for controlling styles (what else would you use), but it is significant that I decided to learn about the CSS3 standard because it is so popular right now. It’s also important to note that I decided not to use LESS or SASS on top of CSS. Much like Jquery to JavaScript, these make dealing with CSS structure a little easier. I just didn’t think I wanted to tackle this on top of everything else. I kind of wish that I had now that I’ve used LESS in my current job. It is a pretty helpful tool.
HTML5
OK, so the HTML5 standard is more about semantics that a new coding language, but there’s so much talk about HTML5. I wanted to learn what all the fuss is about. I knew that there were new HTML elements that could be useful on my site. I wanted to explore more about this, so I took a Lynda.com class on HTML5. After this initial look at the new standard, I decided to make an attempt to follow good standards in my use and naming of HTML elements so that the structure and semantics of my site would be meaningful.
An added bonus of the decision to use HTML5 and CSS3 was that it forced me to re-visit the rudiments of HTML structure and document flow. I highly advise anyone who considers themselves to be an advanced web developer to go back and study the basics. You’d be surprised and how much it will help you with those really nagging problems (“Why won’t this div line up right beside that div?!!?”) and to understand how web crawlers see your site.
With my framework components chosen, I needed to educate myself in some areas. I use Lynda.com which I get free through my local public library (Thanks Pikes Peak Library District!). I developed a short curriculum for responsive design, HTML5, CSS3, and JQuery, and started learning. It took a little while to complete, and I had to fight my natural urge to just start coding, but I had promised myself to adhere to my methodology at the beginning of this process, so I stuck with it.
…and eventually I was ready to start coding!
NEXT: Steve Weeks Music Redesign – Slinging Code
Sorry, the comment form is closed at this time.