Details

• design by CreativeVega
• integrated WordPress content management system
• full-screen background slideshow
• single page layout
• pop-up pages with integrated contact forms

The post Hannah Demuth appeared first on Wind Companion Web Design.

Details

• design by Modifly
• integrated WordPress content management system
• multiple slideshows with unique imagery
• custom post types with backend options panel
• integrated Shopify e-commerce cart

The post Silver Lining Opticians appeared first on Wind Companion Web Design.

Details

• original site design by Modifly.com
• extended existing website with WordPress blog
• featured posts section
• newsletter opt-in form
• custom category types, sortable by icon
• integrated Discus comment system

The post Mocha Club Blog appeared first on Wind Companion Web Design.

Details

• integrated WordPress content management system
• e-commerce using the WooCommerce shopping cart
• responsive design
• home page slideshow
• events calendar
• social networking integration
• SEO optimized

The post Kingdom Reiders appeared first on Wind Companion Web Design.

Details

• integrated WordPress content management system
• responsive design
• home page gallery
• infinite scroll
• social networking integration
• category slideshow
• sidebar galleries
• SEO optimized

The post 9 North Design appeared first on Wind Companion Web Design.

Details

• integrated WordPress content management system
• responsive design
• home page slideshow
• subscription and opt-in forms
• social networking integration
• video integration
• SEO optimized

The post Competitive Edge Communications appeared first on Wind Companion Web Design.

In my mind, the two go hand-in-hand. Consider image handling. Sure, you’ve got your responsive layout all set up and you’re using the classic method to resize your images on the fly using CSS:

#main img {
max-width: 100%;
}

Works great on desktops with a high speed internet connection, but what about on a mobile using 3G? Do you really want to send a 200K, 600 x 300 image file and have CSS shrink it down to fit the screen? Of course not. It would be much better to send smaller image file to those devices. That’s where Adaptive Images comes in.

The hard work has already been done thanks to Matt Wilcox and is free to download from his site, www.adaptive-images.com. The files and (really good) detailed instructions are all there. Apparently there was a WordPress plugin created that used his code, but it is no longer maintained and does not seem to work anymore. But that’s okay! It’s really easy to implement on your WordPress site. Here’s how I did it:

First, download the adaptive-images.php file and place it somewhere on your site. I placed it into the /library/ subfolder inside my theme. Now open it up because you will need to make at least one adjustment. You have to tell it where to save the new, cached image files that the adaptive-images.php creates. I also adjusted the resolution break-points. A snippet from my finished file is below with the lines I altered highlighted:

/* CONFIG ----------------------------------------------------------------------------------------------------------- */

$resolutions   = array(768, 640, 480, 320); // the resolution break-points to use (screen widths, in pixels)
$cache_path    = "wp-content/uploads/ai-cache"; // where to store the generated re-sized images. Specify from your document root!
$jpg_quality   = 75; // the quality of any generated JPGs on a scale of 0 to 100
$sharpen       = TRUE; // Shrinking images can blur details, perform a sharpen on re-scaled images?
$watch_cache   = TRUE; // check that the adapted image isn't stale (ensures updated source images are re-cached)
$browser_cache = 60*60*24*7; // How long the BROWSER cache should last (seconds, minutes, hours, days. 7days by default)

/* END CONFIG ----------------------------------------------------------------------------------------------------------

Easy! Upload the altered file and make sure to create and upload your new image cache folder as well. As you can see in the snippet above, I placed mine in my /uploads/ folder.

The next step is only slightly more difficult, but only because you’ll need to work inside your .htaccess file. Open that and add the following code:

<IfModule mod_rewrite.c> 
# Adaptive-Images -----------------------------------------------------------------------------------

# Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:
# RewriteCond %{REQUEST_URI} !some-directory
# RewriteCond %{REQUEST_URI} !another-directory

RewriteCond %{REQUEST_URI} uploads

# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
# to adaptive-images.php so we can select appropriately sized versions
RewriteRule \.(?:jpe?g|gif|png)$ windcompanionwebdesign/wp-content/themes/wcwd-2013/library/adaptive-images.php

# END Adaptive-Images -------------------------------------------------------------------------------
</IfModule>

Again, I only had to adjust two lines. Line 27 tells the server which folder to watch. The /uploads/ folder, of course! And line 31 tells the server where the adaptive-images.php file resides. Again, this can be anywhere on your site but I think it makes sense to keep files you’re using for a specific theme inside that theme.

Step three is simple. Just place the following line into your header.php file, somewhere in the <head> before any other javascript is loaded:

<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>

That’s it, you’re done! Sit back and enjoy the peace of mind that comes from knowing that people visiting your site from mobile devices are being sent nice, mobile-sized images! Doesn’t that feel better?

Again, much thanks to Matt Wilcox. Make sure to check out his site: www.adaptive-images.com

The post Using Adaptive Images in a WordPress Responsive Design appeared first on Wind Companion Web Design.

Content Management

Want to add a new page to your website, write a new product review, add a another image to your home page slideshow? All these are basic functions built into a WordPress website.  Create, maintain, organize and categorize all your web content in one location that can be accessed from any computer — even from your mobile device.

Interaction

But simply adding new content is just the beginning. WordPress greatly expands the ability of your website to interact with your visitors and customers. This interaction transforms your website from a static, online brochure into a place to communicate and converse with your visitors. Questions and comments can be posted on your pages and your replies create an open dialog with the people you are trying to reach. Questionnaires and polls can be added to help you understand what your visitors are interested in. Visitors can sign up and register with your site to receive news updates. And all this communication and feedback can be maintained and managed from the administration area of your website.

Administration

The administration panel is accessed through a login form.  Once securely logged in, this area allows you to take complete control of your website — all content, plugins and extension modules, backups, even core theme files are accessible and editable.  Primarily, clients make use of the page and post editor screen where text and images can be added and formatted using a powerful wysiwyg editor.  WordPress also comes with a recently updated media area for easily uploading new images, videos and pdf documents.

Comparison

WordPress is not the only content management system out there.  Joomla, Drupal and Umbraco are some of the other popular CMS’s available.  There are dozens of others and some web design companies even create their own custom CMS.  Wind Companion Web Design has chosen WordPress for three key reasons:

1. Ease of use.  WordPress is the simplest to use while being powerful and extensible enough to fulfill the needs of most clients.
2. Large community.  WordPress is behind over 5 million websites and the availability of free and premium themes, plugins and tutorials cannot be matched.
3. Open source.  WordPress is free to download and is written in PHP.  That means any good developer can understand how your website works and how to maintain it which means you are not obligated to come to us when you need help — but we hope you do!

If you have questions regarding WordPress or would like to discuss having a custom WordPress website designed for you, leave us a comment below or Contact us today!

The post Why WordPress? appeared first on Wind Companion Web Design.

We are all aware that more and more people are browsing the web using their smartphones and iPads. The problem is, your new, beautifully designed and carefully laid out site might not look too great on a tablet-sized screen and will appear tiny on a phone — requiring a visitor to constantly resize and zoom in to see your content.

One solution is to design companion websites or apps for specific device sizes – one site for standard desktop computers, one for tablets and one for phones. The problem with this approach is not only can it become expensive but due to the growing number of different device sizes it quickly becomes impractical.

This is where responsive design comes in. A responsive website design and layout will dynamically adjust to the screen size it is being viewed on. This website is responsive. If you are viewing it on a desktop computer, try resizing the browser to see the effect. The content columns and embedded images will resize along with the width of the browser window. So, with a little extra work and foresight during design and development, one website is all you need to give your visitors a great browsing experience no matter what type of device they are using.

Now, responsive design is not the perfect solution for every situation. A major hurdle when designing for multiple devices is page load speed. Web pages that take 2-3 seconds to load on a wi-fi connected desktop may take 10-20 seconds to open on a 3G smartphone. The use of page caching and media queries to call smaller images may be enough to shorten the load time to an acceptable range, but if not, device specific designs and apps will need to be used instead.

Are you interested in creating a responsive website or converting your existing website into a responsive design? Contact us and let us know.

Update: I’ve added a new page for testing responsive design layouts. Click here to see how your current website looks across multiple devices.

The post Responsive Website Design appeared first on Wind Companion Web Design.

Details:

• site design by Fox Valley Web Design
• site development & programming by Wind Companion Web Design
• integrated WordPress content management system
• multiple slideshows
• product photo galleries
• trade show and events calendar
• interactive map locator pages
• e-commerce powered by the WooCommerce cart
• content updates by Wind Companion Web Design

The post Aacer Flooring LLC appeared first on Wind Companion Web Design.