About Clare

Web designer.

Portfolio Online

I have currently got my portfolio housed on Dropbox, which as you know from my earlier post, is only a temporary affair while I get new hosting and a domain name sorted (old ones expired). Contained there is some of the work done to date. So without further ado, here’s the link to Dylunio (my portfolio):

dl.dropbox.com/u/10422763/Dylunio/index.html

Note: Because it’s currently on a file sharing server PHP isn’t working, and as such have been removed for the time being.

Advertisements

Internet Explorer 9-10: Can You Use Them?

It’s been a month now since IE9 was released (set for mass upgrade on Vista in late June) so I found myself a little shocked that in April they announce IE10’s development. While Mozilla and Google (and now Opera) have relatively short development cycles and give us incremental, steady releases —which Mozilla have just announced a new channel for even better and maybe shorter cycles — Microsoft is yearly at best (unless you’re IE6(!)).

Internet Explorer 9 is set for upgrade on Vista in June, but not XP users (still approximately 60% of Windows users) because it’s not supported. Needless to say this will annoy a lot of people. And then there’s the fact that if IE9 is so awe inspiringly great then why not upgrade and improve that before rushing off to start in pastures new? I’m sure people will wonder and I should imagine that it will deflate their hype over IE9 come June.

And yet, despite years of angry developers and customers alike they seem to have gone to the extreme. IE10 is Windows 7 and above only! No support for XP or Vista. See a pattern? One could say it’s going in the opposite direction to other vendors who are making their browsers more accessible!

There’s also the matter of it only running on Windows and not OS X or Linux. Apple are seen as very elitist and ‘You-Must-Own-Our-Hardware/Software-To-Use-This’. Why then is it Apple are giving Safari to Windows users? Surely Microsoft can do the same?

Microsoft have launched a campaign to try and make users and businesses upgrade from IE6 to IE8+ too, stating that it’s not secure and behind the times.

And so I reach my point (beyond that we may have to wait another year before IE catches up to the pack — which many people doubt will happen even then). If Microsoft want people to stop yelling in frustation and want to be ‘the best’ with Internet Explorer then it’s a heck of a way to do it.

For a front-end developer it means that glimmer of hope that IE6 will die is pretty much gone. It means that a fraction of users will be able to use it and the rest either can’t or doen’t see why they should shell out money to upgrade their OS just for Internet Explorer.

It is said that people don’t like change. If it were up to me, I’d do what Google do and upgrade people automatically. Not sure how that would work with IE6 though but since they made it I’m sure they could figure something out. Sadly, that likely wouldn’t happen.

If companies are already having such a hard time upgrading their browsers and are using XP, what do we think they are going to say when they say “OK let’s do this! What’s the latest version?” and get told “oh, no sorry, you have to upgrade your entire OS and network to use this browser”? Followed up the not unreasonable question of “well what about IE9?” and get informed “no, you have to have Windows Vista”? They’d say “…I see. Think we’ll come back to it… Maybe”. I think you see my point, anyway.

However, here’s hoping IE10 will support a considerable amount more than it’s younger kin or else people will never take the seriously. I can’t say that I blame them either.

On Writing

Writing is one of my hobbies so it’s something I’m quite passionate about. It’s how we communicate and it’s how we inspire our audiences and convey ideas. Without writing we’d be quite stuck. Well, we’d have pictographs and older languages but still, writing is uniquely inspiring.

Magnifying Glass over Internet in the dictionary

Writing is also how businesses convey their business. It’s how we tell people what we do. How is it then a lot of people, businesses and web designers alike get it so wrong?

Whenever I’m looking for a business online or even looking for design tutorials I tend to think less of them whenever I see spelling mistakes. It might be that you aren’t great at spelling and that’s not really my issue. My issue is that you’ve typed it up on a computer and computers have spellcheckers. Browsers and online blogging software often have spellcheckers, as well as Word, InDesign or other word processors. Therefore, it’s not really a problem to check spelling, is it?

Punctuation tends to bother me too as well as grammar. The use of ‘alot’ or ‘atleast’ or other phrases is baffling.  Where did they come from?! If you type it into the computer with a spellchecker then it’s going to come up wrong…

As well as this people who misuse commas and put things like “:-“, tends to irritate me. I can understand people who aren’t good at English, but people who are designers really should be competent. Even if you aren’t good at spelling there’s no real excuse for punctuation or grammar issues. Not nowadays, anyway.

I would suggest Penguin’s Guide to Punctuation or maybe Grammar Girl.

Sketchbook

Ah, the sketchbook. Among the experience it’s something to be revered and is taken anywhere and everywhere. It’s very beaten and battered from use and holds thoughts and ideas and inspiration.

An open sketchbook

Among beginners, such as in college/university it’s something of a chore. “Why do we need them?” was something I remember hearing a lot! A lot of people genuinely didn’t see the point of them, beyond for academia.

Those that did feel that way though often were those whose designs suffered from neglecting the sketchbook. Those that kept comprehensive and well-documented sketchbooks of inspiration, sketches and ideas had a lot more on offer in their work. In turn their work had a lot more creative and productive potential. Not to say you have to be an amazing artist though.

We were told time and again that by using the sketchbook it promotes ideas and more creativity. You get more ideas if you just draw and don’t concentrate too much on it because thought isn’t hindered by detail or specifics. Concepts can be drawn from thumbnails but the more intiial ideas the more rich a concept can be.

This and the notion of collating inspiration is something lost on beginners and even some experienced designers. I can see the allure of going straight to the computer but actually, I’d say it can take longer to develop a concept that way than it would by sketching first.

My advise to anyone, experienced or not is to use their sketchbook. If you don’t own one then buy one! It will be one of the best investments you ever make.

Image Optimisation

Image optimisation is quite straightforward once you understand it. The idea is that images you save in Photoshop or other programs will be shrank in file size for the Web. Whether your site is optimised can make or break it, in terms of how quickly it loads.

Save for Web and Devices: 4-Up View

Once people were happy to wait with dial-up connections but not any more. People want sites to load quickly and demand it. It could be seen as impatience, but you don’t wait for a book to load or a business card, so I can appreciate the frustration.

Optimising an image starts with the file type. Do you save as GIF, JPG, PNG, TIFF… Which is right? Well, the simple answer is it depends. Photos or images with a lot of different colours/tones are often saved as JPG (or TIFF if lossless quality is required). PNG or GIFs are similar insofar as they require flat colour or limited colours/non-complex graphics. For example, text is saved as GIFs or a PNG.

PNG-8 is seen as a the successor to GIF. PNG-24 and above is similar and hopes to succeed JPG and above. However, if you save as PNG-24 in Photoshop it’s usually huge! If you save in Fireworks then it’s sometimes considerably lower. While Photoshop is a great piece of software, the Save for Web and Devices option isn’t as good as Fireworks.

So you might be wise to open a file a PSD in FW and resave. Also take note of the resolution. When saving for the screen it should be 72 DPI, but 300+ for print. Note well, you cannot upscale the DPI from 72 to 300! Some people do that and end up with awful-looking graphics.

Saving for the Web is also finding a balance between file size and artifacting. This where colours and detail to bleed or lose detail (described as being ‘soft’). So you should be careful and evaluate the image(s).

Z-Index

This is, according to some, one of the most misunderstood concepts in CSS. For the life of me though I can’t see why that is!

Z-index Stack

The general concept of z-index is fairly straightforward. You have X and Y, controlling the width and height. The Z-axis then is the depth. That is to say the order of elements in a stack.

Put simply, this of Photoshop and how you use layers. You put layers on top of each or under each other. These can have different effects, but the gist is the same.

In CSS, z-index says whether an object is on top or below an element. For example, if you had a box and an image on top of that box, it would be above the image. Therefore, it would have a higher z-index. It would be higher in the stack.

Z-indexed elements should start at around 1,000 for the first object and then 2,000 onwards. Incrementing by 1,000 can help avoid some issues with the construct of the property. Which is to say that by default, it displays as 1 and doesn’t always translate properly — or like you’d expect.

For a more visual look at the z-index, then you can see Chris Coyer’s screen cast. You can also read a great article on Smashing Magazine.

Floats Vs. Positoning

Before I begin, I would like to make a point. Neither floats nor positioning are perfect. They are, for all intents and purposes a stopgap between how we do layouts now to a defacto or standardised method in the future. Indeed, there are a few layout modals in the works, but when they’re fully implemented is years away.

In the meantime, I’ll explain the differences between floating an element and positioning an element. Oftentimes, they end up with very similar looking results (though not always).

Floats: can be used to create navigation, columns or text wraps (around an image). They’re usually straightforward (though bugs persist, particularly in IE6)  in that you float the element. This means that an element floated left is on the left-hand side of the page and an element float right is in the right.

Floating Left and Right

Floating Left and Right

From here you can create columns. With floating elements they ‘float’ in relation to another element in the ‘flow’ of the document. For example, if you had two columns that are both floated left and zoomed in far enough the second column would display under the first. This means it’s intuitive enough to change at certain lengths. This is also how wrapping text around images is achieved.

Positioning: is quite similar and often works in tangent to floating elements. For example, to get navigation system to be horizontal you would float: left; and display: inline;.

This would display them in a line as well as adapting to the flow of the document. However, positioning alone isn’t the same. If you had columns positioned then they are likely to stay where they are regardless of how much or little you are zoomed in.

Absolute Positioning

Now the flow of the document can be retained to a degree by relative positioning, which changes with the flow. But absolute positioning is, well, absolute! Things will stay the same with the latter regardless of text sizing etc. This would, for example, be bad in developing for mobile devices as it would require a different stylesheet or media query per device! Imagine how much that would take/slow down HTTP requests (loading).

So a very, very basic introduction to both floating elements and positioned elements. You can read more about them on the Web but I thought it might help you get an idea of how they work. See Chris Coyer’s article explaining ‘All About Floats‘ or his video screencast.