Dorey Design Group has just launched a new, responsively-designed website! Yay! When we saw that more of our potential clients were accessing the site from mobile devices, we knew we'd need to find a more effective way to deliver our site and its content to them. We're excited to have found a practical way to present our project portfolio, blog, team bios and other information to all web users across all platforms.
The basic idea of a responsively-designed site is that it is designed from the ground up to be flexible, so that it will adapt to the particular device it's being viewed on.
In this image, you see Dorey Design's website in a wide format, similar to what you'd see on a conventional PC with a web browser like Firefox or Chrome:
Now if you grab the right side of the window and resize it down, an interesting thing happens. Note that the main body text of the site stays centered. It may be hard to see, but notice also that the background image has resized itself. This is how the site might be seen on a smaller device with a narrower screen, like a tablet.
Now, in this last image, the screen is narrowed to the width of a typical smartphone. You can see that the elements of the page have rearranged themselves to run down the page. All the content is reordered in a vertical format and is viewable by simply scrolling up or down. No pinching or zooming required.
If this same site was non-responsive, when viewed on a phone the user would be zoomed in, looking at a small area in the corner of the page. Finding and viewing content would be awkward, potentially losing us clients.
Dorey Design's site is just an example of the possibilities of responsive design, and why it's is such an appealing option for small businesses. By use of these various design techniques, a site can adapt to the user and the device, allowing an efficient and economical way for business websites to reach the growing number of smartphone users.