KWITConsulting
.00

BLOG

.01

The Latest

My Social Feeds & Updates
Woodlawn Avenue, Asheville, NC 28801
kevin@kevinw.me
+1 732 618 5084
Hello, my name is Kevin and I'm a remote Front-End Website Developer & IT Consultant currently residing in Asheville, NC. I am passionate about programming, permaculture, travel, native cultures, and great food. Welcome to my personal and professional portal. Available as contractor

Client Testimonials

“Working with Kevin was a pleasure! We had a big project to accomplish and he guided us through every step of the way. He was very organized, thoughtful, professional and creative. He communicated honestly and timely and always delivered on his promises. Kevin helped us stay on budget and in the end created beautiful materials for our practice that our patients are actually remarking on. I would recommend working with Kevin to anyone and will use him on any and all future graphic needs.” —Christie & Aryn Gabai

Facebook

ID: KevinOrin

Twitter

ID: KevinOrin

Kevin Orin Williams's Twitter avatar
Kevin Orin Williams

6 Essential #Drupal #InterviewQuestions - t.co/iSfPsoRUPM

Kevin Orin Williams's Twitter avatar
Kevin Orin Williams

10 Web Scraping Tools to Extract Online Data t.co/DR2d5bCPNA

Kevin Orin Williams's Twitter avatar
Kevin Orin Williams

It's the perfect time for a new #web #browser on the market and the perfect time to try #Vivaldi t.co/vUPvCxt89N

.02

Résumé

I've worked or work for these great companies
  • May 14’
    Current
    Remote

    Sole Owner, Website Developer, Consultant

    KW WEB & IT CONSULTANT L.L.C.

    All-around website developer & consultant serving the global marketplace. Preferred role of rapid HTML/CSS/JS prototyping, MVP development, and UX development. Proficient at working solo or with small-large teams in various environments and MVC frameworks including Telerik, Laravel, Symfony & Ruby as well as theming for content management systems such as WordPress, Joomla, Magento and Drupal.

    Key Contributions:
    - {Everything}

  • January 11’
    Current
    Princeton, NJ

    Front-End Developer

    Publishing Resources Inc. - PRIworks.com

    Hired to support in design and coding of web, mobile and email projects. Grew into the specialization of front-end website development, Linux development and systems administration as part of the Core Team.

    Key Contributions:
    - Front-End guru responsible for taking designer compositions and user-interface designs and rapidly building html, css and jquery prototypes and web and mobile applications.
    - Key role in full cycle development of over 8 web & mobile application projects.

  • January 09’
    June 10’ [1yr/6mo]
    Jersey City, NJ

    Website Developer

    InterRep LLC

    Lead web developer managing a small team of three for a start-up company specializing in Strategic Internet Marketing and Web Development. Was also introduced into search-engine-optimization & web analytics.

    Key Contributions:
    - Led team in learning and adopting search-engine-optimization best practices
    - Spearheaded the full cycle development of web applications.

EDUCATION
  • 2008
    2011
    Pompton Plaines, NJ

    Bachelor of Applied Science [BASc]

    William Paterson University of New Jersey

    Formal studies in Computer Science
  • 2006
    2008
    Lincroft, NJ

    Associate of Arts and Sciences [AAS]

    Brookdale Community College

    Formal studies in Marketing and Computer Science
.03

Publications

Articles & White Papers
SORTING BY DATE
18 Jul 2012

The peace bridge: Tools and practices to help designers and developers work together

Publishing Resources Inc. | priworks.com

Part 2 in a 2-part series about the mutual goal that website designers and website developers share . . . If a website suffers from design or programming problems, your end user will not be a user at all, they’ll be gone. So, what are the best strategies for achieving effective communication between designers and developers?

Blog Articles Kevin Williams
thumb-pub-peach-bridge-i

The peace bridge: Tools and practices to help designers and developers work together

Kevin Williams Blog Articles

Part II. Communication

The mutual goal that website designers and website developers share is to create compelling, informative, and well–structured websites. It requires a close working relationship. As with much in life, this relationship relies on effective communication. If a website suffers from design or programming problems, your end user will not be a user at all, they’ll be gone. So, what are the best strategies for achieving effective communication between designers and developers?

Designers provide site visitors with a visual experience that may include interaction such as animation, drop downs, popups, sliding galleries, etc. Designers bring balance to the page. They combine a knowledge of how colors convey ideas, the use of white space for balance, and more, to form the user experience.

Developers, though always willing, might not be able to implement exactly what a designer intended. The developer’s function—the technical perspective of the site user’s experience—may conflict with the designer’s form. Being able to advise on alternatives and knowing what enhances or hinders loading time, what visual effects may be unnecessary, or what is just downright impossible—is a large part of how the developer adds value to the user’s ultimate online experience.

Developers See It First

Before a comprehensive design is shown to a client, it is a good idea to review it beforehand with the developer. If a specific function is unclear or unnecessarily complex, if a better alternative exists, or is impossible to code (rare), the developer can spot these issues before a client reviews it. This prevents retracting features you may have already promised, and, perhaps even worse, revealing a lack of communication between the designer and developer. That said, a good designer will already have a strong background on what will work from a developer/programmer perspective.

Crystal Clear and Unassuming

Designers should discuss all the functions of a proposed design with the developer, so they are both crystal clear on what is possible based on the design, and also what other options might be available. A lot of time can be wasted designing with the intent of creating one function, while the developer is coding with the intent of creating something else. If a navigational menu design is supposed to perform multiple functions, the designer needs to be clear in conveying the details to the developer, who can then confirm they understand by stating the plan back to the designer. Developers should not assume how something is expected to function—ask. If there is any doubt, explore further. A world–class developer will not rule out any function of good design until they have exhausted all possible solutions. Be open to a challenge.

Learn From Each Other

If a developer renders images in a format the designer didn’t intend, or somehow impacts the harmony of the designer’s intended form, the designer should let them know why it doesn’t work and what format works best. If a designer explains the logic behind an aspect of their design and the developer determines it won’t work, they should let the designer know why it won’t work and provide solutions that do. Whether designer or developer, explaining your intentions logically lets each learn from the other, and prevents repeat mishaps.

In Part III, the final in our series, we will discuss best practices for designers and developers that result in an efficient and harmonious work flow.

Read Part 1 here.

27 Jun 2012

Website fonts that go beyond the basics

Publishing Resources Inc. | priworks.com

Every now and then designers and/or developers run into the problem of designing a website or application that includes non-web fonts because not all fonts are installed on all end-user computers or other devices . . . What follows are some solutions for using the exact font your design requires, or at least a font reasonably close.

Blog Articles Kevin Williams
thumb-pub-web-fonts

Website fonts that go beyond the basics

Kevin Williams Blog Articles

Every now and then designers and/or developers run into the problem of designing a website or application that includes non-web fonts because not all fonts are installed on all end-user computers or other devices. Therefore, one often settles for one of the 11 less-appealing core web-fonts, which include Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman,Trebuchet MS, Verdana, and Webdings. These are the standard fonts used by all devices. It’s been the only way to ensure that all website visitors will see exactly what the designer intended. The only alternative is to render your type as graphics, which is impractical. What follows are some solutions for using the exact font your design requires, or at least a font reasonably close.

Here at PRI we use the first two below. We begin with my first choice, Google Web Fonts.

Google Web Fonts

Google continues to roll out new products and services and in May 2010 the Google team introduced Google Web Fonts. The site offers hundreds of free, open-source fonts that are already optimized for the web. What I like most about Google Web Fonts is ease of implementation. You can use any of Google’s optimized fonts in three easy steps:

  1. Select a font from their library
  2. Include a link to the font in your site or web page’s code. For example: <link href=’http://fonts.googleapis.com/css?family=Condiment’ rel=’stylesheet’ type=’text/css’>
  3. Apply the font name to your CSS styles. For example: font-family: ‘Condiment’, cursive;

Typekit

Typekit offers a fast and reliable method of using real fonts on your website. Acquired by Adobe in October 2011, Typekit offers access to hundreds of web fonts by simply adding a line or two of code to the header of your web pages. However, unlike Google Web Fonts, Typekit’s free service plan only allows for one website and two fonts. Free plan users also have to slap a badge on their site that links back to the Typekit website. Typekit’s pricing structure starts at $24.99 per year, which may be an affordable solution for their full library of over 700 fonts.

Cufón

Another popular solution is Cufón, “fonts for the people.” Cufón is a font-replacement solution that uses JavaScript and vector graphics to output fonts from TTF (TrueType), OTF, (OpenType) or PFB (Printer Font Binary) font files. One of its main benefits is that no plug-in is needed, making Cufón fully compatible in all major browsers.

While all of these options work pretty well across all modern web browsers, the quality of the text varies and is dependent on operating systems, web browsers, and even your monitor. Font sizes 30px or larger may also be best served as images, with the copy referenced in the image ALT tag for search and accessibility purposes. The images below illustrate how the same web font (Lobster), set at the same font size (72px), can differ in just two different versions of the same web browser. The first shows how the Lobster font at 72px appears in Internet Explorer 9, while the second (smaller and slightly more pixelated) shows the same font and size as it appears in Internet Explorer 8.

Lobster font, 72 px, in Internet Explorer 9:

 

Lobster font, 72 px, in Internet Explorer 8:

Other popular web-font solutions include the CSS3’s @font-face method, Fahrner Image Replacement (FIR), andScalable Inman Flash Replacement (sIFR).

So, with thousands upon thousands of fonts and so many solutions to implement them on the web, we do not need to rely upon default core fonts, anymore.

22 May 2012

The peace bridge: Tools and practices to help designers and developers work together

Publishing Resources Inc. | priworks.com

The mutual goal that website designers and website developers share is to create compelling, informative, and well–structured websites. It requires a close working relationship. As with much in life, this relationship relies on effective communication. If a website suffers from design or programming problems, your end user will not be a user at all, they’ll be gone. So, what are the best strategies for achieving effective communication between designers and developers?

Blog Articles Kevin Williams
thumb-pub-peach-bridge-i

The peace bridge: Tools and practices to help designers and developers work together

Kevin Williams Blog Articles

Part I. Tools

Depending on their specific roles, designers and developers often have different and sometimes polarizing viewpoints. The differences—or gap—in the way each group thinks and works can sometimes lead to problems either in limiting a designer’s creative form—“you can’t do that”—or driving a developer insane while creating the functions—“who designed this!?” These differences also account for designers’ and developers’ infamous reputation for not getting along (except at PRI of course!). The primary reasons for this often originate from ineffective communication and not fully understanding what the other does, or how they do it.

Fortunately, the gap can be bridged, and the talents of both designer and developer can shine through. Well-thought-out procedures, determining the most effective use of software, and focusing on best practices can all result in increased productivity, and turn those frowns upside down!

The first in our three-part series on the “peace bridge,” focuses on using effective software and technology. The key here is that less is more, and there are a few great tools that allow designers and/or developers to do more in less time:

Balsamiq Mockups Rapid Wireframing Tool

This tool is great for designers to generate and convey their ideas to developers quickly and effectively. It allows designers to quickly mock-up prototypes that look like simple sketches that not only allow clients to make important decisions without distraction from aesthetics but also gives developers a chance to chime in on basic logistics that designers need to be aware of before creating a more complete and comprehensive design.

960 Grid System

This simple template package provides designers with guided templates for many of the most commonly used design programs, including Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, and Balsamiq mockups, and comes with pre-made Cascading Style Sheets (CSS) and sketch paper for developers. The package offers designers and developers some common ground for designing within a set 960-pixel width (the current standard width for designing websites) and developing markup and CSS for web pages quickly and efficiently.

Firebug & IE Developer Tools

Firebug and IE Developer Tools are great for debugging and editing markup and CSS on-the-fly within web pages. In addition, I find it also gives designers a glimpse into the developer’s logic, regardless of whether or not they know the programming language. The ability to get real-time results of the edited code allows developers to explain what does and doesn’t work visually as well as verbally.

In part two, we will cover communication, simple procedures, and best practices that will help both in design and development.

.04

Virtuosities

Website Development & IT Consulting
web development > I'm somewhat of a Full-stack web developer but I specialize in Front-End Development and Rapid MVC Prototyping. I'm able to work with teams of any-size, anywhere using best-practices and a modern stack of technologies.
LEVEL : JEDI MASTER EXPERIENCE : OVER 15 YEARS
HTML5 CSS / LESS / SASS JAVASCRIPT / JQUERY PHP WordPress Drupal CMS / MVC Templating
Marketing > I occasionally put my Marketing degree to use developing strategies, promotions, and strategic partnerships for brands needing exposure, increased leads, and ultimately sales.
LEVEL : JEDI MASTER EXPERIENCE : OVER 10 YEARS
Contest Management and Promotions Partnership Outreach Pay-Per-Click Campaigns Social Marketing HubSpot Inbound Marketing Search Engine Optimization
Social & Environmental Impacts
Permaculture Food Production > Since completing Geoff Lawton's free online permaculture course I have been a Permaculture evangelist and student seeking to impact the world through sustainable living. I'll be receiving my Permaculture Design Certificate (PDC) from Wild Abundance this year 2016. Following the PDC I plan to obtain teaching certification from Whole Systems Design allowing me to do more by teaching.
LEVEL : PADAWAN LEARNER EXPERIENCE : ~ 2 YEARS
Permaculture Design Principles Plant Cloning & Propogation Composting
.05

Compendium

Portfolio of Selected Works
harmonic-health
Design, Branding, and Identiy

Harmonic Health Brand Identity & Graphic Design

harmonic-health

Harmonic Health Brand Identity & Graphic Design

Logo brand identity, banner and wallpaper graphic design for Harmonic Health, a Meetup group for community healing and growth involving integrative bodywork, Acutonics vibrational medicine, and exploration into the healing and wisdom traditions of the Earth.

works-web-lucille-roberts
Websites

Lucille Roberts Redesign & Development

works-web-lucille-roberts

Lucille Roberts Redesign & Development

I was hired by iBelieveDigital to join a small team of developers as the Front-End Developer for their client Lucille Robert’s website redesign and development. The team followed Agile Development working in the Atlassian Jira project management hub which allowed the project to be completed with efficiency and transparency.

Colophon: #Git, #TwitterBootrap, #Laravel, #HTML, #CSS, #JS, #JQUERY

works-print-pennington-main-filter
Print Design

Pennington Family Chiropractic Print Materials

works-print-pennington-main-filter

Pennington Family Chiropractic Print Materials

I don’t often work in print but was happy to design presentation folders and tear-sheets for Christie and her husband and Chiropractitioner Aryn at Pennington Family Chiropractic. I hope to do a total brand / logo and website redesign in the future.

Colophon: #Adobe, #Illustrator

web-soma-payment
Websites

SOMA Families Mobile Friendly Payment Page

web-soma-payment

SOMA Families Mobile Friendly Payment Page

SOMA Families is a welcoming and inclusive community of moms, dads, and caregivers from South Orange and Maplewood (and bordering towns which include East Orange, Irvington, Millburn, Newark, Orange, Short Hills, Union and West Orange). My friend and co-worker Allyson provided the logo and layout direction and the rest is Bootstrap history.

Colophon: #TwitterBootrap, #HTML, #CSS, #JS, #JQUERY, #PayeezyGateway

.06

Get In Touch

Start a project or just say hello

General Contact

Use the form below to contact me, to schedule a free 15-minute consultation, or to just say hello.

 

Free Quote/Estimate

Have a concise vision already in mind? Shoot me the details using the quote form below.

Full Name (required)

eMail (required)

Phone (optional)

Project Type (Hold down CTRL to select all that apply)

Estimated Start Date:

Estimated Deadline:

Budget:

Project Brief

You may upload any files that may result in a more accurate estimate








.07

Offers

Hosting Offer

For a limited time*, new [sb] Scalable Business, [dp] Dynamic Project and/or [cc] Custom Cloud web hosting subscribers will receive 1 hour** of complimentary support, consultation or website development/coding each month.

That’s up to 12 hours of free coding per year (a $600 value). Are you already hosted with GoDaddy or another web hosting provider? No problem, I’ll transfer all of your services for free!
*Offer is available to new subscribers as long as this offer is still listed.
**monthly hour does not roll over month-to-month and uses a use-it-or-lose-it policy.


[sp] Shared Personal – $9.99 / mo
2 GB Storage, 50 GB Bandwidth, 2 Databases/FTP Accounts/Sub-Domains

[sb] Scalable Business – $19.99 / mo
10 GB Storage, 100 GB Bandwidth, Unlimited Databases/FTP Accounts/Sub-Domains

[dp] Dynamic Projects – $29.99 / mo
20 GB Space, Unlimited Bandwidth, Unlimited Databases/FTP Accounts/Sub-Domains, Automated Off-Site Backup


(cc) Custom Cloud – $29.99 / mo and up
Contact me
to tailor a custom hosting package or private cloud server to your needs.