- Step 1: Introduction
- Step 2: Exploring New Methodologies
- Step 1: Folder, File & Images
- Step 2: Reviewing the Initial Markup
- Step 3: Review the Images
- Step 4: Set up the base.css
- Step 1: Setting Up the Rows and Containers
- Step 2: Containers
- Step 1: Creating Columns and Cleaning Up
- Step 2: Clean Up
- Step 1: Styling the Banner Module
- Step 2: Styling the Header
- Step 3: Styling the Banner Content
- Step 1: Styling the Features and Photos Modules
- Step 2: Styling the Photos Area
- Step 1: Styling the Testimonials and Fact Modules
- Step 2: Styling the Facts Area
- Step 1: Styling the Press Area
- Step 2: Styling the Footer Area
- Step 1: Validating the HTML/CSS
- Step 2: Browser and Device Testing
Introduction to HTML5 elements and meta tags:
Now, let’s have a look at our initial markup. Now, we’re going to use the HTML5 doctype as it’s simpler to write, and it allows us to use the new HTML5 structural elements. This doctype will also trigger the validation of the document based on the HTML5 specifications. So the code would be doctype space html. The language of the document should be defined in the html element. And we’re going to use a value of en forEnglish, as the document is written in English. So our markup would be html lang=en. All HTML documents should include character encoding. HTML5 allows us to write a very simple char-set. This should be written before the title element, and so it can be written as metacharset equals utf-8 or whatever character encoding you want. Internet Explorer 8/9/10 support document compatibility modes and these affect the way webpages are interpreted and displayed. Now, even if your site’s visitors are using a modern version of Internet Explorer, their browser may not be using the latest rendering engine. By specifying IE equals edge, this will force Internet Explorer eight, nine, and ten to render the web page in the highest available document mode. And it’s written with meta http-equiv, and then the content is set to IE=edge. The viewport meta tag allows web developers to control the viewport’s size and scale. A wide range of other mobile devices now support this element. By default, most websites are scaled down to fit the size of the mobile screen. The viewport meta element allows developers to determine the width, height, initial scale, minimum-scale and maximum-scale of our layouts. Now ideally, the initial scale should be set to one so the layout will be viewed as intended in all devices. So our marker would be meta, name equals viewport, content and then we’d have width equals device width, initial-scale=1. Now the minimum scale and maximum scale should be avoided. These values can present accessibility issues for some users as they are not able to re-scale the layout to suit their needs.
Adding HTML meta tags to support social networking sites:
Google Authorship and Publisher Markup can be added to your HTML document and this allows you to add links to your Google Plus page in search results. Now if you didn’t want to edit you’d use Markup. Something like this. We have meta, itemprop name, and then itemprop description, and then itemprop image. And you can see we’ve put in our own values in there. Now Twitter information can be added to allow you to control how your website appears when shared via Twitter. And here’s our marker for Twitter card data. Now you can use things like Twitter card, Twitter site, Twitter title, Twitter description, Twitter creator, and even things like Twitter image. And all this means is that you’re defining the way that your webpage will be presented when shared in Twitter. Open graph information can be added to allow you to control how your web pages appear when shared on Facebook. And first of all, you need to add a prefix into the HTML element. And then you can put a whole range of meta elements including open graph title, open graph type, url image and description.
Working with Apple touch icons:
Apple touch icons are files that are used to create icons on various Apple devices. When someone bookmarks your web page or adds your web page to their home screen on a mobile device, one of these icons will be used. Apple touch icons are also supported by a variety of other devices including Android and Blackberry. Now, you can create just a single Apple-touch icon and then link to this icon from within your HTML file. However, if you want more control, you can create a unique Apple-touch icon for all the possible size combinations and then link to all of them from within your HTML file. In the HTML file, these links should be written from the largest size to the smallest size, with the default touch icon written last as is a fallback for the oldest devices. So here we have our larger size and it’s 192×192. Then we have 180×180. 152×152. 144×144. 120×120. 114×114. 76×76. 72×72. And then our final fall back, the default, apple touch icon.
Working with Favicons:
A favicon, or a Favorites icon is a file containing one or more small icons associated with a particular web site. Now, browsers can display a Favicon in a range of different ways depending on the browser. For example, you may see it up in the tab, you could see it in the address bar, you may see it in your bookmarks. You see it in your history. You may even see it in your welcome screen for Windows 8. Favicons generally include a range of different sizes, but they’re all stored in a single file called a .ico file. Like Apple touch icons, there are a range of different size that are used for these icons depending on the device, and they can include things like 120, 64, 48, 32, 24, and the default 16. Now, the range of online tools and applications that can be used to help compile .ico files. One I use is called Icon Slate, but there are definitely a wide range of others out there as well. And our mark up would be link rel, shortcut icon and then a link to our favicon.ico file.
Working with MS icons:
MS icons are files that are used to create icons for the various Windows devices. And there are a wide range of them including setting up an initial tile color. But you can also set up particular sizes for 144, 310×310, an odd size of 310×150, 150×150, and 70×70.
Introduction to conditional comments for IE:
When we talked about our folders, we mentioned two different js files, one called HTML5. And the other one called respond.min.js. If you look at our markup, you’ll see that both of these are wrapped inside a conditional comment. Condition comments are conditional statement interpreted byan Internet Explorer in the HTML source code. Conditional comments can be used to provide and hide code to and from different version of Internet Explorer. Now in our case we are using lt IE 9. So that stands for less than IE 9.
Introduction to WAI-ARIA:
WAI-ARIA stands for Accessible Rich Internet Applications. ARIA allows us to describe elements and page modules using properties, states and roles. And these help make widgets and dynamic content more accessible. Now landmark roles help us to describe the overall document structure to assistive devices such as screen readers. Landmark roles are well supported by JAWS, NVDA, and Voiceover. Now these roles are announced to the screen reader or braille device. Things like Navigation Landmark. Users can also use keyboard shortcuts or dialog boxes to navigate around web pages via these landmark roles. So, we’re going to add the following landmark roles into our header, it has a role of banner. Now, these are predefined values. For the nav, it has a role of navigation. And for the footer, it has a role of content info.