Years ago, websites were designed for viewing on a computer. Now people view websites on their computer, their tablet, their cellphone. At first, websites were simply created for one optimal size and you would have to scroll around if the size wasn’t quite right. Then some websites got designed with separate versions of the site for various sized platforms. Then came Responsive Web Design…
Responsive Web Design is having one site that adapts to different sized devices.
Here’s Wikipedia’s definition:
“Responsive web design (often abbreviated to RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).”
And here’s a great quote about the approach of designing for the web:
“The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.” John Allsopp, “A Dao of Web Design”
TECH TALK SIMPLIFIED
In order to design for the web’s flexibility we separate the design formatting from the content with Cascading Style Sheets, or CSS, and HTML, the standard foundation of web pages. To design for various viewing sizes, you set breakpoints, or widths in pixels, for mobile, tablet, and desktop, etc. You can have your web page call up the information about these breakpoints, with what’s called a Media Query, which basically says “If the screen is smaller or larger than this size, make the page look like this.”
SEEING IS BELIEVING
SevenBlocksDesign.com was made with a Responsive Web Design WordPress template. Look at it on different platforms or just make your browser on your computer larger or smaller and see what happens. Here’s a couple things to note: with full desktop mode there’s a slideshow on the homepage, but with a smaller screen a single image scales to size; the navigation links at the top become a drop-down menu on smaller screens; content that’s side-by-side with a large screen reconfigure to be displayed top-to-bottom on smaller screens.
WHY IS THIS GOOD?
Because content is king! These subtle changes take advantage of making the content as easily accessible in different formats. And that’s good design!
Seven Blocks Design is the new name for Diana Hobstetter’s design company.
The previous name was Second Street Design Studio, which was based on the office location. But times change, and the business is no longer based there. So it was time for a new name…
I started brainstorming all sorts of names, and these days it’s not just coming up with a good name, but also a good domain name. I didn’t want to name it after my location this time, but wanted it to reflect what I did, what I was good at, and what I had to offer.
I was looking up words in the thesaurus, reading various articles on topics in my fields… And then I came across an article on the seven blocks of social media. Boom! Then I found another resource on the seven blocks honeycomb of user experience design. Bam! I knew I was onto something.
So Seven Blocks Design is about building blocks. My building blocks include artistic design, branding, user experience, social media, technical skills, empowering others, and a friendly approach.
Seven Blocks Design is about using building blocks to create appealing and effective designs and marketing.
I’m excited to start afresh! I hope you will be too!