Tuesday, January 22, 2013
Thursday, January 10, 2013
HTML5 Elements
Before we get to the section, aside, header, nav and footer elements it important we understand one of the foundational changes in html5. Each piece of sectioning content has its own self-contained outline. That means you don’t have to keep track of your heading level anymore-you can start from h1 each time. Because each piece generates its own outline, you can now get far more heading levels than simply h1 to h6. More importantly, you can start to think about your content in a truly modular way.
The fact that each piece of sectioning content has its own outline makes it perfect for Ajax. Porting a piece of content from one document to another introduces problems. CSS rules applied to the parent document will also apply to inserted content. HTML5 offers a solution with the ‘scoped’ attribute, which can be applied to a style element. Any styles declared within that style element will only be applied to the containing sectioning content.
section – Used for grouping together thematically-related content. Sounds like a div element, but its not. The div has no semantic meaning. Before replacing all your div’s with section elements, always ask yourself, “Is all of the content related?”
aside – Used for tangentially related content. Just because some content appears to the left or right of the main content isn’t enough reason to use the aside element. Ask yourself if the content within the aside can be removed without reducing the meaning of the main content. Pullquotes are an example of tangentially related content.
header – There is a crucial difference between the header element and the general accepted usage of header (or masthead). There’s usually only one header or ‘masthead’ in a page. In HTML5 you can have as many as you want. The spec defines it as “a group of introductory or navigational aids”. You can use a header in any section on your site. In fact, you probably should use a header within most of your sections. The spec describes the section element as “a thematic grouping of content, typically with a heading.”
nav – Intended for major navigation information. A group of links grouped together isn’t enough reason to use the nav element. Site-wide navigation, on the other hand belongs in a nav element.
footer – Sounds like its a description of the position, but its not. Footer elements contain information about it’s containing element: who wrote it, copyright, links to related content, etc. Whereas we usually have one footer for an entire document, HTML5 allows us to also have footer within sections.
Source
article – The <article> tag specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.
Potential sources for the element:
The fact that each piece of sectioning content has its own outline makes it perfect for Ajax. Porting a piece of content from one document to another introduces problems. CSS rules applied to the parent document will also apply to inserted content. HTML5 offers a solution with the ‘scoped’ attribute, which can be applied to a style element. Any styles declared within that style element will only be applied to the containing sectioning content.
section – Used for grouping together thematically-related content. Sounds like a div element, but its not. The div has no semantic meaning. Before replacing all your div’s with section elements, always ask yourself, “Is all of the content related?”
aside – Used for tangentially related content. Just because some content appears to the left or right of the main content isn’t enough reason to use the aside element. Ask yourself if the content within the aside can be removed without reducing the meaning of the main content. Pullquotes are an example of tangentially related content.
header – There is a crucial difference between the header element and the general accepted usage of header (or masthead). There’s usually only one header or ‘masthead’ in a page. In HTML5 you can have as many as you want. The spec defines it as “a group of introductory or navigational aids”. You can use a header in any section on your site. In fact, you probably should use a header within most of your sections. The spec describes the section element as “a thematic grouping of content, typically with a heading.”
nav – Intended for major navigation information. A group of links grouped together isn’t enough reason to use the nav element. Site-wide navigation, on the other hand belongs in a nav element.
footer – Sounds like its a description of the position, but its not. Footer elements contain information about it’s containing element: who wrote it, copyright, links to related content, etc. Whereas we usually have one footer for an entire document, HTML5 allows us to also have footer within sections.
Source
article – The <article> tag specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.
- Forum post
- Blog post
- News story
- Comment
Wednesday, January 9, 2013
How to Responsive Design + Useful CSS Tricks for Responsive Design
Responsive Design Tutorials
30 Useful Responsive Web Design Tutorials
Responsive Web Design Guidelines and Tutorials
15 Detailed Responsive Web Design Tutorials
How to Create a Responsive Website in About 15 Minutes
35 Responsive Web Design and Development Tutorials
Build a responsive site in a week
Useful CSS Tricks for Responsive Design
#1 Responsive Video
It makes the video embed to expand fullwidth to the boundary.
Demo | Demo II | Details | webdesignerwall.com
#2 Min & Max Width
Max-width property allows you to set the max width of the element. The purpose of max-width is to prevent the element from extending the boundary.
Max-Width Container
In the example below, I specify the container to display at 800px if possible, but it should not exceed 90% of the boundary width.
.container { width: 800px; max-width: 90%; }
Responsive Image
You can make the image auto resize to the max width of the boundary by using max-width:100% and height:auto.
img { max-width: 100%; height: auto; }
The above responsive image CSS works on IE7 and IE9, but doesn't work on IE8. To fix it, add width:auto. You may apply a conditional CSS specifically for IE8 or use the IE hack below:
Min-Width
Min-width is opposit to max-width. It sets the minimum width of an element. In the example form below, min-width is used on the input text field to prevent the input from getting very small when scaling down.
Demo | Details | webdesignerwall.com
#3 Relative Values
In responsive design, knowing when to use relative value can simplify the CSS and maximize the best layout result. Below are some examples.
Relative Margin
Below is an example of a commentlist where relative left margin is used to space out the threaded comments. Instead of using fixed pixel value, I used percentage value to space out the sub-lists. As shown on the left side of the screenshot, the content box in the sub-lists gets very small on mobile resolution if pixel left margin was used.
Relative Font Size
With relative value (eg. em or %), the font size, line-height and margin spacing can be inherited. For example, I can change the font size on all descendant elements by simply changing the font-size on the parent element.
Relative Padding
The screenshot below shows it is better to use relative percentage padding as opposed to fixed pixel padding. The box on the left shows an unbalanced padding space if pixel padding was used. The box with percentage padding on the right shows that the content area is maximized.
Demo | Details | webdesignerwall.com
#4 Overflow:hidden Trick
As posted in my previous article, you can clear float with the overflow property. This trick is extremely useful. You can clear the float from the previous element and keep the content running within the container by applying overflow:hidden.
Demo | Details | webdesignerwall.com
#5 Word-break
I also talked about the word-wrap property before. You can force unbreaking text (eg. long URL text) to wrap instead of running in a single line.
.break-word { word-wrap: break-word; }
Demo | Details | webdesignerwall.com
30 Useful Responsive Web Design Tutorials
- How To Create A Responsive Navigation
- Coding A Responsive Resume In HTML5/CSS3
- Responsive Design in 3 Steps
- Beginner’s Guide to Responsive Web Design
- How to Turn Any Site Into a Responsive Site
- Designing for a Responsive Web
- Responsive Web Design: A Visual Guide
- Fluid Grids
- Scalable Navigation Patterns in Responsive Web Design
- Responsive Design with CSS3 Media Queries
- CSS EFFECT: SPACE IMAGES OUT TO MATCH TEXT HEIGHT
- Adaptive layouts with media queries
- Responsive Images: Experimenting with Context-Aware Image Sizing
- CSS: Elastic Videos
- RESPONSIVE CONTENT NAVIGATOR WITH CSS3
- Create a Responsive Web Design Template
- RESPONSIVE HORIZONTAL LAYOUT
- Convert a Menu to a Dropdown for Small Screens
- FLEXIBLE SLIDE-TO-TOP ACCORDION
- How to use CSS3 Orientation Media Queries
- Responsive Data Tables
- FLUID CSS3 SLIDESHOW WITH PARALLAX EFFECT
- How to Build a Responsive Thumbnail Gallery
- Optimizing your email for mobile devices with the @media query
- Build a Responsive, Mobile-Friendly Web Page With Skeleton
- Responsive Web Design with HTML5 and the Less Framework 3
Responsive Web Design Guidelines and Tutorials
- Design Process In The Responsive Age
- Responsive Web Design: What It Is and How To Use It
- A Foot On The Bottom Rung: First Forays Into Responsive Web Development
- Techniques For Gracefully Degrading Media Queries
- Responsive Web Design Techniques, Tools and Design Strategies
- How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
- Device-Agnostic Approach To Responsive Web Design
- Progressive And Responsive Navigation
- Content Prototyping In Responsive Web Design
- Is There Ever A Justification For Responsive Text?
15 Detailed Responsive Web Design Tutorials
How to Create a Responsive Website in About 15 Minutes
35 Responsive Web Design and Development Tutorials
Build a responsive site in a week
- Build a responsive site in a week: designing responsively (part 1)
- Build a responsive site in a week: typography and grids (part 2)
- Build a responsive site in a week: images and video (part 3)
- Build a responsive site in a week: media queries (part 4)
- Build a responsive site in a week: going further (part 5)
Useful CSS Tricks for Responsive Design
#1 Responsive Video
It makes the video embed to expand fullwidth to the boundary.
Demo | Demo II | Details | webdesignerwall.com
#2 Min & Max Width
Max-width property allows you to set the max width of the element. The purpose of max-width is to prevent the element from extending the boundary.
Max-Width Container
In the example below, I specify the container to display at 800px if possible, but it should not exceed 90% of the boundary width.
.container { width: 800px; max-width: 90%; }
Responsive Image
You can make the image auto resize to the max width of the boundary by using max-width:100% and height:auto.
img { max-width: 100%; height: auto; }
The above responsive image CSS works on IE7 and IE9, but doesn't work on IE8. To fix it, add width:auto. You may apply a conditional CSS specifically for IE8 or use the IE hack below:
@media \0screen {
img {
width: auto; /* for ie 8 */
}
}
Min-Width
Min-width is opposit to max-width. It sets the minimum width of an element. In the example form below, min-width is used on the input text field to prevent the input from getting very small when scaling down.
Demo | Details | webdesignerwall.com
#3 Relative Values
In responsive design, knowing when to use relative value can simplify the CSS and maximize the best layout result. Below are some examples.
Relative Margin
Below is an example of a commentlist where relative left margin is used to space out the threaded comments. Instead of using fixed pixel value, I used percentage value to space out the sub-lists. As shown on the left side of the screenshot, the content box in the sub-lists gets very small on mobile resolution if pixel left margin was used.
Relative Font Size
With relative value (eg. em or %), the font size, line-height and margin spacing can be inherited. For example, I can change the font size on all descendant elements by simply changing the font-size on the parent element.
Relative Padding
The screenshot below shows it is better to use relative percentage padding as opposed to fixed pixel padding. The box on the left shows an unbalanced padding space if pixel padding was used. The box with percentage padding on the right shows that the content area is maximized.
Demo | Details | webdesignerwall.com
#4 Overflow:hidden Trick
As posted in my previous article, you can clear float with the overflow property. This trick is extremely useful. You can clear the float from the previous element and keep the content running within the container by applying overflow:hidden.
Demo | Details | webdesignerwall.com
#5 Word-break
I also talked about the word-wrap property before. You can force unbreaking text (eg. long URL text) to wrap instead of running in a single line.
.break-word { word-wrap: break-word; }
Demo | Details | webdesignerwall.com
Mapping CSS Sprite Image Coordinates Online
CSS Sprite is the best way to merge multiple images into a single image and use it on the web page. Following this way, would significantly reduce the loading time of the web page. But CSS positioning is quite complicated for CSS beginners and most of the time they mess up with it.
Here is a good site for this job: http://pixy.heroku.com/
If you know any other good site, please leave a comment.
Useful links:
http://www.spritebox.net/
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
Here is a good site for this job: http://pixy.heroku.com/
If you know any other good site, please leave a comment.
Useful links:
http://www.spritebox.net/
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
Subscribe to:
Posts (Atom)