Responsive Design for Mobile Viewing

There are essentially 3 components of a website- Style, Content & Behavior. We use HTML for the content, CSS for the style, and JavaScript for behavior. Now more than ever web designers need to be concerned with a new component, Viewing Experience. The popularity of smart phones and tablets means multiple screen resolutions to design for. Non Apple fans may argue this point but the iPhone changed the way we approach mobile web design due to the simple fact that it was the first smart phone with a really awesome web browser. Other manufactures followed along and there are now several mobile operating systems and some really great mobile browsers that are transforming how and when we view our favorite websites. When it comes to mobile viewing Jeremy Keith said it best, “Stop thinking in Pages. Start thinking in Systems.”

How do we best approach web design for the growing use of mobile devises?

Responsive DesignThe obvious solution may seem to just build an app. Having an app for your business is a great idea but for most businesses, especially smaller start-ups it can be a costly. To cover the majority of mobile users you would need effective app solutions for tablets and smart phones on both Apple iOS & Google Android just as a start. For mobile website specific design, a more cost effective solution is responsive web design.

In a responsive web design approach our goal is to create a seamless design experience so the website works equally well on any device. This website, matt540.wpengine.com is responsive. To see it in action on a desktop browser slowly drag in the corner of your browser inward. You should see the layout adjust itself to fit the new width of the browser. If you access this website from a smart phone you will see the layout looks different from the desktop and fits the resolution perfectly with an app like menu option. This is responsive design, the user does not need to pinch-and-zoom to read the text or worry about “fat finger” errors resulting in clicking the wrong hyperlink.

How does responsive web design work?

Responsive design uses a coding concept called media queries which detect the type of device you are viewing a website on and changes the site’s behavior accordingly. The width at which the website design begins to break down is where media queries are targeted in order to optimize the design. It does this with the help of a fluid grid. A fluid grid layout allows a website to squeeze onto a small mobile device or stretched across a huge high-res screen. Regardless of the screen size all of the elements in the layout will re-size their widths in relation to one another. With our fluid grid as a foundation we can use a series of media queries to essentially create if-then statements modern browsers will understand. When the website is viewed on an iPhone for example, a media query with a set pixel width of 320px is targeted and tells the browser to display the website in a certain fashion. A second breakpoint would be set at 600px to target the websites appearance in an iPad. This is simplifying responsive design extensively as there are several coding elements involved, but overall the concept allows us to define how our website will appear at different resolution breakpoints.

Looking to the Future: Start Small

As a web designer I am always reading. Whether its my favorite design blogs, books on web design theory or coding languages on thing is certain… there is a radical change in thinking among the design community about mobile. The Mobile First approach to design is becoming the new standard. When designing a website for a client I will now first envision how the site will appear in mobile and then scale up from there.  It is a different approach to designing a website and it represents the future and responsive design allows us to adapt to this change. The benefit to the client: You build a website once, and it works seamlessly across thousands of different screens.

The 540 List of Awesome WordPress Plugins

One of the greatest aspects of building a website on WordPress is the ability to integrate plugins to perform specific functions. Plugins extend the capabilities of your website and allow it to do things that would otherwise take hours and hours of serious coding.  There are a variety of different plugins for WordPress, literally thousands, so there is a good chance there is a plugins for just about every type of site enhancement you can think of.

Below is our list of Awesome Plugins for WordPress. Awesome is a subjective word, since some WordPress users may argue there is a better plugin in a particular category.. which very well may be true.  However, since developing custom themes and modifying existing client themes I have come to find these particular plugins never fail, are easy to implement for the most part and have good dev support.

Security

Wordfence Security
Wordfence is a free enterprise class security plugin that includes a firewall, anti-virus scanning, malicious URL scanning and live traffic including crawlers. Wordfence is the only WordPress security plugin that can verify and repair your core, theme and plugin files, even if you don’t have backups.

Better WP Security
The easiest, most effective way to secure WordPress.  Improve the security of any WordPress site in seconds. Includes several useful options, such as locking out users after multiple attempts and easy backups.

Akismet
This is one of the most widely used plugins to check your comments to see if they look like spam or not and lets you review the spam it catches under your blog’s “Comments” admin screen.
* You will need an Akismet API key. Keys are free for personal blogs, with paid subscriptions available for businesses and commercial sites.

 

Forms

Contact Form 7
A widely used form builder plugin that can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on. We use Contact Form 7 in most of our WordPress site builds.

Fast Secure Contact Form
Easily create and add forms to WordPress. Fields are easy to add, remove, and re-order. The contact form will let the user send emails to a site’s admin, and also send a meeting request to talk over phone or video.

 

Statistics

Google Analytics Dashboard for WP
The king of site analytics! The Google Analytics Dashboard will display analytics data and statistics inside your WordPress Dashboard. Track your WordPress site easily and with lots of metadata: views per author & category, automatic tracking of outbound clicks and page views.

 

SEO

All in One SEO Pack
All in One SEO Pack is a WordPress SEO plugin to automatically optimize your WordPress blog for Search Engines such as Google.  You can set custom title and keyword attributed per page or post.

WordPress SEO by Yoast
This WordPress SEO plugin goes beyond basic SEO functions and automatically optimizing and inserting the meta tags and link elements that Google and other search engines like so much.

 

Photo Management

NextGEN Gallery
One of the most popular WordPress plugins of all time, It provides a powerful engine for uploading and managing galleries of images, with the ability to batch upload, import meta data, add/delete/rearrange/sort images, edit thumbnails and group galleries into albums. It also provides two front-end display styles (slideshows and thumbnail galleries), both of which come with a wide array of options for controlling size, style, timing, transitions, controls, lightbox effects, and more.

Gallery
This plugin makes it possible to implement as many galleries as you want into your website. You can add multiple pictures and description for each gallery, show them all at one page, view each one separately.

 

Sharing

Socilable
It’s a banner that reminds your readers to spread the word. You can select and customize several features, such as text, color, and length in order to ensure your readers and their friends a great social experience.

Social Count Plus
Keeps a really nice tally of all your Twitter followers, Facebook fans, YouTube subscribers, Google Plus page followers, Instagram followers and more.

Share Buttons by AddThis
Help drive traffic to your site by helping visitors share, bookmark and email your content to over 330 services.

 

Must Haves

W3 Total Cache
A very fast caching engine for WordPress that improves the user experience of your site by increasing server performance, reducing the download times and providing transparent content delivery network (CDN) integration.

Google XML Sitemaps
This plugin will generate a special XML sitemap which will help search engines like Google, Bing, Yahoo and Ask.com to better index your blog. With a sitemap, it’s much easier for the crawlers to see the complete structure of your site and retrieve it more efficiently.

WP-DB-Backup
WP-DB-Backup allows you to easily to backup your core WordPress database tables. You may also backup other tables in the same database.

 

If you have a favorite plugin let us know and post in our comments.

Understanding Copyright Basics for Your Website

Copyright Basics

Understanding the basics of copyright is important when planning your website content, including both text and images. Before we dive into copyright and web design lets take a step back and understand what a copyright is. Copyright is a form of protection under the U.S. Constitution for original works of authorship, fixed within a tangible medium. Copyright covers both published and unpublished works. A copyright allows anyone to create a creative work and call it their own. In the United States a copyright lasts the entire life of the author plus 70 years. This rule applies to works you create for yourself. Work for hire copyright is slightly different. As a web designer I pass that copyright to the client, meaning after a website is created and payment is exchanged the client now owns the full rights to the design and content. A work for hire copyright last 120 years after it was created or 95 years after it is released to the public, whichever comes first.

How to Create a Copyright

copy1The act of creating a copyright is actually very simple. If I grab a blank piece of paper and drawn a smiley face stick figure I can say its copyrighted. It’s literally that simple, if you create something it belongs to you and you own the copyright as long as it is something tangible. You can’t copyright an idea unless it is integrated into something someone can see. If I have an idea for a great website I can’t declare it as copyrighted until I actually produce the website in a public forum. You do not have to register a copyright with the US Government when it is created, you will however have to register if you wish to bring a lawsuit against someone for copyright infringement. Registration outside of infringement is voluntary although many people choose to register to obtain a certificate and have their copyright recorded on the pubic record.

 

What You Can Copyright

Any kind of original content including articles, photos, advertisements, drawings, videos, code and custom layouts. Basically all elements of building the website can fall under your copyright.  Idea’s however can not be copyrighted. Also titles and slogans and your company name cannot be copyrighted. They can however be trademarked so you should consider looking into trademark law or speak with a lawyer on areas of your website which will not fall under copyright law but may afford additional protection.  For purposes of this article we will stick with the basic elements of a website which are copyrightable with one big exceptions, domain names cannot be copyrighted. Depending on the subject of your website content may fall into some gray areas of the law. For example, if you are food service provide or chef any recipes you post are not copyrightable. Your website design, images and other content certainly are but the recipes themselves are not. If you have questions on specific content on your website and whether or not you can classify it under a general website copyright I would check out copyright.gov which has pdf downloads available of various sections of the US Copyright Law.

Understanding Fair Use

If you see your work being used on the web without your permissions can you immediately send a cease-and-desist letter to the site owner? In some cases yes, but not always.  Fair Use is an exception to copyright law which lets individuals make use of your original work without your permissions. Schools for example can use copyrighted material for educational and teaching purposes. The press is another great example. Images and writings by individuals you see on news segments are all covered under fair use. Google would not exist is there was no fair use protection under copyright law.  As you build content for your website you should be aware that at some point your content, images, etc. could be used for educational purposes or news stories without your permission. So before you take action against a website or institution for “stealing” your work be sure you fully understand the purpose in which your copyrighted material was republished.