In the past, we relied on JavaScript to achieve a similar effect. Today, with the placeholder attribute, the application gets much simpler. These new HTML elements make our document markup more descriptive and meaningful. Unfortunately, Internet Explorer 6, 7, and 8 will not recognize them. Thus, the selectors and style rules that address these elements are inapplicable; it is as if these new elements are not included in the Internet Explorer dictionary.
We will use it later on the blog as well. From now on, let's refer to these browser versions as "old Internet Explorer", shall we? The boxsizing. As shown in the preceding code snippet, Responsive. This asterisk selector is also known as wildcard selector; it selects all the elements within the document, and that being said, box-sizing , in this case, will affect all elements within the document.
This is a hack. It is something we forcibly use to make old Internet Explorer behave like a modern browser. The second polyfill script that comes along with Responsive. There is no need for configuration; we can simply link the script within the head tag as follows:. Building a website is much the same as building a house; we need to examine the specification of every corner before we stack up all the bricks.
So, before we jump in to building the blog, we will examine the blog's wireframe to see how the blog is laid out and also see the things that will be displayed on the blog. Let's take a look at the following wireframe. This wireframe shows the blog layout when it is viewed on the desktop screen:. As you can see in the preceding screenshot, the blog will be plain and simple. In the header, the blog will have a logo and a search form.
Down below the header, consecutively, we will place the menu navigation, the blog post, the pagination for navigating to the next or previous list of posts, and the footer. The blog post, as in general, will comprise the title, the publishing date, the post's featured image, and the post excerpt. This wireframe is an abstraction of the blog's layout. We use it as our visual reference of how the blog layout will be arranged.
So, in spite of the fact that we have shown only one post within the preceding wireframe, we will actually add a few more post items on the actual blog later on. The following is the blog layout when the viewport width is squeezed:. When the viewport width gets narrow, the blog layout adapts. It is worth noticing that when we shift the layout, we should not alter the content flow as well as the UI hierarchy.
Assuring the layout consistency between the desktop and the mobile version will help the users get familiar with a website quickly, regardless of where they are viewing the website. As shown in the preceding wireframe, we still have the UI set in the same order, albeit, they are now stacked vertically in order to fit in the limited area. One thing that is worth mentioning from this wireframe is that the navigation turns into an HTML dropdown selection.
We will discuss how to do so during the course of building the blog. Now, as we have prepared the tools and checked out the blog layout, we are ready to start off the project. We will start off by creating and organizing the project directories and assets.
Often, we will have to link to certain files, such as style sheets and images. Unfortunately, websites are not a clever thing; they cannot find these files on their own. So, we must set the filepath correctly to avoid broken link errors. This is why having organized directories and files is essential when it comes to building websites. It will be exceptionally important when we are working on a very large project with a team of people and with dozens to hundreds of files to handle.
Poorly managed directories could drive anyone in the team insane. Having well-organized directories will help us minimize potential errors of broken links. It will also make the project more maintainable and easily scalable in the future. Perform the following steps to set up the project's working directory:.
The template is also shipped with Photoshop Actions to generate the icons with a few clicks. We have just created a directory for this project and put a couple of files in the directory.
These files include the Responsive. We have also created an index. At this point, the project directory should contain files as shown in the following screenshot:.
Many people have their own preferences for how to organize their project's directory structure. The one shown in the previous section was just an example, of how I personally manage the directory for this project. Try going further to make the directory more organized and meet your own preference for organization.
A few common ideas are as follows:. Earlier In this module, we discussed polyfill and also mentioned a few polyfill scripts that we are going to implement in the blog.
When do you think would be an appropriate time to use the polyfill? We have laid the structure of the project directories and files in the previous section. Let's now start constructing the blog markup. Perform the following steps to build the blog:. Then, we set the language of our page, which in this case is set to en English.
Internet Explorer can sometimes behave oddly, where it suddenly switches to compatibility mode and renders the page as viewed in Internet Explorer 8 and 7. This meta tag addition will prevent that from happening. It will force Internet Explorer to render the page with the highest support of the latest standards available in Internet Explorer. As we mentioned in Chapter 1 , Responsive Web Design , the preceding viewport meta tag specification defines the web page viewport width to follow the device viewport size.
It also defines the web page scale at upon opening the web page the first time. As per Apple's official instructions, you would normally need to include multiple sources of icons to cater to iPhone, iPad, and the devices with a Retina screen.
That isn't actually necessary for our blog. The trick is that we deliver the largest size required, which is px square, through a single source, as shown in the previous screenshot. Referring to the table shown earlier in the chapter, the container class will align the blog header content to the center of the browser window, while the gutters class will add spaces between the columns, which we will add in the next steps.
As we mentioned earlier in this chapter, we used an input search type to serve a better user experience. This input will show the mobile screen keyboard with a special key that allows users to hit the Search button and immediately run the search.
We also added placeholder text with the HTML5 placeholder attribute to show the users that they can perform a search in the blog through the input field. Add a few more posts subsequently.
Optionally, you may exclude the post featured image in the other posts. The pagination of a blog consists of two links to navigate to the next and previous page, and a small section to place the page numbers to show what page the user is currently in. We have just finished constructing the blog's HTML structure—the header, the navigation, the content, and the footer. However, as we haven't applied any styles, you will find that the blog is looking plain and the layout is yet to be organized:.
In this module, we only build the blog's home page. However, you are free to extend the blog by creating more pages, such as adding an about page, a single post content page, and a page with a contact form. You may reuse the HTML structure that we have built in this chapter. In this chapter, we started our first project. Earlier in the chapter, we explored the Responsive. We also discussed HTML5, including the new elements, namely, the polyfills to mimic HTML5 features in the browsers that do not support particular features natively.
Then, we used HTML5 to construct the blog markup. In the next chapter, we will be focusing more on marking the blog up using CSS3 and adding some JavaScript. We will also be debugging the blog for errors that turn up in old Internet Explorer. In the previous chapter, we constructed the blog markup from the header section to the footer section using HTML5 elements. The blog, however, is currently faceless. If you opened the blog in a browser, you will just see it bare; we have not yet written the styles that add up to its appearance.
We will be using CSS3 to add the blog styles. CSS3 brings a number of new CSS properties, such as border-radius , box-shadow , and box-sizing , that allow us to decorate websites without the need to add images and extra markup. However, the CSS properties, as mentioned previously, are applicable only within the latest browser versions.
Internet Explorer 6 to 8 are not able to recognize those CSS properties, and won't be able to output the result in the browsers. So, as an addition, we will also utilize a number of polyfills to make our blog presentable in the old Internet Explorer.
It's going to be an adventurous chapter. Let's go. CSS3 ships with long-awaited properties, border-radius and box-shadow , that simplify old and tedious methods that were used to present rounded corner and drop shadow in HTML. On top of that, it also brings a new type of pseudo-element that enables us to style the placeholder text shown in input fields through the HTML5 placeholder attribute.
Back in the 90s, creating a rounded corner was complicated. CSS3 makes it much simpler to create rounded corners with the border-radius property, and the following is an example:.
Furthermore, we can also round only to specific corners. The following code snippet, for example, will round only the top-right corner:. Much the same as creating rounded corners, using images was unavoidable to create shadow effects in the website in the past. Now, adding a drop shadow has been made easy with the introduction of the box-shadow property.
The box-shadow property consists of five parameters or values :. The first parameter specifies where the shadow takes place. This parameter is optional. Set the value to inset to let the shadow appear inside the box or leave it empty to display the shadow outside. The second parameter specifies the shadow vertical and horizontal distance from the box.
The third parameter specifies the shadow blur that fades the shadow; a bigger number will produce a bigger but faded shadow. The fourth parameter specifies the shadow expansion ; this value is slightly contradicted to the shadow blur value.
This value will enlarge yet also intensify the shadow depth. The last parameter specifies the color. Carrying on the preceding example, we can add up box-shadow , as follows:. The preceding code will output the shadow, as shown in the following figure:. Add inset at the beginning if you want to show the shadow inside the box, as follows:. The CSS3 box-shadow property can be applied in many creative ways, and the following is an example by Paul Underwood, for your inspiration:.
Both the border-radius and box-shadow properties have been well-implemented in many browsers. Technically, if we would cater only to the latest browser versions, we do not need to include the so-called vendor prefix.
Yet, if we intend to enable these two properties, border-radius and box-shadow , back in the earliest browser versions, where they were still marked as experimental by the browser vendors such as Safari 3, Chrome 4, and Firefox 3, adding the vendor prefix is required. Each browser has its prefix as follows:. Let's carry on our previous examples again. With the addition of the vendor prefix to cater to the earliest versions of Chrome, Safari, and Firefox, the code would be as follows:.
The code may turn out to be a bit longer; still it is preferable over having to cope with complicated markups and multiple style rules. Chrome and its new browser engine, Blink. Opera, which previously discarded its initial engine Presto for Webkit, follows along the Chrome movement. Blink eliminates the use of the vendor prefix, so we would not find -blink- prefix or such like. In Chrome's latest versions, instead of using the vendor prefix, Chrome disables experimental features by default.
With the addition of HTML5, the placeholder attribute brings the question of how to customize the placeholder text. By default, browsers display the placeholder text with a light gray color. How do we change, for example, the color or the font size?
At the time of writing this, each browser has its own way in this regard. WebKit-based browsers, such as Safari, Chrome, and Opera, use webkit-input-placeholder. Internet Explorer 10 uses :-ms-input-placeholder. Firefox 4 to 18, on the other hand, use pseudo-class , :-moz-placeholder , but it has then been replaced with the pseudo-element moz-placeholder notice the double colons since Firefox 19 to keep up with the standard.
These selectors cannot be used in tandem within a single style rule. So, the following code snippet will not work:. They have to be declared in a single style rule declaration, as follows:. This is definitely inefficient; we added extra lines only to achieve the same output. There isn't another viable option at the moment. It generally ships with various pieces of libraries to encompass many circumstances. A CSS library, on the other hand, addresses a very specific thing. Generally, a CSS library is also not tied down to a particular framework.
Both of them are CSS libraries. They can be used along with any framework. These CSS libraries will standardize basic element styles across different browsers and minimize styling errors that may unexpectedly occur. Once we have explored all the things that we are going to include in this project, let's set up the tool to put them together. Koala is a free and open source development tool that ships with many features. In this first project, we will use Koala to compile style sheets and JavaScripts into a single file, as well as minify the codes to result in a smaller file size.
There will be about five style sheets that we are going to include in the blog. If we load all these style sheets separately, the browsers will have to pull off five HTTP requests, as shown in the following screenshot:. As shown in the preceding screenshot, the browser performs five HTTP requests to load all the style sheets, which have a size of Combining these style sheets into a single file and squishing the codes therein will speed up the page-load performance.
The style sheet can also become significantly smaller, which eventually will also save bandwidth consumption. As shown in the following screenshot, the browser only performs one HTTP request; the style sheet size is reduced to The page loads about 50 percent faster in comparison with the preceding example:.
Best practices to speed up website performance:. Head over to YSlow! In this section, we will integrate the configured Koala to compile and output the style sheets, by performing the following steps:. This will compress the style rules into a single line, which eventually will make the style.
This will compile style. We have just integrated the project directory within Koala. We have also created two new style sheets, namely, main. We have also put together five style sheets, including main. We combined these files and generated a new style sheet named style. Finally, we link the minified style sheet, style.
The style. Though it is the most popular naming convention for minified web source files, style sheets, and JavaScript, Koala allows you to rename the output to match your personal liking. To do so, click on the edit icon that is highlighted with a circle in the following screenshot:. The following are a few alternative naming ideas you can try:. Which of the following rules is not the one to improve website performance?
Before we get our hands on the code, let's talk about the mobile-first approach that will drive our decision on writing part of the blog style rules.
Mobile-first is one of the buzzwords in the web design community. Mobile-first is a new way of thinking on building websites of today, which also guides the pattern to build websites that are optimized for mobile use. As mentioned in Chapter 1 , Responsive Web Design , mobile users are growing and desktop is no longer the main platform where users can access the web. The mobile-first concept drives us to think and prioritize mobile use on building the website blocks, including how we compose style rules and media queries.
Herein, we will first optimize and address the blog for mobile and then enhance to the desktop version afterwards. The following are some of my recommendation sources to dig into this topic further:. In the preceding sections, we added third-party styles that lay down the blog appearance fundamentals.
Starting in this section, we are going to compose our own style rules for the blog. We will begin from the header then go down to the footer. In this section, we are going to write blog base styles. These style rules encompass the content font family, the font size, and a number of elements therein in general. First of all, it is my personal opinion that using the default system font such as Arial and Times is so boring.
Due to the browser support and font license restriction, we were only able to use fonts that were installed in the user's operating system. Consequently, for more than a decade, we're stuck to a very limited choice of fonts we can use on the Web, and many websites use the same set of fonts, such as Arial, Times, and even Comic Sans.
So, yes, these are boring fonts. Today, with the advancement in font-face specification, as well as the license of font usage on the Web, we are now able to use fonts on the website outside the font selection of the user's computer. I really encourage web designers to explore more the possibility of, and build, a more enriched website using the custom fonts on their websites.
Upon doing so, we will be able to use the Droid Serif font family, along with Varela Round; see these font specimens and characters in the following web pages:.
The browsers, by default, set the headings' weight to bold or However, Varela Round only ships with normal font weight, which equates to So, as shown in the preceding code snippet, we have also set the font-weight to to prevent the so-called faux-bold. Furthermore, we also change the link color to db. It's blue, but subtler than the blue color applied as the default link style, as shown in the following screenshot:. In addition, these style rules will prevent the image from exceeding its container when the actual image width is larger than the container.
We have just added style rules that address some elements in the blog, namely, the headings, the link, and the image. At this stage, there isn't a significant difference yet that appears in the blog, except the font family change in the content and the headings, as well as the link color. Have a look at the following screenshot:. Please note that the link color, 2a84bf , is my personal selection.
There are a number of considerations when choosing a color, such as the brand, the audience, and the content. The link doesn't have to be 2a84bf. Next, we will compose the blog header and navigation style rules. The style rules will mostly be applied through the element's classes. So, before proceeding, please refer to Chapter 2 , Web Development Tools , to see the class names and ID that we added in the elements. These style rules set the input color, border color, and the background colors.
It turns the input into something as shown in the following screenshot:. If you use OS X or Ubuntu, you will see the glowing color that highlights the input when it is currently targeted, as shown in the following screenshot:. It's worth noting that the glowing effect is part of the User Experience UX design, telling the users that they are currently within the input field. This UX design is particularly helpful if the users were only able to navigate the website with a keyboard.
The input background color becomes lighter when it is in focus, as shown in the following screenshot:. We have just decorated the header and the navigation. Corresponding to the mobile-first way of thinking, which we discussed earlier in this section, we first aim the styles to optimize the blog presentation in mobile. Activate the Chrome mobile emulator, and you will see that the blog is optimized for a smaller screen size already; the logo and the menu, as shown in the following screenshot, are aligned to the center rather than aligned to the left:.
The blog header is given a dark color, I truly understand that this color may look boring to some of you. Hence, freely customize the color as well as the style of the logo and the search input field. Some ideas are as follows:. Having managed the blog header as well as the navigation, we proceed to the blog content section. The content section includes the blog post items, and the blog pagination.
Perform the following steps to style the blog content:. We just styled the blog content section—including the page navigation pagination , and the following screenshot shows how the content section looks:. Most of the style rules we applied in the content section are decorative. It's something that you don't have to follow forcefully.
Feel free to improve the styles to follow your personal taste. Next, we will style the footer, the last section of the blog. Perform the following steps to enhance the footer style:.
We have just styled the footer section, and the following screenshot shows how the blog footer will look:. The blog is currently optimized for mobile, or narrow viewport size. If you view it in a larger viewport size, you will find that some elements are misplaced or are not properly aligned.
The blog logo and the navigation, for example, are currently aligned to the center, as you can see in the following screenshot:. In the upcoming steps, we will fix these through Media Queries; we will optimize the blog for desktop view.
Perform the following steps to compose style rules for desktop:. We will add all the style rules in the following steps within this media query. This media query specification will apply the style rules within the viewport width starting from px and up. We have just added style rules that address the blog for the desktop view.
If you are now viewing the blog in the viewport width that is larger than px, you should find that the elements in the blog such as the logo and the navigation menu are in their common position, as shown in the following screenshot:.
With the use of glorious CSS3 and HTML5 features, comes a consequence: the layout failed and is broken in the old Internet Explorer, as you can see in the following screenshot:. If you are okay with it, you can skip this section and head over to the next project immediately. However, if you feel adventurous, let's proceed to this section and fix those bugs. Perform the steps to patch Internet Explorer with polyfills:. The koala-prepend directive is the Koala proprietary directive to import JavaScript files.
By this step, Koala will have generated the minified file named polyfills. These polyfills work out-of-the-box. Refresh Internet Explorer, and voila! The style rules are applied, the layout is in position, and the placeholder text is there. We will end this project. But, as you can see from the preceding screenshot, there are still many things to address to make the blog appearance in the old Internet Explorer as good as in the latest browsers.
For example:. We completed the first project; we have built a simple, responsive blog using Responsive. The end result of the blog may not be that enticing for you. It is also far from polished, particularly in the old Internet Explorer; as mentioned, there are still many things to address in that regard. HTML5 allows us to create neat, readable code on the back end of clients' sites - always a plus when reading line after line of HTML markup!
It also means we don't have to worry as much about whether or not users have updated their Flash, Java, or other plugin to get the full experience of our clients' sites. Benefits such as nofollow tags for links, alternative text for images, the ability to more accurately describe the type of links on a site, and the improved speeds due to less plugin reliance allow us to make the most efficient, accessible, and clean sites on the web. The future is now at REQ! Want to learn more?
Check out these links :. July 6, Article Design. HTML5 aims to limit use of external plugins HTML5 creates a uniform experience across devices HTML5 has location support, and with Google's hyper-local search algorithm changes, this could mean better visibility to users in your area!
In this new smartphone and tablet-driven digital world, businesses are faced with the important challenge of offering customers a mobile experience that is just as comprehensive and easy to use as found on the traditional website. To accomplish this, brands should turn to HTML5 -- the latest HTML coding language that allows you to deliver a richer and more intuitive user experience within the mobile browser.
What is HTML5? HTML5 allows mobile developers to create more dynamic and engaging web content for different use cases and user experiences. Optimizing HTML5 features for mobile interfaces, enables brands to keep pages light and focus on functionality that takes advantage of the smaller screen size of mobile devices. By implementing a well-executed mobile strategy that takes advantage of next-generation HTML5 technology, consumer-facing brands will see an increase in conversion, repeat visits, and overall positive brand awareness from users engaging with their brand via mobile devices.
Here are 5 reasons why developing your mobile Web strategy with HTML5 will improve the customer experience. While downloading an app is behavior typically exhibited by brand loyalists, the mobile Web allows you to reach a much larger audience including users much earlier in the customer life cycle.
This includes swiping through navigation and pinching and zooming in on select areas of the site. Also similar to native apps, HTML5 mobile sites include local storage which allows site developers to store data within browser memory. This results in sites with the ability to store commonly used data within the browser and reduce the number of back-end interactions with the server -- delivering pages that load much faster than previous generation mobile sites.
Inside I have placed a solemn paragraph which may contain some copyright and ownership information. To finish off this basic stencil layout we can use a few CSS styles.
This will clear up a lot of confusion in the long run when your pages and styles begin to run on for different pages. You can target this same effect in the template code, just add the following lines into the CSS document. Another neat effect is the clearfix styles. This is caused by offset margins and errors in setting absolute widths for your floated content.
Since our container div core contains the clearfix class, this means all internal content can be move around freely and automatically clears extra space afterwards. These bits of code are simple for getting started. They also pertain to our HTML5 template code constructed earlier, so this is simple practice. Many designers know of shorthand code such as the font: property , since these have been standards even before CSS2.
Below is a short list explaining a few of the properties you may consider playing with. Try googling for syntax examples if you feel lost. These properties all have their upsides and downfalls. But practice will give you a clear mindset to enter into developing further websites with ease.
0コメント