Issue #1 of 8 – Your website needs a facelift

By Tim Priebe on January 11, 2012 at 11:50 am in Design,General

Sound familiar?

This is a common issue our clients have before their first meeting with us here at T&S Web Design. Luckily, we have some fantastically creative designers who will know exactly how to beef up your new website. Of course, the pretty websites wouldn’t function without our super talented programmers.

In some ways, it doesn’t matter whether you choose our Premium, Standard or Starter website package. Any of the three website packages can greatly improve the look of your site.

Premium Package

Our Premium Website Package is for those wanting a new, top-of-the-line look. This type of site is essential for companies that need to convey that their product or service is worth paying extra for.

Brent Fuchs – Premium Website

MIDCON Data – Premium Website

Standard Package

Our Standard Website Package is great for someone who wants a completely custom website, and wants full control over how that site looks. This site is perfect for any business that plans to use the internet and their website as a major marketing tool.

Harding School of Theology – Standard Website

Summit – Standard Website

Land Roofing – Standard Website

 

Starter Package

Finally, even our Starter Website Package will often be a great improvement over your current site. Like building with a certain type of interlocking block (you know the bricks I’m talking about), there are some limitations, but our design team at T&S can still deliver extremely creative, original solutions.

Cuppie Cakes of Edmond – Starter Website

Oklahoma CattleWomen, Inc. – Starter Website

The Nephesh Nuevo Project – Starter Website


Ready to find out which website package fits your business?

Contact us today at info@tandswebdesign.com or by calling us at 405-285-0348.

We love helping companies get ahead of their competition by having an updated, user-friendly website. If you’re a nonprofit, remember that our Starter Website Package is available to you on a pay-what-you-can basis.

Stay tuned for the remaining posts of this series! We will cover many other issues you may have with your website and/or social media.

 

Web Design is not Print Design

By Elyssa Dolinger on January 18, 2010 at 5:11 pm in Design

art

It’s easy to think that design is design and that there isn’t a whole lot of difference between the types of design.

For the most part this is true. There are definitely fundamental principles that translate across genres. Principles like the golden ratio and the rule of thirds and all of that good stuff. (If you’re a designer, even if you don’t know the name you’d know the rule.)

Aaaaand then there are concepts that definitely don’t translate.

Resolution

The great thing about web design is that you don’t need high resolution photographs. If you are buying stock images, this means you can buy the smaller (and usually cheaper) images.

As far as print goes, the higher the resolution, the better. You don’t deal with resolution as much in print design except for the dire need of a higher resolution image. Working in a higher resolution file means working in a larger file. Working on a larger file means higher processing needs.

Color Formatting

These are CMYK

Cyan, Magenta and Yellow printing pigments.

CMYK and RGB are two different animals. I could tell you one is additive and one is subtractive, but that doesn’t mean a whole lot to most people. It makes more sense to me to realize that one is light based (the light from the computer screen) and one is pigment (or ink) based.

It is very difficult to match print and web colors since they work with two entirely different color systems. Metallic colors are difficult to achieve, but more difficult for print unless you have access to metallic inks.

Fonts

aliasingIn large blocks of text such as books, brochures and newsletters, it’s advised to use serif fonts for ease of reading. The serifs have a way of directing the eye and helping you keep your line placement. It’s especially beneficial for the dyslexic because of the more obvious differences in i, I, l and 1. (Yeah those are all different characters.)

On the web, it’s advised that you don’t have large blocks of text. Sometimes it’s unavoidable, but for a lot of sites the fewer words, the better. The more you break up your paragraphs, the better too. So the need for serifs is pretty much gone.

There are also some technical benefits to using sanserif fonts. For example, sans serif fonts can be sized smaller than serifs and still be readable. There are also some aliasing issues (hard pixilation) with windows and serif fonts.

Organization

On the web, it is best to have your navigation available on every page so that you can navigate anywhere from anywhere. The print equivalent would be to have the table of contents on every page. It certainly takes up space.

Good design transcends browsers and platforms and material, but unfortunately a lot of times it is defined by them. Since the very make up of Print and Web are different, by definition shouldn’t the design be different too?

Alternating column colors with jQuery

By Tim Priebe on January 4, 2010 at 7:04 pm in css,Design,html,Technical

jquery-tablesWe recently had one of our designers create a table design for a client with alternating column colors. Instead of laughing at her and not coding it, we instead decided to use a little jQuery goodness to get it taken care of.

We included the following code in our document’s head, using the Google jQuery implementation:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");

google.setOnLoadCallback(function() {
$("table tr td:nth-child(even)").addClass("even-column");
$("table tr th:nth-child(even)").addClass("even-column");
});
</script>

So that’s the code that gives every other table cell, including header cells, the class of even-column. Now we can style those cells however we’d like.

In our case, a little CSS transformed the table pictured below on the left into the table on the right.

screen-shot-2010-01-04-at-64457-pm screen-shot-2010-01-04-at-64510-pm

Of course, putting the following in our google.setOnLoadCallback function will do something similar for rows.

$("table tr:nth-child(even) td").addClass("even-column");

This would result in the following:

screen-shot-2010-01-04-at-64554-pm

While this could have been solved by actually hard-coding the table’s cells with the even-column class, we are using WordPress on this site. This means the client could add their own table on down the line, having no idea what a class is, much less to add a specific one to every other cell in every row of the table. Plus, that would be a lot of work.

Can you find the mistake? We obviously failed.

By Emily Spirek on November 20, 2009 at 1:57 pm in Business Identity,Design,General

Case in point. Web is better than print.picture-23

Okay, not all the time, but when you find a mistake 10 weeks down the road, website has been launched, and it’s been through the hands of at least half a dozen people, thousands of dollars aren’t poured into correcting the piddly error.

We might suffer a little embarrassment and swallow our pride until the inaccuracy is forgotten, but we don’t waste the time and money that goes into reprinting the project. We simply redesign and/or work our magic in the code and voilà, error fixed.

Of course, print products (business cards, brochures, etc.) can be necessary for a business, but we are a big fan of instant gratification in the web industry. Besides our other 99 reasons to buy a website, the idea of quick and easy fixes is one of our biggest.

I’m guessing you’ve found the mistake in the screenshot above by now, and if not, you make us feel a lot better about ourselves. Check out the new and improved JJH Media.

Improve Content Absorption

By Elyssa Dolinger on November 12, 2009 at 1:18 pm in Design,How-To

Hey, I’m Elyssa Dolinger, a recent T&S designer hire (Yeah! Helping to even out our designer/programmer ratio.) and I believe strongly in the power of information design.

Print design theory can really help in classing up a web page. More importantly, print designers are used to working with a lot of content. A lot of times people want a lot of content on their web pages. We’ve learned a few things here and there to make content not only readable, but understandable.

Little tricks like the “rag” of a block of text and “leading” and “kerning” can take a page from unintelligible to just plain classy. It’s amazing what small changes to spacing can do for comprehension.

So, what are these amazing tricks, you ask?

Paragraph breaks: Yep. You heard me. Paragraph Breaks. If a reader sees a GIANT BLOCK OF TEXT, they will skip it every time. Give them hope that they can finish your content in the form of spacing between paragraphs.

Rag: The rag is the right hand side of a left-aligned block of text. (Or, conversely, the left hand side of a right-aligned block of text.) Confusing? Yeah. Here’s a picture.

Rag

The rag helps people keep track of where they are when they are reading. If a block of text is justified-aligned, there are no visual clues to help the reader. (Also it messes up your kearning.) The reader is more likely to loose track of where they are in your paragraph. Rather than start all over again, most will abandon the attempt.

Center-aligned or justified-aligned blocks of text are not advisable as far as large blocks of text go, but are okay as far as single lines are concerned.

Leading: Leading (rhymes with heading) is the vertical space between lines of text. It’s sometimes called line-spacing. The more leading you use, the easier a block of text is to read. Too much leading, though, and you’re wasting space.

Leading

See how this block of text (as opposed to the one about rag) seems somehow more approachable? This block of text has about 50% more leading than default.

Kerning: Kerning is the horizontal spacing between individual letters. It is sometimes referred to as tracking. This is most helpful in the case of headlines or specialty “decorative” fonts. (You know, the fonts used in logos and super cool web pages?) Most everyday use fonts or web safe fonts have the kerning ironed out already.

Kerning

Utilizing these 4 tricks, you too can make any content readable, understandable, and absorbable.

Evaluating a website’s credibility

By Tim Priebe on August 26, 2009 at 10:41 am in Design

A couple years back, Stanford performed a large study to determine how people evaluate a website’s credibility. Take a look below and see different factors influence your website visitors.

(Categories with less than 3% incidence are not in this table.)

Percent
(of 2,440 comments)		 Comment Topics
(addressing specific credibility issue)
1. 46.1% Design Look
2. 28.5% Information Design/Structure
3. 25.1% Information Focus
4. 15.5% Company Motive
5. 14.8% Information Usefulness
6. 14.3% Information Accuracy
7. 14.1% Name Recognition and Reputation
8. 13.8% Advertising
9. 11.6% Information Bias
10. 9.0% Writing Tone
11. 8.8% Identity of Site Operator
12. 8.6% Site Functionality
13. 6.4% Customer Service
14. 4.6% Past Experience with Site
15. 3.7% Information Clarity
16. 3.6% Performance on Test by User
17. 3.6% Readability
18. 3.4% Affiliations

Just the look of the site made up 46.1% of the comments! The next closest was over 10% away. This is a dead giveaway that sites like craigslist are the exception to the rule, not the rule.

Your website really does need to show your best side. Not just because a web designer tells you so, but because the research shows that it really does make a difference.

New trendy clothing website redesign launched

By Tim Priebe on May 30, 2009 at 1:28 pm in Client Plug,Design

We’ve just launched a redesign of one of our long-time clients, Nstyle Fashion Xchange. They first signed up way back when I was doing all the design work. We’d tweaked their design a couple of times since then, but this is the first time they’ve had a complete make-over.

Nstyle Fashion Xchange redesign

Compare this to my original design from back in the day, and you’ll be glad I’m not doing the design work anymore:

Nstyle old design

Older Posts »