Opera, CSS3 and border-radius. Oh dear.
February 19, 2010
Here’s an oddity. Opera, the underused and almost forgotten power in the browser wars prides itself on its rendering of web standards compliant code. It comes as some surprise then to me, that it is still so underpowered where css3 is concerned. But that’s by-the-by. As a consequence of this lack of support, I must check over my designs in Opera after I’ve employed some CSS3 specific styling.
So, after applying some border-radius styling to my navigational hyperlinks, right here on shubox.net, and knowing full well that Opera does not yet support the border-radius property, I check out the look to make sure that all’s well and there are no nasty surprises. But on this occasion there was a remarkable consequence!
You can see from the above image, that Opera somehow splits the background borders on the contact and services links when going to a new line. This behaviour makes no sense at all and I’m surprised at Opera.
Luckily, I immediately wondered what would happen if I used another little-used CSS property: inline-block. This effectively creates a self-contained block-level element while allowing it to remain inline within it’s parent. As you can see from the next image, this did the trick.
You can see that the ‘contact’ link is now happily inline and unbroken. Adding inline block meant that the link became too padded – this is due to the element now occupying it’s own space and taking it’s relative size values from the line-height rather than font-size. A little CSS ‘fixing’ was needed to stop the links looking bloated. Specifying the line-height for the element and removing most of the existing padding was sufficient to regain its previous elegance.
As a matter of interest, those viewing this article, and indeed this website on a browser that doesn’t support the CSS3 border-radius standard (Opera, and all versions IE most significantly), here’s how the rest of us see those links.
So much prettier don’t you think?
Oh, what’s a poor web designer to do?
February 18, 2010
As I sat in my cosy little office in Bradford, a ‘discussion’ broke out in twittersville regarding the role of a web designer (yeah, that old chestnut.) Mike Kus (web designer at Carsonified, the design house that specialises in running seminars and events that teach web designers how to code) aired his opinion that web designers should learn to code HTML in order to be a better web designer. His blog post got the usual round of congratulatory pats-on-the-back by the marauding sycophant ‘web groupies’ (as highlighted so eloquently in Brendan Dawes’ diatribe of last week) before the obligatory daggers started flying from those who don’t necessarily agree with him.
Mark Boulton (typography evangelist) responded via twitter by chiming that Web Designers should learn typography and only then can they be worthy of the esteemed title “Web Designer!” Thus disagreeing with Mike.
So this is where I stand. My belief, and one that I’ve held for many a year is that a good web designer should fundamentally know how to ‘design’ and should understand the ‘web’, how it works, who uses it and what it’s for. The nature of the web relates most closely to print design, so some knowledge here would be of benefit as does an understanding typography, layout and crucially how the web differs from conventional print. Ideally the Web Designer should be free to design without too much concern about how the design will be converted into an actual website. He (or she of course) does not need to know the code.
Why do I think this? Well, any type of design, whether it’s for the web or not has a brief – that brief lays out the intended function of the ‘thing’ that is to be designed. So, in designing a website, you must facilitate visually the intended functionality of the website. In a typical website the principle aim is to present information. That information needs to be presented in a way that a.) can be found; and b.) is easily readable. If navigation is needed, it needs to be clear and concise, if not bleedin’ obvious. If a web user needs to be enticed into clicking a button, the designers job is to understand that and to somehow visually entice the user to click that button – either by using existing methodologies or even inventing new ones. A pure web designer does not, in my opinion need to be aware of any coding practices in order to do this design job. Rather, he needs a solid grounding in the principles of design and an acute awareness of how the web is used and can be used.
When coding a website, the nature of the information, or the ‘type’ of data needs to be determined so that it can be coded correctly. Accessibility concerns need to be dealt with using good coding practices. The code needs to be machine readable, the content needs to be discoverable, searchable. Styling needs to be robust, it needs to be coded to accommodate a range of user agents (web browsers to you and me) so that it looks the same. Event coding using javascript needs to degrade gracefully and the site must function fully in case javascript isn’t present… these are problems for the front-end developer. In an ideal and purist world the Web Designer doesn’t and shouldn’t have to concern himself with any of this.
I think Mike Kus has been somewhat naive in his blog post and unfortunately, as a ‘celebrity’ (re: previous post) he won’t ever need to be fully aware of this. His adoring public will convince him he’s right. C’est la Vie.
- Of course, I should qualify this entire post by stating that in this day and age, many web designers do indeed code, and do it well. A freelance web designer is unlikely to be fortunate enough to be allowed the luxury of doing nothing but visually mocking up a website, so at least one of Mike’s ’5 reasons why…’ is valid.
This blurring of roles has led to something of an identity crisis in the web world, as many designers turn to coding, they can no longer be known as ‘designers’ per se. Nor can they be known as web developers because they don’t do back-end scripting. So you may come across titles like “front-end web developer” which is beginning to stick although strictly speaking, that would be the ‘developer’ who specialises exclusively in the website’s mark-up, the HTML/CSS. So it’s no better a description as web designer. Anyway, that’s a topic for another post perhaps.
Optimising your website is Still important!
February 9, 2010
Recently, Brendan Dawes made a short blog post criticising the boys-club style clique that exists in the UK web design industry. He bemoaned the lowering of standards that’s occurring due to the Mediocre calibre of some of the guest speakers that are continually invited to Web Design events, and the continual very public displays of mutual-congratulation when any of these members launch one of their pedestrian, mediocre and sometimes dysfunctional websites. He made a very good point I thought. In fact, this is something I’d been bemoaning to friends and colleagues for some time, so it was good to see someone with a significant voice in this industry having the balls to speak out.
The responses to his post began fairly sedate, mostly by people who agreed with him (even some who were arguably those ‘mediocre’ web designers he was talking about) and were glad that he’d written his post. Then some who disagreed but still all was well. Then of course, it soon degenerated into a witch hunt, by the friends of the mediocre web-starlets (who obviously knew who he was talking about) and their shirt-tail grabbing groupies – who see a befriending of those clique members as a way into the glamourous jet-setting lifestyle that is the provence of todays web design celebrity. Dare I say it, it was the weaker designers who seemed most offended.
Today, I witnessed in small part exactly what Brendan was irked by. Now, let me begin by saying that Mike Kus is one of my favourite web designers, but the keyword here is ‘Web’. Posting on Twitter, Mike made available a link to show off the new 404 page on the recently launched “future of web design” website. Quickly following this posting, I witnessed all the congratulatory comments for his nicely designed (if not one of his best, in my opinion) 404 page that he must have been pretty proud of.
But none of the comments seemed to take into account that, as pretty as it might be, it must first and foremost perform its function (the definition of ‘design’ after all). A 404 page’s function is to make the visitor aware that they’ve entered or followed an incorrect URL – they’ve attempted to view a section of the website that doesn’t exist. That’s it. To make the page more helpful, a web designer might include a link back to the main menu of the website. So, short and sweet – in/out. The load time for this kind of page should be milliseconds and it’s size needn’t be any greater than 2kb.
The 404 page offered up by Mike Kus and Carsonified to such adulation and fanfare weighed in at 600kb! Not only that, but the site rendered in its entirety on an iPhone, where over half a megabyte has serious implications for those fair-usage mobile internet users.
So, the comments coming from the ‘crowd’ should have indeed been congratulatory on the look of the page and its cute if utterly unnecessary animation – that’s fine, but they also should mention these fairly fundamental shortcomings (as I did). Curiously, Mike didn’t reply. Hmmm.
The morale of this story:
By all means, congratulate your peers or respected betters when you have opportunity, but remember what the web is for when you’re making that judgement. Always keep in mind the function and purpose of the page you are designing/critiquing and make sure it’s accessible to all of that group of web users that wish to access it. If you are going to give an opinion or a pat-on-the-back to someone for their efforts on a website, please try to be objective about the absolute success of the site before blindly pumping their ego. This way, we can all help to create a beautiful, accessible and functional web.
Shubox Web design is environmentally aware and takes every step to ensure a greener work practice. Low energy computers, paperless invoicing and considerable use of public transport ensures that Shubox is less of a burden on our beloved Bradford and West Yorkshire environment.