Responsive Design Primer For Bloggers

Pleased today to welcome Susan Silver, blogger extraordinaire, with Cirque du Mot and 12Most. She is a most amazing member of this community and our Bloggers Unite! Google+ community, may I say, who has a thirst for learning I rarely see. Please welcome her and her writings with a warm hello in comments with your input and questions.

wordpressSUSAN SILVER SAYS:

Responsive design, also called mobile design, is a must for anyone with a website or blog. I am on this band wagon and have been slowly teaching myself some skills over the past year. Like many freelancers, the idea of hiring a designer is not in my budget at the moment. That is why I want to share a primer for others wanting to take the DIY approach.

I’ll start by explaining some of the terms you are likely to encounter and then give you some resources for further research.

Responsive Design Vocabulary

HTML5 – HTML is the structural foundation for a website or blog. It is the deeply embedded code that tells a browser how to render a document. HTML5 adds more ways to display content on various devices with native video and audio options.

CSS3 – CSS stands for cascading style sheets. We can make all sorts of changes to the superficial aspects of our website without having to change any of the structure. It’s just like painting the walls of your home. The only thing that changes is what is on the outside. You don’t have to touch the wires or insulation. CSS3 adds new rules for how these sheets behave.

Responsive or Fluid Grids- Responsive grids are generated by CSS code. They are what make responsive design possible. The designer creates rules for how “boxes” on the screen should behave on different devices. When you change the browser window size these boxes will move their position or disappear dynamically.

Jquery Plugin- These plugins are not like WordPress plugins. They have this name because they can be added plug-in-play style to a design. In general, you upload a java script file (.js) into a directory. You then insert a line of code into your designs that calls on that script and runs it.

Icon Font- Icon fonts are very useful for responsive design. This is because they are not image files. To make an image responsive requires a lot of work. With an icon font you can treat what would have been an image the same way as text, which is much easier to manipulate. Font awesome is a great example of what you can do.

Framework or Boilerplate – There are a slew of these roaming around. They have names like “HTML5 Boilerplate”, “Twitter Bootstrap” and “Foundation” (to name the most popular). There are also a few that are only responsive grids like “1140”. These are skeletons that you can build on that are prepped for responsive design. It takes the hassle out of starting new projects.

Starting with Responsive Design

Well, you probably are not feeling too pleased right now with the idea of doing something yourself. Many of these terms might be new. I won’t lie to you, I was pretty scared myself when I started.

The first thing I did on my journey was to start following the top design blogs. I listened to the discussions that developers were having about using HTML5 and CSS3. In these arguments it became clear what was really important to know and what was over my head.

Use these links to start your journey learning design and development.

 

Enhanced by Zemanta
18 comments
rdopping
rdopping

Great resource tips. Still doesn't mean much to me. Thanks @Soulati | B2B Social Media Marketing for thinking of featuring this and thanks @susansilver for writing it. When I make the switch (sometime this year) I know whose door to knock on. 

 

I have noticed some sites with responsive design have odd issues like text bleeding off the side of the page. That's likely a design issue with the theme but who knows.

 

BTW, my blog works really well on mobile even though it's not responsive. Maybe because it's so simple. Sure, you have to zoom in and out a bit but most, if not all, mobile devices are pretty flexible that way. I will go responsive eventually but since I am not a business it's not as critical for me right now. Lame excuse, I know. 

Joshua Wilner/A Writer Writes
Joshua Wilner/A Writer Writes

I think about all these things quite a bit, but have been hesitant to attack it because I am good at blowing things up.

SteelToad
SteelToad

I wish this had come out a few days ago. I was trying to explain these concepts to someone and I don't think I did it as clearly or succinctly.

 

Soulati | Hybrid PR
Soulati | Hybrid PR moderator

Susan, I love this post and so admire your teachings. Can't say I have the gumption to tackle these, but I see you were methodical in how you went about it.

 

What are you seeing with Java?  I see Oracle just released a patch, and I've been having nothing but troubles with that darn java script on a variety of sites and technologies.

 

Thank you so very much for guest posting today!  Any time!

susansilver
susansilver

 @SteelToad I'm glad that it makes sense at all! That is a high compliment. I always feel that I do a terrible job because I am not working with these concepts every day. Just when I need to hack something.

susansilver
susansilver

 @Soulati | B2B Social Media Marketing Java won't go away, obviously Jquery as described above relies on javascript to run. That being said, I don't remember a time when Java and Flash did not cause problems for browsers.  The hope is that HTML5 will take on so many functions that we will have something that can smoothly run on mobile, tablets, and web. You can already watch Google videos using HTML5 instead of Flash, which I often choose because it keeps my browser from crashing!

Soulati | Hybrid PR
Soulati | Hybrid PR moderator

 @SteelToad You have to be kidding; I know you're not. Sigh. That's really wrong...kinda  like Wordpress.org and Wordpress.com.

Soulati | Hybrid PR
Soulati | Hybrid PR moderator

 @susansilver How do you use or select HTML5? Is that something you download? E.g. Flash doesn't work on Apple products. See how stupid we all are?

Soulati | Hybrid PR
Soulati | Hybrid PR moderator

 @susansilver  @SteelToad And, good for you that you've taken the time to master just enough to make  you comfortable.  We in PR typically say, "I know enough to make me dangerous."

 

Well, that's changed; you have to know enough to master enough.

Soulati | Hybrid PR
Soulati | Hybrid PR moderator

 @susansilver Let's NOT get started on browsers. I've had to migrate back to Firefox from Chrome b/c Chrome has been creating a mess with my plugins, Java and publishing the blog. Have been advised to use Firefox for publishing; more reliable, I guess.

Soulati | Hybrid PR
Soulati | Hybrid PR moderator

 @susansilver OK, so that begs the question...how do you get your browser to use it instead of flash? Does it work on Apple yet? Maybe I'm just getting too analytical and letting tech make me crazy.