Responsive Design

It's been true for some time now that a majority of web site visits are from mobile devices. How many times have you looked up something on your phone's browser, or made a website purchase on your tablet? The point being, a website that is responsive to whatever device is being used is not a feature. It's an expectation.

The languages and tools of web development have quickly adapted to the web on mobile. There's simply no excuse for a website to have poor aesthetics or functionality just because its being viewed on a small device. Tools like a responsive grid design, flexboxes, media queries, and so on let your website look good on any device.

All of my projects to date have had responsive design (sometimes known as a "mobile first" philosophy.) Page design starts, by default, with the expectation that the site will be viewed on a mobile device. While larger desktop browsers can provide more features, such as animations, parallax effects, and so on, those are added after a good mobile layout is designed.

It is very common in web design to now include three horizontal bars (the ubiquitous menu icon) in an upper corner. It's a great way to move the menu off of the screen until its needed. My destop page has a permanent menu while the mobile menu is summoned with the icon.

In my experiences with WordPress, most templates handle responsive design fairly well, but there are always instances when the designer doesn't like the mobile layout (maybe the font ends up being too small, or there's not enough room to tap an item with a finger.) Consequently, there are a fair number of CSS edits to make Bluebird Metals look good on smaller devices.

Squarespace mobile layouts tend to be very simplistic (in a good way.) . The minimalist design ensures the screen space is used efficiently to convey your message. You'll note here that the horizontal slider on the desktop page is made vertical for smaller devices. The menu here is accessed from the menu link at the top.

Content Management

A key element of web design is understanding how the site will be maintained. It's tempting to think that once the design is complete and launched that it's somehow self-maintaining. If it's a blog, how do you add new posts? If it's a store, how do you take orders, update products and inventory, and communicate with customers? Will the owner of the site do this maintenance? How skilled is this person at these tasks?

Simple websites with static HTML pages, which convey only information (like a resume, or How To page), might not need much upkeep. On a blog site however, a CMS (Content Management System) would simplify the creation and modification of posts and comments. A start-up company may start with a vanity site, but migrate to eCommerce or other functionality. In such cases, a CMS would help in adding and maintaining functionality. Content management via WordPress, Wix, or Squarespace offer the potential of tremendous functionality with a comparatively small investment in user time to understand and use the tool. These are very complex CMS systems, often lumped into the category of Web Site Builders.

This site has a simplistic, home-grown CMS. It allows the user to create and edit menu structure, manage comments and upload content. It would be ideal for running a small blog site, as the comment system allows the owner to easily manage communication with visitors. The downside is that it requires skilled intervention if there's a change in functionality.

Content Management in the form of WordPress, Wix, or Squarespace allows the user to add very complex functionality, like widgets, eCommerce, blog, and more. These systems also have the advantage that many of these plug-ins are intensely tested by companies who have a vested interest in providing a good quality feature (credit card payments are a prime example.)

Ultimately, a thorough understanding of the owner and site goals will drive the decision as to how to configure and run the site.

The CMS for this site is very simplistic, but offers a number of basic functions. Pages and Subjects can be added, edited and deleted. Administrators can be added and their access adjusted. Posts and comments can be managed. There is also a file upload tool to facilitate the transfer of files from a client.

WordPress sites have access to an enormous variety of functionality. So much in fact, that it's often considered a challenge because finding the right plug-in that plays well with a chosen template can be a trial-and-error affair.

The Squarespace interface is really easy to use. Functionality is consistent accross templates. There aren't as many choices for adding functionality, but they are consistently high quality.

eCommerce

My experience with eCommerce includes various plugins for WordPress, such as WooCommerce or Give, and the store functionality built into Squarespace. There are a number of reasons why I haven't delved into this subject from a custom coding perspective. More on that below.

Both WordPress and Squarespace offer online store functionality. Features include product and inventory setup, credit card payments, shipping labels, customer communications, email promotions and discounts, and analytics. There are many more features.

WordPress offers a staggering number of plug-ins for these features. Basic functionality is often at no cost, but more advanced features are not free. High flexibility comes at the potential cost of poor interactivity with other templates or plug-ins. There is a community rating system for WordPress plug-ins and this can help in choosing the right set of plug-ins that play well with the rest of the site, but many times this decision comes down to previous experience with a particular plugin.

Squrarespace is more of an all-in-one solution. All of the basic functionality can be added to virtually any Squarespace site, it's just a matter of plugging in the products and related information. However, Squarespace tends to be a bit more expensive because you get the entire feature set for any site you build.

Hand coding this type of functionality may pose some additional risk. The functionality offered by WordPress and Squarespace (and others) is highly tested from both a code validation and actual use perspective. The companies offering these plug-ins have high motivation to ensure these features work and are secure (you are paying them for each transaction). It's highly unlikely that any custom code could match the level of both functionality and security that these products offer, hence my reluctance to set up an online store in this way.

A word about security. The use of SSL (Secure Socket Layers) is a foregone conclusion when setting up an online store. SSL allows the browser to communicate critical customer information securely. We are repeatedly told (and rightfully so) not to order from or exchange sensitive data with a website when the browser doesn't show the lock icon in the address bar. SSL provides this security and peace of mind to a customer when ordering or exchanging information online. Security requirements and expectations will only grow in the future, especially when data exchange occurs.