CSS Trickery: Rounded Corners

So check this out. Super simple way to get rounded corners on just about any block-style element and images!

Read More»

You know what would be cool?

Some new features in DreamWeaver that would make styling even MORE streamline.

How it works now:

You create your HTML file and then your CSS file. You link the two together through the <link> tag in the header. Start coding your guts out, switching between the two to add classes and ID’s to the stylesheet as you go. Then, at the end, switch to CSS to style it. This may be a little bit different according to your workflow, but that’s how I get things done.

NOW imagine something like this. Go to File>New and create your HTML document. Easy Peasy. At the very start, link to your stylesheet. What’s that? You don’t have one created yet? Well, DreamWeaver can – and does – already tell you that. What if you want to take it to a new level? Have it automatically create the file for you in the directory you specified in the href of the link? Is this blowing your mind yet?

Hang on, cuz I’m not done yet…

They’ve already got the really cool feature – and I LOVE it – of having attached files be right there in the header section for you to click on. Super cool.

Let’s take the auto-creation to the next level.

So you’re coding away and you have your CSS file attached and everything. What if when you create  a new class or ID, it put it into the stylesheet for you? Or when you used a new HTML tag? So, for example, when I create a class="content", it goes into the stylesheet and writes:

.content {

}

Now there would be a couple of logistical issues with this. First of all, you may not want to style every single HTML tag that you use. Second, I know that with my stylesheets, I like to keep them minimal and grouped together so that it makes it easy to find information later. And lots of comments. Of course, we could take this to the next level and do the same thing for JavaScript, PHP and even more pages.

What are some other issues, though, that would have to be overcome to get this feature? And what are some solutions to those problems. All in all, it seems like a pretty simple upgrade…

Personas in a Nutshell

These are some class notes I took from my interaction design class focusing on personas. Thought it would be helpful for everyone out there.

PERSONAS

• Be sure to design your site with your clients in mind. Not only demographics, but psycographics as well. What are their buying habits? what are they looking for?
• Also be sure to design around their needs and goals. What are they looking to do? Does your website perform this task? How effective is it?

How are needs defined?

• By programmers? Users are going to need to be experts
• By marketers? Site will be focused on beginners, since they are the easiest people to please
• Should be based on intermediate users.
• Logic says that to satisfy a broad audience, you should make applications as broad in functionality as possible to please the most people. THIS LOGIC IS FLAWED!!
• Personas are PRECISE DESCRIPTIVE MODELS of users based on the goals, behaviors and motivations of real people and represent them throughout the design process.

Why Personas?

• determine what a product should do and how it should behave
• communicate with stakeholders, developers, and other designers
• build consensus and commitment to the design
• they resolve user-centered design issues (three in particular) 1. the elastic user (your user keeps changing, and so does your design) 2. Self referential design (you are NOT your target audience) and 3. design edge cases

404 Errors

It’s a really good practice to track down 404 errors. I found a bunch on my photography blog that were being caused by a unique problem. My WordPress theme was creating a link to older posts that didn’t exist. The problem with this is Google’s spiders will follow that link, only to find a 404 error page. It’ll kill you EVERY time!

Here’s the PHP that was there before the problem.

<div>
<div><?php next_posts_link(__('&laquo; Older Entries','DeepFocus')) ?></div>
<div><?php previous_posts_link(__('Next Entries &raquo;', 'DeepFocus')) ?></div>
</div>

Which then renders this HTML…

<div class="pagination">
<div class="alignleft"><a href="http://photography.avalancheindustriesllc.com/author/admin/page/9/" >&laquo; Older Entries</a></div>
<div class="alignright"></div>
</div>

Problem with this is, http://photography.avalancheindustriesllc.com/author/admin/page/9/ doesn’t exist as of this writing.

I thought that I was going to have to break out the code and figure it out, but it turns out it was a theme/wordpress settings issue. Apparently if your theme asks for max number of posts, you have to put in the same number of posts that is in your Admin>Settings>Reading setting. Fixing that seems to have fixed the issue. No more 404 pages!!!!

If anyone else has a better way of doing this, let me know. I’m always open to suggestions!!

Recent Project

Here’s the final PDS that I started with…

And here is the final home page:

This was done for a client and should be going live soon. There will probably be a few last minute changes as well. It’s not that awesome of a work, but it’s still pretty awesome just because it’s my first ever theme for WordPress made from scratch. I’m pretty proud of myself right now.

What Makes a Good Web Designer

Andy Rutledge wrote an awesome article on what makes a good web designer. The article targets kids just getting out of college, but this is a good article no matter what you’re business with a web designer; if you’re looking to be a web designer, looking to hire one or if you’re wanting to design and maintain your own page.

If you are a web designer, these skills are essential; you cannot get around them. Everything from being able to communicate your design concepts to the CEOs of the company, to being able to actually design. By no means is this a comprehensive list of skills that a designer must have; in fact Andy said at the very beginning that it’s not a comprehensive list. If you treat it as such, you will fail as a designer. It’s just a good place to get started.

For those that are looking to hire a designer, especially for the first time, this would be a very good set of skills to interview potential suppliers about. I would suggest asking to see their online portfolio work. Contrary to popular belief, a portfolio is not just a page with pictures of the web pages. Anyone that has done web design can attest that to create a well designed page, they had to overcome obstacles. Those that have NOT designed pages (the people that are hiring) DON’T know about it. A true portfolio page should have a picture of the site, but then high-light the problems that they had to overcome.

So, no matter what business you have with web design, take a look at the list to get you started.

Case Study: Eric’s Plumbing

This past week I started designing a Eric’s Plumbing website. He’s got one up already, but we’ll be hooking him up right. Right now, it’s basically what I call an online business card: It’s got the services that he does, a contact us page and an about us page. Check out the screen shots below. Right now, we’ll be working on getting those pages down and getting some better ones up with plenty more content.

In the works for Eric and his plumbing business includes Twitter, links to his already existing FaceBook and LinkedIn accounts, YouTube and a blog, of course.

I was talking with him and he does a bunch of calls that only last for about 5 minutes, but he still has to charge the person around $75 to $100 to do something very, very simple. He hates doing that and would love to have a way to avoid those calls. We came up with a strategy to use his blog to make that happen. He has a Droid phone that can film in HD, so I gave him the assignment that whenever he gets one of those 5 minute calls, film what he does and then stick it up onto the blog. His wife is an English teacher, and so he can dictate to her and come up with educational, DIY (do it yourself) blog posts, thus saving him from going to those 5-minute calls.

What we’ll be doing with Twitter, LinkedIn and FaceBook is broadcasting the word out. With YouTube, it’s getting the word out and acting as a video host. This reduces his bandwidth (techy, but better) and acts as a back-link from an awesomely ranked page. Pretty stoked to start working on this one. As it goes through the process, stay tuned to what I’ll be working on.

Foggy Business

I haven’t driven in the fog for a long time; the Salt Lake/Utah county area just doesn’t have that much. Growing up, I lived in Northern California and we would have fog so thick every fall that we couldn’t see past the hood of the car. It gets pretty scary when you get on the freeway and people from out of the area are driving through that. There would be HUGE pile ups all because people didn’t know how to drive in the fog. Needless to say when I drove through fog on my drive to Salt Lake last night, I was a little nervous. Most of these people hadn’t seen fog in years and they’re driving through it on the freeway. Pretty scary stuff.

As I was driving, I was struck by how “eery” everything was. We couldn’t tell where we were because we couldn’t see off the freeway. I had to drive in the right hand lane to be able to see all the signs to know where we were at. As a sign approached, it magically appeared out of the fog. Even the lights seem to pop out of nowhere. Not to mention is was hard to see all the other cars on the freeway, all going at least 55 mph. Did I say I was a little nervous?

But as I was driving I realized that the fog is a lot like distractions when setting up a business, or like a bad web page that doesn’t direct the user to a final destination. It’s just bad all around.

A website should be clear and concise. Have an ultimate goal in mind when designing and laying out a site and KNOW YOUR AUDIENCE! If you don’t follow these simple rules in the beginning, you’ll loose your audience extremely fast. (Smart) Drivers don’t like fog just as much as users don’t like a website without some sort of game plan. What is the purpose of the site? Is it to serve as an online business card with your contact info? Then I would hope that when you launch your website, your phone is ringing off the hook. Is it to sell product? Is it like this one, to simply offer advice and information? What do you want your website to do? Once you know the answer to these questions, then you can start laying your website out around them.

What about a business plan? While this is a little more non-public (most likely) it still needs to be concise. Remember from the post Productivity vs Wasting Time the quote about goals and the importance of them.

“When performance is measured, performance improves. When performance is measured and reported, the rate of improvement accelerates.”

What goals are being measured? Are they the amount of people that are coming to the site? The amount of sales? How about conversion rate? Or is it how many friends you have on Facebook, or how many people you’re following on Twitter? Not to say those aren’t important, but they’re not vital. (Remember the word VITALS? Like when a doctor takes them to see how healthy you are in general? Your website has VITALS too, and they need to be measured.0

So what are some of your goals? How do you measure them? But more importantly, what is some of the “fog” in your business/website/procedures/goals that you can clear out and get rid of?