Browsing the Design category

Design Tips for a web developer

I recently had the opportunity to work with a web designer, and I was able to see his screen as he worked.

During our session, I saw him to go to the following sites that seemed pretty helpful:

  • – reduce the file size of images without reducing the quality
  • – gives the CSS of a color-fading gradient (where you specify the colors)
  • – color scheme generator
  • FreePik – free art/stock images

Read the article

reference google font locally

I have a web app that I want to use Google Fonts, but I want to download (and reference it) locally from the device.  You can’t use the normal CSS style/import tags.  I found  this link that can generate the CSS code you need:

Read the article

fireworks 8 text won’t fit on one line

I had text that was wrapping onto a new line,no matter how I tried to extend the textbox.

The trick is, in the “Properties” panel, you have to uncheck the box that says “auto-kearn”.

Read the article

javascript select radio button in function

I had a few drop-downs that, when changed, would select a specific radio button.  That seemed to work, but I wanted it to do a few other things, so I attempted to put all of the code in a function.

Of course it worked in “real” browsers (ex. Chrome), but it didn’t work in IE8 (which is what my company uses).  I was unable to figure out how to select a radio button with jQuery – the trick  is to do it inline (in the onChange of the select).  Then I’m additionally calling a function to do the extra actions I needed.

Read the article

twitter bootstrap tabs shows all by default

I’m using Twitter Bootstrap’s CSS for “tabs.”  The problem was that the contents of EVERY tab was showing initially.  Once someone clicked on a tab, everything was okay; but the initial loading was incorrect.

The solution; I had:

<div role=”tabpanel” id=”tab_name_here”>

I had “active” as a class in ALL of the tabs.  I put “active” only on the first tab (removing it from the others) and it worked.

Read the article

Internet Explorer doesn’t show bootstrap tables correctly

As I’ve mentioned before, everyone at my company has to use Internet Explorer. So even when I develop in Chrome, I have to make sure the website looks as intended in IE 8.

Recently I wanted to style my HTML tables with Twitter Bootstrap.

The start of my ASP file is as follows:

<!–#include file=”includes/generic_functions.asp” –>
<!–#include file=”includes/specific_functions.asp” –>
<!–#include file=”includes/validation.asp” –>

(… yeah, I should probably be using an upgraded Doctype!). On a specific page, I do NOT want to have validation, so I removed that line, and instead put in a comment of “no validation”

<!–#include file=”includes/generic_functions.asp” –>
<!–#include file=”includes/specific_functions.asp” –>
<!–no validation –>

This caused my table (in IE8, only) to have the “condensed” look – as if I was using the Twitter Bootstrap “.table-condensed” class. I’m still not sure why this… but once I removed it, and had NO comment (as in, remove the line in bold above), the table appeared as intended.

Read the article

Easily share screenshots

I use the server to easily share screenshots.  You might think it’s not a big deal, but this tool is surprisingly handy!

I setup a keyboard shortcut (Ctrl + Alt + some letter), and then the program activates.  You draw a window around the part you want to take a screen shot of.  Then it automatically uploads that image (to their site… but really, it’s Amazon Web Service), and you get a super short URL that’s automatically copied to your clipboard.  So all you have to do is “paste” (as, it’s already copied) into the email / FB / etc.

The one downside: the URL that you get is like – so I’ve had people unsure they want to click the link, because it looks suspicious.  But if you upgrade to the “Pro” account, you can get a custom domain.

I find this so useful, that I DID sign up for the “Pro” account.  You can’t have it in a subdirectory but you CAN have it as a subdomain.  For example:

I think it’s pretty useful.  Try out the free trial.  If you like it, please use my droplr referral link so that we can both get a discount.


Read the article

What browser to design for

If you’re making a webpage for someone else (perhaps a customer), chances it is because they don’t know how to do it themselves. And they don’t know anyone else that can do it, either.

If your audience (or, more importantly, your client) does not have a lot of experience with computers, then they probably haven’t upgraded their computer system either. Once they got the computer home, they took it out of the box, and haven’t made any changes to the operating system or the browser.

Therefore, I think the majority of users (that I make websites for anyways) are using (Windows XP with) Internet Explorer 7.0.  This of course will be unique to your audience.

There’s plenty of Mac users out there (probably using Safari?), and those who are computer-savvy may prefer another browser (such as FireFox). But when I make websites, I tend to plan for the “typical lesser-experienced user” who uses the IE 7 default.

I consider to be an accurate resource. Check out their Browser Statistics:

Not all browsers read HTML (and Javascript and CSS) the same way. Obviously you want to design a webpage that looks the way you want no matter what browser the user has… but if you’re pressed for time, or need a “base” browser to start with, I suggest going with the browser that your clients will most likely be using. In my case, it’s IE 7.

Read the article