News from Select Interactive

Development Tools and Workflow

2/15/2015 9:25:00 PM

Note: Updated on February 15, 2015 - Initially published on June 6, 2012.

Recently many new developer tools such as project boilerplates, CSS preprocessors, CSS and JavaScript libraries/frameworks, and build scripts have been released to improve and optimize the development experience. Incorporating these tools required some change to our development environment and workflow. For example, we no longer write basic CSS, we write Sass which compiles into CSS.

So what have we done to integrate these tools into our development stack? Below is a list of my development tools and project workflow.

Development Tools/Environment

IDE: Microsoft Visual Studio 2013
Extensions: Web Essentials 2013, Sassy Studio
GruntJS to do a number of tasks - Watch our .scss files for changes, compile with Compass and output as CSS via Grunt JS Plugin. Watch our JS files for changes and run JS Hint against them via GruntJS Plugin. Watch all project files and reload our browser when any changes occur during development via GruntJS Plugin. A custom build task to optimize all images, save .jpg images as progressive jpegs, minify and concatenate all CSS and JS files.
CSS Authoring: Sass and Autoprefixer using Susy
JavaScript Libraries: After dropping support for IE8, we no longer use jQuery or Modernizer in our typical project development.
JavaScript linting and compilation: JS Hint via GruntJS Plugin and Uglify JS via GruntJS Plugin.
Package Management via Bower
ASP.NET 4.5
MS SQL Server 2012
Hosting on Windows Server 2012 running IIS8
Development in Google Chrome (both Stable and Canary) using the Chrome Dev Tools
Adobe Photoshop & Illustrator

Development Workflow

Begin with an in-house project template based off HTML5 Boilerplate, configured for ASP.NET 4.5 on IIS8
Implement site/app design and incorporate Responsive Design Strategy - HTML, Sass
Implement functionality - JavaScipt, .NET Webservices, SQL
Testing & Performance Tuning on local machine with the Chrome Dev Tools and Google Page Speed Insights. For website projects, we will test in Chrome, Firefox, Safari, IE 9-11, and a variety of mobile devices (iPhone/iPad, Android phones and tablets).
Build & Optimization - GruntJS for CSS concatenation, minification, and image optimization. ASP.NET compilation and build.
Setup and integration of Google Analytics and Google Webmaster Tools accounts
Publish

Build a Brand with Slant Partners

2/12/2015 7:08:13 PM

Slant Partners, founded by Rebecca Cole, is a Dallas, TX based design-driven marketing firm. As a full-service agency, Slant functions as your outsourced CMO or marketing department providing everything from branding, website design, event planning, direct and email campaigns, interior and exterior installations, advertising, press and more.

With the belief that brand identity is the most potent and cost-effective marketing tool, Slant strives to create powerful brands that drive greater profits.

Slant brings inspring, creative energy to every project while providing an unmatched level of expertise in project execution.

To learn more visit www.slantpartners.com or reach out to rc@slantpartners.com.

Below are a few examples of projects we have teamed up where Slant leads design direction --

www.openra.com

theannualreport.lynnllp.com

www.altcolaunch.com

Join the Select Interactive Team - Front End Web Developer

2/9/2015 10:33:00 AM

Join our fast-paced development team and begin building dynamic websites and web apps using HTML, CSS, and JavaScript.

Responsibilities

Analyze, design, and develop front-end websites and web apps.
Implement designs from PSD or AI using HTML and CSS.
Manage and support existing sites and applications.
Participate in project planning and research.
Interact with clients and testers to gain guidance regarding user experience and accessibility.
Stay up-to-date with latest web technologies and trends.

Prerequisites

Our primary criteria for any new member of our team is a good understanding of programming constructs, the ability to solve problems and find answers on your own, as well as the ability to communicate well with others on the team. The following is a list of technologies that members of our team utilize and experience with these technologies is a plus, but not necessarily a disqualification to joining our team. If you can demonstrate your eagerness to learn and ability to adapt to new technologies we want to hear from you.

HTML, CSS, Sass, JavaScript, GruntJS, ASP.NET, MS SQL, Adobe Photoshop, Adobe Illustrator
IDE's: Microsoft Visual Studio and Microsoft SQL Server Management Studio.

Employee Benefits

Full-time team members are eligible to participate in our benefits programs, which include: medical, dental, disability insurance, and 401(k). Furthermore, we offer paid time off for vacation, holidays, and personal reasons.

Select Interactive is an equal-opportunity employer and does not discriminate on the basis of ethnicity, religion, sex, age, national origin, disability, military status, or any other reason prohibited by law.

If interested, please send your resume to jeremy@select-interactive.com.

Live Vicarious. Witness the world. Live.

10/17/2014 5:46:15 PM

A new startup that is creating techonology to connect people around the world to live events using GoPros and smartphones. The new site looks amazing and the product launches in early 2015.

How We Use Susy for Quick, Easy Layouts

10/3/2014 10:46:03 AM

To help us quickly iterate through the development process we start all projects with our project boilerplate which has some (what we think) good base level Sass + Susy. We've mentioned before how we use media queries with Sass and now we'll briefly explain how we use a few classes with Susy to get started with basic layout.

Our default base Susy settings:

$total-columns: 12;
$column-width: 4em;

$susy: (
  columns: $total-columns,
  column-width: $column-width,
  gutter-position: inside-static,
  gutters: 1/4,
  math: fluid,
);

.row {
  @include container(100%);
}

And now our loop for creating up to a 12 column grid layout:

@for $col from 1 through $total-columns {
  .row-cols-#{$col} {
    .col {
      @include span(($total-columns / $col) of $total-columns);
    }
  }
}

And the basic use case for creating a multi column container:

<-- Basic 3 column layout -->
<div class="row row-cols-3">
  <div class="col">I'm column 1</div>
  <div class="col">I'm column 2</div>
  <div class="col">I'm column 3</div>
</div>

See an interactive example on Sassmeister.

To integrate a mobile first strategy and use media queries, it's pretty simple -- we start off with all columns at full width and then update our loop with a breakpoint:

@for $col from 1 through $total-columns {
.row-cols-#{$col} {
.col {
// By default, always be full width - mobile first
// Include margin-bottom to space out stacked columns
@include full;
margin-bottom: gutter();

// At our breakpoint called tablet, start to resize
@include mediaquery(tablet) {
@include nobreak;
@include span(($total-columns / $col) of $total-columns);
margin-bottom: 0;
}
}
}
}

Nothing overly complex here, just some quick css that allows to get basic column layouts up quickly.

2014 Fall Conferences - Edge, Front Porch, Chrome Dev Summit

9/24/2014 8:57:05 PM

Edge 2014 - San Francisco 9/20

Our first stop this fall was at Edge Conf 2014 in San Francisco, hosted by Adobe. A bit different from most conferences, this event focuses on the discussion of future web technologies that have not quite been standardized yet. Panelists and attendees discuss current problems facing the web community, such as image formats, layout performance, and package management with the hope of finding a best practice we can all build toward in the future.

An invitation only conference, this event looks to bring the brightest minds in the web development community together. A combination of browser creators, API developers, standard's members, mobile specialists, and more, it's a powerful gathering of the development community.

Some photos from the trip --

Edge Conf Stage

Image Formats Panel

Adobe's Office - Hosting Edge

Bike Wall in Akamai - Hosting Happy Hour

Front Porch - Dallas - 10/7

Always looking to support the local progress of web development in the Dallas/Fort Worth market, we were excited to have the opportunity to sponsor Front Porch 2014. With a focus on front-end development, specifically performance and workflow, this conference had our name written all over it.

Chrome Dev Summit - Mountain View - 11/19-11/20

Being my favorite conference from 2013, I had this one circled on my calendar all year. The Chrome Dev Summit is hosted by Google, obviously, and puts developers directly in touch with the Chrome Dev team and Chrome Engineers. No better opportunity to learn from the Chrome team and offer input on future browser enhancements.

New Williams Trew Search and Listings Provide Huge Boost to User Engagement

6/25/2014 7:13:46 PM

Last month we launched a completely refactored search engine, redesigned interface, and listing pages for the Fort Worth real estate agency, Williams Trew Sotheby's International Realty -- www.williamstrew.com. After 5 weeks of action, we are extremely happy with the results we're seeing.

A quick comparison of the 35 days prior to launching the new site vs the first 35 days after:

Averaged 3.06 pages per visit then, 5.47 pages per visit now
Averaged 3:28 time on site per visit then, 7:13 now
Desktop users were spending 3:47 on the site then, and now spend 8:24
Tablet users were spending 4:20, and now spend 8:07
Phone users were spending 1:49, and now spend 3:34
Had a bounce rate of 33.59% then, down to 15.17% now

We also wanted to collect better data of the # of searches, properties viewed, and monitor the performance of the site:

We’ve handled 38,098 searches at an average of 1.73 seconds per search
39,760 properties have been viewed with an average page load of 1.38 seconds
Property photo galleries have been opened 31,207 times
Users have opted to view the property on Google Maps 2,862 times

What we’ve taken from this data is a huge boost to user engagement and some very exciting performance numbers in terms of search speed and property load time. We've seen users spend over twice as much time on the site and we've cut down over half the users that would visit just one page.

It's safe to say we're pretty happy with the results so far and we'll continue to improve search times as we gather more data from search results.

We Are a 2014 GD USA Web Design Award Winner

4/25/2014 5:54:18 PM

We are very pleased to announce that our very own www.select-interactive.com website has been selected as a winner in the 2014 American Web Design Awards from GD USA in the website design category.

We spent many, many late nights working on the design for version 2.0 of our company site (learn about our design strategy), and are very proud to receive recognition for it.

GD USA defines this competition as, "This is our annual showcase of the power of design to enhance websites and online communications." We strongly believe that this version of our site truly improved our ability to share information with clients and other developers, as we hope to help shape the development community with our experiences and strategies.

Special shout out to designer Candice Riley Campbell of Stream Realty Partners, Atlanta, who also won an award for her design of www.regionsplaza.com in the responsive design category!

Media Queries with Sass

2/11/2014 11:49:42 AM

To help us build responsive websites, we use a Sass mixin to generate numerous media queries that will be used to set styles for different device dimensions. Below, I'll outline a very basic example of how we do this.

First we setup our breakpoints, which for this example are just generic values. We let the content/design of each project dictate what we ultimately set our breakpoints at.

// -----------------------
// Media Query Breakpoints
// -----------------------
$bp-massive: 1800px;
$bp-wide: 1350px;
$bp-large: 1024px;
$bp-med: 768px;
$bp-phone-port: 320px;

Then we create our Sass mixin.

// Base Font Size
// From our _variables.scss partial
$base-font-size: 16px;

// -------------
// Media Queries
// -------------
@mixin mediaquery($point) {
// Very large screens 1800px +
@if $point == massive {
@media (min-width: $bp-massive / $base-font-size + 'em') { @content; }
}

// Wide screens 1350px+
@if $point == wide {
@media (min-width: $bp-wide / $base-font-size + 'em') { @content; }
}

// 1024px+
@if $point == large {
@media (min-width: $bp-large / $base-font-size + 'em') { @content; }
}

// 768px+
@if $point == med {
@media (min-width: $bp-med / $base-font-size + 'em') { @content; }
}

// Retina Screens
@if $point == retina {
@media (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3) { @content; }
}
}

You should note that we convert the breakpoints to em values to hanlde user zoom levels in the browser.

Finally, how we would call the mediaquery($point) mixin.

.col {
  margin: 0 0 10px;
  padding: 10px;
width: 100%;

  @include mediaquery(med) {
float: left;
   width: 50%;
}

  @include mediaquery(wide) {
width: 25%;
  }
}

We start styling our selector with mobile first styles and then use our mixin to set styles for larger dimensions. In this basic example, our .col elements grow from 1 column, to 2, and then 4.

This strategy helps us quickly and efficiently implement a responsive design, as well as keeping it in an easy to maintain framework. No need to memorize the media query syntax or the pixel numbers used elsewhere. A few breakpoint variables and our media queries are consistent throughout the entire project. Also, by using this mixin, our code for each selector remains in one place -- within the initial selector declaration. We don't have to go searching mobile stylesheets or other files to find code that updates our base styles.

CSS Style Guide

1/3/2014 1:19:43 PM

This document defines formatting and style rules for authoring CSS. It aims to improve project collaboration and code quality.

General Principles

Don't try to optimize code during development, keep it readable. Use build tools to optimize prior to use in production.
All code should look as if one person wrote it.
Never mix spaces and tabs for indentation. Always use 4 spaces (1 tab) for white space indentation.
All code should be lower case -- selectors, tags, properties, values, etc...
Use meaningful ID and class names that reflect the purpose of the element. The names should be as short as possible, but as long as necessary to convey the meaning of the element. Separate words in ID and class names by a hyphen.
Use shorthand properties where possible.
Avoid specifying units for zero-values (margin: 0;).

General Formatting Rules

Use one selector per line.
Include a single space before the opening brace.
Use one rule declaration per line.
Include a single space after the colon of a rule declaration.
Use double quotes.
Separate each ruleset by a blank line.

Declaration Order

Put declarations in alphabetical order to achieve consistent code in a manner that is easy to remember and maintain.

.element {
background: #fafafa;
   color: #333;
   margin: 0 auto;
   padding: 20px;
   width: 500px;
}

Block Content Indentation

Indent all block content, rules within rules, to reflect hierarchy and help readability.

@media screen and (min-width: 1000px) {
.column {
   float: left;
   width: 50%;
   }
}

Comments

Comments should be simple and consistent within the code base.

Place comments on a new line.
Make use of comments to break CSS into sections.
Comments beginning with // can be used with preprocessors - internally we use Compass.

// ----------------------------------
// Section comment block
// ----------------------------------

/**
* Short description for following section
*
* TODO: if additional work is needed for this section, provide information
* for it here. Multiline comments should be additionally indented by 2 spaces.
*/

/* Single line comment */

Preprocessors

Place @extend statements at the top of declaration blocks.
Place layout @include's (such as Susy) before @extend. Otherwise place all @include statements at end of declaration block.

.element {
   @include container;
   @extend .some-rule;

   background: rgba($background, .8);
   color: $white;

   @include transition(background .35s ease);
}