Tools : Spanky Corners -- The SitePoint Corners Store
Generator To use the generator select your preferred foreground color (hex), background color (hex), corner radius (pixels: 5-60) and hit 'Spank Me!'. The generator will reload 'wearing' your selection while providing you 4 corner GIFs, the basic CSS and the HTML to obtain the effect. Or if you're lazy, try these preset values. Spanky Corners What? 'Spanky Corners' is an experimental technique for using only CSS to produce 'round-cornered content boxes' with semantically pure markup. Why? SpankyCorners has a number of advantages over alternative rounded corners methods. Spanky requires no extra HTML markup to act as 'CSS hooks'. News We're always happy to hear any feedback/suggestions for Spanky via this blog entry. Update: 8 May, 2006: Fixed a Firefox 1.0 render bug which was making the site look wacky. Update: 3 May, 2006: Solved the IE6 scaling problem. Update: 28 April, 2006: A few changes. Update: 15 April, 2006: Updated the way the images are generated and the code algorithms.
The global structure of an HTML document
7.1 Introduction to the structure of an HTML document An HTML 4 document is composed of three parts: a line containing HTML version information, a declarative header section (delimited by the HEAD element), a body, which contains the document's actual content. The body may be implemented by the BODY element or the FRAMESET element. White space (spaces, newlines, tabs, and comments) may appear before or after each section. Sections 2 and 3 should be delimited by the HTML element. Here's an example of a simple HTML document: <! 7.2 HTML version information A valid HTML document declares what version of HTML is used in the document. HTML 4.01 specifies three DTDs, so authors must include one of the following document type declarations in their documents. The HTML 4.01 Strict DTD includes all elements and attributes that have not been deprecated or do not appear in frameset documents. Note. 7.3 The HTML element Start tag: optional, End tag: optional Attribute definitions version = cdata [CN] <! <!
CSS Design: Creating Custom Corners & Borders
We’ve all heard the rap: Article Continues Below “Sites designed with CSS tend to be boxy and hard-edged. Where are the rounded corners?” Answer: the rounded corners are right here. The markup#section2 In the example markup below, XHTML line breaks have been inserted to pad out dummy paragraphs: <h2>Article header</h2><p> A few paragraphs of article text. If we examine the markup, we’ll see that we have given ourselves at least five hooks, which is all we need to place customized graphics in each of the four corners (and left side) of our article. See Step 1 — primary markup. The design#section3 First let’s decide on some basic layout parameters. “I want the borders and corners to look something like this,” he said. “Could you leave that open, or make it so that it’s easy to change?” The process#section4 We have a div containing the whole article. We’ll use our article-footer div for the bottom left corner — and the contained paragraph for our bottom right corner. The styles#section5
Stylesheets for Print and Handheld
10 Web Usability Tips - Just Fun
1. Motivate: Design your site to meet specific user needs and goals. Use motivators to draw different user "personae" into specific parts of your site. 2. User task flow: Who are your users? What are their tasks and online environment? 3. 4. 5. 6. 7. 8. 9. 10.
Wildly useful free Web development programs | C82 · art, the web, and everything in between
There are probably tens if not hundreds of thousands of programs out there for almost anything you can imagine and a small portion of those are geared solely toward Web development but they're not all top notch. Now, when I refer to Web development, I mean all sides of it including graphics, coding, and everything else. Sure, there are the usual players like the Adobe/Macromedia products but what I enjoy the most are the small free programs that someone made in their free time and decided to release to the world in case anyone else might need them. These sometimes require some hunting down to find and can be well worth it. I thought I'd take some time to share some of my favorites and hopefully learn about some more from my readers. I've been involved in Web development since 2000 but not seriously and professionally until a little over a year ago. I should mention that most of the programs I'll be covering here will, as far as I know, work on machines running Windows. Firefox MeasureIt
Alertbox: Jakob Nielsen's Newsletter on Web Usability
10 Usability Heuristics for User Interface Design April 24, 1994 | Article: 2 minutes to readJakob Nielsen's 10 general principles for interaction design. They are called "heuristics" because they are broad rules of thumb and not specific usability guidelines. When to Use Which User-Experience Research Methods October 12, 2014 | Article: 8 minutes to readModern day UX research methods answer a wide range of questions. To know when to use which method, each of 20 methods is mapped across 3 dimensions and over time within a typical product-development process. Usability 101: Introduction to Usability January 4, 2012 | Article: 4 minutes to readWhat is usability? How, when, and where to improve it?
Varför frames är en dålig idé | På Kornet
Innan jag går in på varför frames som regel ger sämre sajter ska vi backa några år. Frames verkade vara en ganska bra idé så där 1995-6, när de gjorde entre (jag minns inte exakt när det var - om du vet, skicka mej ett mejl). De verkade i alla fall lösa eller minska flera dåtida problem. För det första hade man börjat märka att många sidor i en sajt hade flera delar gemensamma: navigationsmeny, logotype, sidfot och liknande. Om man hade mycket stora sajter (med den tidens mått, vill säga - kanske upp till hundra sidor) blev det mycket arbetsamt att ändra något i menyn eller sidfoten. Med frames räckte det att göra en enda fil med navigering och logotype, och koppla ihop den med alla andra sidor i ett frameset. För det andra kunde webbdsignern med hjälp av frames se till att oerfarna webbredaktörer inte av misstag eller oförstånd ändrade på navigering, logotype eller design. Men allt det där var länge sen. Långsamma modem är inte heller ett så stort problem längre.
Usability on the Web
Usable Web sites are sites that work for your readers. A usable Web site encourages repeat visits. Find out what makes a usable Web site, and how to improve your own site. What are Design PatternsDesign patterns are a useful tool to make sure that your site elements work as they are supposed to work. Why Use Design PatternsOnce you start understanding how useful design patterns are it can be tempting to use them for everything. usabilityDefinition of the term usability as it relates to Web design and development What is Graceful Degradation and Why Should Web Designers Care? The Back Button - How People Use Web SitesThe back button is the most important button on a Web page, and it's not even part of the page itself, but the browser. Link Names Should Match the Page They Link To - Links and UsabilityWhen you click on a link, you want to know where you're going. Is Your Site Cool? AlertboxYou may have noticed that I've linked a lot of these articles around the site.
