You are currently browsing webpplz’s articles.

http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

We’ve briefly discussed Web 2.0. To clear up a commonly held yet mistaken belief, I quote Wikipedia:

It is a common misconception that “Web 2.0” refers to various visual design elements such as rounded corners or drop shadows. While such design elements have commonly been found on popular Web 2.0 sites, the association is more one of fashion, a designer preference which became popular around the same time that “Web 2.0” became a buzz word.

Still, whether they are a part of Web 2.0 or not, it is fairly clear that rounded corners are all the rage right now, and if you feel like jumping on the bandwagon, the above link can teach you how. But it doesn’t just teach you how–it gives you 25 different ways to do it, linking you to tutorials on other sites that all take slightly different approaches to the problem. Yes, there’s that many possibilities.

I’m not going to get into why one should or should not adopt the rounded corners trend. It is, in the end, still a matter of personal preference, and I’m sure we, as designers, can all form our own opinions of whether they are stylish or tacky. It is, however, important to note rounded corners’ impact on web design. Because of the way HTML and CSS are designed, following a box model, it’s always been easy to set up a layout with rectangles and squares–in other words, hard 90-degree angles. The “discovery” of rounded corners represents web designers finding a way to free themselves of traditional constraints of HTML and CSS. It also represents the fact that it is possible to do virtually anything in CSS, even if at first glance it might not seem like you’d be able to do such a thing, just as long as you get creative and/or sneaky with your code.

Advertisements

Article On 100% Height:

http://www.communitymx.com/content/article.cfm?cid=BAD95

Article on Footer Positioning:

http://www.alistapart.com/articles/footers

Faux Columns Technique:

http://www.alistapart.com/articles/fauxcolumns/

One of the somewhat frustrating things about CSS is that elements only stretch vertically as far as they need to. This becomes an issue when you want to get the side navigation column’s background color to extend all the way down the page. There are a few different ways to get around this and here are three articles that explain how accomplish it for use in most modern browsers. It seems strange to me that an issue this common is not built into CSS. These techniques and a lot of fanagling will hold us over for now. -Joe

http://browsershots.org/

When designing web pages, it is a good idea to have as many browsers on your computer as possible, so that you can test your code in each, as most browsers interpret the code in slightly different ways. If you have done any design before, I’m sure you have had a site that looks great in Firefox, but looks screwy in IE, or something like that. Often you can’t have multiple versions of a browser on your computer, and it may be impossible for you to test your site on browsers of another OS. That is when the above site is very useful. All you have to do is plug in the web address of the site you are testing, check off the browsers you want to check and submit it. It may take a few minutes, but you will get screenshots of your site in countless browsers and operating systems.

When creating a website, you want people to have a way of finding it. This can be business cards and advertisement, links from other sites, and, primarily, the search engine. Especially if you are using your website for business purposes, it is very important that your site rank high in the search engines. Even the coding of your site needs to be approached in a way that will optimize your search rating. Keywords, domain name, incoming links, overall traffic and more all effect how high in the results your site will be. Most people do not look past the first page of ten results when searching, so search engine optimization is very important. Below are some good resources for SEO:

http://lorelle.wordpress.com/2006/01/15/dyi-search-engine-optimization/

http://homebusiness.about.com/od/yourbusinesswebsite/a/DIY_SEO_Tips.htm

http://selfpromotion.com/

http://www.rankbydesign.com/

-Nick

  http://www.cymbolism.com/

Color is the ultimate tool a designer has at their disposal to communicate feeling and mood. This site attempts to quantify the association between colors and words and become a resource for designers to choose the best colors for the desired emotional effect. You can both go through the list of words and give your answers on what color goes with what word or you can browse the results. It is an interesting experiment and could be useful if you have clients with loose enough brand standards to let you use a new color to set the mood.

other sources:

http://whdb.com/2008/follow-the-rainbow-101-color-resources-for-web-designers/

http://wellstyled.com/tools/colorscheme2/index-en.html

http://astheria.com/design/my-last-portfolio-sucked-yours-might-too

The goal of Astheria.com is to provide design articles, viewpoints, and resources that are not the same regurgitated, rewritten articles that seem to plague the design blogosphere.

This article is about common mistakes in creating a portfolio site.  I think this will be useful to my own web portfolio. So the author evaluates 200 portfolios for this research, there are screenshots to illustrate his points on some of the websites. The goals he judged each portfolio on, and that each portfolio should strive for are relatively simple: Impress the viewer within the first 10 seconds visually and allow the viewer to succeed in their goals (viewing your work or contacting you)

960 Grid System, by Nathan Smith, “is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.” Why 960? 

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.

The grid is divided into 12 and 16 columns, which can be used separately or in tandem. PDF grid paper, templates for Fireworks, OmniGraffle, Photoshop & Visio, and CSS framework with demo HTML are available for download here.

This flexible grid system and its supplied templates are handy for prototyping website designs and helps keep elements consistent and easier to code.

 

-Beverly

http://www.wakeuplater.com/website-building/evolution-of-websites-10-popular-websites.aspx

From a web designer and developer’s blog, this article shows examples of well known websites at different stages of their evolution. It’s great to make fun of older websites but also interesting to see what trends have emerged. Some websites have gotten simpler and image heavy while others have gotten more complex as people have become more adept at navigating websites.

It seems as if we’ve been using the internet long enought that we can look back on the web historically and note movements and draw conclusions the way we might look historically at industrial design, art history, or the history of invention. Web Archives or Google Trends are neat ways to look explore the past.

http://jigsaw.w3.org/css-validator/ 

http://validator.w3.org/

These two sources allow you to check to see if your website is compliant with HTML, XHTLM or CSS standards. HTML validators operate by comparing the mark-up on a web page to the W3C standards. The standards vary depending upon the declared version and so the validator will start by reading the “doctype” declaration to see which set of standards to apply. Once the validator has read the page and determined the applicable standards it looks for such things as missing opening or closing tags, missing quotation marks and other hand-coding errors. So if you have been looking for hours to find what’s wrong with your code, try one of these websites.

http://sixrevisions.com/resources/websites_for_web_development/

“I’ve made it a goal to learn at least one useful thing each day so that I can stay sharp and well-versed on the topic of web development and design.” This blog contains a number of useful information sources for website development, information hierarchies, and design choices. There are 30 web pages that provide invaluable tools for both beginning and advanced website developers. The blog provides helpful descriptions of the pages and the information that they provide. Personally, I was most influenced by Web Designer Wall. Web Designer Wall is another blog that provides design ideas and CSS tutorials.

http://www.typetester.org;

http://www.newark1.com/index.htm

The first website is very useful for choosing a typeface for your website! You simply choose a typeface and you immediately know how it looks like in your browser. It shows you all varieties of the choosen typeface, and you can test it in different sizes, tracking, colors and so on. On that way you can shortly test what size you need for a heading, as an example. Just type it in, and you don’t get disoriented…

The other homepage is just a nice guide for building a webside. It has a lot of useful links. For free fonds for example (my pasion)! What’s more you find all the basic design tips and get some inspiration!