Saturday, December 20, 2014

HTML5 Web Browser Test 2014 Year End

Web Temptations did the HTML5Test.com in a posting 3 years ago - so lets see who is where 3 years later:
HTML Test Dec 20, 2014

So what has happened in 3 years time? First all of the top 3 browser have gotten a lot better at delivering HTML5 they deliver 90% or better HTML5 compliance versus an average of 70% compliance 3 years ago. Also there are new members in the top 3 - Maxathon is the new top browser, Chrome follows at second and Opera a close 3rd. Gone from the top 3 are Firefox and Safari. In fact the rumors that Apple's Tim Cook is stealing a PROPRIETARY PAGE FROM THE Microsoft Playbook are true - Apple has not only forced a fork in the Webkit alliance [Google and Opera have created a Webkit fork called Blink] but Apple is also moving fast towards last in HTML5 compliance. But the honor of being last in HTML5 support is reserved for Microsoft IE. It seems that even under new CEO Nadella, Microsoft has retained its antipathy to standards based web browsing.

Sunday, April 13, 2014

Masonry.js on WordPress

Masonry is a JavaScript routine that manages html code blocks and images on a Web  page area giving them a neatly stacked portfolio layout. masonry works best when the width of the blocks are the same or multiples like 200px, 400px, 800px etc. The height of the blocks can vary but if it is too widely varying then the fit of the layout can suffer. A screenshot example shows how Masonry attempts to layout in close packed fashion all of the blocks:

Masonry is useful for product or portfolio sites that have to cater to mobile as well as PC web users with their widely varying screen sizes. Masonry is responsive and intelligently rebalances the blocks and images. The following live sample shows how: Notice 3 things about this live sample screen: 1)if you widen or narrow the screen sufficiently Masonry rebalances the blocks on the screen to fit most closely the Masonry options for padding, margin, and block columnWidth; 2)However, Masonry does not maintain the order of the blocks as laid out on the HTML page but rather moves blocks around for the tightest fit. Note the pink block is the last one on the original HTML page; 3)But Masonry also has a block, class=cornerstamp, which will be stamped into the upper right corner which is is convenient for a non-shuffling which will stay locked into the upperight corener info block about the portfolio or products on display. Quick note, corner stamping the upper left corner, does not work as well as the upper right.

An important point to note is that Masonry v.2.1.08 provides capabilities that are not available in Masonry version 3 including the ability to provide border, padding and background CSS for the Masonry container plus embedding the Masonry container in other wrappers for a structured wireframe layout. Also Masonry's animation options are curtailed in the move to version 3.So given that WordPress has upgraded to Masonry v3, you may have to use an the iframe or Insert CSS/JS plugins to restore the older Masonry v2 if you rely on its features.

There are a number of competitors to Masonry including Shuffle [using bleeding edge Web technology - so it is complex to learn]; Isotope which adds sorting and filtering of blocks to Masonry and is very approachable; salvattore [also uses advanced CSS constructs for a basic 2, 3 or more column layout but not sorting and filtering as in Isotope]; and Packery which further extends Isotope and Masonry but as of this date is not ready for prime time.

Summary

Masonry has proved to a very popular front page creator. It has been added as an extension to popular Web Development environs as Bootstrap 3, WordPress, and Drupal among others. It works well with tools like FancyBox.js , video media, and sophisticated Ajax dynamic loading of Masonry blocks. But users should not defeat the beauty of |Masonry by using unwieldy blocks sizes,particularly blocks of poorly fitting widths. But more than ever, Masonry is built for portfolio and Splash pages which it serves very well.

Wednesday, April 2, 2014

Using Different CSS3 Triggers

css3-markupA recent post on another blog shows how fast CSS3 is now evolving with a)better free online support tools b)more uniform W3C CSS & CSS3 stnadrds implementation by all the browser vendors and c) some useful transition and animation features  to add to a Web Designers reportoire. However, the examples shown have used the :Hover pseudo-element almost exclusively to trigger various CSS styling events. This posting will look at some of the other CSS Trigger options.

The advantage of CSS & CSS3 for many Web Designers is that CSS is better understood and is often simpler to code than JavaScript. In addition for some situations adding CSS is easier  to do. Finally there are WordPress plugins and Joomla extensions that allow users to add CSS to specific pages or posts. So what can we do with CSS Animations?

Dropdown Accordion-like Boxes

As a Web UI Designer, one consustent need is to be able to revel more information about a topic on a page - details of the specs for a product or a large example photo or screenshot of an event. Tabs are not quite what is needed - more like horizontal accordions or drop down boxes. Bonus - this code does not use CSS3 Transition or Animations. See our CSS Banner Ads for an example of CSS Transitions and Animations: 5 dropdowns; 1 click dropdown and 4 mouseover dropdown boxes
Lets look first at the HTML code for implementing the click dropdown box. It follows a simple pattern. A SPAN of the click character is followed by more visible HTML. The hidden HTML follows in a NAV block [it could easily have been an HTML5 ARTICLE, ASIDE or DETAILS block]. This click dropdown HTML is then followed by HTML used create 4 dropdown boxes each of which has hidden contents.

Again the HTML uses either a DIV or SECTION blocks containing the dropdown box visible HTML elements. Within the containing DIV or SECTION is the hidden NAV {display:none; is the CSS] The box dropdowns are triggered by a mouseover which uses the :hover property to change the hidden block to display:block making it visible. For the sake of the example different containers including DIV, SECTION, and SPAN elements have been used for the containing dropdowns. But all of the hidden contents are contained in NAV blocks with a a class=hides setting.

<h4>Different Triggers for CSS-based Dropdown, Accordion-like widgets.</h4>
<span class='reveal' >&#9733;</span> <= click here for a RED dropdown
using SPAN with :active trigger 
<nav class='hides'>MY Red content is here and stays only as long as mousedown is held. 
This dropdown is activated by SPAN:active trigger.</nav>
<div  class="accordion">1st box dropdown uses DIV :hover
<nav class='hides'><img src='http://placekitten.com/200/140'><br>
  This dropdown will persist as long as the mouse hovers over any part of the dropdown.</nav> 
<br>Summary line here should move down</div>
<span style='color:blue;'>Outside the DIV also should move down</span>
<div class="accordion">2nd box dropdown also uses DIV with :hover pseudo-class
  <nav tabindex='2' class='hides'>Hidden NAV that is in 2nd dropdown box.</nav></div>
<section class="accordion">3rd box dropdown uses SECTION tag and :hover pseudo-class
  <nav tabindex='2' class='hides'>Hidden NAV that is 4th dropdown is also uniquely styled blue because
  it is contained in a SECTION tag which has its own CSS styling.</nav></section>
<div tabindex='1' class="accordion">4th box dropdown uses :focus pseudo-class with DIV.
  <nav tabindex='2' contenteditable='true' class='hides'>This dropdown responds to two different pseudo-element triggers -
  first, the DIV +:hover. But now hit the tab key several times until this DIV is highlighted 
  - it is now using the :focus trigger and so different CSS styling is applied. 
  Note the switch to pink background color. This tab initiated
  dropdown will persist until you hit the tab key again. </nav></div>

The HTML syntax for each dropdown box is simple. The containing  DIV and SECTION tags  hold the hidden NAV blocks waiting to be revealed by an :hover, :active or :focus event. And this is where the requisite CSS comes into play:

nav.hides {display:none;}
div.accordion {border: solid 1px black; width:400px; margin-top:2px;}
div.accordion:hover nav.hides {display:block;
  border: 3px outset #999; width:350px;
  height:180px;}
section.accordion {border: solid 1px black; width:400px; margin-top:2px;}
section.accordion:hover nav.hides {display:block;
 width:398px; background-color:#eeeeff;}
span.reveal:active+nav{display:block;
  border:2px solid red; width:350px;
  height:160px; color:red; weight:bold;}
div.accordion:focus nav.hides{display:block;
  border:4px groove blue; width:350px;
  height:180px; color:green; background-color:pink;}

Note how simple theCSS is for the NAV hidden blocks - just nav.hides {display:none;}. And the visible dropdown boxes also use CSS that is simple enough: {border: solid 1px black; width:400px; margin-top:2px;} Just a solid black 1pixel border 400pixels wide and with a margin of 2 pixels on top. Now to reveal the hidden NAV block we use the :hover [equivalent to JavaScript's onmouseover], :active [equivalent to JavaScript's onmousedown] or :focus [equivalent to JavaScript's onfocus] pseudo-class. So what do we need to do in the CSS to cause the hidden block to be revealed? Well the selector is  div.accordion:hover nav.hides. Read this as "find the DIV with class=accordion and take any contained NAV with class=hides and make these styling changes": 1)change the DISPLAY attribute from NONE to BLOCK - this makes the hidden NAV block content visible; 2)place a 2pixel outset black border around the contents; 3)make the hidden block 300 pixels wide and 160 pixels high. As you can see in the CSS code we change for this now visible NAV block's styling- a new color or style for the border or none at all. The purpose is to suggest some of the different stylings that are possible when the different hidden blocks are made visible. .

Bottom Line

CSS and a rapidly appearing CSS3 will thrive now that all the major browser vendors have implemented more completely W3C standards and particularly here the CSS pseudo-classes. :hover has been available as an onmouseover equivalent for some time. But now :active provides a more robust onmousedown trigger and :focus coupled with tabindex='1' or contenteditable='true' provides more opportunity in form processing and text display with its onfocus equivalence. In sum, Web Designers now have CSS as a viable alternative to JavaScript and Flash for banner ad, image slider and basic UI widget implementation.

Dropcap CSS

Dropcaps in CSS are always "fun" to do for 3 reasons. First, the CSS seems easy enough to do. Use a float styling in a SPAN. Or use a :first-line:first:letter pseudo-class to style not just the first letter but also the first line of text as well. The second reason dropcaps are "fun"is because then you get to do some CSS debugging. Inevitably the dropcaps do not drop as much as intended depending on the font-family, font-size, line-height and browser used. Finally, the third reason dropcaps are fun" is because in the comments section of your page or post, inevitably some wizened Web troll will observe "dropcaps do not make your opinion right in fact you are full of ....".
So with these provisos, here is a JSFiddle full of different dropcap stylings. Enjoy:

Saturday, June 8, 2013

Top Website Design Tools - Xara Web Designer Premium 9

The NYTimes has had this past week a overview article on the vastly improved and mostly free Web Design tools that are currently available for users that want a DIY website. Here is one that the NYTimes passed on because it costs $99 and does not provide free hosting services. Despite those provisos you should carefully consider this tool  if you have a strong graphic design and DTP-DeskTop Publishing background or  would like to develop very quickly a website that is media and slideshow rich.

Xara Web Designer Premium 9

Our sister blog, ThePhotoFinishes, has been an admirer of Xara's  photo finishing software  Xara Photo Designer Pro.
And why not? Xara software is super fast particularly when dealing with large bitmap images [30MB or larger] and vector graphic files[20K graphic point or more]; many of its operations are drag and drop simple to do or just a right mouse click away from a customizing wizard. Xara  mixes Vector and bitmap images in the same design space with aplomb; and supports basic DTP operations like direct text flow between blocks, supporting layers, and repelling text underneath objects on top. And most important,  the core of Photo Designer Pro is built into Web Designer Premium.

 So these photofinishing and DTP capabilities help make  Xara Web Designer a very rapid website builder. In fact it is so good  that Xara Web Designer was used  to create its own  review. Thus we built  a website  containing the review with Xara Web Designer 9 - see here for the full screen version of the review. Here is that review in the blog post:
Xara Web Designer is a fast learn with many drag and drop or wizard driven operations. But key to coming up to speed is to make sure that you a)take advantage of the many Xara widgets by reading the excellent documentation and going to all the many movies that bring users up on  not just the Widgets but the whole Web Designer interface. Once you become familiar with the interface, Web Designer like Graphics Designer becomes easy and intuitive to work with. Consider that the DTP facilities in Web Designer Premium put it two steps ahead of all the free Website creation tools - simpler, faster, and more powerful features. Finally, Xara Web Designer has dozens of templates for creating and displaying your own Presentations which can be run locally or online. At the $99 price, ignore Xara Web Designer Premium at your peril.

Iframe tester

Color Theory Websites of Interest


global tv

Saturday, October 1, 2011

HTML5 Tests for Summer 2011

A new set of browsers were released  this summer from  all the major browser vendors. So its time toithese new browsers are included in these tests using the revised HTML5Test.com 450 item benchmark. The browsers are ranked by their compliance  scores with Google Chrome the best and Microsoft IE 9 and 10 the worst.
Browser HTML5 Compliance Rankings
Browser HTML5 Test Results
Chrome  14.0885 341/450 +13 bonus points
Firefox 7.01 313/450 + 9 bonus points
Safari 5.1 293/450 + 9 bonus points
Opera 11.50 286/450 + 7 bonus points
IE10 2nd preview 231/450 + 6 bonus points
IE9.0.8182 141/450+ 5 bonus points
Most disturbing are  1)all the vendors are not close to full compliance and 2)Microsoft lags way behind. The IE10 revision 3 runs only in Windows 8 preview and so far we have not been able to get that to work properly on our old Windows Vista machine.