Category Archives: Coding

Coding: important + invisible

The unseen best practices in coding and why they matter.

web development process

Design is all about the stuff you can see – the clean flow of information, the pretty pictures, the right choice of colors to inspire your audience. No way. Give me Times New Roman and #000 (black)/#fff (white) any day.

So, this is probably why I never made the design team.

Instead, I work on the structure that supports those designs, and helps them respond to different devices and load in your browser window – whichever one you choose to use. Any code I write needs to be written for flexibility, so you’re not boxed in later on in your site’s lifespan. It must be updateable, efficient, and able to respond to a myriad of user possibilities with relative grace.

The most important coding efforts are the ones you can’t see. So today, I want to highlight a few best practices that I use when coding here at The Simons Group, and why they matter to your project.

Version Control

What It Is:

Version control allows us to take snapshots of the project code so we can see exactly what’s changing over time. It also makes it very easy for me to share my code and work on it collaboratively with other developers.

Why It Matters:

We’re always looking for ways to be more efficient while we’re on the clock. Having sound version control practices in place dramatically reduces troubleshooting time by illuminating precise changes and creating several points in history we can easily roll back to as needed. It can also help to quickly recover in the case of a new update causing a compatibility issue.

DRY Coding

What it is:

DRY stands for Don’t Repeat Yourself. DRY coding means you’ve taken time to think about what you’re going to do with the code, and organized things into a clean bundle. For example, if you have a single primary color in the site, you’ve stored that as a variable (using a language like SASS) so that you call it once instead of writing it out everywhere.

Why it matters:

Again – efficiency is key. Say in two years, your company goes through a rebrand and changes its color from #273758 (medium blue) to # 010825 (dark blue). Think of how simple and seamless this change is if you only need to make it in one place.

It matters to browsers, too. Speed matters, down to milliseconds, whether you’re going for search engine ranking or user experience. Sites with WET (write everything twice) or CRY (constantly repeating yourself) coding create redundancy, which leads to larger page sizes and longer loading times.

Development Tools

What they are:

Sometimes the magic lies in good runtime libraries and package managers (like Node.js, Bower) that help developers quickly add in new features, code snippets, and extensions that can be used in the site immediately.

Sometimes it’s in the setup – using a fast local development environment like Vagrant, or a tool like Browser Sync to improve coding efficiency. Or the right text editor to code (my favorite is Atom) and sync flawlessly with your version control program.

Why they matter:

Coding is like woodworking – part skill and part tools. Having the right suite of development tools at hand, and being versed in using them appropriately, is the hallmark of an experienced developer. Tools might enable functionality, or just make development time more meaningful.

The beauty in efficient coding lies beneath the surface.

So don’t ask me to help you understand which colors work well together. Instead, call me when you need a coding ninja, silent, swift and dangerous with a pair of {brackets}.

How do you use coding to support web design? Tell us about it in the comments?

Gridlocked: Why coding grids matter for designers

image002I’ve spent my month knee-deep in web design projects, and I’m married to a developer. Avoiding the silent treatment during the coding phase of my projects is my obvious motivation for using coding grids. Beyond marital bliss, though, there are a few reasons why coding grids are so meaningful to the design process.

Designers use grids in web design to create visual balance; they serve as an invisible skeleton on which to lay out our designs. Developers use grids to help organize and automate the way a site collapses by screen size, not only making the site visually appealing, but also creating a framework for purposeful responsive design.

Read more…

New project: Altura Group website

Screen Shot 2014-09-23 at 11.42.44 AM

We recently completed a website for Altura Group, a startup consulting firm. Although they are a startup, founder Dave Marshall has years of experience helping businesses achieve their long- and short-term goals.

We’ve worked with Dave and his right-hand woman, Suzanne Jacob, in the past on videos and a website, so for them it was a no-brainer to reach out to us to develop a website for Dave’s new venture.

Working closely with Suzanne, we developed a modern and professional website to help Dave secure new business. The site uses large, inspirational imagery with Altura’s carefully crafted copy to promote trust, strength and relationship- building.

We’re excited about this site and want to show it off. Check it out here and let us know what you think in the comments.

Orchidia: Exhibiting fresh style through a new website

orchidia-ss

We’re pleased to announce the recent launch of Orchidia Fragrances’ new website!

The website is the vision of Ross Sprovieri, executive vice president of Orchidia. He wanted the site to be clean and elegant and to promote user interaction in a unique, yet intuitive way.

The result is an airy design with minimal distraction and easy navigation. Instead of a text-based, top-level navigation, we integrated the elemental icons used to promote the four pillars of the company’s mission: transparency, insight, adaptability and sustainability.

We designed and coded the site as a custom theme for integration with WordPress – our favorite content management system (CMS). The site’s embedded responsive design allows it to adapt to different browser window sizes and viewing devices, such as tablets and phones. The user base for the site is worldwide, so we built the site to accommodate three translations: English, Spanish and Mandarin.

During the development process, we trained key individuals at Orchidia to use WordPress and how to manage the nuances of this particular CMS site. The training allowed the Orchidia team to add content while we were still working on the site development. This combination of efforts allowed for a quicker site launch, and allowed us to troubleshoot and debug any issues with real content in place.

Check it out and use the comments below to let us know what you think!

Planning your website for on-the-go — responsively

computersWhen it comes to websites these days, the focus is not only on a desktop experience, but also on a mobile experience. As mobile devices are fast becoming the norm to view websites and take in content, now is the time to start thinking about how people are getting your content.

One of the ways designers and developers handle mobile is through responsive design. Responsive design is a method of designing and coding where the content adjusts to different screen sizes and resolutions. This method allows the content to scale appropriately on each device (phone or tablet) and have elements appear and disappear based on want you want your visitors to see.

For example, if you have a really large navigation menu, that might work great on a desktop screen; however, it may take up too much space on a mobile phone. You don’t want people to only see your menu when they first navigate to your site on their mobile device — you want them to see your content. With responsive design, we can create an icon that appears only if someone is on a mobile device, which, in turn, allows the person to click it and reveal a streamlined navigation menu. This allows your content to remain in the forefront.

Another thing responsive design is fantastic for is when people resize their browsers in the horizontal plane (wider or narrower) on their desktop computers. Designers and coders can have content move to different areas of the screen to allow for a greater user experience for more people and give visitors the most important information right away. Websites don’t live in a vacuum and user interaction is a key component that drives our work.

There are many mobile strategies out there, with responsive design being one of them. When planning your mobile site (or main website) using responsive design, think about your audience and the content they’ll want. This preplanning (or postplanning if your existing site is moving to mobile) will help you create the best experience for your visitors.

Let us know what your mobile strategy is or what you’d like to do in the future in the comments below.

Thought leadership, online storytelling take center stage on ForteONE site

forte-screenshotForteONE helps mid-market companies set goals and achieve them. But the management consultancy recently set some goals of its own; namely, to launch a new website that would be built around two concepts: 1) sharing its elite team’s expertise with a wider audience, 2) upholding the writer’s adage “show, don’t tell.”

From initial brainstorming sessions to the launch, we worked with ForteONE to define, refine and implement features and requirements for its new website, including: creating designs complementing the firm’s existing color scheme and marketing collateral; ensuring content consistency and message positioning; and developing the capabilities to allow ForteONE personnel to post white papers, case studies, videos and other thought leadership content directly to the new website.

We developed the new website, copy and design around a content management system. We also are completing an ongoing video series for ForteONE, which will use the new website as a platform for showing its clients’ success stories across a variety of media channels.

Take a look. Visit www.ForteONE.com.

What do you like best about the new ForteONE website?

Tired of bunk form submissions? Validate!

Contact forms are everywhere. Almost every website built today has some sort of form that allows users to enter their contact information, whether it’s just an email address or something a bit more involved.

Forms are a great way to encourage user interaction with your site and your company while collecting meaningful information about your users. Otherwise, the visitor would need to click on an email link that opens their email program – provided they use an email program. If not, the process becomes even more time-consuming, requiring the user to type out an email and then send it off. A form expedites this process by allowing users to fill out a few fields and submit their information right then and there.

But with forms come bots. Bots are automated, Web-crawling scripts that enter random information into forms they find on websites. Their intent is to email or post spam messages, or even hack websites by using SQL injection methods (a fancy phrase for taking over your database and, in effect, control of your website).

Read more…