Posts Tagged ‘Web Design’

Creating your own web dev tool kit – Part II: Being fast

Friday, June 4th, 2010

In my Part I post, I talked about having a base CSS starting file and an HTML/PHP/Whatever file. This helps you do things quickly that would normally take time to set up. But what else is there that can spead up your process in getting a site done quickly?

Keyboard Kung-fu

Plenty, I say, plenty. Most of them little. It used to be, back in the day, that Photoshop didn’t allow you to edit your keyboard shortcuts. I use to have a huge Action file that did all sorts of things like flatten layers, change color modes, aligning things with a push of a button, stuff like that. Now though, PS allows you to customize the keyboard shortcut preferences. I have a ton of my rearranged. For instance, to flatten layers, I just have to hit F2, to change to RGB mode for when I get something that is in CMYK or when I open a gif, I just hit Ctrl + R, and bingo, RGB mode.

Doesn’t seem like much, but think of all of things you do in Photoshop…and I mean things you do all the time. Wouldn’t it be nice to just hit a button and presto that is done? I know this sounds stupidly easy, but I am still amazed by how many new developers keep going to the damn menus to do simple things. Maybe they are scared to overwrite the shortcuts that PS has by default. Well, they shouldn’t.

(more…)

Creating your own tool kit – Part I: CSS

Thursday, May 27th, 2010

How many of you start every design from scratch? Meaning you will code your html and css from the beginning. If you are a beginner, probably quite a few. Which is a good thing, because that is how you learn your chops. I do it every once in a while, so I don’t forget things. Most of the time I am starting from a starter file I created. I have different versions of CSS files, depending on what I am building. At work, the one I made is very detailed, and can be because we follow a strict structure. It also helps because I consistently use the same id names, and when I firebug something, I know right away what the hell is going on.

Creating a file like this to be reused is just one of the tools web developers have in their “tool kit.” Things we have to speed up the time it takes to build a site. Tonight is part one in how ever many I decide to do. They won’t be consecutive, but spread out whenever I get one together. For my next one, I would like to do a base CSS file, but using Sass and showing the neat little tricks you can do with it.

(more…)

Things we do in the beginning that make us shake our heads now

Tuesday, May 18th, 2010

Sometimes its hard to write blog posts, because nothing inspiring pops into my head. Didn’t get to actually learn anything tonight, which sucks, but I will be on a mission tomorrow to do just that. Anyway, a thought came into my head as I was staring mindlessly at my keyboard. “Wow…remember when I tried to do THAT the first time? God I was an idiot!”

We’ve all had those moments. One of mine was getting things positioned using ‘relative’ positioning. I won’t go into the details, of how dumb I was, but lets just say I had my top margins at -500px or something silly like that. Now I know that you have to position relative the parent div and absolute the one you need to place with pin point accuracy using top and left. All browsers then get along.

Another…the float. I used to float the HELL out of divs, when it was totally unnecessary. I mean EVERYTHING. Stupid, stupid, stupid. Yes I could get things to work, but man what a pain in the ass.

Or how about dealing with IE6′s double margin? I used to write a separate rule for each margin that had a a left or right on it for IE6, when really a display: inline will work just fine.

You know when everything got real easy though? Using a css reset. I remember doing a site that had a bunch of ul’s on it, and they were all different. My css was disgusting. Everyone of them had seperate padding and margin rules and all sorts of crazy was going on. If I had just reset them all to 0, and then adjusted what I needed…wow.

So what are some things you have done that makes you shake your head and want to slap yourself? I know there are a ton more that I’ve done. But really, that is the point of this blog. To help the new and middle level web developer skip through all the crap I’ve gown through. I wish I had the resources available to me back in the day, as everyone does now.

Oh, and if anyone has a freakin’ link/site that shows how to start from ground zero to getting a web page up and going using Ruby, PLEASE give it to me! I talking about a for dummies type approach.

jQuery junkBox

.prependTo(target);
This method will return matching elements and add them to the beginning to the target. So, below would add an h1 tag to the beginning of the tag with an id of ‘container’

$('h1').prependTo('#container');

Divititis….beware, its catchy!

Tuesday, April 20th, 2010

I’m sure you have heard someone either say or write about “divititis.” If not, it is referring to someone who over uses the ‘div’ tag. If someone with this terrible disease were to, say…design a navigation, they would do something like this:

<div id="container">
    <div id="navigationContainer">
        <div id="navList">
            <ul>
                <li>Nav item 1</li>
                <li>Nav item 2</li>
                <li>Nav item 3</li>
                <li>Nav item 4</li>
            </ul>
       </div>
    </div>
</div>

In most cases though, you could just have the first container and the ul. You can position any block level element, such as the ul, just as you would a div. By doing so, you would eliminate unnecessary code, making it cleaner as well as easier to read and figure out what is going on. Now of course, there are going to be times where you need extra container-y things to do some graphic awesomeness, because the multiple background CSS3 styling isn’t supported across the board. I get that, but I would bet a majority of the time, if you looked at your code, you could strip some of the crap out.

(more…)

There is a myth…about 72 ppi

Friday, March 19th, 2010

I was browsing through my rss reader trolling my favorite sites when I came upon an article that interested me. Then I found another link on that site to something else…20 clicks later…only God knows where I ended up, but it had me engrossed for quite a while. I wish I could remember where, cause I would post the link, but I was on a different computer.

Anyway it was an article about saving images for the web at 72 dpi. The funny thing is, dpi is what most of the web designers I know refer to it as, but that is a printing thing (dots per inch). PPI is the one dealing with screens. Pixels per inch, and that is the one that matters.

Now, I am not sure if there is a way, once a photo has been taken, to adjust the number of pixels per inch in Photoshop. What I do know is that most web designers save their images at the 72 resolution. You could very well be one of them. Well…so am I. And even knowing what I know today, I doubt I will change that habit. Why? Because it doesn’t matter.

I would like anyone reading this that is actually interested now, to do something. Open an image in Photoshop, and go to Image>Image Size. In that window, make sure the Resample box is UNCHECKED. Now, if it isn’t already at 72, change it to that, and then save it as a jpeg. Then do the image size again, and change the 72 to say…3000. Notice with the Resample box unchecked, the pixel width and height stay the same, they are locked in. Save that also as a jpeg.

Now place both of those images into an html file, and preview it in a browser. What do you notice?

Not a damn thing, right? They both look the same. Now right click on both of the image files, where ever you saved them, and check their properties to see each’s file size.

What do you notice? They BOTH have the same file size. So what does this tell you? That for people in web development, that whole 72 thing is a bunch of bull. That resolution means NOTHING in the web world. It does however matter if you printed them. Cause you probably noticed that the Inches size changed. But screens don’t go by inches.

So what this means is, what you really have to pay attention to is the Pixel width/height. That and the compression you use when you save for web in Photoshop (or Fireworks, or whatever it is you use) is what matters for the file size.

I know, that just blew your mind, right? Feels like you just found out that what you believed in was all just a big fat lie.

So, will this change how you save images? I’m guessing not. It IS interesting though. Next time someone pulls the whole 72 whatever-p-i…you can tell them they have no idea what they are talking about and pull out your new found knowledge, and look like a super smarty pants.