Bootstrap on HTML5 in 24 Hours

My Bootstrap Book is Now Available

Mon, 16 Nov 2015 13:00:15 +0000

I’m excited to announce that my Bootstrap book Sams Teach Yourself Bootstrap in 24 Hours is available in stores. You can order it online from Amazon and Barnes and Noble or buy it from your local bookstore.

It’s available as a Kindle eBook from Amazon or as a Nook eBook from Barnes and Noble. You can also get it in paperback as well as ePub, mobi, and PDF from InformIT directly.

This Bootstrap Book Makes Bootstrap Easy

Sams Teach Yourself Bootstrap in 24 Hours

If you’ve been considering moving to a CSS framework, Bootstrap is a good option. Bootstrap 3, which this book covers, offers a lot of useful features that customers and designers have come to expect from websites. Bootstrap makes things like grids, typography, and responsive design quick and easy. Now I find myself getting frustrated by sites that don’t use Bootstrap as I often have to reinvent the wheel just to get features that are standard in Bootstrap.

This Bootstrap book covers all the basics of Bootstrap including the CSS, components, and JavaScript libraries you can use to improve your site. You will also learn how to customize your Bootstrap website so that it doesn’t look like every other Bootstrap website out there. I even included a few example sites of some Bootstrap sites that really impressed me. You might be surprised at the sites that do use Bootstrap. There are a lot more than you might realize.

Please Consider Reviewing My Books

If you get a copy of my Bootstrap book or any of my other books, please let me know. I’d love to hear what you think. And if you have a chance, please leave a review on Amazon. If you like any of my books, the best thing you can do to help is to write a positive review on Amazon. And even if you don’t like them, I want to know, so I can improve them.

A Busy Week

Mon, 31 Aug 2015 03:06:24 +0000

I spent the last week working on two projects: the “Learning HTML and CSS Livelessons” and editing the Sams Teach Yourself Bootstrap in 24 Hours book.

It was both one of the most fun weeks I’ve ever spent and also one of the scariest (at least at first). I have never been in front of a camera before, and I spent 6-8 hours a day on Monday through Wednesday right there. Luckily Pete and his dog Shorty were there to put me at ease. It ended up being a lot of fun.

Now, of course, I have a bunch more work to both catch up from being gone for several days and some update work to get the website ready for the videos. This LiveLessons series is intended to help people learn enough HTML and CSS to get a website up and running and looking good. I’m hoping that if this project does well, I can do another on something like CSS to go into more depth on how to use CSS and style really fancy pages.

[caption id=“attachment_1135” align=“alignleft” width=“150”] Sams Teach Yourself Bootstrap in 24 Hours And I also got the first 50% of the technical and copy edits for the Bootstrap book. And I got the second 50% right after I got back. I’m hoping the second half is fairly error free (as far as we have found) like the first half. And as always, any errors that make it into the final book are my fault not my copy editor or tech editor (thanks Jon!)

One of the biggest challenges of writing a book about Bootstrap is that I find myself wanting to convert every site I look at to Bootstrap. I finally upgraded this site to Bootstrap just this week. And I’ve converted a couple of other sites I manage as well. But let me tell you, even as the author of the book, my clients don’t all want to do a huge redesign just because Bootstrap rocks. Oh well, their loss.

What’s Next?

My next project is finishing up a book on web publishing. That should be fun, and hopefully pretty quick. After that, who knows? If you have any ideas, let me know!

amzn_assoc_placement = “adunit0”; amzn_assoc_enable_interest_ads = “true”; amzn_assoc_tracking_id = “kyrnindesign-20”; amzn_assoc_ad_mode = “auto”; amzn_assoc_ad_type = “smart”; amzn_assoc_marketplace = “amazon”; amzn_assoc_region = “US”; amzn_assoc_linkid = “4e58e504a77bddbf022bf0fe2039d151”; amzn_assoc_emphasize_categories = “13900871,2238192011,1064954”;

The Lazy Way to Mobile-Friendly

Sat, 18 Apr 2015 17:26:23 +0000

Or How I Made a Simple Change on a Bootstrap Site to Please Google

Like most web designers I know, I am frantically trying to get many websites mobile-friendly in time for Google’s deadline of April 21st. Knowing that Bootstrap is a very mobile-friendly framework, I have been migrating a lot of the sites I manage into it. This has worked great, but as the deadline looms ever nearer, I have been cutting more corners in getting the sites ready.

And at this point, most of the sites that I’ve left hanging are my own.

So today, I decided to check my branding site http://htmljenn.com/. And as I suspected, even with Bootstrap, it came up as not friendly.

](/images/screenshot515.jpg) I knew that header image was too big!

As you can see from the picture, my headline graphic is way too large for most mobile screens. I knew this, but I was probably hoping it would fix itself overnight or something. It didn’t.

Luckily, Bootstrap offers a feature that makes it easy to get rid of the offending graphic (for now) and replace it with text that is mobile-friendly: The Bootstrap responsive utility classes.

There are 16 classes you can use in Bootstrap to show and hide content from different sized devices. They are:

.visible-xs-*
.visible-sm-*
.visible-md-*
.visible-lg-*
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg

You may notice that I only listed eight classes above. That’s because the .visible classes each have three variations:

.visible-*-block
.visible-*-inline
.visible-*-inline-block

Since I realized that most likely the real problem with the mobile site was that the banner image was too big, I decided to hide it (for now) on smaller screens. Instead, I would show them the site title in an <h1> tag.

So I added the <h1> site title (<h1>HTMLJenn</h1>) and then added the class .hidden-md to it. This would hide the site title from any devices of medium size or larger.

Then I hid the banner image by adding the class .visible-md-block to it. This makes it visible only to devices of medium size or larger.

After I uploaded these simple changes, I tested on Google and got:

[caption id=“attachment_1131” align=“aligncenter” width=“300”] It’s mobile-friendly!

Hooray! My site is mobile-friendly. Now to work on making it look less ugly! But that can wait until I’ve finished fixing all my other sites!

What To Do to Make Your Site Mobile Friendly

Test your site to see if Google feels it is mobile friendly.
If it isn’t, don’t panic. Google will not delist your site. This bears repeating. Just because a site is not mobile friendly does not mean that it will not show up in Google search. It just means that when someone on a mobile device searches Google, your site will not rank as well as a similar site that is mobile friendly.
If it isn’t already, add your site to Google Webmaster Tools and follow the instructions in the Google Mobile SEO

There are many ways you can make your sites more mobile friendly. The Bootstrap framework is one way to get a responsive web design fairly quickly.

More Help with Bootstrap, Mobile-Friendly Design, RWD, and Google’s Change to Search Results

Order my book Sams Teach Yourself Responsive Web Design in 24 Hours
Get Bootstrap
Pre-order Sams Teach Yourself Bootstrap in 24 Hours by Jennifer Kyrnin
Read Mobile First Responsive Web Design by Brad Frost
Test your site with the Google Mobile Friendliness Test from Google Webmaster Tools
Read Finding More Mobile Friendly Search Results from Google Webmaster Central

Why Bootstrap?

Fri, 13 Mar 2015 23:22:00 +0000

Since I’ve started writing my latest book, Sams Teach Yourself Bootstrap in 24 Hours, I’ve been asked a bunch of times “why Bootstrap?”

Bootstrap Makes Development a Lot Easier

Bootstrap is a framework that you can use to help speed up your page development time. A lot of the decisions that every web designer has to make for every website have already been made for you and the resulting calculations and programming decisions have been taken care of. Plus Bootstrap includes a lot of pre-made components that are easy to add into your website.

For example, I added a rotating carousel to a photo gallery site. When I was doing it myself, it took me several days of design and coding work to get a rudimentary carousel up. When I switched the site to Bootstrap, I was able to put up a much fancier carousel in about 10 minutes. I spent more time deciding what pictures to include and what the captions should say than I did building the HTML and JavaScript.

Responsive Grid

One of the coolest things about Bootstrap is the responsive grid system. It has four device sizes it supports and this lets you get fairly specific in how you want your pages to display in large, medium, small, and extra small screens.

With the Bootstrap grid you get up to 12 columns and you can divide your pages into any combination of columns and widths. What’s particularly nice is that you don’t have to do any math yourself. Bootstrap has the column and gutter space defined for each grid width and all you have to do is set a class (or several) on your elements.

Bootstrap is Not All Perfection

While I do like using Bootstrap, and I think it’s a great way to get a good looking site up quickly, there are some things I don’t like about it.

The default color scheme and other styles means many Bootstrap sites look identical.
There are no fallbacks included if JavaScript is disabled.
Presentation and interaction are not separated from the content because many plugins and components are added using data attributes and style classes.

The first two issues can be fixed by taking more time to work on Bootstrap sites. It’s possible to adjust your Bootstrap defaults to colors and styles that fit your own aesthetic. And you can always add additional styles to overwrite the Bootstrap look and feel.

While Bootstrap doesn’t include JavaScript fallbacks by default, good designers provide their own. And even if you don’t want to do that, the fact is that very few users have JavaScript disabled, so it’s not going to impact most websites.

The last one is the one that bothers me the most. It is considered best practice to separate HTML (content layer) from the CSS (presentation layer) from the JavaScript (interaction layer). But Bootstrap relies on multiple CSS classes on nearly every element to define both what it is and how it should look. And there are a lot of classes in Bootstrap, many of which seem to do nothing or are redundant. This makes maintaining, reusing and scaling a Bootstrap site more challenging than it might need to be.

This last issue is the reason I don’t use Bootstrap for every site I manage. I use it when the ease of getting a good looking site up quickly is more important than whether it can be maintained by 10 different people, three of whom haven’t started working with me yet.

I Use Bootstrap Where it Makes Sense

And when it doesn’t make sense, I use something else, or nothing.

For instance, you might notice that this website does not use Bootstrap. And it is unlikely that I will be changing that any time soon. But I still like Bootstrap. And after you see my book you will too!

Starting on my Next Book

Thu, 15 Jan 2015 01:17:22 +0000

I’ve finished 25% of my latest book Sams Teach Yourself Bootstrap in 24 Hours. This has proven to be very fun to write. Bootstrap, if you’re not familiar with it, is a web design framework to help you build web pages that have a consistent design and look and feel. It includes things like a grid system and powerful CSS styles; components like icons and navigation; and a bunch of JavaScript plugins to make building dynamic web pages that much easier.

Some of the things I love about Bootstrap include:

It is responsive by default. So everything you learned in my last book Sams Teach Yourself Responsive Web Design in 24 Hours is still useful, but you can implement it more quickly with Bootstrap.
The grid system is very easy to use. And it’s easy to create multiple grids for different device sizes.
Bootstrap creates a good looking typography and color iconography framework for your website. You don’t have to worry about how your text will look. And if you need to show information like warnings or success states visually, Bootstrap has you covered.

And there is so much more too Bootstrap than those features. I hope you’ll be willing to join me on this adventure with a great framework.

Comments:

Petro Rautenbach - Jan 4, 2015

Hi. I live in South Africa and our postal service is very unreliable. Will you be publishing your books in e- format soon?

Jennifer Kyrnin - Jan 5, 2015

The book is available in Kindle format from Amazon, epub from Barnes and Noble, and PDF and other formats from InformIT http://www.informit.com/store/responsive-web-design-in-24-hours-sams-teach-yourself-9780672338380 as well as in other formats listed on my “How to Order” page. If you aren’t seeing it available from your favorite ebook distributor, please let me know and I’ll ask my publisher to look into it.