Meeting minutes 13th March

Minutes from the lst meeting :

Serena did an amazing job on the web page. We decided each to take a group of devices based on a pixel graphic. So here is the list :

Chris- Iphone 4 and 4S

Will -iphone 5

Jacky – Nexus 7

Findo – New ipad

Serena- iMac

Ming – ipad 2 & mini ipad

When everyone is finished with their riddles and coding for their section they should paste it here.

 

This is a draft of the article, I plan to add at least another feature and some images.

The good, the bad and the ugly

Of the new HTML5 and CSS3 features

By Kristin Yordanova

The fast incoming features from HTML5 and CSS have the capacity to turn around the industry of web designing and coding into a near spaghetti western disaster. And one of the vastly ongoing trends is the responsive website, which again changed the rules of the game.

The vicious circle of constant user demands growth and the reply in the form of new techniques and rules, has open the door to new exciting possibilities for designers. However keeping up with the upcoming features can turn into a “Catch me if you can” situation, but don’t worry this is where html5please.com, css3please.com and caniuse.com come to the rescue. These resourceful websites focus on the new features, give their verdict on how they should be used, and whether or not to use them at all. So we decided to put them to the test.

Using CSS borders in HTML has changed significantly moving away from the boring dotted to new border-image. However it is not supported by all browsers and within these, as you would have thought falls IE. Firefox, Chrome and Safari don’t need additional prefixes added to the code, but in order to avoid the image fall back flat when opened in an Opera, iOS and Android you need to add the respective prefixes –o and –webkit.

Although the code might seem a bit tricky when handled at first it is easy to get used to. All you need to remember is that when specifying the border-image values you’re doing so in a strict order of top, right, bottom and left. Another new feature is that values can also be determined by percent and not only pixels.

border-style: solid;

border-width: 27px;

-webkit-border-image: url(your_image.jpeg) 27 repeat;

-o-border-image: url(your_image.jpeg) 27 repeat;

border-image: url(your_image.jpeg) 27 fill repeat;

This new feature of CSS3 is fairly easy to use, however to make matter even more simple border-image.com is set up to edit and illustrate how your border will look and provide you with the code. Just don’t forget to remove the –moz prefix, which is no longer needed since Firefox supports this code up to 3 generations back.

Although not a brand new feature of CSS3 the @fontface is worth taking a look at when thinking about your frontend design. Even though custom fonts are now supported by most browsers, it is a good idea to use web safe fonts as a fallback option for users IE 9- and the Blackberry users, which don’t support that feature at all. Just specify the font that you would like to use and its location and you are ready to go.

@font-face

{

font-family: NameofCustomFont;

src: url(ThisGreatFont.ttf’),

url(ThisGreatFont.eot’);

}

However in order to make sure you have a fallback option as well you need to add those at the end as well.

div

{ font-family: “NameofCustomFont”, Palatino, Ariel, Times;

}

Even though fallback fonts are a good option, they could sometimes change the layout look, by not fitting in as expected. But not to worry! The creators of html5please.com have thought of that as well and produced the Modernizr Javascript, which detects if a certain feature is supported by the browser. You’ll need to download Modernizr and add it to the <html>, and from then on it will inspect the browsers compatibility with certain features. In the case of font face, where it is not supported it will add a no-fontface. From there it is very straightforward to find the right fallback font and adjust it.

It is worth mentioning HTML5 new input features, which excite us with the idea to make input options easier to integrate in our design, but in reality, fail to impress. While some of the browsers like Chrome and Opera support these new features, sadly most of the browsers don’t.  In the case of input color, we’re looking forward to the time when all browsers will support it, and there will no longer be need of a complex Javascript to create a color palette. However for users of Chrome and Opera, the solution of the HTML5 input color is to just add the code below

<input type=”color”>

and test to see the results on your browser.

The progress of HTML5 features is also presented in its new progress bar tag. An easy input to the code

<progress value=”52″ max=”100″>

</progress>

makes it accessible for users to view to progress time of a certain task, but it will require Javascript to synchronize the time shown. Even though adding a progress bar can be very straightforward, because the supporting browsers provide their own design for it, the novelty lies in the option of customizing that look.

EXAMPLE : Progress bars in different browsers.

From fancy fonts, background images and speedometers, HTML5 now allows you to make your progress bar as complicated as you want. However with the new trends in responsive websites, which are a clean-cut design, we don’t recommend having complex images as a progress bar. But for a more elaborate view on the matter take a look at the “Cross browser HTML5 progress bars in depth” post on useragentman.com.

The new HTML5 and CSS3 features are exciting on many levels, but most because they seem to be simple to implement in your design. However you need to keep in mind to always check the supporting browsers for each feature and to be on the safe side by providing fallback options.