One approach to this is to think in threes. Choose your first choice as your Windows font, then put a similar font for mac, and finally if necessary remember the linux crowd. Then in goes your generic serif / sans-serif at the end. Its choosing the first one that is important.
Lesson: Designing Styles for Contests (59 posts)
-
Root
Posted 8 years ago #
-
Yes, IF people know how to change their default font, you give the user control over web pages' look and feel. Unfortunately, the average person doesn't know how. And instead of Courier, I should have said Arial or similar default sans-serif. I let the error go at the time because we'd just lost editing priviledges.
You're right, as I said, it would go to whatever the default font would be for the user. Again, we are talking about designing for contests and most designers take their fonts seriously. VERY seriously, even going to the extend of embedding fonts in order for specific fonts to show up on their page to control the design and look.
While designers often think of "others" politely, it usually is targeted towards accessibility rather than font control. If this wasn't the case, then why the heck do so many bloggers (and website designers in general) choose microscopic fonts and font sizes? And restrict them to fixed fonts through the use of px or pt. The user loses complete control over the font size this way.
There are no hard and fast rules, right or wrong, on a lot of the stuff in this discussion. We're talking about recommendations for people entering theme or style contests and "if we were living in a perfect world" this is how it would be done. While the W3C and others have worked hard to address the issue of web standards, web designers are still out there doing whatever they want, and waiting for the browsers that do whatever they want to catch up with them and their designs.
But in a polite world, and well-mannered, code would be compliant with web standards, pass validation with flying colors, work with every browser, meet the needs of EVERY viewer, and be clean and streamlined, easy to read and understand (there is a difference you know ;-) ), and be pretty or at least awesome.
Everything else is opinion.
==================================
So what else can we say to help contest entrants to design better CSS and Themes and help those who use the end results? I'm not a judge - thank goodness - just helping people figure out the problems that can come from writing code for the general population of WordPress fans.What are some of the problems those of you who designed Themes came across?
-
What are some good fonts for Mac, by the way?
-
Jinsan
Posted 8 years ago #
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
http://www.wpdfd.com/editorial/wpd0704news.htmThese might provide some guidance
-
mpt
Posted 8 years ago #
Lorelle, beautiful sans-serifs installed on OS X by default include Lucida Grande, Futura, Optima, and Helvetica Neue (a newer version of Helvetica). You may also like Gill Sans or Impact.
If you like one of those, try the opposite of what Root suggested -- for example, {font-family: "Futura", "Trebuchet MS", sans-serif;}. That way Mac users get Futura (Macs usually also have Trebuchet MS, which is why you should put the Mac-only font before it in the list), Windows users get Trebuchet MS (IMO the most beautiful sans-serif on most Windows systems), and after that it's up to the browser.
-
Have another additional piece of advice for those designing for contents and public use:
Do not remove "default" CSS references!
I just removed the "calendar" styles from my own personal website and suddenly realized that Kubrick (WordPress default) doesn't use the calendar, but left the styles in in case someone wanted to use them. In fact, I think they are styled to look good if someone did want to use them.
Just because we like some detail or not, we need to leave the core coding in, commented out or whatever, but these have to be designed for a wide variety of user needs not just our design desires.
This might go without "saying" but I find that everything needs to be said at least once or twice to make sure someone is actually "listening"...hee hee.
-
Posted 8 years ago #
Does any one know of a good day to day sans serif available on linux boxes?
-
Or any other fonts for Linux? I just keep forgetting that they may see things a little differently, too. Good point!
-
Posted 8 years ago #
You may find this Unix related article relvant:
http://www.codestyle.org/css/font-family/sampler-UnixResults.shtml
Just to add, Lorelle, though I appreciate that the default references should be in there, for something like a single column theme which is specifically designed without the use of a calendar, it becomes very much redundant. If the user feels they want a two column theme, then they really should go for a 2 column theme instead of converting a single column theme into a two column one.
In all other cases I think the inclusion of default references for the css are absolutely fine, as they would have the space to play with such elements, but when you have only one column it's going to be pretty tight anyway. So, perhaps, there would be some exceptions to the rule (and a rather good rule I might add)
-
No, you're right. I wasn't taking about stopping additions, but saving the core references. It can be 14 column (they are out there, I'm sure) for all I care.
Make sure that
class="post"stays that and not change it toclass="fred"just because you think "post" is boring and you always named your main section "fred". But if you are adding a fourth column, then you can name it anything you want.Again, these are things designers for contests and public consumption need to worry about. The rest of us tweaking the snot out of our sites, we can do anything we want...and will!
=====
Now, a note about multiple columns. The folks at Position is Everything have saved the rest of us a lot of misery by coming up with two phenomenal examples of 3 column layouts that validate totally and completely and work across browsers - I think - without fail. They are constantly being tested and improved and all the documentation on what they have done to push and shove the code around to make it validate and WORK is all there to study. When I was first learning CSS, I printed out the page and the source code and just studied it like a fiend. It's an education in and of itself.So if you decide to go 3 column with your design, take some time to get to know the following two pages and code - very well.
Position is Everything's 3 Complex Column - Perched on a Lily Pad
Position is Everything Piefecta Ridid 3-Column Layout -
Posted 8 years ago #
Good luck :)
-
Andrea Rennick
Posted 8 years ago #
Tabs at the end of a line drive me batty. It should look good in notepad as well as anywhere else.
Tabs at the beginning for spacing and readability are to me pretty important.
(In css, you can get away with no tabs at all and still have readability; in other programming languages - not so much.) -
I've been pouring through the tons of wonderful entries in the current theme contest and I'm so seriously impressed. There are some very creative folks out there doing amazing things.
And the host, Alex King, has some really good comments on what makes a theme work in such a contest, so read the fine print and commentary very closely. He's spent a LONG time fixing many of the entries before they can be made public, and some just weren't "fixable". But overall, they are amazing!
I just thought I would add a couple notes, as I've spent way too long going through all of these marvelous designs.
Design the WHOLE thing not parts
I've mentioned this before but I've seen a lot of little details missed. For example, the hovers and links are all designed, but the visited mode has often been ignored. Especially when cruising through a long list of themes in the sidebar, I kept losing my place. Sure, I could often see the one highlighted that I was on, but I couldn't see which ones I'd looked at last time I came snooping around. On some well-designed pages, yes, I could see the past visits, but on a lot of them, no clue if I'd looked at the page before or not. STYLE YOUR VISITED LINKS.Test Across Browsers
For the most part, these are looking great in different browers, but I am seeing a few little details that sneak in between browsers. For the most part, they don't matter, but the issues around floating or layered elements that overlap badly in one browser but look fine in another makes it frustrating for the viewer. Watch those edges and overlappings.Use Some Color, Folks
I have to admit that I adore a very minimalistic look on a site. We work overtime on our own personal site to keep it real readable and clean, but I have to admit, in such a contest, if you really want to attract attention, add some color. Take some risks with color. Don't clutter everything up with everything being a different color, but get colorful. Pastels are fine, but there are a million other color types. So have some fun and get colorful.Eye Sight Cruelty
Luckily, this is rare, but there are still some designs coming out with tiny text. Watch that. And make sure there is enough contrast between the background color and the text to show up. The problem usually happens in sidebars rather than in the content area. Stylized sidebars are wonderful, colorful and dramatic, but if we can't read the words and links, it's a struggle to navigate the site.Using Graphics
As a photographer, I adore sites featuring strong visuals and photography, but as a professional photographer, I recommend you make sure you are willing to give up rights to your graphics and photography, and that you make sure that your designs in general meet the requirements for copyrights and public release as outlined by Alex King, competition host. He will not post any questionable copyright sites or content, but it is your responsiblity to make sure you are protected, or totally releasing all protection rights.- - - - - - - - - -
I think there are only a few days left, and themes are rolling in like crazy. I'm really humbled by the wonderful designs and great risks being taken in designing such powerful sites. Truly beautiful. Congrats to everyone who entered - outstanding work.And for the rest of us....I swear, we are all lazy slackers. Go check out the contest and be inspired!!
-
Posted 8 years ago #
With the exception of your second, and possibly the first point, I think most of those come across as personal gripes rather than style flaws. I've seen some exceptionally well designed, professional sites that follow the first two rules, but ignore the others - at the end of the day it's the designers choice how they style their themes, and how they choose to design it for the mass public who will in the end decide whether or not they like a theme by voting with their bandwidth.
Some things seem a given - the giving up copyright of images used being one example. If a designer is aware that this is a design contest for themes that will downloaded by tens, hundreds, or even thousands I hope they aren't naive enough to say "you can't use my image you dirty scoundrel!"
You've offered good guidelines, but as long as it's left to the indivudal not to feel pressured to change things. If it's how they want the theme, let them have it that way - of course it makes it more difficult for modification but the designer should have the final say and be left with the consequence of their decision. If they find they get a flood of complaints, that's their skills as a theme creator tarnished.
Then of course most would come here to complain and then get told to contact the author:)
The best way to be a critic and tell people how it's done, is to do it yourself and show how it should be done. Lead by example, and others will follow.
And kudos to everyone that's taken the time to submit their themes for the WP community, I'm sure everyone welcomes your committment to providing a wide selection of themes to both inspire and to be used by the users.
-
Posted 8 years ago #
I would like to make an effort to draw these two strands of the designer v coder debate together. The coders do not regard things like validation as obstacles, requirements or qualifications. They treat them as tools Instead of saying *OMG I have 200 errors* we can take that as really valuable info and start cleaning up. Because if you have both a bork and non validation simultaneously you do not know which error to fix first. Likewise simplicity. It is a tool in itself. But here is the thing. All this stuff effects how the page works . Use photoshop mockups, or sketch away till your heart is content. But until the bare bones are up and running cross platform and in legacy browsers it isnt good html. It is just a drawing. Fancy maybe. But it is only an image. The great thing about CSS is that it is a very long journey and a lot of fun. :)
-
vkaryl
Posted 8 years ago #
TopStylePro users: I think you can set up your own default in "StyleSweeper" to put elements however you like them. (I say "I think" because I think I had it all set up that way - before a new hdd and reinstalling everything *sigh*). IIRC, reframing stylesweeper to work the way one wants it takes some time but ultimately is a time-saver down the road....
And btw, guys, this whole thread is PRICELESS. Could this somehow get stickied?
-
It will be in the Codex, maybe as soon as this weekend.
And none of these are "rules" but guidelines to help anyone designing themes. A lot of people think about entering contests like art contests because they think they are good at creating art. That's fine, but there is a lot of work that goes into judging art and judges take a lot of different things into consideration when they make their decisions.
The whole point of this topic is to:
1) Help people design themes for the public so the public is:
A) safe from crippled and un-uniform themes
B) downloading themes that meet some kind of standard and consistency
C) not going to swamp the forums with "why does it look bad in MSIE and terrific in Firefox" and other "why is it doing this" kinds of topics just because the designer slacked or didn't take everything into consideration
2. Help designers design themes:
A) So designers know what is expected from them when they make their designs public (user's expectations)
B) What to take into consideration when desigining their themes
C) Hear what other theme designers think about how they designed themes and made their decisions
D) Know that there are some standards that should be met in creating themes and where to find that information if they need it.
We're all here to learn from each other. None of these are hard and fast rules, though I like to think at least code validation should be a rule, but I'm not making the rules.
Like I said, the caliber of design work is incredible. I hope that at least a couple of the designers learned a thing or two about what to put into their public theme from this thread - so that we all work to do our best.
And I'm glad that this has been a good topic. I loved it when Moose talked about planning a site by sitting down with colored pens and crayons and pieces of paper. I sure wish designing websites were as simple as using crayons, but it isn't, and we all need to understand what it takes, what to expect, and what the public expects from the designs. All of it equals A LOT OF HARD WORK....and some fun, too.
-
- CSS Design - Style
- CSS Zen Garden
- CSS Vault
- CSS Beauty
- Style Gala
- Devil's Details
- Plastic Pilots
- Web Standards Awards
.
- CSS Design - Technical
- Liquid Layout
- 3 Column Layout
- Building Full CSS Layouts
- Premade CSS Box Layouts
- More Premade CSS Box Layouts
- Advanced CSS Layouts
- Center objects vertically and horizontally using CSS
.
- More Resource Lists
- Holy CSS, Zeldman!
- Mezzo Blue
- Style Gala
- Glish
.
- CSS Specifications
- CSS Version 1.0
- CSS Version 2.1
- CSS Version 3 (NOT FINSIHED)
.
- (X)HTML Specifications
- XHTML Version 1.1
- XHTML Version 1.0
- HTML Version 4.01
.
Hey WordPress, how about some margin-bottom on these damned list eh? Its a bitch trying to space these lists out! -
Please Delete
-
A lot of these are included already in the article and in the Codex, but they are wonderful resources. Thanks.
And trying to make things "look pretty" on the forum is difficult. We understand TOTALLY. Don't worry.
The article regarding all of this may be released this weekend. Stay tuned!
-
Also, bear in mind particularly when designing styles for contests -- the assumption being that there will be wide distribution of the design -- be VERY CAREFUL where you go to obtain your design's images. Quite a number of stock image repositories strictly prohibit redistribution of their images in templates, which is basically what you'd be doing. One of the few that permit it is StockXchange.
-
dolmarit
Posted 8 years ago #
Everybody can say what he wants but there is absolutely a relationship in the order of writing down your CSS and the way your page is build up.
Not that I am one of the great top designers.
That it is still a big mess on the Internet is not a surprise.
Take a look at the site from W3C normal people get crazy if they are looking for something on their website.If you open a page first you see a whole lot of information your not looking for.
You see a bunch of information about people who are related to the topic and then MAYBE some information what can be usefull,
and then still you get confused.Still on W3C they are fighting about what is right and what is wrong.
In the early beginning I already was working with DIV's and LI.
But at that time it was not recommended by W3C my pages did not validate.
And what do you see now these days it is more common then ever.
I can understand why people have problems with designing.
But I think for the best keep in mind the following and I think a lot will agree.
Build up your page together with your CSS file.
If necessary split files into modules.Give specific ID's any name you like starting with # or . or yourname.
Seperate ID's and classes.
Although the W3C is a basis for developing the W3C is not really the handbook for beginners more and more it is a place for strangers and bigheads.
The best is to think logical and to go step by step to the top of the stairs although sometimes there are some borders.
As long as there are no specific basic rules it will be difficult all the time.
So the best is to take advice from experienced users without specifically following the rules from BIG heads like W3C.
W3C is also following us and is taking the best from us.
Think logical and design logical.It means.. if you can do with A do no not ad B !
Because A will do.I hope this contribution is not to complicated but will help some beginners.
-
Thank you for your contribution to this thread. Unfortunately, designing WordPress Themes for public consumption isn't like designing for your own personal site where you can do what you want with whatever you want to do.
When designing WordPress Themes, the user who downloads the Theme has some expectations and assumptions.
One, that the theme will work for them, no matter the operating system or browser they will use.
Two, that it will pass any tests they put it through, like validation.
And three, that it is "familiar". This means that if they have been through one Theme, at least the core style classes and elements are the same in the second, third, fourth, or eighteenth Theme they are test driving or using with a Theme Switcher. The look may be different, but the internal elements are familiar, if not exactly the same.
I'll add a fourth. People come to these forums looking desperately for help to figure out what is wrong with a public Theme they downloaded. While we volunteers do our best to help, we also look for the familiar to help us solve their problems.
The topic of this discussion is how to help people design Themes for public distribution. Your points are very good, but we also have to be conservative when it comes to guiding the folks who are excited about sharing their web page designs with the public. Some standards have to be followed. For now, we stick to the ones that are in writing.
For those who want to stray from the path and break the rules and invent their own, I say go for it. But take care when you release that look for people to download as you may be overwhelmed with explaining yourself and troubleshooting to accomodate the thousands of WordPress users who take your Theme for a spin.
-
Posted 8 years ago #
Hi Lorelle
Well you made some very important points indeed.
That's also why my new theme still isnt public for download.
It is still under construction to take out child diseases,
that is also why still certain references are used inside the CSS to find them.
But on the other hand if the theme switcher does not pick up the CSS
and is loading for example another file then meant to be for the real theme there is nothing wrong with the new designed theme but with the loaded files from out the theme switcher.On the other hand of course their must be a default, a safe heaven to start with !
But when I look right now what has happened with 1.5.1 I wonder
what is going on here.1.5.1 is in fact still Beta and causing serious problems and still defended as being better then 1.5.0. to take this one as an example.
Ofcourse certain things are running faster.
But I see bugs reffered to by hardliners that should not be there !So on this part of design it should have been better to send out some security patches first to take out certain problems instead of coming up with 1.5.1 with a clear description.
This is not a statement to take WordPress down but a statement to build up WordPress better.
In my opinion you did a very good job to start this topic.
and I hope it will make WordPress even better then it already is.And then one more compliment for the help on WordPress !
Websites like W3C PHP MYSQL and other bigheads could take this website WordPress as an an example for excelent support on all aspects of design.But still things can be improved and as far as I am concerned WordPress has a great future with all these fine people who give great support without any payment.
-
Though I'm all for saving bandwidth, I think commenting and easy to read and decipher css is a great thing if I have to go in and change something. The few bytes I've "wasted" can save me a LOT of time if I have to go in and make a change. Or it can lead someone else right to the change they want to make if I let a theme design out to the general public, which I'm planning to do soon.
Re font sizing-- I think defining it on the body by using a word, like "small" is best, then using percentage adjustments on divs, tags, or classes which you wish to appear different. This gives the most easy to resize result across browserland. Pixel sizes are sometimes a problem (in IE I believe) and older browsers can't handle ems well at all. There is no such thing as a "standard" font size anyway, as I'm reminded every time I look at something on my half-blind friend Jerry's computer and see all those HUGE letters on his screen.
FWIW, I think all css should be in the linked stylesheet in all themes. It defeats the purpose of easy edits when it is put in more than one place. I was glad when I found an article on how to "deconstruct" Kubrick before reconstructing it, that article shortcutted me a lot, since I would have been looking in the wrong places for things that were styled elsewhere than in the stylesheet. That article is here:
http://www.urbangiraffe.com/2005/04/12/themeguide1/Re resources for css:
http://css-discuss.org
http://css-discuss.incutio.comI would never have learned css as fast as I did without this group. Eric Meyer is one of the group leaders and moderators. Holly Bergevin and Big John of positioniseverything.net, and Zoe, who also writes articles for communitymx are list members. They're just a few of the many, many incredibly helpful and knowledgeable people who make up the list group. And when your theme isn't working in IEMac-- the answer is here.
-
Isn't it amazing all the stuff you learn just by going out there and screwing things up and then trying to fix it yourself ;-)
Good points, all.
-
IMO it is the responsibility of the designer to present clean and validating code, and irresponsible to do otherwise. Sorry, Jinsan, but it really isn't that hard to offer clean code, and those who offer otherwise are being either lazy or ignorant. There's plenty of help for those who get stumped on a validation problem re css or html or php, whether it be messageboards like this one, newsgroups, etc. If I offer a theme for download and use it's guaranteed to validate-- what you peeps do with it after I let it loose is your problem . . . and if it doesn't validate after you've played with it, it's your responsibility to fix what you screwed up.
My other strong opinion is about where the css should reside. These themes are confusing enough to edit, with the multiplicity of files which makes a mistake easy to make and hard to find. Putting the css in more than one place, especially embedded or inline, is asking for trouble. Put it all in the style.css file please! Or at the very least put it all in external files that people can see are css only (for instance adding a print.css, a handheld.css, or an uglyieonly.css)
Though I'm a fan of saving bandwidth, and use shorthand css all the time on my own (nonwordpress) sites, I think that the longhand css is better for themes that you're putting out for the general public to use. They're easier to read, edit and use for someone who maybe isn't a css guru. It doesn't matter to me personally, but I can remember when I was just starting out with css a few months back how confusing a completely shorthand stylesheet was to me. I'm going to opt to follow the KISS rule on this one (Keep It Simple, Stupid!) I'm also going to "comment" things to the hilt in both the html and css, so folks can find their way. And I'd venture to guess that if a peep liked two themes, one of them mine and one a shorthand bandwidth saver, and the peep wasn't all that experienced with css, they'd end up customizing and installing mine instead of the other one. Usability should be key here, and I hope that, given the same situation in a contest, it's weighted a bit more strongly than bandwidth usage. Yes, bandwidth is a consideration, but we're not talking huge differences here, and the bit it takes to make something more understandable to a newbie who is trying to learn this stuff is worth it.
-
The topic of this thread is something that has bugged me for quite a while and I'm glad to see it being discussed here. I usually lurk around but I have to put my 2 cents in here.
I'm no designer - no CSS guru - not even close. I've hacked and slashed through 15-20 themes and the one big problem that seems to run across most of them is a lack of some sort of standardization. One has "content" the next "main". One has "sidebar" the next "menu". Makes things difficult especially when you're trying to adapt non-WP add-ons.
Kubrick's stylesheet is a nightmare. It's a great looking theme but why it's used as the default is beyond me. It seems to break many of the "rules" that have been discussed here. However, sifting through it and understanding it has increased my level of CSS understanding and I'm grateful for that.
Anyway, thanks to Lorelle and everyone here. All of the suggestions presented here can only help us all do a better job.
-
So glad we can help. It's a great discussion and brings up a lot of issues that Theme designers need to know about.
Topic Closed
This topic has been closed to new replies.
