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
