Teach Yourself RWD in 24h Book on HTML5 in 24 Hours

Error in RWD code

Sat, 20 Feb 2016 21:33:42 +0000

from: Sams Teach Yourself Responsive Web Design in 24 Hours

In LISTING 18.3 “CSS for a Responsive Form” (page 257) I include a position for the label of an input box to hide it from view. But the position values I used would cause the browser to create massive scrollbars both vertical and horizontal.

The incorrect CSS is:

label.inputbox {
  position: absolute;
  top: 9999px;
  left: 9999px;
}

This is easily corrected by positioning the top and left styles negative 9999px each.

label.inputbox {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

HTML for RWD—Learn the HTML You Need in a Free Chapter

Mon, 11 May 2015 16:09:24 +0000

from: Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours

While responsive web design uses CSS to adjust web designs to respond to the devices viewing the page, you need to start with good HTML. Chapter 5 of my latest book Sams Teach Yourself Responsive Web Design in 24 Hours helps you learn the basics of HTML so that you’re ready to create a responsive website.

In chapter 5, you will learn:

How to write HTML for RWD
How to build a basic web page with HTML5
What semantic elements are and how to use them
Why valid HTML is important

And this chapter is available for free on the Informit website.

Note that if you’re a complete novice to HTML, this chapter will only be a starting place. It’s intended as an introduction to the minimum HTML you might need to do RWD. If you need to learn HTML, you should check out my first Sams book: Sams Teach Yourself HTML5 in 24 Hours (get a copy).

Are you interested in learning responsive web design?

Thu, 08 Jan 2015 20:38:54 +0000

I’m excited to announce that my latest book Sams Teach Yourself Responsive Web Design in 24 Hours is out and available in bookstores and online.

If you have any questions about the book, or find any problems, I’d love to hear about it. Feel free to post comments below.

Sams Teach Yourself Responsive Web Design with in 24 Hours

This book is intended for web designers who already build websites but are interested in making their sites responsive. But it can also be used by motivated novices who have some understanding of HTML and CSS and want to build sites that use the most modern techniques.

In it you will learn the basics of RWD as well as how to make things like images, videos, tables, and forms responsive. You’ll learn about tools that are available to help create responsive sites and there is a chapter dedicated to best practices of RWD as well as showcasing multiple websites that are already using RWD to provide great designs for customers on multiple devices.

If you’ve been wanting to learn RWD, this book will make it easy.

Sams Teach Yourself Responsive Web Design in 24 Hours is available in paperback and ebook formats. Plus, you can get a Learning Lab edition that also includes videos demonstrating what you learned as well as interactive quizzes to help test your knowledge. Order your copy now. You can also look at the book’s code samples online.

// < ![CDATA[ // < ![CDATA[ // < ![CDATA[ (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = “http://forms.aweber.com/form/47/1434307847.js"; fjs.parentNode.insertBefore(js, fjs); }(document, “script”, “aweber-wjs-d5r35b00s”)); // ]]>

Copy Editing and Tech Editing Done

Thu, 18 Sep 2014 00:00:57 +0000

I just sent in the last chapters after reviewing the copy edits and tech edits. Whew!

I am very glad to have such great editors - Jon, my tech editor, and Kitty, my copy editor. They both saved me from some major screw ups and I couldn’t have done this book without them! And as usual any errors that still make it through were not because of them.

Now I just need to finish the videos. I’ve got an editor working on editing them, so they should be done soon.

Pre-Order Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours Now

Amazon

Barnes & Noble

And don’t forget to check out the free chapter if you haven’t already gotten it.

Free Chapter From RWD Book

Sat, 07 Jun 2014 03:10:57 +0000

from: Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours

Get the free chapter Get a free copy of a chapter of the book Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours

“Planning a Responsive Website”

Are you interested in responsive web design?

Are you impatient to get my next book?

Do you need to convert your existing website to be mobile-friendly but don’t know where to start?

Do you not yet have a website and want help presenting your ideas to a designer?

If you answered yes to any of the above questions, then this chapter is perfect for you.

I am offering an advanced copy release of my new book Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours for readers of this website.

Click here to download your free chapter today!

Chapter is an excerpt from: Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours (order from Amazon and Barnes & Noble)

ISBN: 978-0672338380 By Jennifer Kyrnin

My New Book Available for Pre-Order

Thu, 24 Apr 2014 16:15:09 +0000

I’m excited to tell you that my next book Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours is available for pre-order on Amazon.

Comments:

Johnf938 - May 4, 2014

Hey, thanks for the blog article.Really looking forward to read more. Much obliged.

My favorite RWD navigation articles

Wed, 02 Apr 2014 19:14:10 +0000

Navigation is a critical part of any website design, but it’s amazing how many web designers simply “set it and forget it.” In other words, it’s tempting to create a navigation menu once and then just leave it the same for every device size. But navigation is important, and building one version and hoping it’ll work for all is very risky.

I’ve been researching how to design navigation for responsive websites and I’ve discovered a lot of great article and information. Here are my favorites:

Usabilla - 10 Tips How To Handle Responsive Navigation Menus Successfully

I think what I like best about this article is that it’s less about the HTML, CSS, and JavaScript of the navigation and more about the strategy behind the navigation changes.

Palantir - Scalable Navigation Patterns in Responsive Web Design

This is a great case study in how Palantir created a series of templates for a large university. One thing they did that I really admire is they collected edge cases. These are the places where the design falls apart, such as text scrolls out of a box or images float strangely or whatever. Navigation is a place where these edge cases can break a design.

Responsive Nav

I am very excited by this tiny JavaScript plugin. It includes things like CSS transitions and touch events And they claim it works in all major browsers including Internet Explorer 6.

CSS Tricks: Convert a Menu to a Dropdown for Small Screens

This tutorial shows you how to create a responsive navigation that converts to a select menu when the screen is small enough. But what’s cool is that Chris shows you how to set it up automatically with jQuery so you don’t have to have more than one menu.

Comments:

Jeff Smith - Apr 4, 2014

Thanks Jennifer, I have always found your articles to be thoughtful and beneficial to adding to my knowledge base of web design.

Jennifer Kyrnin - Apr 1, 2014

Thanks Jeff!

увеличить губы гиалуроновой кислотой - Feb 2, 2023

I really like it when people come together and share views. Great blog, keep it up!

Responsive Web Design Book is Moving Right Along

Fri, 21 Mar 2014 23:00:34 +0000

[caption id=“attachment_591” align=“alignright” width=“200”] This tree is halfway done too!

As of today I am about half way through the writing of my next book sSams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours. If you’d like to be one of the first to know when it’s available for purchase you can sign up here or subscribe to the HTML5 blog.

After the break is the current table of contents. You should be aware that this is not the final version, I have changed it with every chapter I write, but this will give you an idea of what I’m planning. Let me know if you think there is something missing or you’d like to see something different. There is still time to make changes!

Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours Table of Contents

Part 1: Introduction to Responsive Design

1 What is Responsive Design?

History of Responsive Web Design
- Web Pages Started with Little Design
- CSS Gave Designers More Control
- Designers Started Adapting Layouts to Customers
- Mobile Browsers Made Things Harder to Design
- Responsive Design Finally Entered the Picture
Why We Need Responsive Web Design

2 Alternatives to Responsive Design

Table-Based Layouts
CSS Layouts
- CSS Positioning
- CSS Floats
- Modern CSS Layouts
Detection Scripts
- Browser Detection
- Mobile Detection
- Object Detection

3 The Growth of Mobile

Basic Cell Phones
- How to Support Basic Cell Phones
Smartphones
- How to Support Smartphones
Tablets
- How to Support Tablets
Retina Devices
- Why Build Retina-Ready Websites
- How to Build Retina-Ready Websites
Why Responsive Design is Important

4 Progressive Enhancement

What is Progressive Enhancement?
How to Use Progressive Enhancement on a Website
- Separation of Content from Presentation and Functionality
- Start with the Content Layer
- The Adjust How the Content Looks
- Finally Add Interactivity
Benefits of Progressive Enhancement

5 HTML for Responsive Design

Use HTML5
- Tags Every Page Should Contain
- Basic Tags for Web Content
- HTML for Layout
- Some Useful Attributes
Clean Code
Don’t Forget Semantic Elements
- Standard Semantic HTML Elements
- New HTML5 Semantic Elements
- Consider Microformats
Validate your HTML

6 Basic CSS

How to Write CSS Rules
- CSS Syntax
- Embedded and External Style Sheets
  - Embedded Style Sheets
  - External Style Sheets
Styling Fonts and Colors
Creating Layout with CSS
Understanding the Cascade and Specificity
- What is the Cascade?
- What is Specificity?

7 Unobtrusive JavaScript

What is Unobtrusive JavaScript?
- Separating Structure from Behavior
- Supporting Usability
- Writing Clean and Semantic HTML
How to Implement Unobtrusive JavaScript

Part 2: Building a Responsive Website

8 Planning a Responsive Website

Should You Make Your Website Responsive?
How to Plan for a Responsive Website
- Check Site Analytics
- Evaluate Existing Content
- Make Decisions About the Content
- Write the Site Plan

9 Mobile First

Why Design for Mobile First?
- Mobile First Changes the Focus to Content
- Mobile First Lets You Experiment with New Technologies
- Why Mobile First Works
What Makes a Site Mobile Friendly?
- Give Your Readers Options
- Your Readers Can Affect the Display Too
What About Mobile Only?

10 CSS Media Queries

What is a Media Query
- Media Types
- Media Features
Media Query Expressions

11 Breakpoints

What is a breakpoint?
How to Define Breakpoints in Your CSS
- First Define the Styles that Remain the Same for Every Device
- Then Add in Specific Styles for Small Screens
- Finally Add Media Queries for Larger Screens
Optimal Breakpoints
- Best Practices For Breakpoints
- Breakpoints for Retina Devices
My Recommended Breakpoints

12 Layout

What is Web Layout?
Types of Layouts
- Fixed Width Layouts
- Fluid or Liquid Layouts
- Elastic and Hybrid Layouts
Columns
- Old Style Columns
- CSS3 Columns

13 Navigation

Comparing Mobile to Desktop Navigation Design
Use Progressive Enhancement to Add More to Desktop Designs

14 Fonts and Typography

Using Web Fonts
Sizing Fonts
Pixels vs. Ems vs. Percentages
Rem sizes

15 Images

Creating Responsive Images
Sizing Responsive Images
Creating Retina-Ready Images

16 Videos and Other Media

Most Videos are Fixed-Width
How to Make Videos Responsive
How Other Media is Affected by Responsive Design

17 Tables

Tables on Small Devices
Can Tables be Responsive?
How to use Tables with Responsive Design

18 Responsive Forms

HTML5 Forms
Important Form Features for Mobile
Adjusting Form Design

19 Using RESS with RWD

What is RESS
Responsive Design Plus Server Components
Benefits of RESS
How to Install RESS

20 Testing

Start by Testing in Your Browser
Test in a Device for All Your Breakpoints
What to do if you don’t have the devices to test with

Part 3: Improving on Responsive Design

21 Tools for Creating Responsive Designs

Responsive Frameworks
- Foundation
- Bootstrap
- Fluid 960
- Gridless
Font Tools
- IcoMoon
- Lettering.js
Images and Media
- Foresight.js
- Compressive Images
- ImgSizer.js
- FitVids
Software
- Adobe Edge Inspect
- Dreamweaver
Websites and Newsletters
- This is Responsive
Responsive Templates
- Templates for WordPress
- Templates for Drupal
- Web Page Templates and Where to Find Them

22 Problems with Responsive Web Design

Speed of pages
Extra work for designers
Customer dissatisfaction
Advertising

23 Device and Feature Detection

Why Use Detection Scripts
WURFL
Modernizr

24 RWD Best Practices

Give Everyone the Best Experience
Breakpoints
Images
Content
Keep Costs In Line
Examples of Amazing Responsive Design

Working on a Book on Responsive Web Design

Mon, 03 Mar 2014 20:23:15 +0000

Tentative cover for my next book - Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours

I’m close to half way through the initial writing of my next book Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours. The full title is quite possibly the longest title in the history of the universe. Okay maybe not, there was that movie The Englishman Who Went Up a Hill But Came Down a Mountain. That looks longer, shoot, no that’s only 58 characters long!

But regardless of the length, the book is coming out soon, and I’m pretty excited. I hope you are too.

Over the next few weeks I’ll start posting more about that book as well as about HTML5 information. I’ve got some big plans for this site, and I hope you enjoy them. As always, if you have any questions about HTML, CSS, or even responsive web design, don’t hesitate to ask.

Teach Yourself RWD in 24h Book on HTML5 in 24 Hours

Error in RWD code

from: Sams Teach Yourself Responsive Web Design in 24 Hours

HTML for RWD—Learn the HTML You Need in a Free Chapter

from: Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours

Are you interested in learning responsive web design?

Sams Teach Yourself Responsive Web Design with in 24 Hours

Copy Editing and Tech Editing Done

Pre-Order Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours Now

Free Chapter From RWD Book

from: Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours

“Planning a Responsive Website”

Click here to download your free chapter today!

My New Book Available for Pre-Order

Comments:

My favorite RWD navigation articles

10 Tips How to Handle Responsive Navigation Menus Successfully

Scalable Navigation Patterns in Responsive Web Design

Responsive Nav

More Links I’ve Found on Responsive Navigation

Comments:

Responsive Web Design Book is Moving Right Along

Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours Table of Contents

Working on a Book on Responsive Web Design