Min-width and Max-width template
Min-width and Max-width template
Some problems seem to appear again and again, and one of them is page width. How wide should a site be? Should you adapt to 800px resolution? 1024px? Fully fluid with percentages? Perhaps elastic using em-units? There are lots to choose from. What I’ve found is that there’s one solution that almost always works. You […]
@media Ajax London, here I come
Just a short note that I’ll be attending @media Ajax London, 19th-20th November. If you see me, come by and say hello!
IE8 Passes Acid2 Test, Web Standards Project Dies of Shock
Although he goes out of its way to downplay the significance of the event, there is no missing the sense of achievement in the words of Microsoft’s Dean Hachamovitch on the IEBlog today: I’m delighted to tell you that on Wednesday, December 12, Internet Explorer correctly rendered the Acid2 page in IE8 standards mode. The Acid2 test […]
Although he goes out of its way to downplay the significance of the event, there is no missing the sense of achievement in the words of Microsoft’s Dean Hachamovitch on the IEBlog today:
I’m delighted to tell you that on Wednesday, December 12, Internet Explorer correctly rendered the Acid2 page in IE8 standards mode.
The Acid2 test was developed by the Web Standards Project (WaSP) as a challenge to browser developers. In a single page, the test makes use of a broad range of features from several different web standards that developers have wanted to have in browsers for some time, and it uses them to display a deceptively simple smiley face.
The first browser to support the Acid2 test was Safari 2.0.2, back in November 2005. Since then, iCab and Konqueror have announced their own support. The current beta of Firefox 3 comes close, but isn’t there just yet. With this announcement, it looks like Internet Explorer may actually beat it to the punch!
At the time this post was published, the Web Standards Project’s web server had collapsed under the strain of traffic generated by this announcement, but thanks to the Internet Archive I was able to collect this list of new features that we can now infer will be supported in IE8:
- displaying images with the
tag, which enables you to include richer alternate content than the - CSS tables, which let you use table-based layout techniques without misusing HTML table markup
- generated content, which lets you insert extra content before and after elements using CSS
These are all incredibly useful features that the other major browsers have supported for some time, but which have not been available for real-world use because of the lack of support for them in Internet Explorer. That’s all about to change. Support for CSS tables alone will be enough to drastically change real-world CSS page layout techniques, making them much easier to learn and use.
Microsoft is promising to release a beta of Internet Explorer 8 in the first half of 2008. The big question for web designers who will be hoping for swift adoption of the new browser: will it run on Windows XP, or require an upgrade to Vista?
As Dave Shea of the CSS Zen Garden put it, “Better bundle up, it’s a cold one in hell today.”
Microsoft has published a fascinating video record of the rendering of the Acid2 test in internal builds of IE8 over the past six months. The video also includes an in depth interview with Dean Hachamovitch and Chris Wilson. Recommended viewing with a few holiday warm-and-fuzzys from Microsoft.
This article provided by sitepoint.com.
Media attribute - what have you done for me lately?
I’ve been thinking for a while about the media attribute on link tags. Some people might find that thinking deep thoughts about HTML attributes is kind of strange, but I know you, my dear readers, know the feeling 
An example, just so I know we’re on the same page:
This […]
New design for friendlybit coming up
Hi. I just wanted to tell you that I’m now working on the new friendlybit. I’ve listened to your previous comments, and these are the changes I’m going to make/not make: Blog format stays, no community. You’re damn conservative (something like 95% percent said to keep it a blog). More compact writing. I’ll skip more of the […]
I’m an interface developer
In his latest post Roger Johansson asks the question Are we designers or developers?. I have a simple answer for that. None of them. Let me explain: First we have these people calling themselves developers. And boy do they know programming… and math… and… no that’s all. Many have a masters degree in computer science, a […]
A picture is worth a thousand words, but that’s not always enough
How to add captions to images in Photoshop On the Web it is preferable to place your caption in the HTML. If that won’t work and your captions are long, you should also link to a place providing a description of the image and an alternative rendering of the text. Colleagues of mine are involved in a project that involves adding captions to photographs. Like many of you, they aren’t full-time designers and haven’t spent a great deal of time using Photoshop. While they know how to crop and resize photos, they’ve not yet worked with type. For those…
How to add captions to images in Photoshop
On the Web it is preferable to place your
caption in the HTML. If that won’t work and
your captions are long, you should also link
to a place providing a description of the image
and an alternative rendering of the text.
Colleagues of mine are involved in a project that involves adding captions to photographs. Like many of you, they aren’t full-time designers and haven’t spent a great deal of time using Photoshop. While they know how to crop and resize photos, they’ve not yet worked with type. For those of you who may someday face the same situation, here is a quick tutorial on adding text to images.
Establish your project parameters—size matters
Are your captioned images going to be used on the Web, on hand-outs produced by your office printer or in commercial print work such as a magazine? At what size will they be used? When editing your photos you will want to start with the largest image file available, crop it as necessary then resize it to your project specifications before adding your text.
As I mentioned when discussing image formats, your usage will impact your size specifications. Generally you will want an image that is 300 pixels per inch (ppi) for commercially printed pieces, one that is 125-250 for desktop printing (refer to your user manual to determine the maximum dots per inch (dpi) your printer will produce) and somewhere around 72 to 100 for the Web.
Note: measurements for print are exact; if your photo is 300 dpi and 1 inch square, it will be printed to be exactly 1 inch square. If you print it at 72 dpi and 1 inch square it will still be exactly 1 inch, but will have less detail. Measurements for the Web are relative because they are determined by your display. On my Dell there are 77 pixels in an inch, while on my Mac there are 98 pixels in an inch. Your display may be different. As a rule of thumb I just use 72 (which was common for most monitors back in the 1990’s) and keep in mind the fact that a 3 inch wide photo at 72 ppi will appear smaller on the Mac than it will on the PC. Either way it is 216 pixels, but the pixels on my PC are bigger than those on my Mac.
Consider the amount of text you are supposed to add to the image. Try to make this as brief as possible, especially if your project will be viewed online. While you may be able to use tiny type on printed matter, that type will be harder to read online. Fewer pixels mean fewer details, so 6 point type online will be tiny and jagged.
Also ask yourself if the text needs to be on the picture itself or if it can be read as a caption underneath the image. If the project is for the Web you can include captions underneath a photo in the text rather than in the image. For situations where that won’t work, such as HTML e-mail, just be sure to repeat your caption text in the alt tag of the image.
How to add text in Photoshop
For this example I’ll walk you through the steps used to caption the image used in this entry. We’ll add text on top of the image and below.
- Open your image file in Photoshop. For practice you are welcome to use this sculpture photo.
- Resize your photo by going to the image menu and choosing image size. Make sure that “constrain proportions” and “resample image” are checked. Set the resolution appropriate to your project. I’m using 72 for the Web. Choose the appropriate width for your image. I’m using 240 pixels.
- Click on the foreground color and use the picker to select a color for your type.
- Select the type tool, click and drag on the image to create your type box, and start typing your content.
- If it is not already open, go to the window menu to open your layers window. Note that your type was created on a new layer.
- Switch to the selection tool to reposition your type as desired.
- If your background is too busy, you may find that your type is hard to read. Try adding a drop shadow or outline to it. To do this double click on the type layer in the layers menu (click to the right of the layer name). This will open up the layers style menu. Check drop shadow, then click on the words “drop shadow” to see your parameters. Drag the menu somewhere to the side—so you can still see your type—then adjust the angle, spread, size and distance until your type looks clear. You can experiment with drop shadow and other options to create different effects. You can also try changing the color. Just try to keep it simple. (Hot pink type with a lime drop shadow is usually a no-no—unless you’re competition is “Hello Kitty.”)
- Sometimes a drop shadow isn’t enough. In this case you may want to experiment with darkening the background behind the type. You can use the burn tool to just darken an area (paint over your background with this). Another option is to create a rectangular area behind your type that is darker than the rest. To do this, create a new layer above your background image, and create a rectangle with your selection tool. Using the paint can fill it with black. Now you can leave it as is to call greater attention to your caption, or you can adjust the opacity to the layer to make it semi-transparent. In the sculpture photo I’ve set the opacity of the black square to 50%.
- If you’ve tried a few of these options and your type still doesn’t look right, you may want to put the caption below, instead of on, the image. If your project is going on the Web you can do this in your HTML. If you are sending an HTML e-mail though you will want to include it in the image file. To do this, you will need to increase the size of the image. First set your background color to be the same as that of your document. In this example I’ll use white. Next go to the image menu and select canvas size. Click on the center top square in the grid then increase your height measurement to an appropriate size. I’ve added .5 inches. Now just add your type to this area. If you’ve added too much space you can crop accordingly.
- Save the file in Photoshop format (in case you want to make edits) then go to the file menu and choose “Save for Web.” Select JPEG as your file format then click save. If you would prefer a .tif file (for print) you would instead flatten image (under the layers menu) and save as .tif.
Alternative Text for Captions
Captioning images can add value, but will also pose accessibility challenges. If your caption is short, you should copy it into the alt tag of your image. This will make it available to those who use screen readers or other user agents that don’t show images. If your caption is too long, you may also want to link to an alternative copy of the text, either on the same page, as a footnote, or wherever you deem appropriate. Read Andy Clarke’s article, Accessible alternatives, to learn more about these techniques. For this example I’ve linked to a description of the image and text and placed it here on the page:
Photograph of part of a sculpture featuring a man holding an umbrella next to a dog whose nose is pointed at the mans’s knee. Captions built into the image read as follows:
- Spot, can’t you find a squirrel to chase? You’ve been sitting here panting on my leg for years now.
- What, and you think this is my idea of the perfect view?
- This caption is part of the image file, but sits below the picture.
In Conclusion
As you’ve seen, it’s pretty easy to add text to an image. The tricky part is making it look right and ensuring that the content is available to all. But with a bit of experimentation you can accomplish both tasks.
The future of friendlybit.com
It’s vacation time and you’re allowed to lean back and just relax. A blog it’s always there though, you post to it on your spare time, and as soon as you have some a little glitch in your schedule you need to consider blogging. It’s a full time job. Current situation I use Friendly Bit as […]
Spotify is a lot like…
Hi. Today I want to tell you about a music player called Spotify, that I like. What does that have to do with web development? Nothing, that’s why it’s in the “other” category 
Anyway. Spotify is a lot like Pandora, you know that music player that runs as a flash applet and suggests music based […]
Quick Accessibility Testing
A recent project of mine required me to do a quick review of the accessibility level of a site. Nothing serious, just to show what was possible to test and where the site scored right now. I managed to assemble a small list of tools that I believe did a rather good job. This article […]
Java 6 for Mac OS X Back on the Radar
Nearly two months on from the release of Mac OS X 10.5 (Leopard) and the resulting uproar from Java developers over Apple’s silent removal of preview builds of Java 6 for Mac, Apple has just as quietly released Java SE 6 Developer Preview 8, the first developer preview of Java 6 that runs on Leopard. Many […]
Nearly two months on from the release of Mac OS X 10.5 (Leopard) and the resulting uproar from Java developers over Apple’s silent removal of preview builds of Java 6 for Mac, Apple has just as quietly released Java SE 6 Developer Preview 8, the first developer preview of Java 6 that runs on Leopard.
Many developers had feared that the removal of the previous preview signalled an intent from Apple to ignore Java 6 in favour of continued minor tweaks to Java 5. It seems now that the optimists were right: Apple just needed more time to get Java 6 right, so it took a step back and made some improvements to Java 5 for the Leopard release before pressing on with its work on Java 6.
The fact remains that if Apple were only to communicate with its closest allies—software developers—in a meaningful way, we wouldn’t be left playing these guessing games over the company’s intentions.
This article provided by sitepoint.com.
Lexical scope to appear in PHP?
I mentioned briefly, in my last post, that Wez Furlong made a patch back in March, that allows a native syntax for creating anonymous functions. This could replace the heinous create_function. Since then, I brought up Wez’ original patch again on the php-internals lists. This has prompted some hefty debate over the last week. The main […]
I mentioned briefly, in my last post, that Wez Furlong made a patch back in March, that allows a native syntax for creating anonymous functions. This could replace the heinous create_function.
Since then, I brought up Wez’ original patch again on the php-internals lists. This has prompted some hefty debate over the last week. The main argument against approving the patch, seems to be, that one would expect static scoping rules to apply to the anonymous function. After all, this is the case in similar languages, which support anonymous functions. One could only assume, that changing PHP to support this, would be a major undertaking.
One would be wrong, it seems.
Today, Christian Seiler posted a patch to allow lexical scope for anonymous functions. There are a few loose ends, but it appears to work in general. Instead of making all variables follow the static scoping rules, a new keyword (lexical) is introduced. It works similar to global, in that it must be explicitly declared, which variables are lexically scoped. This is how it looks in action:
function getAdder($x) { return function ($y) { lexical $x; return $x + $y; }; } $add2 = getAdder(2); $add2(8); // return 10 It’s probably a bit early to tell if this will find its way into the language. It’s still just a proposal and it would take some further work to get it right, but at least it appears to be technically possible. We’ll have to wait and see.
Otherwise, there’s just left to wish you all a merry Christmas.
This article provided by sitepoint.com.
Opera’s Antitrust Complaint: Microsoft Must Support Standards
Opera has filed an antitrust complaint with the European Commission against Microsoft, alleging that Microsoft has illegally stifled competition in the browser market by tying Internet Explorer to Windows and by failing to support web standards. If this all sounds a little familiar to you, it’s because Microsoft fought a similar battle with the U.S. Department […]
Opera has filed an antitrust complaint with the European Commission against Microsoft, alleging that Microsoft has illegally stifled competition in the browser market by tying Internet Explorer to Windows and by failing to support web standards.
If this all sounds a little familiar to you, it’s because Microsoft fought a similar battle with the U.S. Department of Justice in 2001 and lost. Based on that ruling, Microsoft went to work making it possible for all of the bundled applications within Windows to be overridden by 3rd party alternatives. This facility exists today in the form of the Set Default Programs application in Windows XP and Windows Vista.
While these measures have satisfied the U.S. Department of Justice, they have not satisfied the European courts. According to Opera’s press release, in September the European Court of First Instance ruled that Microsoft has illegally tied Windows Media Player to Windows, despite the ability to override the program’s file associations using the Set Default Programs facility in Windows, and despite the availability in Europe of Microsoft’s special ‘N’ editions of Windows, which do not include Windows Media Player, as required by a 2005 European Commission decision.
Off the back of this latest ruling, Opera is seeking to have the Commission apply the very same logic to Internet Explorer, and force Microsoft to distribute Windows either without Internet Explorer (something that Microsoft has consistently maintained is impossible in practice), or with alternative browsers bundled in.
On top of the bundling issue, Opera’s complaint also seeks to require Microsoft to implement support for web standards in Internet Explorer. This will be a much tougher one to prove. Although Internet Explorer is certainly the least standards-compliant of the major browsers today, each and every release of Internet Explorer has included improved standards support. It seems that Opera is saying that Microsoft’s slowness to develop Internet Explorer is in itself an illegal and anti-competitive act.
So what do you think? Is Microsoft doing enough to enable users to choose alternative browsers in Windows? And should browser makers be legally required to support web standards, whether they have the programming resources to devote to doing so or not?
This article provided by sitepoint.com.
What italic means
Finally an image that dispells all myths about the element. As you can see it’s all about presentation. Disappear you foul demon! (You have more HTML humor? Show me in the comments)