ffffrozen - Adam Bezulski's blog

I think that BBC's website is the one that features good look'n'fell and user experience. Very interesting post about their "new global visual language for the BBC's digital services" was published on BBC's blog.

The stylegiude was co-created by English designer Neville Brody and his agency - Research Studios.

• URL: http://www.bbc.co.uk/blogs/bbcinternet/2010/02/a_new_global_visual_language_f.html
• URL: http://www.researchstudios.com/2010/02/17/bbc/

It's been a very busy week for me, mostly because of the relocation from my current residence, but I've managed to bookmark some websites.

I could not resist and I decided to start with Fair Trade Clothing. Lovely website that puts smile on my face. Apart of the nice picture of girl on the landing page and the colour scheme, product images gallery makes that website interesting. Image zoom in/out feature is based on two jQuery plugins: slider and draggable.

 

The next one is Online Jaarverslag. Website of a Dutch company that has something to do with PDFs and website (I think). I like the one page layout incorporated with jQuery scroll-to plugin. The contact section is nicely combined with the form and sliding google map. Apart of these, colour scheme is very calm.

 

Super User Studio. Clean and simple - that's what I like. I have nothing more to add.

 

Now let's have some pictures as a full background, half-transparent layout and some nice pictures in photography section. That can be found on bressane.

 

With small delay, here comes the next "Weekly inspiration" post, so let's start.

Last  week I found some interesting and good looking websites with nicely used jQuery:

SPD Austin - simple and clean layout with interesting use of jQuery on the landing page for projects description

Momkai - quite unique yet simple and clean layout; very creative usage of jQuery to show details of listed items. All that gives you impression of full flash website but everything is done in xHTML, CSS and jQuery

Jay Hollywood - nicely used carousel, that fits on full width of the screen

Jarred Bishop's tumblelog - a nice example how to use CSS background-position: fixed property

I like the following websites for the their simple design and palete of colours:

Hex

Oliver James Gosling

David Salvatori

Websiteburo

The next website represents out of the box layout, which is based on colorful circles; very interesting stuff but some people might find colours annoying:

Curious Generation Group

And finally the last website - A Design Film Festival 2010 - website that features interesting, simple and horizontal scrolling layout. The navigation is quite intuitive and jQuery scroll-to plugin is used for horizontal sliding. While horizontal scrolling is a subject of some discussion regarding usability, I find that website very interesting

Enjoy your browsing!

Finally, the latest Apple product has arrived - last week Steve Jobs presented the iPad. Before that, we have been hearing a lot of rumours about the name, design and specification.

The iPad receives mixed reviews, some say that Apple mixed an opportunity to revolutionise the market and point out that the iPad is just the enlarged version of iPod touch. The design of the iPad made a good impression on me, so the price range as well (at least the prices in US) which make the device more affordable (prices in EU yet to be confirmed). Where is the criticism?

The OS

Let's start with the operating system - iPad uses same version of OS X that we can find on iPhone and iPod touch but most of the scream is about that, this is not the full version of OS X that we can find on iMacs and Macbooks. But that makes iPad compatible with applications developed for iPhone and iPod Touch. You can run the same application without rewriting the code. Even more - that makes the application market even bigger. I also find another positive thing - inexperienced users will not be able to "brake down" the OS and make the device unusable for a while.

No Flash support

The same story as we have with iPhone and iPod touch - iPad doesn't support Flash and if you want to enjoy youtube there is an application that you have on iPhone/iPod touch. To be honest I don't have a problem with that. If you browse the web, you won't be annoyed by flash ads that pops in and interrupts your reading. People tend to forget that Flash uses a lot of processor's power. What does it mean? More processor power, less battery time. Apple declares that iPad can run up to 10 hours so I can only imagine that Flash usage will significantly reduce that time. I do realize that full flash websites will not work, but designers and developers have think about creating websites and web application for mobile devices.

Where is the camera and USB port?

With this one I might to agree. I am not the fan of built-in cameras (if you want to make pictures get a proper one - not a toy) but in this case, camera would be ideal for video conferences. Also at least one USB port also might be useful so it would extend the existing functionality.

The interface

People say that Apple missed the opportunity and didn't revolutionise the interface which is the same for iPhone and iPod Touch. Why the hell they should change that? If you have a successful recipe, you don't change but tweak a little bit. iPad is not only targeted to new customers but also to the ones that own iPhone/iTouch. People don't like to change their habits and change of the interface would make more harm. 

Will it be another successful device such as iPhone or iPod Touch? Well, time will show us soon. In my opinion the device is perfect for users that are not familiar with computers at all, but they would like to browse the internet or enjoy the music. Having an iPad, the learning curve is much easier for them, they don't have to worry about the usual things that all PC/Mac users have to cope with.

Here comes another portion of websites that are worth visiting. What's in this set? Portion of clean, minimal and grid based layouts. There are also examples of websites with large images as a background and there is one nostalgic that reminds me the past reality in Poland.

But I would like to begin the showcase with Jung von Matt/Neckar website. A really nice usage of timeline with magnifying option. Worth attention (IMHO) because the timeline is based on jQuery:

Jung von Matt/Neckar

Aperto

Area 17

Codare

Mike Condrick

Eric Campbell/EST.86

Gates Notes (yes, Bill Gates' blog)

Kiss Me I'm Polish

Popcorn Design

SimpleBits

As a web designer and web developer I always looks for something that can inspire me. For the last couple of months, I have been bookmarking web sites that I spotted on my selected web galleries. Based on my personal judgement and impression on design, code, features and functionality, selected websites were added to my bookmarks.

Now I decided to share my selection that I do during the week by posting "Weekly inspiration" at the end of the week. Here is the first post. Enjony!

Hundred10

Arsum

CDG

Hyperakt

IGN

jbd2

Jump Media Bristol

z8

Few days ago new jQuery (now in version 1.4) was released. New version comes with updated existing features and there also brand new to version 1.4. The most interesting for me are:

• bind() method - allows you bind multiple events to element in one function;
• attributes passing - now it is possible to pass few attributes as object with its values (all in JSON format of course);
• delay() method - allows to delay the execution of functions in the queue - using that you don't have to use callback functions or setTimeout;

Complete change log can be found on jQuery API page: http://api.jquery.com/category/version/1.4/

Enjoy New Math nicely prepared by Craig Damrauer:

URL: www.morenewmath.com

If you are web developer/designer and you are involved in front-end development, probably you know what float property is and what issues can cause (specially in our beloved IE).

A really good article has been published on Smashing Magazine: The Mystery Of The CSS Float Property. This must-read position with good explanations and examples. The good thing about this articles is that you can find reference to IE-related bugs and fixes.

Enjoy the reading.

If your are a web developer and you are developing Content Management Systems probably you know what FCKEditor is. If you don't, let me tell you - it is a WYSWIG editor based on JavaScript and it looks and works like MS Word (or similar) and it is available for free. The problem with FCKEditor is that implementation may cause some headaches (specially with .net) and also it is quite heavy. The reason why I chose FCKEditor is built-in image up loader with preview option.

Same guys that developed FCKEditor have released CKEditor - a lightweight and much modern version of FCKEditor. The best thing about that new editor is implementation. It takes seconds and it is fully based on JavaScript:

<script type="text/javascript" src="ckeditor.js"></script>
<script type="text/javascript">
window.onload = function() {
CKEDITOR.replace( 'textareaId' );
};
</script>

For asp.net integration I would use <%= controlId.ClientID %> just in case if ID on output is different.

The downside is that CKEeditor suffers lack of image up loader. That functionality can be found in CKFinder but it is not available for free (price starts form $59).

• ckeditor.com

 As a teenager I have never been a huge fan of Nine Inch Nails and similar music that they have been doing. I have been a still am rock and rock'n'roll fan, but few years back I had feeling that I am going to like that kind of music. My attitude changed when NIN released "With Teeth" album. Attracted by "Only" videoclip, I decided to discover the "slightly darker" side of music.

The reason why I was not in to NIN was my attitude to the music and probably I wasn't mature enough to accept that kind of music. What can I say now? Well, Trent Reznor is a cool guy, very creative and open-mind musician. The latest album was released on 5th May 2008 and it was and still is available for free. By doing that, Reznor wanted to thank all the fans for "...continued and loyal support over the years...".

Now few words about the music from the album. The album contains 10 tracks with total length 43:45. Trent seems to follow the "Year Zero" path with some mixture of improvisation that we can find on "Ghost I-IV" album. My feeling is that those two albums complete each other and also show the potential, that Trent Reznor has. We have some fast and dynamic songs like "1 000 000" or "Letting You", some pleasant and calm Echoplex, Discipline. There are also some tracks that remind me darker side of NIN: Four of us are dying, Demon seed. With free version, the limited edition also has been released (only 250,000 items). The CD comes with DVD that contains 5 video clips taken during rehearsals in July 2008. Below is a sample of one of these:

Both disc are combined in a well-designed digipak with 24-page booklet and 3 stickers. The number of my set is 220,943/250,000 so if you want to get one you shoud be able order it from amazon or HMV.

It's been a while since we have IE6 on the market. There is a one good word that describes is - horror. The horror. This is the most criticised web browser because of its lack of security and compatibility with latest standards (issues with PNG transparency and CSS are the biggest). Despite the fact that its age (almost 8 years) and retardness, sadly, it has almost 15 per cent of the market share. Still, that number is high enough to ignore IE in terms of web design/development.

Thankfully, its popularity is dropping, thanks to Firefox and WebKit based browsers like Safari and Chrome (together - almost 9 per cent). Also popularity of IE8 is also increasing. In act of frustration some anti IE6 campaign were established:

• www.bringdownie6.com
• www.stopie6.com
• ie6update.com

There is also good sign on the horizon. Actually two. Facebook and YouTube, the most popular web sites will drop IE 6 from list of supported browsers. And it looks like digg.com already did that.

More reading on:

• sitepoint - http://www.sitepoint.com/blogs/2009/07/20/youtube-drop-ie6/
• TechCrunch - http://www.techcrunch.com/2009/07/14/youtube-will-be-next-to-kiss-ie6-support-goodbye/
   

At the end of this post, have some fun and sarcasm - saveIE6.

Finally, I've managed to move in to the place. After almost two years of living in Howth, I moved out from there to Sutton. In fact, this is the same area and Sutton is just the one stop before Howth.

The place that I'm currently living in, comes with a nice view - south side of Howth, Bull Island, Dublin Port and massive landscape of Wicklow Mountains. Three more pictures are available on my flickr.

It was lovely afternoon - really warm with nice breeze and beautiful sunshine. I grabbed my camera and went to the Claremont Beach to take some pictures. At that time there was an ebb tide and beach significantly extended its area. Clearemont beach is known because of the wreck of life boat. The remains are located near to the coast line and during really low tides those remains can accessed by dry feet:

Rest of the pictures are available on my flickr.

Since I released my blog, I was wondering how it works on mobile devices such as iPod touch/iPhone. As an owner of iPod touch I took that opportunity and did some testings.

Testing was done using mobile version of Safari which comes with Mac OS X for iPhone and iPod touch. At the beginning I knew that some functions will not work because of some limitations that has Safari (and whole platform):

• different interpretation of JavaScript DOM events
• no Flash support

Layout

The first thing that I spotted is an issue with top red border. No matter what is an orientation of iPod (horizontal or vertical), top red border is not stretched to full width. I have tried to apply 100% width for html and body by adjusting CSS, but it didn't help:

The other important thing is that large blocks of text (i.e. main text for entries) is much more larger that originally defined. Currently font-size for text is set to 12px but it looks like, that large text blocks are recognised and font size is automatically increased to improve readability:

Safari has been known for adding its own fancy look&feel for form elements. Here is the same story: input fields and text areas get rounded corners and internal shadow. Once any field is tapped, it gets zoomed and keyboard appears for typing:

Flash

Lack of Flash support means that font replacement done with sIFR and any embedded flash players will be not available unless it is youtube video. Because Apple developed dedicated youtube api for iPhone, embedded youtube clips are available via that application:

Once video is clicked, youtube api is open with the clip. After playback youtube api is closed and browser appears again.

Javascript and DOM events

This is area with significant differences. JavaScript events work different because there is no mouse movement. Basic events like onmouseover, onmousedown and :hover state work once an element is tapped by the user. In this case, if I want to see pop-up elements in header, I need to tap one of them. In standard browser once mouse moves out from the visible element, it fades out, meanwhile on iPod touch, it stays visible unless other element is tapped:

Main navigation is based on nested lists. Description underneath of each item (lighter blue) is a nested list item based on suckerfish drop-down menu. If item is tapped, styling for :hover state is applied and drop-down becomes visible, but no page is loaded. Once tapped second time, Safari opens selected location. For any other hyperlinks,:hover styling appears once element gets :focus state - that means :hover state is triggered on hyperlink is tapped:

The list of events and how they behave on iPhone/iPod touch can be found on QuirksMode.org.
I was surprised that I couldn't find documentation on Apple website (maybe it doesn't exist yet).

What needs to be done?

If sIFR is in use, styling for flash-replaced elements needs to be added, but this is not only related to mobile platforms. If some users on standard PCs have flash disabled (for example flashblock plugin) or not installed at all, they will see text elements that follow styling similar for sIFR. For other flash elements (like animations), alternative version needs to be added. For example, adding background image (based on still image from flash) to the div containing flash is a good idea.

What about JavaScript? That's a good question. If I want to keep my look and feel similar to standalone version, my JavaScript needs to be changed. Because onmouseover and onmouseout events work on iPhone/iPod touch in a different way, I should consider onfocus as a key event. But it would just work for iPhone/iPod touch. I haven't tested my blog on other mobile platforms such as Palm or Blackberry and I don't know how JavaScript is implemented. On the other hand, removing JavaScript effects would be the safest way to get similar effect across the mobile platforms and alternative layout for mobile version would be a good solution. Because of popularity of iPhone and iPod touch some websites are iPhone/iPod touch optimised where content is scrolled horizontal. Here is a showcase of websites following that trend.