Presentations In The Browser: Visualize And Think Big

The days of boring presentations are over. Now, even your browser can get in on the game. Classic slide decks are limited, but you needn’t be restricted to them. Impress.js uses the power of CSS3 transforms and transitions that are supported by modern browsers.

With this library, you can position, rotate and scale as much as you like, even in 3-D. At this point, Impress.js isn’t quite supported on mobile, but if the user’s browser isn’t smart enough to display transitions or animations, Impress.js will provide a simple PDF-like slide deck. Bartek Szopka has done a great job of exploiting the possibilites of current technologies. And if you have ideas to further improve the script, then get started right away: it’s published under an MIT license. But remember: no tool will help you if you have nothing interesting to say! (sp)

Advertisements

The contenteditable attribute

For some time now, we’ve been using various technologies to edit and store text within a web browser. Now with the contenteditable attribute, things have got a whole lot easier. In this article, HTML5Doctor is saying what is this attribute is for, how it works, and how we can take things further.

Read the full article at : http://html5doctor.com

23 Useful Online HTML5 Tools

via 23 Useful Online HTML5 Tools – DesignModo.

Are you aware that HTML5 is captivating the web by leaps and bounds? This new language is used for displaying the content on net. One can also add in audios, videos, various fonts, web graphics, drag and drop, animations to make your pages more colorful and informative. It is simply a renewed and much better version of the XHML1 or HTML4 and is also compatible to those versions.

The online sprite tool box compresses your image and puts your image in a sprite. This compression will definitely increase the speed of your images and the time of loading. The 3D sketch tool makes use of HTML Canvas for creating a 3D drawing. This is done by holding down the SPACE bar and then dragging it horizontally with the cursor. Drawing dashed lines and making the drawing to vibrate can be easily done with this. The velocity sketch tool is an exceptional online drawing tool from HTML5. One can make strange web things with this tool. Designers are sure to make some new and creative innovations out of this. The font testing tool is really good when you want to see web pages with a new font keeping. You can do this by taking font.ttf files to the top of the toolbar to appear in the list.

The pattern generator tool is good for web designers to make header backgrounds and pages. There are numerous options for you to choose from and is also easy to use. The X-Ray tool lets you see the particulars of pages of any webpage. This can be done by dragging the bookmark let on their site to your bookmarks. You can investigate by visiting the webpage, then click X-ray book mark and then your desired element. Automation plays well on various mobile or smart phones because it is based totally on HTML5 with no flash used.

The online HTML5 audio maker tool brings in new features of the audio. With this the use of audio power will increase in websites. A similar online HTML5 video maker tool has been launched to increase the use of video for different websites. There are also various powerful animation tools for working online as well as offline. Some of the latest versions of online tools are not well-known to web designers. The above tools are noteworthy for their creativity and informativeness.

Amazing Examples of Using Media Queries for Responsive Web Design

via 20 Amazing Examples of Using Media Queries for Responsive Web Design | Design Shack.

Responsive web design is one of the hottest topics among designers and developers right now. If you’re not quite sure what it’s all about, we’ll walk you through what it is, how it works and how CSS media queries are something you need to start incorporating into your own designs.

To top it all off, we’ll finish with twenty seriously impressive of responsive designs that use media queries to present experiences specifically catered to different visitors.

What Are Media Queries?

CSS3 has brought about a ton of fancy visual effects such as shadows and animations, but what about practical improvements? Is there anything about CSS3 that actually improves the way you can build websites from a usability standpoint?

The answer is a resounding “yes” and is due largely to the inclusion of media queries. Media queries are incredibly useful because they solve a huge problem that arose quite suddenly in web design: the need to design for vastly different screen sizes.

User screen sizes have always differed but for the most part this difference was limited to a few inches and you could bet on a huge majority of your audience fitting within parameters that were fairly easy to design around. These days though you have some users on a 27″ Apple cinema display and others on a 3.5″ smartphone.

That’s a huge difference and there are plenty of stops along the way. The ever-growing number of devices that are web friendly make it increasingly difficult for designers to present one static solution that caters to everyone’s needs.

This need has given birth to the idea of responsive web design, which goes far beyond fluid page widths and actually dramatically changes the layout of a page as the size of the browser window or device screen size changes. Media queries are one of the most powerful tools for meeting this goal because they allow the designer to set special CSS according to certain pre-established rules.

Continue reading

New HTML5 Features to Improve your Web Form

New HTML5 Features to Improve your Web Form.

HTML5 introduces numerous new options to create more functional web forms. In this article, I’ll show you exciting new HTML5 features to improve your forms and make them more functional and user-friendly.

Please note that HTML5 is an emerging technique. These examples are not intended for use on a production site. Results may vary according to browser implementation. Please use Chrome or Safari for best results.

Continue reading

How to use HTML5 in your client work right now | HTML5 Doctor

I was presenting some designs to a client a couple of weeks ago when this question came up: “Will you be building this site with HTML5 in mind?” Naturally, I was happy to answer that one! It went a little like this:

Me:

We’ll build the whole thing with HTML5 if that’s okay with you guys. One question though: do you know what percentage of your visitors use Internet Explorer without JavaScript to view your site?

Client:

Erm, I don’t really know, and I wouldn’t want to lose those visitors. Maybe we’d better not build it in HTML5 after all.

Me:

Whoa there! No need to be so hasty. We don’t have to use HTML5 exclusively, but we can still use it to develop specific parts of the site. How does that sound?

Client:

Great! Let’s do it!

Continue reading

10 online tools to simplify HTML5 coding

via 10 online tools to simplify HTML5 coding | CatsWhoCode.com.

HTML5 is definitely going to revolutionize the way we create website and web apps. In this article, I have compiled 10 awesome tools to simplify and enhance your HTML5 coding.

Initializr


Starting anew HTML5-based website? Just visit Initializr to get started. Initializr will generate for you a clean customizable template based on Boilerplate with just what you need to start.
→ visit Initializr

 

Continue reading

IE conditional comments and asset load order

IE conditional comments and asset load order | Keith Clark.

Yesterday I was experimenting with a few ideas for decreasing the start-up time of selectivizr (something I’ll be posting about in the future). Part of the testing process was to establish if the position of the selectivizr script in a document had any affect on its start-up time. While testing I noticed an interesting side effect relating to the way assets are downloaded when they are mixed with conditional comments. I couldn’t find any specific information on this behavior so I thought I’d document my findings here.

Continue reading

LukeW | An Event Apart: CSS Best Practices

via LukeW | An Event Apart: CSS Best Practices.

In her Our Best Practices Are Killing Us presentation at An Event Apart in Minneapolis MN, Nicole Sullivan walked through common CSS best practices that have outlived their usefulness and what we can do instead to improve CSS performance and maintenance long term.

Here’s notes by Luke Wroblewski

Problems with CSS

  • Performance is an important part of the Web experience, with poor performance people engage less, use the site less, etc. CSS on many sites is responsible for poor performance.
  • Facebook had 706 CSS files, they declared the Facebook blue color 261 times, used 548 unique hex values for colors, had 6498 declarations of color. Salesforce.com had 3,669 padding declarations.
  • You can use GREP, regular expressions to analyze CSS files to find matches like this.
  • Looking at the Alexa top 1,000 sites revealed some interesting data. One site had 518 declarations of !important. One had 733 declared float elements. One had 889 font-size declarations. All this makes it hard for a new or existing developer to work with the CSS code. This is a Web-wide problem.
  • Even though we think each project will be “different”, our existing best practices mean these problems keep coming up.
  • It’s time to rethink our best practices and do things differently. CSS will allow us to do anything no matter how stupid. But just because we can doesn’t mean we should.

Pixel Based Sites

  • Myth: pixel based sites are bad. Why did we stop using pixels for layout? Internet Explorer 6 wouldn’t allow fonts to be resized when specced in pixels. As a result, we had to use percentages and ems.
  • Today browsers use page zoom and resize everything (pixels, ems, and percentages) on the page (IE 7+). So fonts declared in pixels can be resized.
  • Nested percentages and ems are not predictable.
  • Pixel based fonts can be resized on all modern browsers with page zoom. Check how many users are still on IE6.
  • If you must use percentages/ems, only change font-size on the body and leaf nodes, nowhere in between.

Extra Markup

  • Myth: don’t add any extra mark-up.
  • A predictable box structure allows you to debug more easily. A module body plays an important role: Trapping margin collapse, Trapping floats, Creating a new formatting context.
  • When you cross lines between elements solving different problems you have problems.
  • Separation of concerns: process of separating a computer program into distinct features that overlap in functionality as little as possible.
  • Solve one problem at a time (isolate into mark-up) but add mark-up judiciously. Don’t go nuts with extra HTML but know that bugs can come up when you try to have modules do too much.

Semantic Markup

  • Myth: more semantic the better.
  • Class names and IDs are not read by search engines, accessibility devices, or users (except other developers). So let’s make sure that our class names & IDs work for other developers.
  • Very semantic class names can prevent re-use. More semantic is not always better.
  • CSS can be too tightly coupled to content. Repeatable patterns are likely better for CSS maintenance and performance. DRY: don’t repeat yourself.
  • Find common elements and presentation, and abstract them out into separate code. Look at what things are known and common amongst a set of modules and what differs.
  • A new formatting context says “I’m a box, nothing comes out of me.” This is very useful for managing floats and varying content.
  • Facebook reduced file size by finding a common abstraction for all the items in their news feed: cut average CSS bytes per page by 19% (after gzip) and HTML bytes per page by 44% (before gzip).
  • This is great for performance but the savings in work and maintenance can be more important. Repetition, Duplication, and Legacy Code make it really hard to work on Web sites. It can snowball out of control.
  • Find a middle ground with abstracted styles and semantic enhancements where they are applicable.
  • Choose good semantic elements: headings, lists, paragraphs
  • The CSS shouldn’t be tightly coupled with the display or with the content.

Classitis

  • Myth: Some people believe IDs are better than classes but they can be overly specific but specificity is much more dangerous for duplication than extra classes.
  • Specificity can be limiting for re-use. When we use descendent selectors, specificity can get complex quickly. Specificity grows over time and it becomes difficult to know which rules will take precedence.
  • The order of classes does not guarantee which one will be applied first. The last property value pair in a CSS declaration is the one that applies. The order of style sheets also matters. The last style sheet wins.
  • CSS inheritance: properties are inherited by child elements. For example, paragraphs inherit the font-size of the body.
  • IDs win over classes. Inline styles win over external style sheets. !important wins even over inline styles.
  • A hostile work environment can develop when it’s too difficult to tell which styles will take precedence. The only way you can code is with Firebug and eventually it becomes impossible to get the look and feel you want.
  • We want semantically styled elements but styled the way we need.
  • Separate visual semantics from element semantics.
  • Classes are far more flexible & reusable
  • Keep specificity low: avoid ID, inline and !important when styling elements.
  • Avoid the descendent selector
  • Add classes to the element you wish to change rather than a parent node.
  • Great developers can create great things is we move our worst best practices out of the way. CSS is fine but we’ve been trying too hard to follow practices that lead us into painful maintenance situations and overly complex code.

Responsive Web Design Techniques, Tools and Design Strategies – Smashing Magazine

via Responsive Web Design Techniques, Tools and Design Strategies – Smashing Magazine.

Responsive Design Techniques

CSS Transitions and Media Queries
Elliot Jay Stocks provides insight into the combination of CSS media queries and CSS transitions. The basic premise is this: you use media queries to design responsive websites that adapt in layout according to browser width, and you constantly resize your browser to see how the website performs, but every time a query kicks in, there’s a harsh jump between the first style and the second. Why not use some simple CSS transitions to smooth the jump by animating the resize? A nice case study.

Responsive-design-116 in Responsive Web Design Techniques, Tools and Design Strategies

 

Continue reading