Web Design, Development and Support
Responsive Web Design
As the number of tablets and smartphones has multiplied more and more people are visiting websites on something other than a desktop computer. Meanwhile desktop screen have gotten larger, creating a situation in which websites need to be viewable, usable and navigable in viewports ranging from about 3 inches wide to 30 inches wide! Fortunately advances in HTML5 and CSS3 have provided a solution; it is now possible to build websites that can respond to the device they’ll be delivered through — moving from a multi-column layout on a desktop through 2-columns or wide single columns for tablets, down to narrow single-columns for smart phones. (Hence the term “responsive design”.)
The breakthrough advances was the development and release of “media queries” which allows the developer to create rules in the website’s stylesheet(s) that will be applied only to devices that fall into a set of parameters the developer defines; most relevantly “width”, “height”, and “orientation” (portrait or landscape).
What’s the Difference?
The concept of responsive design isn’t immediately intuitive for most people because you can visit a “non-responsive” website on a smartphone — it will usually appear miniaturized and to navigate around the site you have to swipe and zoom a lot but it can be done. The difference with a responsive site is that when you arrive on your smartphone (or a smaller tablet) the site will appear “full size”, with instantly readable text and larger buttons, and scrolling will only be up and down instead of right to left AND up and down. A responsive website doesn’t shrink to fit in a smaller device, it rearranges to fit. Content that displays in multiple columns on a large monitor will reflow to display in a single column on a smartphone or small tablet.
Tablets come in a large array of sizes and change from wide and short to tall and narrow (some are more square). We build sites to be able to reflow from three/four columns to two, then down to one. Your tablet may display pages in any of those configurations depending on the specific viewport’s dimensions and orientation,
The great thing is: One Website, All Devices. You can deploy and support a single website and have it work on a full range of sizes, negating the need for separate desktop and mobile websites.
It’s Not Magic, It’s Code
TH Design specializes in custom websites and our responsive layouts are designed and tested extensively to ensure that they look visually appealing in all their sizes, as well as being usable and navigable. If requested, we also create separate stylesheets for Internet Explorer 8 because IE8 can’t properly display a responsively coded website. (Although IE8 is being used by fewer and fewer people, there are still a number of organizations out there with older equipment that can’t support newer browsers. Our clients typically know whether their customers fall into this group.) This way your website can be seen and navigated through the broadest array of currently used devices.
Making an Existing Website Responsive
Sometimes the existing visual design of a website is wonderful — it just isn’t responsive. We can take an existing design and re-cast it to be responsive. There might be slight modifications required but it’s very doable and we’ve done it for several clients.
We have also written the HTML5 and CSS3 to create responsive designs that were then taken by developers and used in other coding environments.
PSD to HTML
We can take your Photoshop Designs and turn them into responsive HTML and CSS3.
Google recommends “Responsive”
In June of 2012 Google released its recommendations for Smartphone Optimized Websites: and the winner? Responsive! To be clear, Google recognized that for some situations it would remain preferable for organizations to deploy an entirely separate website for mobile visitors, and Google would provide guidelines to help developers code such sites to avoid being penalized. But their preference is for Responsive, and they noted the following:
“Using responsive web design has multiple advantages, including:
- It keeps your desktop and mobile content on a single URL, which is easier for your users to interact with, share, and link to and for Google’s algorithms to assign the indexing properties to your content.
- Google can discover your content more efficiently as we wouldn’t need to crawl a page with the different Googlebot user agents to retrieve and index all the content.”
Dynamic WordPress Sites
At TH Design, we develop and build responsive websites in the WordPress platform. We design and code custom themes as well as work with pre-built themes. WordPress uses PHP (Hypertext Preprocessor) scripting language to dynamically generate and display HTML/CSS pages. WordPress has an extensive user base, a massive support database and active support community.
WordPress offers literally thousands of plugins that extend site functionalities, such as:
- Slideshows/Carousels/Photo Galleries
- Newsletter Sign-ups and Management
- Video/Audio Players
- Members-Only Portals
- Events Calendars/Registration
- Image zooming
- random/rotating testimonials
and many, many more!
With WordPress, it’s possible to sync your Social Media communications channels with the website thereby eliminating a lot of redundant posting, tweeting, etc.
And, WordPress makes it possible to incorporate a blog into a website while maintaining consistent visual branding.
Our WordPress sites are responsive — built to adjust to different device sizes and orientations. It’s a great combination!