logo

"Responsive Design?"

"Responsive Design"? What is that supposed to mean? Is it like that "Univac Elementor" thing on your home page, where the user can control the appearance of a page by clicking on some links?

No, it isn't that, although that (and other kinds of animation) can certainly be incorporated into your responsive web design if you like.

glasses

So, then, is it the kind of thing where the user fills out a form and then when he hits the "Submit" button the site automatically responds by sending him an email message saying that the information was received?

Well, no, that's not exactly it either, although it's easy enough to set that up for your site if you require it.

glasses

OK, smart guy, you've told us what "Responsive Design" isn't...so how about clueing us in to what it is?"

Here it is in a nutshell: people surfing the web these days are viewing sites on all different kinds of devices with all different kinds of screen sizes: desktops, laptops, tablets, mobile devices, etc. (Why, perhaps you're looking at this very page on one of those devices right now.) A responsive web design is one that adjusts itself to fit the screen on which it's being viewed in the optimal way. If the site is being viewed on a mobile device, it's not necessary for the user to zoom in on the page so that she can read the text---different elements on the page shift (and sometimes can be made to disappear) so that the text remains at a legible size.

Conversely, if the same site is being viewed on a very wide screen---say, a desktop set to a viewing resolution of 1920 pixels---then the content of the page will be centered on the screen while the margins are filled in with a background image or color. Actually, a web page can be centered on a screen with a very simple piece of code, but you might be surprised at some of the very expensive, high-profile sites where this hasn't been done (or at least isn't done consistently site-wide.) I certainly wouldn't want to embarrass any of these sites by pointing them out to you publicly---but---take a look at this one. (Might require zooming out on narrower viewing devices to get the effect.)

glasses

Hmmm...interesting. So, how exactly do you get a web design to respond to the size of device on which it's being viewed?

With SCIENCE!!! (Well, no, not really. It's done with a type of code called a Media Query. If you're truly interested in Media Queries you can read about them here, but it's my job to get them to work for you.)

The best way to get a handle on how a responsive web design operates is to see one in action, and it just so happens that this particular site is responsive. Just grab one of the bottom corners of your web browser and move it horizontally to make the page narrower and wider, and watch how the contents adjust to the window size. (Note: you don't have this option if you happen to be viewing this device on a mobile device. It also doesn't work with versions of Internet Explorer prior to IE9. Sorry!) Or, if that's too much trouble for you to go to, then just sit back and watch the brief, instructional yet entertaining video below demonstrating some of our responsive designs at work. Enjoy!

glasses