Image by Tsevis under Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Generic Licence.

Today google announced an new improved image format for use on the web. They hope that the new webP format will replace the old JPG format that is in common use today. According to google, 65% of web traffic is images. Anything that can reduce the size of those images will help to speed up the web generally. That is the aim of the new format. It’s creators claim that on average, webP will reduce image file sizes by 39% compared to JPG. Like the old JPG format, the webP format is lossy – that is, you can trade quality for size to compress files as much as you are comfortable with. DNS Elite does see some problems with this new format. The first and probably most important, is support for the format in web browsers. Without decent cross browser support, the new format will fail to take of. Just look at other new image format such as PNG and SVG. Even years and years after there creation, and even though everyone agrees they are better than their alternatives, they still lack full cross browser support. Without this, designers are reluctant to use these formats. The new webP format may suffer the same fate. There is a catch 22 involved of course. Most browser creators won’t introduce a new feature unless there is demand and designers won’t use a feature that is not full supported across the range, including old legacy browsers. So webP has it’s work cut out as a new image file format. It could be 10 years or more before we see it take significant market share, if ever.

Image by DavidErickson under Creative Commons Attribution-NonCommercial 2.0 Generic.

The internet and more so the web, has changed our lives forever. Nobody could have, 10 years ago, predicted the highly interconnected social web that has been created today. The web of 10 years ago was for the geek. The vision for the future was of a Internet Refrigerator that was aware of your shopping requirements and would order you groceries automatically. Such autonomous, non personal, applications have failed to happen. Instead the web has connected the reverse of geekness. Now the web is social life. It is how we arrange to meet friends rather than an excuse for not having any.

I recently came across a youtube video that neatly explains just what the web is and how it has been evolving. Hope you enjoy.

Image by Istvan under Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Generic.

I have, over the last few weeks, been doing several redesigns of long standing websites. One of the key changes, was a shift in page width. Before it was necessary to consider old screen sizes. However, with this redesign we have made 800px and smaller screens redundant. The new designs are optimised for 1024px widths or larger. However, it’s not enough to simply consider the screen resolution of the majority of uses. There are other aspects to consider.

To give an example from the real, non computery, world. A friend of mine runs a small private school. She wanted to redesign the classroom layout so that instead of one large classroom for 20 to 30 students, they would have two classrooms. One that could take 12 to 15 students and another small room for private classes of less than 8 students. I drew up designs for the school but the opted to use another amateur interior designer instead. The designer split the classrooms making one larger and the other smaller but it didn’t work out that way. What the designer had failed to consider was the size of the tables and chairs that  would be put in the room. The school’s tables are double width with two chairs at each table. The designer had made the large room 3 1/2 chairs wide (1 3/4 tables) and the small room 3 chairs wide (1 1/2 tables). Since you can’t use half chairs and half tables, the result is that both rooms hold exactly the same number of students. When designing a space, you need to consider what goes into that space.

The same is true of web design. When laying out a web page, you need to consider what content is going into the spaces within the page. this will determine the number of columns you can have, the spacing between columns and wither your have fixed or flexible sizes. So lets look at what content you might be using and some of the sizes of that content.

My webpages would contain photographs and videos. In most cases, the videos would be coming via Youtube and the photos via Flickr. So I checked out what sizes they have available. Each of these sites supplies it’s content in a range of sizes. For Youtube, the smallest size is 425px wide. The largest is 960px and inbetween we have 480px and 640px. It is instantly clear that the 425 size is small for current browsers. However, I thought, could it go in a side column? Well based on my current optimisation of 1024px screens, the answer is no. However, next time around, when screen sizes have jumped up a bit more, it might be that the 425px size will go in a side column. The 480px size would work fine for a half page but I didn’t want two columns of equal width. I wanted one wide and one small. The 960px size would be full page width and so crush out the side column. So that meant I had to go with the 640px size.

The other type of content I wanted to use was, of course, adverts. Looking at the standard advertising sizes, there is no 640px sizes. The closest that would fit in the large column would be a 468px banner. The next size up is a 720px wide letterboard. Neither of these match up with any video size from Youtube. So it would apear that I’ll have to put up with some miss-sizing there. However, look at the sizes for adverts running in the side colum. Now if my main column is 640 and I’m optimising for 1024px screens then I have about 364px left to play with. Now given that some space will be used for padding and margins and scroll bars, I could assume that I’d have 300px left for my side bar. So I looked at the stadard avertising sizes again and saw that a 300 x 600px half page ad and 300 x 250px Medium Rectangle would fit nicely. There are some other combinations of vertical banners and buttons that also add up to 300px. So that gave me the size for my small column.

Now I have by optimum page withs. A large column of 640px wide and a small column of 300 px wide. Now for a little compromise. I wanted the home page to be small columns wide while my content pages would be two columns, one big and one small. So I had to adjust the sizes just a little to make the maths work so that 3*small = 1*big+1*small. Also I wanted a little padding to go around my content. So the large column was adjusted to 642px and the small column to 312px. A margin of 18px was used to separate the two giving a page width of 972px – which fits nicely on a 1024 resolution screen. Using the same sizes, the home page is 3*312px columns with 2*18px margins, giving again the same page width of 972px.

Finally, I had a look around the web to see what sizes other people had settled on. I found the 972px size on several prominent sites including Mashable.com. I also saw many sites such as Flickr’s newest layout, Youtube and others, which have gone for the 640 and 300 sizes, though with some variation in the sizes of the margins. So it seems that for the next few years, these are the sizes to go for. Hopefully the IAB standard advertising sizes will get revised soon to fit in with what are becoming standard web page design sizes and so make my sites more attractive again. But until then I’ll muddle through. Knowing my luck, the 640px advert will become standard just as I re-optimise my page for another larger screen size.

XHDRENAPMH83

]]> http://dnselite.com/2010/03/living-information-revolution/feed/ 0