The best of <time>s (Article updated to correct some typos noticed by commenters, and clarify some aspects.) Avid HTML5 watchers will know that the <time> element was dropped from HTML, then re-instated, with more New! Improved! As before, you can put anything you like between the opening and closing tags – that’s the human-readable bit. Previously, you could only mark up precise dates. Now, “fuzzy dates” are possible: <time datetime="1905"> means the year 1905<time datetime="1905-11"> means November 1905<time datetime="11-13"> means 13 November (any year)<time datetime="1905-W21"> means week 21 of 1905 As before, times are expressed using the 24 hour clock. You can localise times, as before. <time datetime="09:00Z"> is 9am, UTC. Durations In New! The datetime attribute “D” for days, “H” for hours, “M” for minutes and “XQ” for seconds. You can separate them with spaces (but you don’t have to). Alternatively, you can use a duration time component. pubdate
The Complete Flat Website Design Guide Flat website design is steadily becoming popular replacing the commonly known intricate designs that are dominated by drop shadows, gradients and brushes. Flat websites is the new trend with a rising design style that incorporates flat shapes and icons. A flat design basically revolves around the use of triangles, circles, rectangles and other shapes without the need to use other design elements like gradients, strokes or shadows as seen on Microsoft’s most-recent computer operating system Windows 8. A flat design is specifically based on two principles- readability and simplicity which guide designers in coming up with flat yet stylish software designs, web layouts, posters and other key applications. Simplicity Flat design refrains from the use of intricacies with the absence of drop shadows, strokes and other design elements. Readability Flat website design is slowly invading apps, computers and our web pages bringing in 5 common elements that we will soon be familiar with. Typography
Responsive Menu Concepts The following is a guest post by Tim Pietrusky. I know Tim from his prolific work on CodePen and from being a helpful community member there. He wrote to me with this guest post about responsive menus which I'm more than happy to share with you below. Not only is it a timely concept, but one of the concepts improves upon a clever CSS trick we've covered here in the past. When it comes to responsive design we are faced with various techniques on how to best handle altering our navigation menus for small screens. Three of them are made with pure CSS and one uses a single line of JavaScript. Before We Start In the code presented in this article, I don’t use any vendor-prefixes to keep the CSS easier to see and understand. All menu concepts in this article are based on this simple HTML structure which I call basic menu. To address small screens I use the same media query on all concepts. @media screen and (max-width: 44em) { } 1. This is what it looks like on a small screen with a custom style.
How to Add Google Author Tags to Your Blog for Improved Search Results Does Google know you’re the author of the content you publish online? If you answered “I don’t know,” chances are you haven’t heard of a very powerful piece of HTML markup code known as rel=”author”. When implemented correctly on websites or blogs with authored content, this small addition to your articles can have a dramatic impact on how your content appears in Google’s search results. This article will explain exactly what rel=”author” is, why you need to pay attention to it and most importantly, how to set it up on your website or blog. What is rel=”author”? Most of us are familiar with the HTML anchor tag as a way to link out to content as seen in this image: Standard anchor tag linking to Google+ account. In that traditional format, the “href” part of the markup is called an attribute of the anchor tag that references the location of the content being linked to. Now, if we add the attribute rel=”author” to the anchor tag, the link looks like this: How to Implement rel=”author”
The Ultimate Guide - How To Start a Blog That Makes Money In the 1990′s people started creating online diaries. They were given the title of “web logs”. Popular myth has it that it became “we blog” and the “we” got dropped for the sake of language expediency. The word “blog” then emerged from the mist of vernacular evolution. That’s the opening story on the emergence of the blog word! Blogging has changed a lot since those times and with the evolution of the digital ecosystem it has reached new highs. A blogging tipping point The tale doesn’t stop there because the blog hit a tipping point in 2011 when Arianna Huffington sold her “super blog” to AOL for $315 million. So the humble blog is 20 years old and is no longer just about geeks and the web but about online publishing, content marketing and it has become a serious business and source revenue for many e-preneurs around the world. The attraction This includes. Learning: A place to express and structure your thoughts and creations. What’s driven this evolution? This is a heady and powerful mix.
A Three Step Guide to Usability on the Mobile Web Designing mobile sites is a different kind of web design. Much like your first experience of designing for the desktop web, it can be both exhilarating and daunting in equal measures. So many possibilities, yet so many usability restrictions. Don't panic, we've been there too. This paper is our "101" guide to getting your design and usability principles right. We'll start by setting some mobile web design rules to live and die by... Five Rules for Designing Usable Mobile Web Sites 1: The mobile web is mobile2: Context is king3: The devices are (very) different4: Forget your dotcom thinking. Rule 1: The Mobile Web is Mobile Never overlook the obvious. Rule 2: Context is King When it comes to usability, context is everything. This point is critical to the success of your mobile site: your can no longer account for where your users are accessing your site from. Rule 3: The devices are (very) different Mobile devices are, of course, very different to desktop and laptop computers. Limit choices.
Introducing HTML5 Resource Center Many developers are now using HTML5 to build apps. It is easy to develop for and it works across a number of different platforms, with minimal or no code change. You can code in something as simple as Notepad, and instantly see it come to life in the browser on your desktop, phone, or tablet. Today we are releasing three new HTML5 resources to help developers learn from our experience and the experience of other industry leaders building HTML5 apps: HTML5 Resource Center helps you build, test, and deploy your web app.HTML5 Blog covers a wide range of HTML5 topics written by Facebook and industry experts.HTML5 Developer Group is the place for raising questions and sharing insights with fellow HTML5 developers. What HTML5 Really Means Technically, HTML5 is a World Wide Web Consortium (W3C) specification. Cross-Platform, Cross-Device Today almost every device, including phones, tablets, computers, and even TVs has a browser. A practical example of this is the web app Words with Friends.
What Your Website Needs for 2015 The best way to guarantee a prosperous new year is an up-to-date company website. This article describes a few of the most important features your site needs going into 2015. Responsive Website Design Responsive design allows your website to automatically adjust for optimal viewing on desktops, tablets and smartphones. With so many people using mobile devices for Internet access, responsive design has quickly moved from a luxury item to a must-have feature. The best approach to responsive Web design is to start by designing for the smartphone and working “backwards” to the desktop monitor. Large, Stunning, Static Home Page Header Image Thankfully, image sliders are on the way out as the featured design element on a home page. Stunning Imagery Everywhere Else With the surge in mobile Internet use, strong imagery is becoming more important than ever. Flat Design Anyone who uses an iPhone is quite familiar with flat design. More White Space and Vertical Scrolling Interactive Elements
All about the design – top tips for designing mobile sites and apps from the professionals As mobile devices become increasingly capable and the mobile audience becomes increasingly sophisticated, companies are stretching the bounds of possibility when it comes to mobile sites, native applications and Web apps. It becomes all the more important to consider not just graphical design, but also the physical design of your mobile product. It is essential to know not only who will be using it, but how and where they will be using it. This is the fifth in our series of six app-related articles. See also:• Mobile applications: native v Web apps – what are the pros and cons? The following guide was compiled from the responses of the following mobile design and usability gurus: All these experts spoke at Design for Mobile in Chicago, USA, September, 2010. The anatomy of good mobile design 1) Putting things in context Understand, respect and design for your users' contexts. 2) The mobile context Mobile means ‘on the go’ and ‘away from my desk’.
Getting Started Most webmasters are familiar with HTML tags on their pages. Usually, HTML tags tell the browser how to display the information included in the tag. For example, <h1>Avatar</h1> tells the browser to display the text string "Avatar" in a heading 1 format. However, the HTML tag doesn't give any information about what that text string means—"Avatar" could refer to the hugely successful 3D movie, or it could refer to a type of profile picture—and this can make it more difficult for search engines to intelligently display relevant content to a user. Schema.org provides a collection of shared vocabularies webmasters can use to mark up their pages in ways that can be understood by the major search engines: Google, Microsoft, Yandex and Yahoo! 1. 1a. Your web pages have an underlying meaning that people understand when they read the web pages. 1b. itemscope and itemtype Let's start with a concrete example. To begin, identify the section of the page that is "about" the movie Avatar. Back to top 1d.
How we make RWD sites load fast as heck Posted by Scott on 07/30/2014 There has been a lot of discussion about optimizing responsive layouts for performance lately, and I think that’s great. Speed broadens access and makes users happy, much like responsive design. In the past year I’ve spent a lot of time researching page loading performance, both for our ongoing client work here at FG and for my book Responsible Responsive Design. In the process, I’ve reaffirmed my belief that we don’t need to compromise the well-known benefits of a responsive layout in order to make our sites load as fast as heck. In this post, I’ll outline some recent observations and approaches to delivering sites for speed and broader access, and link out to various tools we are using to facilitate our approach. I’ll start with some high-level observations, then later I’ll dive into the more technical how-to. Page weight isn't the only measure; focus on perceived performance Shortening the critical path Going async <head> ... <head> ... <head> ... <head> ...
Home | mobiThinking Typographic effects in canvas My Background Ajaxian, describing the transformation matrix, inspired me to create my first Color Sphere (2007). Which immersed me into the world of colors, and graphic primitives; inspiring the creation of Sketchpad (2007-2008) in an effort to put together an application “better than Paint” in the browser. These experiments eventually led to the creation of the startup Mugtug with my long-time friend Charles Pritchard. We’re developing Darkroom in HTML5 <canvas>. Introduction <canvas> brings Javascript programmers full-control of the colors, vectors and pixels on their screens—the visual makeup of the monitor. The following examples deal with one area in <canvas> that hasn’t gotten much attention; creating text-effects. Text-Shadows in <canvas>. CSS-like text-effects in <canvas> creating clipping masks, finding metrics in <canvas>, and using the shadow property. Neon-rainbow, zebra-reflection—chaining effects. Inner & outer shadows in <canvas> Spaceage—generative effect. Text-Shadows in Canvas
About rich snippets and structured data - Webmaster Tools Help Rich snippets (microdata, microformats, RDFa, and Data Highlighter) Snippets—the few lines of text that appear under every search result—are designed to give users a sense for what’s on the page and why it’s relevant to their query. If Google understands the content on your pages, we can create rich snippets—detailed information intended to help users with specific queries. For example, the snippet for a restaurant might show the average review and price range; the snippet for a recipe page might show the total preparation time, a photo, and the recipe’s review rating; and the snippet for a music album could list songs along with a link to play each song. These rich snippets help users recognize when your site is relevant to their search, and may result in more clicks to your pages. Three steps to rich snippets: 1. Google suggests using microdata, but any of the three formats below are acceptable. 2. Google supports rich snippets for these content types: 3. That’s it! Use HTML markup if...