A Better Way

Finding a better way to get things done, a technical journey

Archive for category Prototyping

My HTML5 Template

Apr 20

Posted by Jack Lawson in Development, Prototyping, Web Design, Web Standards | No Comments

I’ve noticed that whenever I make a site, 99% of the time I copy at least 50% of the markup from another site I’ve done before instead of re-writing the structure. It saves a lot of time, and it makes styling easy- I’m re-styling the same site as I’ve already done, maybe with different colors and images. So, what I’ve done is make a generic template that acts as a site-starter. It’s pretty full, so it may not be to everyone’s tastes, but it covers most scenarios I’ve run into.

Here’s what I use. Feel free to copy it and do whatever you want, it’s GPL v2 licensed. (zip file)

  • The Html5 Shiv (conditionally for IE, of course.)
  • The CSS is Richard Clark’s HTML5 Reset Stylesheet, plus some stub styles like image / text replacement for the h1.
  • Whatever jQuery UI 1.8 theme (if applicable.. most of my sites use jQuery UI, so I added it to my template.)
  • Conditionally, an IE stylesheet. I go ahead and lump IE 6+ into one bucket. This could be broken out into several stylesheets (per IE version), but I’ve found that using the reset sheet generally limits the amount of IE fixes I have to do, so there’s not much wasted download time at all for IE users. If your stylesheet gets too heavy, break it out at your discretion.
  • Several IE conditional statements to build IE wrapper divs to make styling easier. If you’re including styles by version, you probably don’t need this. Also has the added benefit of fast browser version checks with jQuery.
  • Header with heading, subheading. The h1 is a link sometimes, using css image/text replacement. I went back and forth on whether the page title or the site title should be an h1- and chose an h1 based on arguments on this blog post.
  • Seperate nav. I almost put it with header- but I like keeping the header more pure for the logo/title and subheading.
  • A div to wrap all of the content, and then a “maincontent” div. I haven’t found better names yet, so here you go. They’re not section elements, like most of the content is in- the structure is there strictly for styling reasons.
  • An example section. I like giving it an id with the page title, so I can add in page-specific styles as needed.
    • The section’s header, and content, as is reccomended
  • An aside, styled as a right-hand column with subsections
  • A footer, with links (probably the same as the main links), and copyright information. I’ve used an address element to wrap the webmaster’s email. Semantics!
  • Finally, jQuery 1.4.2 and jQuery UI 1.8 pulled from offsite sources (parallelize downloads, plus it’s likely cached from another site)

So, the idea was to get about an hour or two’s work done by simply opening up a file. I think I’ve accomplished this- anything extra I can remove, I can switch the left and right columns pretty easily (or add a third, or fourth), and I have some very basic styles down (just change those grays to something a little more colorful.) Be free, my template!

Reblog this post [with Zemanta]

Tags: , , , , , , ,

Wacom Bamboo Tablet Experience

Feb 18

Posted by Jack Lawson in Development, General, Prototyping, User Interface Design, Web Design | No Comments


My awesome first tablet design

My awesome first tablet design

(This post was started using my new tablet!)

Well, I suppose that now that I have a tablet, I oughta start practicing. You see, I’ve never been one to have exceptional handwriting skills, so it’s a good thing that I now have a computer that can understand my handwriting better than my 8th-grade Spanish teacher could. I used to get a LOT of zeros on my homework.

(At this point, I’m back to my keyboard because my hand began cramping up. I tried, at least… Typing at 90WPM  on my keyboard is superior to writing using a plastic pen on a mat.)

I’ve long dreamed of owning a graphics tablet, for quick mockups (I included my first here. Creative Commons license, feel free to derive from its awesomeness.) I picked up the Wacom Pen & Touch. Three days in, it has been fun to play with; while it hasn’t been 100% everything that I ever imagined it would be, I think that it may be more of a learning curve issue rather than an issue with the technology itself. I’m used to using a mouse that I have to throw all over a mousepad, not a pen and a tablet that maps 1:1 with my monitor (originally, it mapped to both monitors before I turned off the second monitor in the tablet settings.)

One of the troubles I was having was that it seemed somewhat laggy when I was using my pen on Windows 7 with Photoshop CS3. I noticed mostly that when I was writing, I couldn’t add small details well (look at how crazy all of the lines in my As are); it would sort of stick and think it was supposed to pull up some kind of command menu. I’d like to blame it on myself, as a user error… but it isn’t at all obvious how I fix that issue, if it is one.

Regardless, I’m going to soldier on and try a few more mockups before passing more severe judgement. There are probably some hidden settings somewhere to fix; and once I have those figured out, I’ll post a follow-up on how I did it. Hopefully I do it. Don’t crush my dreams, Wacom.

Tags: , ,

Drawing Inspiration – an Overview on Sketchflow

Sep 22

Posted by Jack Lawson in Development, Prototyping, Silverlight / Expression Studio, User Interface Design | No Comments

Microsoft Expression Blend Screenshot
Image via Wikipedia

If you’ve downloaded Blend 3- or if you’ve heard a bit about it- you may have heard of the prototyping tool Sketchflow. It’s an extension of the Microsoft Expression Blend tool, and allows you to quickly design a site’s flow, page by page, and then define the components within it.
I started playing around with Sketchflow when I was tasked with coming up with a “grand master plan” for a project that I wanted to take on. Creating the page flow seemed easy enough; it wasn’t long before I had a nice little tree drawn that covered everything from the first page to the last, with neat little arrows directing the user’s flow. When you hit F5 (or build), you’re taken to a compiled version of the site, from which you can navigate to each of your pages. Pretty neat.
The real power came out when I started dropping in labels, textboxes, and buttons, and then attaching events from each of those buttons to navigate to other pages. Suddenly, I was able to take my prototype to the next level- instead of bits of scrap paper, I was creating an interactable demo that I could show off, that saved notes and annotations for later reviewal.  As soon as I had it figured out (mostly), I showed the other person that I was working with how to set up, and within a matter of minutes, we were designing away.
There’s a big difference when you can show off a “working” prototype instead of a few concept drawings; you could get a feel for the flow of the application, and because it felt more real, you could do a bit more of a gut-check. It felt closer to production, even though it really wasn’t any further than that scrap paper; and it took about as much time (in fact, probably less, edits are easier in digital format). And if you do feel inclined to shuffle around dead plants, you can always export the whole project as a Word doc.
P.S., one small hint- the “sketch” style is not on by default. It’s hidden under the controls chevron, if you click the triangle next to “Styles” and then “Sketchflow”. It is a HUGE PAIN to change styles… which kind of baffles me.

Reblog this post [with Zemanta]

Tags: , ,