Web Design Process: Responsive and Responsible Design

lopera shmopera web responsive desktop to phone

L’opera Shmopera Website: Desktop and Phone View

(L’Opera Shmopera–design changes from last week: added logo png and work-in-progress photographic header)

Responsive Design is Responsible Design. Sounds catchy, right? This is the kind of thing that’s embroidered on the pillows of Web Design superstars. People no longer say that this is a trend. What is Responsive Design?

It’s when your website says “whoa, you’re using a phone to look at this? … wait, let me get the phone layout for you… ahhh. Much better.” Or a tablet. (Try making the window smaller now and  you’ll notice this blog is responsive.) I’m still reeling a bit about what tablet devices really mean for web design. Retina displays are an entirely different matter. I won’t be getting into that for a while. More on that here.

So, yes. I made my L’opera Shmopera Website responsive. Not to tablets, yet. I haven’t gotten that hooked up. But, it is “phone-ready” (as phone-ready as a fake website can be.) How do you know? Make the window smaller and it should lock into a phone-size at a certain point. Between full size and phone size however you can see my pictures floating for a bit. That’s where the tablet layout comes into place, but I haven’t written the script for that, yet.

Pretty cool, though. I added lines of code and attached another CSS (Cascading style sheets) file to tell the boxes and stuff what to do when the window gets smaller and there you have it. I’m still new at this game. It is difficult to design websites when you don’t name your tags/classes etc. It will get complicated and fast. I’m glad Erik Fadiman instructed us on code commenting. That is very helpful. Web Design with DreamWeaver is like being a puppeteer, your code are the strings. In my case, the strings are tangled because I keep pulling the wrong ones until they are tangled. Using an ID or a class instead of a tag is a good way to tangle your code.

Another trick is to use the browser to edit your website. Using the code inspector in the Web Dev tool bar, you can make changes and see them in real time in the browser. A good web design work station has two to three monitors, mac and windows and a lot of multitasking going on.

Some brief instruction on CSS sprites. It’s intriguing mostly because of the name. Sounds fun. It sorta is. A CSS sprites’ origins comes from “a graphic object blended with a 2-D or 3-D scene through graphics hardware” (-Smashing Magazine). It’s a way to have multiple states of the same item saved in a master grid. Then depending on the circumstance, you can call up one of the images within the grid—aligning the images is crucial!

Things I would stitch onto my pillows (in my mansion of web design love):

Systematic naming makes a happy home.

God Bless Web Dev Toolbar.

You can’t spell cuss, without CSS.

Code comments are the flowers that bloom in God’s Garden.

(Earlier Post Relating to This Project)

Advertisements

About KC

I am Katarina Countiss, a multimedia designer. I like blogs, games, art and technology. I am curious about how things are made.
This entry was posted in User Experience, Web Design. Bookmark the permalink.

2 Responses to Web Design Process: Responsive and Responsible Design

  1. Pingback: Web Design Process: CSS Sprites | Katablog

  2. Pingback: App Design Process: Outline | Katablog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s