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 web design If you’ve been working in the web design field for the past couple of years you should know that designing a fixed interface for a widescreen computer is not enough. Most of the clients you’ll be dealing with from now are going to request that their site is not only desktop-compliant but is also optimized for smartphones and tablets. This issue presents the necessity of working with different screen resolutions in order to guarantee that a website looks good in all sorts of devices. But if the devices’ production continues at the same speed that it has for the past couple of years, the amount of screen resolutions and formats that designers will have to deal with is going to become unbearable. So, what’s responsive web design? But responsive web design is not simply reducing font sizes and shrinking a picture to make it fit the new format. Flexible grid The first element we have regarding responsive web design is dubbed flexible grid. Screen resolution Aspects to consider Flexible images
Conditionally load Javascript based on media query > Responsive Web Design This page is unfinished and needs further work Best practice for a long time has been to load your javascript at the end of the document to improve website performance, however in todays world of mobile devices we need an even faster solution. Responsive design has provided us with the ability to change the way the content is displayed to the end user. Most of the time we follow best practices and reorder the content into a linear page layout allowing the most relevant content to float to the top. Sometimes, however, we fall back on display: none; for content that might not be appropriate to load onto a particular breakpoint. There are plenty of bad examples of this, but a good example might be to hide an advanced mapping application on the mobile in favour of linking the user to a built in phone feature. In this case you could look at the width of the device and determine if it is of a certain size you could load in the resources, if (screen.width >= 600 ) { }
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.
ReView. The Responsive Viewport. Installation Include ReView.js in the head of your HTML document, just after your viewport meta tag. Note the lack of initial-scale in the viewport meta tag. This often allows for a cleaner viewport switch. ReView works without a meta tag, but providing one is recommended. Usage Any link(s) with the class ‘reView’ will automatically switch the viewport. Links are only made visible if viewport switching is possible. <a class='reView' href=' Ensure that the links are hidden via CSS to ensure that users with JavaScript disabled do not see them. Anchor Text Updates When a viewport is successfully set all ReView anchors on the page are updated. By default the text is updated with ‘Core View’ and ‘Default View’ as appropriate. Custom anchor text can be supplied via the data-attributes data-defaultText and data-coreText <a class='reView' data-defaultText='Mobile View' data-coreText='Desktop View' href=' Supported Devices
20 tools to help you create responsive web designs Building responsive design has become a huge trend in the web design world. There is a good reason for that: responsive websites are much more relevant than fixed web designs in a time where a lot of internet traffic comes from mobile devices. In this article we take a look at some of the most useful tool to help you with the creation of responsive designs. Sketching / wireframing tools First things first, responsive design need to be well-thought or you’ll get much more work than you would have otherwise. 1. A common problem you’ll run into when planning a responsive web design is to chose which devices and sizes you’ll design for. 2. Simple PDF templates to help you map out how layout sections will change in different resolutions. 3. Quickly get the CSS for creating your fluid grid website with this simple tool. 4. ProtoFluid simplifies the development of fluid layouts and adaptive CSS using Media Queries. Responsive design elements 5. 6. 7. 8. 9. 10. Templates and grids 11. 12. 13. 14. 15.
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
Designing for Retina Display The devices on which the web can be displayed increases everyday. Rather recently Apple released its new set of Macbook Pros with retina display, so called because at a normal viewing distance users wont be able to see any pixels. Designing for such a high resolution however, can become a little more tricky than you would expect. Over the years the resolution of your average monitor has gotten bigger and bigger. The sizing of elements on a retina display is adjusted for usability purposes Now this may seem like not that big of a deal, but the pixels on the new Macbook Pros are so small that a window that is 180 pixels across will take up a really tiny amount of space. The object on the left takes up twice as many physical pixels This means that a website will have to double in size to fit on a retina display. If the web page wasn’t stretched to double its size things might look a bit weird. On retina displays 1 CSS pixel is equal to 2 physical pixels in one directions Images Javascript?
A Simple Device Diagram for Responsive Design Planning Updated for 2015! Check out Analytics-driven responsive web design planning At Metal Toad we're big fans of responsive design, but a common snag in the responsive planning process comes when choosing what device widths to design to. Just yesterday we had a big internal debate over what the best widths to design to are for 3 layout sites, 4 layout sites, etc. I'll get to our conclusions below, but another important distinction to call out is that for each layout there are two things to consider: what the pixel width range for a specific layout should be, and what pixel width the designer should create the PSDs at. There are an ever-increasing number of devices with different screen resolutions to take into account with a responsive design, so we put together a simple but handy diagram that lists the most common device widths as of the present, along with overlays for potential device width ranges. The Diagram Here's the result! A couple of things to note: Our Suggested Layouts 3 Layouts
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> ...