The Accessibility Superhero Detective Joe Clark was hired to discover the truth about the subject. We all hoped the situation is not so dramatic, but boy — were we wrong!?
Yea, but why exactly captioning sucks?
Occasionally, people ask me to create XHTML/CSS template based on provided .PSDs. Most of the time, such projects are pretty straight-forward — I tell the hourly rate and the estimated hours. The prospective client then accepts the offer or not.
It could be zillion reasons why clients reject offers and I’m used to some neutral (read: polite) arguments, like “It exceeds our budget”
or something like that. However, today I received an interesting response:
“You are a little-bit too expensive, XXX is an hourly rate for a programmer.”
Funny, huh? Or sad?
Why on Earth would anyone compare client-side coding with programming. What is it that people (or just this particular client) think some cog of the same engine should be valued more than others?
Is it because the work of accessibility consultant, CSS coder, SEO engineer or usability expert is not something you can point your finger at? Or is it ‘cause people tend to care for web standards in a way of questionably increased initial exposure on endless, but completely irrelevant CSS showcase lists?…
The first post in this year (better late, than never) and I present you 2 (that’s right: two) brand new web logs by my two fellow colleagues — Marko Kršul (the creative) and Tomaš Trkulja (the methodic).
I was more than happy to contribute in the development of these two beautiful WordPress themes, spiritually named Balance White and Balance Black. The White was deployed first on our company’s flagship project’s development blog in it’s original setup and Dudikoff and Roseanne (link removed for offending content :p) have been customized later on. (Ed’s note: Dudikoff and Roseanne is not a WordPress theme, it’s customized version of Balance White.)
Anyway, download Balance White 0r Balance Black and if you care, let us know what do you think.
How is the tag based advertising done at Coolinarika.com?
Clever, huh? But the most interesting part is the following edge case.
Update: “Eva sardine” is actually a brand, not a company. Spotted and pointed to by lekke.
The default options are the ones, that the majority of users understand well. With defaults designed to facilitate the basic tasks, all users will be able to start using web app right away.
Advanced features only make sense if they increase the accuracy and reduce time spent on a task. Advanced options made up-front, without real demand from the user-base are often only something glossy and shiny. Inviting users to learn a feature which main purpose is to be a cool widget that differentiate the application from the others — will fail for one very simple reason.
The kind of users who would appreciate such a feature are often anxiously seeking for the next gadget once the master the current one. In most cases, those visitors are not here for the content, but for the context, most notably the coolness factor. Unless the coolness itself is your product, you are probably not targeting those users.
Add advanced feature when you are absolutely sure you need it and after you have real user’s feedback.
Advanced feature should be gently introduced once the user is familiar with the basic functionality. In desktop applications such advanced options are often hidden in the ‘settings’ or ‘preferences’ panel. In web application those could be placed somewhere in ‘my profile’ area. However you decide to do it technically, don’t create the interface noise by polluting the content.
With well known web services, like Amazon, the extensive loyal user base is a good excuse to place an advanced feature right up-front. With a new project which need yet to prove its’ credibility, one has to be careful not to reject valuable first comers by unnecessary complicated interface.
With Intel-based Macs, web developers now can test their pages in multiple operating systems and browsers with a single machine.
Parallels is complete and stable, but a piece of software you will have to pay for. The price of 80 USD per license isn’t unacceptably high for an average web developer, but if you’re cutting your expenses, this might turn you down. In any case, you can download trial and evaluate if it’s worth the price. Anyway… from the version 3.0, the application supports 3D graphics and various USB devices, but it also has a set of supplementary tools, such as Transporter, which helps you migrate your existing Windows PC to a Parallels Virtual Machine. Parallels support bunch of OSes.
At the time of this writing, VMware Fusion is in its’ beta 4 version and is free to download. So far, it works pretty stable on my MacBook Pro, even in situations when both Vista + IE7 and XP + IE6 virtual machines are up. If you opt to use Fusion, there’s over 450 preconfigured virtual machines that can be found at Virtual Appliance Marketplace.
Virtual PC can’t be run on Intel-based Mac, but if you’re on PowerPC, it will cost you 129 USD for standalone or 219 USD for VPC7 + Windows XP Home. VirtualPC for Windows is free. The advantage of VirtualPC are preconfigured time-bombed ISO images available from Microsoft. There are WindowsXP + IE6 and Windows XP + IE7 installations currently available and those will run till August 17, 2007.
Boot Camp is really not a virtualization application. What it does is lets you boot to either Mac OS or Windows installation and it is obvious that it’s impossible to test web pages in such an environment. Boot Camp will be shipped with Mac OS X Leopard, but until then, if you want to, you can download Boot Camp from Apple.com.
We’re currently testing pages in the following virtual setups (note that besides virtualization app of your choice, you’ll probably have to purchase a license for each of your separate OS installations):
Older browsers can be found at evolt.org, the latest at download.com. Opera keeps browser archive and so does Netscape. If needed, download Firefox 1.5.
What more to say? Have a happy cross-browser testing!
The Principles of Beautiful Web Design is a great introductory book for every future web professional. Even if you already have a couple of web sites under your belt, you could still learn a bit or two.
Jason Beaird brings the overview of design basics. He covers the theory of layout, color, texture, typography and imagery, but not only that. The book explains the origins of some widely used terms, for example a comp. Not being a native English speaker, I used to think that this is short for (layout) composition, but it’s actually short for comprehensive artwork (or dummy). Another “A-ha” moment was the advice on pressing
I love how Jason explains things. For instance, he shows that the style is something easily accomplished by choosing an appropriate texture. And if you thought that repeating background patterns were unfortunate 1990’s trend, you’d be surprised to find that some of the leading industry creatives, for instance Veerle Pieters and Jason Santa Maria use them on their awarded personal sites. With his examples, the author teaches that in web design — the line between horrible and beautiful is sometimes very, very thin.
Still not sure? Read sample chapter.
I’m honored to present the latest project we did with Patrick Riley from Vantageous. These guys are doing some really cool stuff at the moment (shhh… I’m not allowed to say a word about anything) and while Patrick and Jason Kristofer are delivering mind-blowing designs, Beau Hartshorne is dealing with the back-ends and the databases. In the last few projects, we helped with markup and CSS.
So far, in Vantageous related projects we worked exclusively with tableless layouts (in fact, I dont’t think I can count more then five table based sites I’ve been working on in my entire life), but now we have something that simply wouldn’t work without tables — the Krop HTML newsletter (see screen shot).
All you need to know about developing HTML newsletters, can be found at Campaign Monitor Blog. I highly recommend the article Optimizing CSS presentation in HTML emails.
We could have deliver fully blown colorful and semantically correct newsletter to CSS capable clients only (and a crippled version for everyone else), but we instead decided to create layout with tables which work in almost all the clients on the market with basic HTML support (if interested in the code view source).
24sata, the first Croatian news portal ever designed with web standards was moved from carefully structured, web standards compliant to a non-valid inaccessible web site. Unfortunately, it does happen.
When we were developing the first incarnation, we learned a lot about Mac browsers and also introduced Faux borders, the advanced CSS positioning concept, which after that became widely recognized. When the original version of the site was launched back in March 2005, we already had significant amount of CSS trials, errors and solutions for future projects development. Working on such a project was invaluable experience.
I won’t comment on the new design, interface, IA or user experience in general. Instead, we’ve snapped a few screen shots for the archive. If you care, take a look at high-resolution shots. See the new site.
Creating the perfect vertical space on the screen is easy. With a few lines of CSS, you’ll have a great typography foundation for your web site. Let’s begin…
Global line height is usually set to html or body element. In this quick lesson, we’ll use a line height of 1.5.
* { margin: 0; padding: 0; }
html { font: 62.5%/1.5 "Lucida Grande", Verdana, sans-serif; }
You’ll also notice that we reset margins and paddings globally with the universal selector.
Since the paragraphs and lists (and their child elements, too) inherit the line height value, setting margin bottom equal to element’s line height ensures correct vertical rhythm.
ul, ol, dl, p { margin-bottom: 1.5em; font-size: 1.2em; }
Most often—for various reasons—you don’t want to set font size of a block-level element that by default must have block-level children, like for instance unordered list must have. You would instead specify font size for list items, definition terms and definition descriptions:
li, dt, dd, p { font-size: 1.2em; }
ul, ol, dl, p { margin-bottom: 1.5em; }
Now we only have to redefine bottom margin of lists to 1.8em. It is calculated by simply multiplying element’s line-height by child element’s font size (1.5 × 1.2em = 1.8em)
li, dt, dd, p { font-size: 1.2em; }
ul, ol, dl { margin-bottom: 1.8em; }
p { margin-bottom: 1.5em; }
Use the same principle when dealing with other elements: headings, tables etc., and within a minutes a sound vertical spacing will be accomplished. Still hungry? Head on to Compose to a Vertical Rhythm.
This article is also available in Russian. Big thanks goes to Errant.
Blackduke, portfolio of Tin Kadoiæ in its’ 12th incarnation goes web standards. And now with a blog. Site is developed by Unpljugged.
Don’t miss the finest print and screen projects. The personal fav is Fresh Air (see picture below).
Recently, a faithful Typetester fan wrote:
I choose Verdana size 1.2 em / leading 1.6 em (that should be size 12px / line-hight or line spacing 16 px as you described in Typetester’s base font size and made a screenshot from Firefox 1.5 / Win.
I compared the screenshot with its font size and line spacing in Photoshop with Verdana size 12 px / line spacing 16px. The result is that leading 1.6 em is bigger than line spacing 16 px in Photoshop, it is around 19 px. Where is the mistake?
Since the height of an inline box may be different from the font size of text in the box (e.g., ‘line-height’ > 1em), there may be space above and below rendered glyphs. The difference between the font size and the computed value of ‘line-height’ is called the leading. Half the leading is called the half-leading.
Vertical space is metered in a different way. … This unit is the leading, which is the distance from one base line to the next.
If set with relative unit (like em or percentage), line-height is always computed from the element’s font-size, whether the sizing is explicitly specified for the given element or simply inherited by a cascade. The 12px font size from our example is multiplied by 1.6, which really is 19px (19.2 to be precise).
If one’s attempt is to set the 16px leading, then she should divide the 16px from Photoshop with the 12px font size. That simple calculation would result in 1.333em (or 133.3%).
The recent redesign of Nacional.hr was interested for a few reasons – we spent reasonable amount of time realigning all the site page types and during the process, we developed a 5-column grid system, which opened some new ideas for creating bullet-proof multi-column CSS layouts. The home page currently features much more content than in the previous versions, but most of the feedback we received suggests that it’s now much easier to scan and read all the headlines and texts on the site… but I digress.
All those little joys, like the ones just mentioned, bring a smile to a designer’s face. However, the idea to bring a web standards practitioner, an experienced web author and a SEO expert – Goran Jurić – on a position chief online editor, was the winner for this project (Goran runs the local forum Webote, which is devoted to programming for the web).
Due to my knowledge, it’s the first such case here in Croatia, and for that reason such move is even more significant. Let’s just hope it’s not the last one here in the local media organizations.
In a meantime, I can’t wait to see how the site will develop under the guidance of the new online editorial stuff.
The latest incarnation of my pet project about Bull Terriers.
We’ve been introduced with the latest Internet Explorer few weeks ago and some quirks have been explained already. In this article, we’re dealing with a single (but pretty nasty) bug – neglected bottom margin set at the floating child element. Continue reading ›
Currently, the most accurate method of detecting Internet Explorer 7 with JavaScript is the following:
var ie7 = (document.all && !window.opera && window.XMLHttpRequest) ? true : false;
There’s an alternate, but in my opinion less future proof, method:
var ie7 = (typeof document.addEventListener != 'function' && window.XMLHttpRequest) ? true : false;
I don’t believe they will ever drop document.all, but I’m certain they are going to fix addEventListener method.
Here’s a quick breakdown of objects/methods tested:
document.alltrue in all Internet Explorer versions and also in Operawindow.operaopera object, returns true in Operawindow.XMLHttpRequesttrue in Firefox, Opera, Safari and IE 7false in IE 6 and lowerSo far, I haven’t found flaws in this detection method. However, if someone knows better, please do tell. Ken Snyder pointed out that the native XMLHttpRequest can be disabled in IE 7 by unchecking Tools -> Options -> Advanced -> “Enable native XMLHTTP support” option… Bummer!
Last, but not least, you can always set ie7 variable to true inside conditional comments:
<!––[if IE 7]> <script type="text/javascript">ie7 = true;</script> <![endif]––>
First of all, from this few first days testing it, Internet Explorer in it’s last reincarnation is much better browser than I thought it’d ever be. It’s still not the first class piece of software, but at least most of the real-life CSS issues have been fixed. However, there are still a few nasties. Continue reading ›
Let’s make one thing straight right now – this article has nothing to do with the fact that more and more girls and guys are contacting us and ask for a job. Really! However, if you’re the one looking for a position, maybe these few tips would help. Continue reading ›
This bug is already documented at QuirksMode. Basically, instead of normal list-item increment: 1, 2, 3 and so on, IE 6 renders 1, 1, 1,…
It’s sometimes triggered by setting any value for an ol’s width property. Read more about it and see test pages at QuirksMode.
Setting and overriding list-style property rules for a list-item does the same mess. For example:
li { list-style: none; }
ol li { list-style: outside decimal; }
would trigger this bug.
The workaruond is more than obvious – list-style property should be set only for list items in unordered lists.
In Firefox there’re those annoying black 1px thin horizontal lines inside iframe. I haven’t found anything useful so far, even though the bug has been mentioned here and there.
So, the question is – what’s your experience with this nasty thingy? To make this even more interesting, the one who comes with the bulletproof solution will receive a copy of CSS Mastery, Dom Scripting or ppk on JavaScript.
This error occures in Firefox 1.5.0.7, both Win and Mac.
The workaround for the above is to set rule position: absolute to an iframe. No coordinates should be specified (left or top), and the parent element should not be set to position: relative, as this throws the iframe back to square one.
Ed’s note: The bug has nothing to do with the ‘rounding error’.
You’ll have to register at Coolinarika.com to see the working example.
CSS Globe is your new web standards resources destination. It’s basically a public news site where members and visitors alike can post links to articles (preferably related to web standards design and development).
The difference it makes is that a self-promotion in the news is welcome. There are however certain rules, which will hopefully preserve the quality content.
One of the project goals is to become a good place for talent seeking, so the better content you’re providing, the better self-image you’re creating.
The project is brought to you by pixelpusher, the almighty.
Typetester knows which fonts are installed on your local system with a little help of Flash. Flash can detect your font list and pass it to a JavaScript function. Here’s how it’s done… Continue reading ›
Backup2mail seems to became very popular script for sending your site database directly to your mailbox. However, a few users requested backup log sending, it’s been a while. I finally found some time to make it work (Ed’s note: Sorry for waiting, guys!) .
Nothing more, nothing less. Thanks.
The time has come for me to spend some time around the Pocket PC. I have already learned that the CSS media type theory (see W3C Mobile Web Initiative) is not what one should rely on when developing for full user agents range (sad, but true – the only way your web site knows a visitor came with a Pocket PC is by detecting its’ user agent string).
Nevertheless, I’d like to learn more about the general experience with these devices. If you have a story, please, do share.
Anyway, what are your favorite Pocket PC applications and why?
Recently, a few people contacted us via agency’s web form, requesting the quote ‘as arranged at the meeting’. At first, I was confused about getting messages from the clients I never heard about and after some of them requested a quote for server leasing (WTF is that, anyway?), we investigated this unusual situation. Continue reading ›
I went to a local computer store the other day to buy myself a new keyboard. I lost the ‘
My fellow colleague pho went with me and that was fatal… He made me do it… I bought Logitech G-15 gaming keyboard.
Damn! The keyboard is great! And apparently, my MX510 mice is in love with my new keyboard.
Multi-color sIFR is updated.
For Mac users – please, be careful with the .as files – they should be open only with Flash, and not the code editor with which you usually edit your HTML and CSS files. Some code editors change delimiter strings into unusable characters.
Feel free to report troubles, if any.
So, until today, I had the anti-spam plug-in here at the blog. It basically functions in a way that it compares the content of the comment with URLs from the black lists on the surbl.org and if the URL is found, it redirects you to http://127.0.0.1/ (a.k.a. localhost).
My assumption (and you’re here to tell me if I’m wrong) is that all those lists eventually become filled with legitimate (non-spam) URLs. And that would explain why some of my visitors (thanks to Jens for reporting it) couldn’t submit their comments. All I can say is – sorry for the inconvenience!
Do you remember the Dom scripting book by Jeremy Keith? Well, the guy is going to speak at the one day workshop about the AJAX at the Digital Sandbox, NYC.
Why I’m telling you this? Because, unfortunately, I had to refuse a special invitation from the organizers (sorry, guys)… (Ed: First, I missed the @media, now it seems I’m going to miss this one, too.)
Nevertheless, if you’re going, don’t forget to pick up your Survival Kit (or better said a ‘Surprise’ Kit) and, of course, say ‘hello’ to NY in my behalf.
Many young guns ask about how to style custom checkboxes and radio buttons in forms. I prepared a typical markup, a few lines of CSS and some JavaScript functions (Safari label behavior fix included).
Each radio button and/or checkbox input element should be surrounded with <label> tags. Here’s the example:
<label class="label_check" for="sample"><input name="sample" id="sample" value="1" type="checkbox" /> Sample Label</label> <label class="label_radio" for="sample"><input name="sample" id="sample" value="1" type="radio" /> Sample Label</label>
We are going to remove inputs far away to the left and instead place a background image to each label. Radios and checkboxes will be toggled, because clicking/spacepressing the corresponding label toggles them on or off.
See the CSS sample:
label.c_off,
label.r_off,
label.c_on,
label.r_on { padding-left: 20px; }
label.c_off input,
label.r_off input,
label.c_on input,
label.r_on input { position: absolute; left: -9999px; }
label.r_off { background: url(radio_off.gif); }
label.c_off { background: url(check_off.gif); }
label.c_on { background: url(check_on.gif); }
label.r_on { background: url(radio_on.gif); }
And finally, some JavaScript trickery to handle all the className switching. In Safari, labels are not clickable, hence a few extra Safari speciffic lines.
var d = document;
var safari = (navigator.userAgent.toLowerCase().indexOf('safari') != -1) ? true : false;
var gebtn = function(parEl,child) { return parEl.getElementsByTagName(child); };
onload = function() {
if(!d.getElementById || !d.createTextNode) return;
var ls = gebtn(d,'label');
for (var i = 0; i < ls.length; i++) {
var l = ls[i];
if (l.className.indexOf('label_') == -1) continue;
var inp = gebtn(l,'input')[0];
if (l.className == 'label_check') {
l.className = (safari && inp.checked == true || inp.checked) ? 'label_check c_on' : 'label_check c_off;
l.onclick = check_it;
};
if (l.className == 'label_radio') {
l.className = (safari && inp.checked == true || inp.checked) ? 'label_radio r_on' : 'label_radio r_off';
l.onclick = turn_radio;
};
};
};
var check_it = function() {
var inp = gebtn(this,'input')[0];
if (this.className == 'label_check c_off' || (!safari && inp.checked)) {
this.className = 'label_check c_on';
if (safari) inp.checked = true;
} else {
this.className = 'label_check c_off';
if (safari) inp.checked = false;
};
};
var turn_radio = function() {
var inp = gebtn(this,'input')[0];
if (this.className == 'label_radio r_off' || inp.checked) {
var ls = gebtn(this.parentNode,'label');
for (var i = 0; i < ls.length; i++) {
var l = ls[i];
if (l.className.indexOf('label_radio') == -1) continue;
l.className = 'label_radio r_off';
};
this.className = 'label_radio r_on';
if (safari) inp.checked = true;
} else {
this.className = 'label_radio r_off';
if (safari) inp.checked = false;
};
};
Also, be sure to check the previous post about how to preload all those interface graphics.
Sample web sites:
Last week I received an e-mail form a guy asking about how to preload interface images for submit button in forms, like the one at the web.burza contact form. The method is quite simple, really. Continue reading ›
Back to top link’s purpose is to quickly position the viewport back to a beginning of a web page. Sometimes you have a variable height of the content and this link is unnecessary if a particular page is shorter than viewport height. With this simple JavaScript, you can hide it depending on page’s height. See the example web site.
var d = document;
onload = function() {
var viewport_height = (self.innerHeight) ? self.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : (document.body) ? document.body.clientHeight : 0;
var page_height = d.getElementsByTagName('body')[0].offsetHeight;
var ttl = d.getElementById('to_top_link');
if (page_height < viewport_height) ttl.style.visibility = 'hidden';
};
The brand new web standards compliant (and what not) official web site for the über Action/RPG PC game Hellgate: London is out of the web.burza’s dungeons.
The site introduces many cool features, both content-wise and technically. For the later, feel free to take a look at the source. Yes, the questions about the client-side methods will be answered.
Design is by emptyhead, interface elements by pho. We did try several scenarios, hopefully the site is usable on most of the platform/OS combinations. Tell me how you like it and report issues, if any.
Microsoft did it again and now it affected much broader user-base. The funny thing is – I remember Flash fans used to say that Flash is a kind of interface that will run equally on each platform/browser. Sweet…
Since April 11th, all IE 6 patches (and IE 7 betas for that matter) deployed this ActiveX… thing. Read more about it at Adobe/Macromedia, it’s too ugly to write about it here. What bothers me is that it affects my favorite Flash embedding method. Well, I guess, without this occassional crap – the life would be boring and I would be probably enjoying a cup of coffee somewhere in the down-town.
Whichever method you choose to fix this, one thing is certain – you’ll have to do it with JavaScript. Continue reading ›
What’s wrong with this JavaScript function?
var xmlHttp = function(){
var r = null;
var browser = navigator.appName;
if(browser == 'Microsoft Internet Explorer'){
r = new ActiveXObject('Microsoft.XMLHTTP');
} else {
r = new XMLHttpRequest();
};
return r;
};
You don’t have a clue? Then this is the right article for you… (well except you don’t know why are you reading this in the first place) Continue reading ›
The four things baton has been most gently passed by Cody as a therapy session. Cody kindly offered to pay this time and I’m not rejecting a free session. No way!
All things are listed chronologically (well… more or less). Here it goes… Continue reading ›
All righty. I’m very lazy lately. I read less and less. However, if a book pulls me in, I’m well prepared to discard all the other forms of relaxation and swallow it all at once. Yes, this was the case with the DOM scripting.
What’s so great about it? First off, the book is not boring programming reference listing mambo-jumbo or whatever… It tells a story. What is the Designing with web standards (by Zeldman) for CSS, that is the DOM scripting for DOM/JavaScript. Continue reading ›
In the previous article about the annoying outline, I introduced you the JavaScript based solution. After a few days, Nathan Smith came with the much more elegant outline: none; trick. The question remains, how should we apply it in a way not to confuse a user browsing with a keyboard? Continue reading ›
This is the most complete list of pros and cons for vertical scrollers. Hopefully we’ll have a chance to discuss that on our next meeting with a client.
Reasons why news scrollers are bad:
- They are tacky, and reek of end 90ies web design
- They are annoying attention seekers
- They lure designers into thinking they can define the size of the screen, they don’t, the visitors do, each of them for themselves.
- They lure editors into adding far too much content to the page - hidden is not gone, think of the screen reader and text browser visitors.
- Considering “banner blindness", they might be useless
- They might cause memory leaks and slow browsing in some browsers on low spec machines
- They might confuse visitors with attention deficits or other disorders.
Reasons why news scrollers are good:
- Clients love them
- That other site has them (you know, that really cool, bleeding edge one, the… what? Bankrupt? Well, it was a cool site though!)
– source
Ran to it this morning, when I was searching for as painless as possible (standards-wise, at least) solution for an information slaughter.
What I like about the DomNews is that there’s a stop function. Every accesibility savvy developer is a star.
Now, if I could just find a way to explain how those Add to Favorites and Make this page my Homepage links shouldn’t go into main navigation area.
As promissed, here’s a multi-color sIFR… Feel free to send your kind words of gratitude over to Pepa. And BTW, have a nice day!
As a result of your persistent requests, here’s the 2 color sIFR demo and a 2 color sIFR development kit. In case you were wondering, a multi color version is almost done in Pepa’s pot.
Enjoy and please, do keep reporting bugs!
We’ve been interviewed by Marko from mcville. The interview is far from serious, close to funny. Or not. Anyway, have fun!
In April 2005. we launched a new agency site, which picked up a couple of web standards awards and mentions:
Enormous amount of traffic and inquiries we receive will keep us busy for some time… So, thanks to everyone who thought so high about us
Several people think Typestester was notable application introduced in 2005. The application was supposed to help web designers in testing type for their projects, but I never knew it’s going to be so popular. A big thank you to all of you who supported the project, either via generous donations or by great suggestions and/or bug reports!
There are a few popular articles/tutorials that were linked all over the web. In case you missed some, here they are:
Oh, well – at least if we don’t count pop-ups, downloadable .PDFs and such… They came in big style this year, and I feel they are going to make their mark in the next season, too. Continue reading ›
Ever since I started with this web thing, I’ve been quite satisfied with my current hosting provider. By the release of some high traffic sites (you guessed it right – the Typetester), I faced the troubles caused by the numbers of visitors and multiple database queries.
I already purchased a new account from other provider, but I wanted to post my expectations for the future reference: Continue reading ›
Last month, the Poslovni Tjednik web site was reworked. Poslovni Tjednik is one of Croatian business magazines. We didn’t design that site, but we designed 24 sata and Nacional earlier this year. Those two are also newspapers online counterparts.
On both of our projects we brought some trendy concepts, as well as invented a few fresh ones. As a developer I often question myself about what are our influences (if any) to other development teams. The day has come for me to finally get that answer. Proud as I can be, I found a few great improvements on the Poslovni Tjednik, which I’d like to believe we at the Burza were on the minor part responsible for. Continue reading ›
The negative text indent image replacement technique (a.k.a. the Phark image replacement) is very popular and widely used in many modern (i.e. accessible) designs.
There’s, however, this annoying rectangle, which is in Firefox 1.5 now expanded all the way to the left (usually it’s 9999 pixels to the left). The rectangle is ugly, and while we’re waiting for Firefox developers to fix it (report Firefox bugs), here’s a quick and dirty solution:
var remove_rectangle = function() {
var lnks = document.links;
if (lnks) {
for (var i = 0; i < lnks.length; i++) {
lnks[i].onmousedown = function() {
this.blur();
return false;
}
}
}
}
window.onload = function() {
remove_rectangle();
// the rest of your onload functions
}
Unfortunately, we can’t remove the rectangle completely, because focus() functionality is necessary for browsing with a keyboard.
Speaking of which, do you always define :focus and :active pseudo-classes or do you sometimes forget about them?
The img is inline HTML element. That’s why we can place it inside every other element, notably the span and a. When an image is nested inside a link (for example a thumbnail), it will ‘pick-up’ clickability of the a element. But what’s with the actual space occupied by those two? Why we sometimes can’t achieve desired effect? Continue reading ›
This one is for experienced Mac owners… I’m rethinking my shopping list for this season and considering buying a Mac for home. I’d like to know pros and cons for the following competitors – Powermac 2GHz Dual Core G5 (assume I already have a screen) and Powerbook 15in 1.67GHz G4 Widescreen.
$2000 is the limit at this point, so more expensive models are out of question. If I’m taking, I’m taking one of the above.
I already have both Mac and PC at work and PC at home. All machines are way above average considering performance, so I’m not switching all of my work to Macs, but someday maybe I will.
How often you really needed mobility and how often you really needed the power of dual processors? Link to any useful article would also help.
Alen went solo, and he’s giving away XHTML+CSS template if you win a little contest. See more at the Pixelpusher blog.
So… I guess I’m a little bit lazy these days regarding my feed list. The result is me missing some very interesting discussions. But no regret, actually a kind of relieved, I feel right now. Ed: this sounds like Yoda wrote it!? : ). I’d say me and the guys fell into a creativity thunder again, and despite of the short deadlines, we’re okay and we are managin’ it relatively easy. Some interesting stuff to come…
Anyway, I’ve just read post and the comments over there at JSM and it’s good to see the things are going forward globally, not just for the chosen few. The need for a quality is rising. That includes better web sites. Better design and better code.
My observations on the Typetester’s popularity, comments I receive etc. led me to a conclusion there’s a very large number of the guys who really get it. However, there’s still some misunderstanding about the standards and the whole story behind it. People are now aware why it’s all good, but there’s still many validatorians and wannabe ortodox standardistas. Or maybe I’m just too harsh…
Thanks to the valuable feedback on Typetester last week, some minor improvements were made. Here’s the list:
More to come…
This post is a quick reminder to all of us who code and test web sites on Macs. We often take some common Safari behavior for granted, but the reality is a little bit different. No matter how much one dislikes PCs and has an aversion to anything but the divine Mac OS, the truth is – there’s more visitors with IE5.x than with Safari. Said that, here’re the most common CSS flaws. Workarounds included. Continue reading ›
I love Dan. I mean, I don’t know the guy, but I really like to hear what he has to say, ‘cause he does it exactly as he preaches.
I purchased my copy of his latest handbook Bulletproof Web Design about two weeks ago, and I was fairly surprised when the mailman brought it the day before yesterday. That was fast, I said to myself. Couldn’t wait for the weekend to come, so I can dive into it in peace.
From my experience with previous Dan’s book, the Web Standards Solutions, it really did fulfill my expectations. What’s so great about it, you ask? Well, without too much philosophy and unnecessary discussion to fill-up 260 pages of a book, the author gets in, scores and gets out in no more than three hours of web developer’s time – the thing one’s always missing…
The book is divided into 9 chapters of which the last one is a full-blown example of bulletproof design, coupling all previous chapters together in an effective demonstration of how to use all those tiny parts to combine them into a real-life, flexible web page. What I like with Dan, is his non-arrogant approach. If he thinks someone else’s work is worth it, he’ll mention it respectively and with a proper credit.
From what I’ve seen, the author covered it all – from flexible rounded boxes to multi-column fluid layouts. Solutions to the problems are ready to be taken as they are. The only thing that might be missing to a faithful reader, is a free muffin shipped with the book, considering the certain digression on page 68. A book for every web professional’s desk.
The Mint is out! Yey! Fighting hard not to give it a special treatment (I’m neither paid for writing this, nor am I Shaun Inman’s buddy), let’s start with a tour. Continue reading ›
When started using Macs, my main issue was lack of maximizing applications’ windows control. At the time of this writing I still haven’t found the maximize shortcut, so if there is one, I’d be happy to know about it.
In Usable GUI Design: A Quick Guide for F/OSS Developers, the author summarizes Fitts’ law:
- Make commonly used controls larger and distinctive.
- Use the edges and corners of the screen to make your controls virtually infinite.
- Never, ever put controls 1 pixel away from a screen edge or corner.
In Mac browsers, window controls are anything but virtually infinite (they are even not anywhere near a screen corners or edges). What’s more, there’s no easy and obvious way to resize the window to occupy the whole screen. Scrolling up and down through a web page could be performed by scrolling the mouse wheel, if the default mouse would have one.
If applications’ window is maximized (and controls are virtually infinite), one can move mouse pointer really fast to a corner or edge of the screen – and perform the desired action pretty quickly.
Sure, experienced users usually use a keyboard to navigate through an application, but from my point of view – being user-friendly is mostly about making unexperienced users’ life easier. Power-users will customize their preferences anyway.
Everyone who ever worked on a high-profile web site with web standards know there’s inevitable moment when the site has to go to its’ new owners. More than often we fall in love with the site’s tight structure and semantic markup. My heart breaks at that right moment when I have to insert a third-party advertisement script, which I know in advance is a tag soup. But can we do something about it? Continue reading ›
For the HTML code <a id="aboutLink" href="/about/">about</a>, the document.getElementBy Id('aboutLink').href will return the full URL of the linked resource, for example http://somesite.com/about/.
If you want to get the exact value of the href attribute, you’d use document.getElementById('aboutLink').getAttribute('href'), which returns /about/. Yea, right – not in IE and Opera (both Win and Mac). See demo.
In March 2004 unpljugged studio found and applied their flash replacement concept at Blackduke v.10.
Just a small clarification: sIFR is by Mike Davidson (the s is for scalable). It is based upon IFR, which stands for Inman Flash Replacement. IFR was first mentioned in February 2004. and introduced and explained in April 2004.
Actually, it was Duke himself who made the .swf file and also it was his idea, guys from UP just made it work.
Along with the announcement/release of IE7 beta, we at web.burza silently dropped support for IE5.01 for Windows. That decision came after we did quite a few high-profile general audience web sites completely with web standards, and after we found that there’s really, really low number of visitors viewing pages with that browser. We tend to believe that the most of the IE5 visitors on those web sites are ourselves, looking for unpredicted bugs. Continue reading ›
So far we know it’s not new maratz.com and it’s not Lorem ipsum generator.
It is a .GIF image, but that would be great answer if this was a trick question. It is some kind of widget, but not dashboard widget. It is designer’s tool, but not layout generator.
And a bonus riddle:
“I’m the beginning of the end
You can see me twice in a week but not in a day
Once in year but twice a decade
What am I?”
Blinksale is now available and I gave it a spin. The idea behind this application is management of the invoices you send to your clients. Nothing revolutionary—it’s simplified online contact/mail manager/organizer. Yet, what makes it different is its’ simplicity and top-notch interface. Continue reading ›
It’s not new maratz.com, it’s not Lorem ipsum generator.
All right, two posts today, so what? Just checked my referrer stats and found all kind of pu*sies all over the list. There is black pu*sy, red pu*sy, smelly pu*sy… If you’re sick of all this referrer spam, that can be fixed with a simple .htaccess directive:
<IfModule mod_security.c> SecFilterEngine On SecFilterScanPOST On SecFilterDefaultAction "deny,status:412" SecFilterSelective "HTTP_REFERER" "(undesired keyword|undesired keyword|undesired keyword)" SecFilterSelective "POST_PAYLOAD" "(undesired keyword|undesired keyword|undesired keyword)" </IfModule>
Listed keywords should be separated with a pipe (|) character.
Check with your host (run phpinfo() on your server) if it supports mod_security, even though most of them do. This should help you get rid of referrer spam as well as comment spam (for the specified keywords at least). If you want to know more (and I know you want), feel free to ride off to Introducing mod_security article.
Due to a sudden goodbye of John Oxton, Andy Arikawa and Dunstan Orchard to the standards blogging community, I felt strong sense of emptiness. It’s always far more difficult for those who stay, than to those who are leaving. There is, however, a constant fluctuation of the new hopes. Continue reading ›
Download Backup2Mail from the same location. If you have previous installation, just replace index.php. Thanks to Goran Hacek for extensive script testing and help. The following bugs are fixed:
You know the real-life accessibility, right? I’m not talking about web accessibility, I’m talking about parking spots for people with disabilities and ramps for wheelchairs, which the most of the major cities around the world provide. It’s however not very rare that some rednecks take away designated parking spot or leave a car in front of the ramp. Assholes…
Few weeks ago, I walked around the down-town and spotted a terrific traffic sign:
It’s the usual set of signs—especially this threat that the car will be removed if inappropriately parked (i.e. the owner is not the one with disability or handicapped). But, what’s pretty unusual (at least to me) is the yellow board which says:
“If you took away my spot, will you also take away my handicap?”
Thanks to faithful readers Louis and Daniel, I fixed my feed, which wasn’t recognized by certain RSS aggregators. I also apologize for inconvenience to all of you who had such problems. My FeedDemon will digest anything, so I had no clue something’s wrong. Anyway, shame on me. Continue reading ›
I wrote a short story about Open in New Window links, entitled Let visitors decide whether or not will they open link in a new window. DOM/JavaScript resources included. On the side note, try resizing text on that page.
The web site 24sata we made this winter is the perfect example of successful site management. They deliver fresh content on a daily basis and they also try to stay relevant. The printed edition and the web site are both targeted towards younger population. Their content ranges from political actualities to sports and entertainment. Articles are short and concise. When launching the site, we provided full color printed manual (90 pages!) for the web site management. And boy did that pay off! It’s really great seeing those guys using all features we built in the administration area. There are a few examples of common Flash teasers they created to pull readers in. We can’t be more proud! Continue reading ›
Now that the majority of CSS blogosphere is accessing the Internet with some kind of broadband connection, we kind of forget about Dial-up users. We do all kind of trickery to make our images lighter and faster to download, but even though, sometimes the first time visitor gets the flicker when hovering a link with a background image.
Most of the time, pixy’s workaround with a single image, which is positioned accordingly will do, but sometimes for whatever reason, we need completely separate images. Preloading background images with CSS is so cheap trick, that I sometimes laugh at myself how could I forget about it.
a { background: url(image_hover.gif); }
a:link { background: url(image_default.gif); }
a:hover,
a:focus { background: url(image_hover.gif); }
The code example was rather generic, now it’s altered for those who are in a hurry : ) and have no time to read through valuable discussion in the comments.
Many Mac users prefer Safari to less attractive, but more standards compliant Gecko-browsers. When we talk about CSS and DOM support, Safari is overall nice browser. There are, however, a few more or less annoying bugs. If somebody from Apple listens, it would be really great if you could fix some of those. Until they do something about it, here’s a quick overview with a workaround where applicable. Continue reading ›
The summary of our latest project client-side development brought to conclusion that there’re are really just a few essential Internet Explorer hacks. By careful structure planning, I managed to stripe down all hackery to a much less additional rules. Since they are promising IE7 some time soon, more and more I think about secure CSS hacking. We surely don’t want our sites to be a mess in IE7 for it’s quite possibly half-repaired CSS support. Continue reading ›
Quite often I run to a discussion about how nowadays developers use nested div elements to replace tables. These words mostly come from boring guys who’s only worry is to criticize other people’s work. Well, if you’re one of those, please don’t do that. Continue reading ›
There’s no better praise for the client-side developer than the following quote from Web Standards Awards:
“The time taken to convert this site’s unique design from Flash into Standards-compliant HTML has reaped its rewards, providing a slick and well-executed interface on top of rock solid code – exactly what the Web Standards Awards are about.”
Visit web.burza.
After receiving some feedback, here is an updated version of Backup2Mail. The installation is now a little bit easier as the permissions on the backup_log.txt are now changed automagically and the file itself is created on the server if it doesn’t exist. There is also a better Cron setup explanation in the README.txt file.
Download Backup2Mail v0.11b.
Backup and downloading a web site’s database can be really annoying sometimes. It’s something we don’t want to miss, yet we often do. I never lost any of my databases, but I know some guys who unfortunately did.
This PHP script will — with a help of Cron Jobs — backup your MySQL database and send it to specified e-mail address. I suggest creating a separate account, for example backup@yourdomain.com, which will be accessed via web mail if needed. If you have really big database, you wouldn’t want to download it every day (or few times a day). Gmail will do in case you don’t have overly sensitive data.
So, without further ado, I’m releasing this life-saving piece of code. Download Backup2Mail v0.1b. Instructions included.
If you are adventurous type, uncomment the last line in the config.php and feel free to report me errors. Also ask in the comments if you run into a trouble.
I made two postcards just for fun. Sometimes, when I have spare time, I create stuff, because I simply enjoy it, even though I’m much more comfortable with the paper and pencil.
Anyway, inspired by the examples of famous Mr. Moll and encouraged by a few people who already saw those postcards, I’ll explain how I created them. You don’t have to read the whole article just to see the final products — here are red and blue variants. Still interested? Continue reading ›
Just tested — Omniweb ignores background property rule after html selector (too bad, since I have a habit placing it there). Assigning it to body selector prevents blank background.
Sometimes it happens that you need exact table row index, so you can manipulate data in the HTML table on the client-side. Since the AJAX is so hot (very hot here in web.burza), it’s the matter of seconds ‘till someone will need this kind of information. The rowIndex property is far less known, but potentially useful method and it’s compatible with most of the browsers. Here is a quick example of its’ use. Continue reading ›
To achieve more control over visual appearance of links, many CSS savvy designers use property border-bottom instead of underline. With border-bottom we can easily change color, style or thickness (border-width property) of the line below the link text. Let’s see if we can improve rendering of the border-bottom. Continue reading ›
Since I’m all in information architecture books this week, I started exploring given examples, especially the Amazon.com. I haven’t been in touch with it before, simply because I live in a country far away from America and only recently they started to deliver books and stuff all the way to here. This article is about finding your ways through the part of Amazon.com jungle. Continue reading ›
Amazing how I still receive many e-mails regarding those drop shadows in the input and textarea elements in web forms. This is very simple, so let’s explain it. All you need is background image of the drop shadow and a few CSS lines. Continue reading ›
When slicing down .PSDs to style the markup, CSS girls and guys usually start with a set of generic rules such as
* { margin: 0; padding: 0; }
Then they set a few additional rules:
p, ul, ol, dl { margin-bottom: 1em; }
to make sure everything has some global default white space. At this point they usually style links and corresponding pseudo-classes (:hover, :focus and :visited). After ‘initialization’ of the CSS file, they probably dive into site specific styling. But hold on! Why not establishing generic content image preload notification while we are here? Continue reading ›
About twenty minutes ago, a delivery from FedEx came to our office. The guys started smiling… What?! Is there something I should know about?! They actually ordered me a beautiful TyGrPoApHy hoodie. Wow!! A few moments later and after I almost broke my fingers trying to open the ‘pillow’, I’m proud model of the Veer wearable. Thanks, guys! (Oh, yes, it was my birthday last Saturday)
Yesterday I almost pulled out all of my hair trying to make dropdown menu on one of our sites to work in Opera 7.54. Browser version sniffing instead of feature testing or object detection is what I hate the most, but I had to do it and at the end it serves its’ purpose well. Continue reading ›
When one wants to replace text with an image, she uses some image replacement technique (I personally prefer Mike Rundle’s, but it’s really just a matter of taste). However, at the multi-language web site it could be a real trouble—you will have to make different background images for each language anyway, but let’s see if we can make multi-language CSS at least a little bit easier to manage. With the launch day knocking on a door, it’s not uncommon to make a mistake in language-specific CSS rules. With server-side parsing, you don’t have to worry about multiple rules. Parsing and gzipping of CSS files with PHP (or ASP) is nothing new, but with web.burza, we went a step further. Continue reading ›
I have to announce it or I’ll burst and die—we finished our company’s web site. Enjoy it and don’t forget to check out the goodies : ). Like with every newborn child, you might find some poops around. If you step on it, please let us know, so we can wipe it out.
Our recent project 24sata is living happily and after Vanja’s Two color sIFR and Two color sIFR Take Two articles, it’s now time for me to explain how I managed to position ‘comments’ and ‘read more’ links to bottom of every news preview box, which are all in the same row and of different amount of text within. Continue reading ›
Ed’s note: This is an outdated material. Please visit the article with a new version.
Here again Vanja reloads Two color sIFR technique—better, improved and easier to use. Here’s the article… Continue reading ›
Ed’s note: This is an outdated material. Please visit the article with a new version.
I’m honored to present my fellow colleague Vanja Bertalan to be a guest speaker at my blog. Today’s topic is how to implement two color sIFR, in a way that we did on our recent project, www.24sata.hr. Here’s Vanja’s brief article:
The whole process basically involves 2 things:
<span class="sifr-alt-color"> has a special meaningsIFR javascript currently understands only <a> and <br> elements within headings, and strips everything else out. I needed additional notation, a marker, that will tell flash to color the text within markers differently. Decision was made to use <span class="sifr-alt-color"> for that purpose. That notation will be transformed to ­ character, before it’s passed to flash. ­ is a character very similar to dash (note the difference between ­ and –—more about en dash). Continue reading ›
I know i’ve been quite mysterious about ‘the new project’ in web.burza. Our contract obligated us not to reveal any details about it in public. Well, today it became public itself—i’m presenting 24sata, new Croatian newspaper’s online counterpart.
Now, be careful with our baby and feel free to report me any trouble you might run into.
Expect more technical report soon : )
So, you are doing interface design? How about designing user interface for my cooker? “Why?”—you ask. Well, the other day Luka’s grandma attempted to warm his bottle, but she had a problem guessing which switch-button is for which burner on our kitchen cooker… Continue reading ›
Macs in Croatia are way too expensive. Our Apple store raised prices way too much for us—the ordinary people. Just for example—Power Mac G5 Dual 1.8 GHz is in Croatia even more expensive than Dual 2.5 GHz in the U.S.A. Since i declare as being able to build web sites that work on every platform, the company managed to make me one available for testing purposes, since our current project has quite complicated layout. Continue reading ›
The project i’m currently working on, requires me to re-think/redo structure of the headings in a way somewhat different than i did it before. Searching through my usual resources (W3C and some usual standardista’s blogs) left me with no answer, but with question or two more. Continue reading ›
Garret Dimon wrote nice post about why .PDF links should be labeled. While there’s no problem making these labels when starting from scratch or re-designing web site, it’s a pain in the a** to add class="pdfLink" to existing (large) sites. Here’s JavaScript to the rescue. Continue reading ›
Promised some cool stuff few weeks ago and here is my first web site for my new employer web.burza. This is micro site—just the front page, a sort of standalone advertisement. My fellow colleague Phoenix made illustrations and branding and i’ve done XHTML, CSS and JavaScripting.
If you care, drop me a line about it…
I’ve done some testing in IE 6.0 and it is proved that Dean Edwards’ solution to a flickering problem really works (look the frame on your right in IE 6.0). Effect and concept of the problematic widget (images of the staff) at this web site is inspired by Adaptive Path web site, which is designed by Douglas Bowman, but i suppose that at the time of launching Adaptive Path there was no solution available, so the users on slower connections may experience flickering.
target=“_blank” to external linksIf you want your pages to be valid XHTML-Strict, but you also wish to open external links in new window, the following snippet is doing just that—sets attribute target=“_blank” to all external links in a document to keep your code valid XHTML-Strict. Continue reading ›
Over there at The Man in Blue there’s nice tip about how to ‘hide’ link to a current page. Here’s server-side solution to improve your main navigation. Continue reading ›
Until yesterday, there was JavaScript function on this web site, which selected the first form input field when page loads. The same functionality is implemented at Google homepage. Some users don’t use mouse for basic browsing (such as going back to previous page), it’s discovered that if input field is focused or selected, there’s no way to go back by pressing backspace. Continue reading ›
Here’s quick tip for clickability testing—try using your website with your left hand (if your right hand is dominant) or vice-versa. If some link is hard to point at and click, try to fix it. The same applies to dropdowns and any other interactive element. That’s it, there’s nothing else.
Drove home last night and at one crossing traffic light turned red, so drivers started breaking. The car in front of me had some wierd stoplight sequencing, so i almost run into it. Nothing serious, but it made me think. Continue reading ›
Large headers force us to scroll down a bit to the main content. “Skip to content” is quite useful, but why not skipping the “skip to content” also and save one more click? Continue reading ›
I recently designed comp for a client which he realy liked, but when it came to pricing, he decided to give a job to a designer who offered him 50% lower price. Client’s explanation was that he is not familiar with web standards and that he will have problem managing a website, despite my offer to make him a documentation on how to do it for free. Continue reading ›
Providing separate stylesheets for printing a web page was good idea in theory, but in practice it all falls down. Let’s see if we can do something about it. If we could involve server-side script (there’s solution for both—PHP and ASP based systems *wink, wink*) which will reload that particular page, but replace regular CSS file with stylesheet specially suitable for printing an article, entry, post or whatever-you-wanna-call-it, this would make a hudge step forward towards better usability of our web site. Oh, and yes, Google will just love it! Continue reading ›
I’m very happy to announce delivery of BeautyMag, web magazine aimed at life quality improvement. It covers topics on beauty, fitness, nutrition, fashion and lifestyle. It’s published in Croatian language only, but some galleries are worth seeing, even though you don’t understand Croatian. Continue reading ›
Just wanted to say “Hi!” to all of you visitors coming from Cameron’s. Interesting, some of you might experience bad things happening here this afternoon, because i’ve been playing with layout of the blog’s home page most of the day, today. Coincidentally. It really has nothing with the fact Cameron listed this site. No, really it hasn’t. Interested in more on Wicked Worn Look? Continue reading ›
I was recently in searching for some very simple fonts which usualy come with MS Office, or other Microsoft software which i don’t have installed, as for my needs OpenOffice.org is quite suitable (and it has PDF export plug-in, too).
I have a fresh XP installation for a few weeks now, but i haven’t backup some of the most usual fonts (assuming they are installed with OS by default), for example “Arial Narrow". So i went to Microsoft pages to download Continue reading ›
I promised you long time ago some handy JavaScripts, wasn’t i? Promises have to be kept, especialy when they are so teasty and usefull. I’ve implemented this same script in this website’s comment form, so you can see it in action right here. Continue reading ›
Some of my visitors had minor problems with display of the page. Basic design has three different static layers with transparent .PNG’s as background-images brought for the pleasure of Mozilla/Opera/Safari users. Internet Explorer don’t have this feature. It seems that older display adapters have some difficulties with rendering this kind of styling. ATI Radeon 9000 and above shouldn’t have any problems.
So now you have one more alternative—make yourself at home and play with the options placed at the top right section of each page, or just try it here:
Poklanjam 5 templateova za blog.hr, koje možete pogledati na maratz.blog.hr, gdje ćete naći i upute za instalaciju.
Nažalost rok za preuzimanje templateova je prošao.
Finally i’ve upgraded this whole darn thing to the latest WordPress build and also decided to add “The Wolf’s” (nick by Mike Davidson) ShortStat script, which is so addicting, that now i understand how others became junkies. I’ll be probably watching mine for the next few days all the time, : p !
He’s maybe not among top 10 most influential bloggers, but his site is surely under my 80/20 bookmarks. It’s there ever since that great No. 57 of “my precious” CZG.
Oh, well, i gotta-go to check my stats!
This morning i checked my stats, and i came across interesting web site which is linking to my web design section. Since nothing was there, just some internal links, i right clicked and saw that it’s in fact calling JavaScript file from my server. What courage this guy has!
Fortunately, when building this website, i set all CSS and JavaScript going through serverside (PHP) script which will not pass these files outside my website – some referrer conditioning (or any other you find more appropriate) and simple switch/case deploying. If willing trying save following as externals.php
<?php
$q=$_GET["q"];
if (strpos($_SERVER['HTTP_REFERER'], "http://www.yourdomain.com/") === false) {
echo "/* Thanks for being interested in my work. Please contact me if you want to know more about how it's done. */";
} else {
switch ($q) {
case "css":
header ("Content-type: text/css");
readfile("style.css");
break;
case "js":
header ("Content-type: text/javascript");
readfile("script.js");
// and even more cases if desired : )
}
}
?>
and modify your HTML code somewhere in <head> section:
<link rel="stylesheet" type="text/css" href="http://www.yourdomain.com/externals.php?q=css" /> <script type="text/javascript" src="http://www.yourdomain.com/externals.php?q=js"></script>
Above is of course simplified version of the original script and it’s left to you to customize it however you want (hint: this page could send you an e-mail whenever conditions are not matched).
I’d be glad to hear how you solved yours.
Stripes are undoubtly very popular graphical element these days. They are used in many ways in web design, mostly as background patterns of various layout parts or block elements. Here is a fresh tip on stripes that could save your time.
There is a bug in Mozilla browsers, which causes jumping of some parts of the content while loading, and sometimes some portions of layout stay in wrong positions. Experienced this when making slight redesign of Graniti-Sušec homepage. The exact size of the image under introducing paragraph wasn’t set, so during page load, division containing latest news, stayed too far below:
This occurs when image is placed in floating parent element, in this case <div>, which floats to the left.
After I set correct size of image: <img src="../slike/skl_3.png" height="165″ width="220″ alt="a detail of stock pile” />, everything stayed at its’ place:
Feel free to discuss on jumping bugs under the comments..
There’ve been interesting parallel interview at CollyLogic which made me redo my visited links. I’m bringing common techniques overview.
Webdizajnerski portal Webmajstori.Net raspisao je natječaj za najbolji web projekt. Skoknite na njihovu stranicu, pročitajte pravila i prijavite se!
I’m currently preparing for my summer holidays. Have to work a few more days as an aerobics instructor (you didn’t know I’m fitness trainer, didn’t you?) and after that i’ll be all the web-guy.
These days a portal about beauty, nutrition and fitness (Let’s say ‘the beauty portal’ – i’ll keep the real name confidential ’till launching) is under heavy finishing work. I’m going to be ‘a chief of my column’ and right after publishing this post some articles should be prepared for the Opening day. In a next few weeks i’ve planned to finish some usable (Java)scripts, which of course will be under GPL. Suggestions are welcome – tell me if you’d like to see some particular functionality. Submitions will be accepted ’till next Wednesday.
Who-hoo! Became Worn Jedi paduan under Master Worn Jedi Cameron Moll along with my fellow paduan Megalithic, which he also mentioned very calmly and with self-control. His experiment this recognition refers to, can be found at his website. Mine is a few posts under.
Talent compliments and waving back, Seth!
Wrote yet another article at Webmajstori.Net. This time it’s about implementation of tabindex and accesskey attributes and basic accessibility.
Objavljen je još jedan moj članak na Webmajstori.Net, ovaj put o praktičnoj upotrebi tabindex i accesskey atributa i općenito o pristupaćnosti.
Css Beauty became an important CSS design showcase, so I’ve submitted maratz.com to it. Thanks to Hector, the guy who runs the whole thing, for recognition.
Some people had some problems viewing site in Safari 1.2.2. Unfortunately, don’t have Mac to test on it. This morning iCapture returned me a screenshot which shows the site appears as I wanted to, but if there is someone willing to be bothered testing it on its’ Mac, please get in touch. Any help/suggestion is welcome.
Following Cameron Moll’s mini tutorial, I’ve come to this new oldish look.
These are only temporary, probably we’re getting back next week, so for Internet Explorer users a few screenshots were taken (IE doesn’t supports PNG alpha transparency):
Tell me if you like it, tell me if you hate it…
Today this site has been noteworthy at CSS Vault, the great CSS resource. Thanks to Scrivs for lettin’ me in.
I’ve been unlucky to submit right after some great designs, like Neubix and I heart you (both made by Ryan Sims). Considering this, I should be more than satisfied. After all, as Scrivs said, “the stakes have been raised now"…
Checked site via iCapture for Safari, and not happy, not happy at all.
It seems that it has the same rendering problem (just like Internet Explorer) regarding .PNG images. Beside that, for some unknown reason, background image is repeating (?). Tried searching G., but found nothing useful, so I’ll have to resize/resample/expand affected images… Will this ever end?
Anyone have a clue?
So, here’s what I did to make it work in Safari 1.2:
I know, I know.. Two weeks ago I said it’s too late for March version 2: redesign contest, but hey, I couldn’t resist. So here is my entry. While you wait for voting you can drop me a comments.
Well, one thing is sure, It’s too late for me to jump in for this month’s version 2: redesign contest, but I’m more than happy to announce successful delivery of an artistic website www.MirkoBeovic.com.
It’s the online gallery of young, but very promissing Croatian photographer. There are five galleries: nature, people, places, animals and events. A joy to watch!
Website itself is very simple and minimalistic, providing basic information about the author, contact form and feedback via guestbook. Pages have been coded following XHTML/CSS standards (but of course!), CMS made with ASP.
Dave Shea wrote very useful article at ALA about link image hovering.
It works fine, but here again there is this IE 6.0 annoying flickering. In Dave’s example there is certain delay when hovering a link, so I’ve came out with modified example which has delay when removing pointer from a link (if interested take a look at the source).
Either way, the flickering is still here and I think it’s maybe just too early to use this technique in commercial websites (i.e. where the majority of the User Agents is still IE 6.0)
Did you know there is UTF-8 code for drawing of the sun? I didn’t and here it is - ☼ will draw a sun ☼ !
For the last few weeks I was pretty much occupied with www.graniti-susec.hr. Redesigned, optimized for search engines, improved some back-end functionality, tested and released.
Client-side has been made using XHTML 1.0 Transitional, CSS 2.0 and some behaviors (many thanks to Janos Horvath) for :hover emulation in IE.
Error pages made using Ian Lloyd’s excellent script explained at ALA. (update: Even though this is excellent script, I aimed for server-side solution, so now ASP page handles error 404, basically in the same way Ian explained). Programming made using ASP.
The client requested a very lean, clean and simple appearance that follows basic logo colors, without unnecessary details. For advanced user agents (Mozilla 5.0 and newer) there are two more alternative designs (not completely optimized and will be removed soon).
Alternative ("easy reading") style provides less graphics and larger scallable font.
Also many thanks to all for testing and comments at Webmajstori.Net.
Firefox 0.8 made this site temporary unavailable. For code diggers - the content wasn’t shown, because HTML’s height wasn’t set to 100%. Yes, I know, I supposed to do that first time, but, hey, never is too late (at least at this kind of site) and also it warmed my brain cells a bit.
Some of the visitors may disagree with this “edggy” aproach (and I respect that), but this isn’t presentational website, it’s just my experimenting place.
Some great stylings of Definition Lists could be found at Max Design. Very clever and sweet!
A list of the most common fonts on Windows platforms could be usefull in determing which font to use for your web pages. Thanks to Jeff Croft for researching.
Web site about PDF (Portable Document Format) - AbracadabraPDF is now on-line! It’s currently in French, but soon English and Croatian translations will be added. Designed by Boris Senker, Dvotočka studio.
I’ve been searching for something else at ALA regarding my current project, and found an article about using PHP for marking current page. This triggered an idea that immediately crossed my mind - “How about if I make it with SSI only?". This is supposed to work on Apache without CGI or PHP.
Let’s say you have unordered list of links (<ul>s and <li>s) for navigation wich is included in every page of your web site with simple:
<!--#include file="navigation.html" -->
At the top of every page, place something like this:
<!--#set var="thisPage" value="News" -->
The value should be unique for every page of your web site (at this site it is: “News", “About", “My Work",…). The next we need to do is some modifications of navigation.html:
<ul id="nav">
<li><a <!–#if expr="${thisPage}=News” –>id="activeLink"<!–#endif –> href="#">News</a></li>
<li><a <!–#if expr="${thisPage}=About” –>id="activeLink"<!–#endif –> href="#">About</a></li>
<li><a <!–#if expr="${thisPage}=My Works” –>id="activeLink"<!–#endif –> href="#">My Works</a></li>
</ul>
And finaly some style:
#nav li a { background: #FFF; color: #000; }
#nav li a#activeLink { background: #000; color: #FFF; }
#nav li a:hover, #nav li a#activeLink:hover { background: #555; color: FFF; }
There you have it! Non-active, non-hovering link is black text on white background, link to current page is white text on the black background. Hovering any link will change text to white, and background to a shade of gray.
If you stuck somewhere, ask. Enyoj!
You are reading outdated material, so links from example no more match structure of this website. However, the essence of the article remains the same.
Congratulations to Boris Senker on launching his company’s web site - Dvotočka, in which development I’ve been involved, mostly bothering about the standards…
Some characters do not pass XHTML validation. Also, CSS validator (by referer) returns error with charset ISO-8859-2 or Windows-1250 when some of Croatian characters are used. One of the solutions is switching to UTF-8 charset and change of problematic characters to corresponding entity code. Here is a table of some of UTF-8 entities.
If you ever had a doubt about which font to use in your web pages, maybe this simple table of most used fonts will help.
New experiment explains how to adjust the best possible position of otherwise fixed background image in IE, which doesn’t support this property in elements other then <body>.
* Please keep in mind that this is a personal web site and it does not reflect the position or opinion of my respective employers, organizations or partners.
Supported by Veer.
A web log of Marko Dugonjić, web professional from Croatia. Topics covered: