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!
Content Management System
WordPress has a built-in Content Management System that enables “permitted” users to access the site via any web browser and make page updates and changes. Different levels of permission can be assigned giving some users full ability to make changes and other users more limited access. When multiple people need to be able to make site updates, WordPress delivers!
Although Content Management Systems have been around for several years, they have typically been very costly to implement and support. WordPress enables companies and organizations to update their web content without needing to make a significant investment in additional software.)
WordPress is a template-based environment, which means you can typically change, add, or update information that appears in your header or footer, once and have it populate all your pages. You can access your site through a password-protected portal via any internet-connected browser—even your smartphone!
“Thank you for the great job in creating our new website. We love that we can update our site anywhere on any computer-either Windows or Mac…”
Ruth Kaser, RD Bike Shop
Web Analytics is the phrase used to encapsulate the interpretation of data collected by the servers where websites reside. As more and more businesses seek to develop a greater presence on the web, it has become increasingly important—particularly for businesses engaged in e-commerce—activities to get specific answers to some basic questions:
- How many visits does the site log on a yearly, monthly, weekly, daily or hourly basis?
- From where did the traffic originate?
- How long does the typical visitor stay at the site?
- Are visitors viewing pages where critical information resides?
- What’s the number of visitors to sales generated ratio? (the conversion rate.)
With this type of data, working in conjunction with an informed web development/design team, you can tailor your site to work in concert with all of your marketing efforts.
There are several Web Analytics programs available. We can recommend, implement, and manage a program for you, or teach you how to use one.
A number of factors affect web page load time, including but not limited to:
- number and “weight” of images/graphics (i.e. have the photos/images been optimized?);
- complexity/quantity of CSS stylesheets and scripts;
- use of external resources (does your video play on your server or at YouTube?);
- the number of http requests required to load the page.
(Http requests happen each time your computer/device asks the server to send it the pieces/parts that make up the web page. Each graphic, photo, script, stylesheet, chunk of html, video, audio file etc. generates an http request.)
There are several techniques that can be used to reduce the number of http requests and speed up the load time of photos/graphics. The nature of the website and the site’s content will dictate which techniques are best for that site and where tradeoffs are required. These considerations are built-in components of our process when designing and building websites at TH Design.