I'm looking for sources of inspiration and/or design patterns for navigation 'breadcrumbs'. So far I have found the breadcrumb collection on Pattern Tap. Does anyone know of any other sources?
The article 'Taming lists' from A List Apart has some good advice on CSS styling for breadcrumbs (look down for the heading 'Breadcrumb Trails').
The Yahoo pattern library has a useful wee bit about breadcrumbs too.
http://www.greepit.com/2009/02/06/breadcrumb-inspiration-for-designers/
I found a few good/bad examples of breadcrumbs here.
Also, there's a blog post about breadcrumb designs.
There's a great page on breadcrumbs at the Diemen Repository of Interaction Design Patterns
Smashing Magazine also has a decent roundup:
http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/
If using Microsoft ASP.NET, there's a built in control: SiteMapPath.
Web & Patterns breadcrumbs category
"Inspirational and creative Breadcrumbs for web design"
Related
My wording might be a bit off, but I wonder if there's an open-source HTML/CSS template/framework for creating 37signals-style layouts, much like this:
(source: basecamphq.com)
Of particular interest is the tabbed layout and the sidebar to the right.
Not all free, but still a good reference: 34 Outstanding Admin Panels for Your Web Applications
There are a couple of WordPress Basecamp style themes about:
Prologue
P2
GTD
Try some open source template sites then, most likely you'll have to get something similar and edit it.
E.g:
( http://www.oswd.org/ )
Goodluck
So, as recommended, I did the W3Schools HTML and XML tutorials this weekend. I understand the basics.
Now should I look to get more depth in HTML, or go straight into learning CSS (and try to keep learning html at the same time)? If the first, where should I go for more advanced HTML tutorials?
Go for HTML (XHTML) and CSS togehter as the CSS is the proper way to stylize view of your XHTML data.
I do recommend reading the excellent book: Head First HTML with CSS & XHTML
IMHO, i would say depends on your role, are you a designer or you're the coder guy who have to put functionality into the site?
if you're into the design, then i would say css and good website designs are necessary.
in that case i would recommend don't make me think and erik meyers css book.
but if you're into the functional part of web site, i would say learn javascript then jquery. i can't tell you how many times jquery save my bacon.
and finally nothing beats putting theory into practice, so you can either search around and view source and learn from good sites, or start creating your own :)
Check out these resources, they are great.
http://www.amazon.com/gp/search/ref=sr_nr_i_0?rh=i:stripbooks,k:zeldman&keywords=zeldman&ie=UTF8&qid=1269221229
You can also visit your favorite sites and View Source and see what they are doing. Try to recreate it in your own example.
Learn as much HTML as you can, because it will make you better at complicated layouts which will require a bit more advanced CSS.
for a begginer good start at learning HTML would be to study existing web pages around the net, by either using web dev tools inside browsers or some web-app like http://webdeconstructor.com/ that let's you analyse layout of any given web-page and all HTML tags on it
if "WEB front-end development" like a person
the "HTML" makes he's "skeleton"
the "CSS" makes he's "surface"
the "JAVASCRIPT" makes he's "action"and"thought"
so you should learn them together
I have general question how to start developing my skills in web designing.
What is best place to start and what technique to use.
I have some knowledge of html and css, so far I have been building sites with already done all html and css. I would just use it and maybe do a smaller changes.
I want to be able to make html and css out of image that artistic guy produces.
http://w3schools.com/ has some great tutorials and you can play around with stuff right their on their pages.
A lot of the really "artsy" sites are produced in another program first, usually Adobe Photoshop or Adobe Illustrator, and then 'sliced' into HTML div's. NetTuts has a handful of tutorial on how these that show the complete start-to-finish. Here's a few I found real quick:
Design and Code a Slick Website from Scratch – Part I
How to Design and Code a Flexible Website
New Plus Tutorial: Convert a Beautiful PSD to HTML and CSS
Coding a Beautiful Website From Scratch: Plus Tutorial
(the last 2 I think you have to be a paying member for)
Here's a great web resource to check out for HTML/CSS: http://htmldog.com/
Also, do a Google search for "psd slicing." This is the process of taking an image of a website layout (a.k.a. mockup) and turning into valid HTML/CSS. You'll find a lot of screen casts and tutorials that will walk you through the entire process.
Start by getting a book and look at some tutorials. Google will help you there. Once you've got a decent idea of what's going on, look at a site, and try to duplicate what it looks like. If you're curious as to how something works or can't figure it out, look at the source (preferably with firebug) :D
Good luck
As others have said, getting a good book on HTML/CSS will certainly help.
Also read up on Web Standards - I think its really important to start learning these principles from the beginning as it will help you write valid HTML/CSS... and avoid writing invalid code.
I highly suggest the book "CSS Mastery". It's got a green cover with a pink binding...I think they've recently released a new version actually. Amazing book for beginning and advanced. I consider it my CSS bible.
I highly recommend w3schools.com and the Head First HTML with CSS & XHTML. I like most of the book in the head first series, in fact. They take a fun very visual approach to learning & I am a visual learner. Lots of things to practice & hints to help remember things.
If you don't feel totally confident then definitely pick up Head First HTML. Aside from that there are a few websites I would recommend:
A List Apart,
Stop Design
and as others mentioned the W3 website.
Working with a designer often means that they will produce mockups using Photoshop and you will in tern work off those. As that is the case having a working knowledge of Photoshop will be very useful for you. You don't have to be a wizard but some basic knowledge will enable you to do things like create image sprites from the mockup and get information relating to the width, height, color, etc of the different components in the design. As far as getting up to speed quickly there are many books on the subject, the Photoshop One on One books are a pretty good series and there are video tutorials available at Lynda.com.
I started on just looking at youtube. A really simple book for learning to code css and html is get coding. It's for kids, but it's a great start. I started there about a year ago, and now I've developed multiple websites for a couple of businesses. And I'm only twelve!
Is there any fast guide for web application programmer regarding CSS. From my experiece, if one coder with no graphic design background but good in css can use div and span to create a nice looking page. any such 'quick guide' available for coder?
http://www.csstutorial.net/
http://htmlhelp.com/reference/css/quick-tutorial.html
There are plenty of quick guides on the staples of CSS, but they're more of an implementation perspective rather than a guide to aesthetic qualities (which I think is what you're asking).
To me most, one of the most authoritative sources for this subject is A List Apart. I suggest you start there.
I think what you want to read is "The Principles of Beautiful Web Design". It's a pretty light read, and give you insight in some designer concepts to get you along the way pretty fast.
If you want to learn css to put a nice page together I'd use a framework like 960gs. This won't help you in the context of working in a non-frameworked environment. But if you want to knock up a nice looking page from scratch without doing anything exotic with the layout and get it to work with a load of browsers 960 is the way to go.
Still go through some basics in css though.
I have heard that GTK covers all controls so that developers do not care about CSS and HTML any more. Do you guys agree with this idea?
Actually, GTK is not a web toolkit (if we're talking about the same GTK), so it doesn't conflict with CSS and HTML in any way, so developers who did care about CSS and HTML still do and those who do not, didn't care before GTK either.
FWIW, there's a lot of discussion on the gtk-devel mailing list about using CSS for GTK theming.