Pleased today to welcome and 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.
SUSAN SILVER SAYS:
, 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. is a great example of what you can do.
Framework or Boilerplate – There are a slew of these roaming around. They have names like “”, “” and “” (to name the most popular). There are also a few that are only responsive grids like “”. 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.
- – Weekly Roundup of Design Resources
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!
@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!
@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 | B2B Social Media Marketing No, HTML5 is just some new markup, but not all devices (and browsers) can use it yet. It is part of the structure of websites like regular old HTML. It is just an update I guess you could say. No downloading or anything.
@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.
@Soulati | B2B Social Media Marketing No apple product uses flash. You can opt into the program over on Youtube https://www.youtube.com/html5 if you want to try it. I know that it works better for me, but I also use Chrome.
@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 | B2B Social Media Marketing Java and Javascript are two entirely different/unrelated things. But the naming still catches a lot of people.
@SteelToad You have to be kidding; I know you’re not. Sigh. That’s really wrong…kinda like WordPress.org and WordPress.com.
@SteelToad @Soulati | B2B Social Media Marketing It does indeed get confusing! I know that I take for granted a lot of the subtleties between things.
@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.
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.
@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.
I think about all these things quite a bit, but have been hesitant to attack it because I am good at blowing things up.
@Joshua Wilner/A Writer Writes I can help you with this, there is a tool called instant WordPress. You can install any theme you like and hack it to pieces without touching a live website.
https://www.instantwp.com/
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.
@rdopping @Soulati | B2B Social Media Marketing It is true, one of the issues with responsive design is that not all tricks work for every browser. That is unlikely to ever happen. You end up having to test your website for each one that eats up time. There are still bugs to say the least.
Here are great list of Best Front End Boilerplates for Fast and Rapid Development on Web Designs https://www.upgradedtutorials.info/web-design/best-front-end-boilerplates-for-fast-and-rapid-development/