website redesign « My Site/Blog
Untitled Document

website redesign

Website and Fencing Machine Source Code Now Available

I added git repos to both the current website and to the Arduino code for my scoring machine if you’re interested. You’ll have to forgive the lack of comments on both, especially the messy code on the website as it is still a work in progress. Be on the lookout for more repos in the near future!

Here’s my github page: www.github.com/cyamada

Firebug and Web Development

In the midst of all these posts on how I went through redesigning each site I feel the need to highlight one of the tools I used, which proved to be paramount. Firebug can be used to view all the scripts, stylesheets, and html of a site. While googling around for something or other on the internet, I remember seeing a post about how Firebug was a developers best friend and at the time I wasn’t quite sure why. I now know, and I hope to provide a few quick examples to show a few ways in which it can be used to help you develop your site.

Firebug and WordPress

As I’ve mentioned in previous posts, this blog is built on WordPress. But the WordPress theme it was built on is one I designed and built page by page from the ground up. While there is much to be said about the process of building your own theme that is not what I want to discuss in this post. I want to talk about what happens when you have your fully functioning, completed theme.

For those of you who are unfamiliar with WordPress, it’s basically a blogging platform run on php with lots of built-in functions and structures which you can use. I knew none of them. In fact, I barely knew php. There were a lot of sites that explained how you could go about building your own theme, but they didn’t really offer detailed information on how to really style your theme once you got it working. The problem is that when you used the functions or  structures WordPress gives you, the results are somehow returned to you in html/css to be displayed but you don’t know the ids or classes of each element that WordPress is generating for you. It saves you a lot of coding however, it also means you have to work your way through WordPress and really integrate it into your site. I’ll give you an example the following is an excerpt of code from the sidebar on the blog:

Screen Shot 2013-05-26 at 10.19.36 PMAs you can see, all of the categories are generated through WordPress and are inserted into the html in that one line of code. Now it isn’t immediately obvious how the categories are returned. Is WordPress adding them within paragraphs or headers or list items? Are they getting their own specific ids or classes? I’m sure some googling or browsing on the WP codex could provide you with an answer, but there’s also another way. The following is the actual html code from the sidebar, all of which was generated by WP:

Screen Shot 2013-05-26 at 10.26.59 PM

 

As you can see each category is inserted as a list item with a class of “cat-item” containing a link, title, and the actual text that gets displayed. All I had to do was run firebug on my website and inspect the sidebar element. Now all I need to do is go into my css file and create a class called cat-item and style it however I want. It’s that simple. I used this approach to style almost all of the generated elements on the blog.

Firebug for learning

I should have probably started by explaining what Firebug does- it reveals the source code and resources of whatever internet page you’re looking at and displays which coding elements correspond to which visual elements on the site. Thus making it an extremely useful tool for picking apart another website or element that you may want to adopt into your own. I actually have a great example as I did this for the photography page on my website. I wasn’t quite sure what I wanted my page to look like and didn’t want to settle with the plain old slider from v2 and a link to flickr, so I googled “top personal photography websites” and found links to a bunch of amazing-looking photography sites and started browsing for a feature I would want. I eventually found an effect that I thought would work well but I had no idea what it was called or how I could recreate it. I popped open firebug and quickly browsed through:

Screen Shot 2013-05-26 at 10.44.21 PMThe line that is currently highlighted is the line that corresponds to the element containing all of the images, which if you can’t see, has the class “masonry.” Now this wasn’t much to go off but another google search turns up results for jQuery Masonry which happened to be the exact plugin I was looking for. Now this is probably one of the far more obtuse and unusual methods of finding design elements but hopefully demonstrates exactly how multi-purpose firebug can be. I use it more regularly to find the names of fonts or hex color codes that I like.

Firebug for debugging

The last thing I want to mention about Firebug is how it can be used to debug and save you countless hours and broken keyboards. Say the formatting of your page doesn’t look how it’s supposed to look. Maybe you want three elements (let’s say buttons) floating on the left side of your page, all stacked on top of one another. Maybe you’ve done this before and have some idea of how your css should look, or maybe you’re following someone else’s example but for some reason can get your version to work. This is where Firebug comes in- all you have to do is inspect whatever element(s) you’re having trouble with and Firebug will conveniently list all of the style rules applied to that specific element.

Screen Shot 2013-05-26 at 11.06.26 PMThis is a screenshot of Firebug showing the css rules applied to the unordered list containing all of the categories. It shows the sidebar ul class from my stylesheet and will also display any other styles linked to a specific item, making it easy to see if something is applied where it shouldn’t be.

These are just a few quick examples of the many way this plugin comes in handy. I’d definitely recommend installing it if you haven’t already.

 

 

The Current Site – Design

After the completion of the second site last summer, change was a long time in the coming. Between the development of each site I had never really tried to progress it. The second site had some sad attempts at blogging, which became too much of a hassle to update in raw html. I didn’t really have enough time to think about redesign until this summer (being unemployed), so I did. I knew some of the elements I wanted the site to have just from what I had remembered while building the second one.

Having some sort of content management was a must as I really wanted an excuse to document the projects I was working on and be able to easily share them. I wasn’t too familiar with the term “content management,” and at one point thought it might be easy to design my own. But in the end I settled with WordPress, which is now the basis for the blog you are currently reading and a topic which I will spend a lot of time covering in the coming posts. But more on that later.

The second important feature I wanted to have was a more fluid-based layout. Working with fixed layouts was much easier in hindsight however, the switch to fluid was one I had been wanting to make for a while. If anything for a learning experience, not necessarily because I think they’re better. Having built the previous site on a fixed layout, I had some trouble trying to rebuild with a fluid mindset. In the end, I think the fluidity as a nice touch to some of the pages (although it’s far from perfect) and is something I’ll definitely consider repeating down the line.

Lastly, I wanted this to be a great learning experience. I told myself I had about a week to screw around in before I really settle down in the job hunt and wanted to make the most of my time. I definitely challenged myself with quite a few of the aspects of this site and, while it was basically completed within five days, I literally did nothing else. For the past week my life has been wake up, code, eat, code, eat, code, and sleep when tired. Mornings became even more subjective than on college weekends. I was hooked. I loved seeing the site come together piece by piece, and getting each and every detail dialed mattered to me. This was the site where I didn’t cut corners or settle for less.

Those three key points drove the development of this site. I started with some basic knowledge of html/css and three things I wanted to accomplish and set out to do just that. Interestingly enough, I also had to design a site in my intro to web design class. The site was on how we can make the world a better place and required a minimum of three pages, some flowchart thing, and a timetable for design. All I wanted to do was start coding, and I did.