The Challenge

Hiring web designers can be difficult. There are many disciplines under the common term ‘designer,’ and experts in one field may be novices in another, while others are a “Jack of all trades, master of none.” To make things worse, people commonly relate “design” with subjective decisions, personal preference and individual style.

All that makes the search for a great web designer seem like a daunting task. It doesn’t have to be like that; the goal of this guide is to help you find the perfect match for your team or project. This can be achieved by better understanding the different roles a web designer fills, and by having a good idea of the sort of strategic questions you can ask during the hiring process.

Web design disciplines and roles

The “web design” profession encompasses many skills, and sometimes, separate professions. A Web Designer nowadays has to wear many hats and may have varying levels of proficiency and experience in different fields.

It’s important for you to know some of the broader terms so you can better understand what kind of design professional is best suited for the role you are trying to fill. This will also help you clarify your project description and weed out some candidates before you proceed to the actual interview stage.

• Visual Design – Skills used during the final stages of design, the visual design phase. Generally found in designers with a more artistic profile, not necessarily well versed in the technical side of web design (although many are). These, however, are nice additional skills you can look for in a web designer on top of their technical skills. Deliverables: visual design, mood boards, Illustrations, banners, photo manipulation and compositions
• Branding and logo design – A profession on its own, branding and logo design are also skills that many web designers have at a rudimentary level. These are nice to have as extras, if that’s part of the project requirement or the job description of the open position you have. Deliverables: Style guides, brand books, color schemes
• User-Experience Design (UX) – Going hand in hand with IA and IxD, UX is the broad discipline of ensuring digital products work, based upon users’ expectations, providing the fastest, most painless workflow, while achieving the goals of the product. Deliverables: User personas, workflow charts, low fidelity sketches, accessibility analysis, usability tests, wireframes
• User-Interface Design (UI) – This is the practice of creating individual control elements and design of broader systems and visual language that makes the usage of a website or application nice and easy. If you are designing applications (mobile, web or otherwise), you will need someone with good UI skills in your team. Deliverables: High fidelity sketches, working prototypes, pattern libraries, UI kits
• Information Architecture (IA) – The art and science of defining the optimal content structure and the clearest navigation methods. For larger websites and applications with a lot of content and different content types, or complex content structure, it’s important to have someone with experience in IA on the team. Deliverables: site maps, navigation lists, taxonomies, content audit, user journeys
• Interaction Design (IxD) – Everything that deals with the interaction between human and machine generally falls into web design. With websites more and more having app-like diverse functionality, and with the myriad of interactive elements users have become used to, it’s nice to work with a web designer who is well versed in good and bad practices of IxD, who understands the well established conventions and knows when to break the rules to achieve a specific goal. Deliverables: interaction and functionality libraries, interactive prototypes, workflow charts, state maps
• Front-End Development – This is the part of development that involves code employed to render the user-facing side of a website or application, and to handle interactions between user and machine on a technical level. The most technical of the design-related disciplines, and often considered a profession on its own, front-end development mainly involves good skills in HTML, CSS, and JavaScript. Good front-end developers also utilise various assistive tools such as CSS preprocessors (LESS and SASS), task runners (Gulp or Grunt), and others like npm, Bower, or Yeoman. Deliverables: Production level HTML, CSS and JavaScript code, tools for handling design changes and sometimes environment migration

Note that this distinction is sometimes artificial, and although there are highly specialised experts who excel at just one of these disciplines, it’s very important for them to have a good understanding of at least a few of the others. So, even if a designer’s only job is to provide the best possible wireframes for a website, s/he must also understand how that wireframes will be turned into a working, responsive set of HTML and CSS files, and how much JS will be needed to implement the intended interactions.

Many of the best freelance web designers have solid experience in a majority of design disciplines. They are used to being a one-person show (or rather, a one-person army), handling web design projects from the initial specification talks to the final production code and everything in between. Web professionals of this profile are great for small-sized and even some medium-sized projects with limited budget and tight deadlines. They are efficient and know how to achieve 80 percent of the results with 20 percent of the effort.

Larger projects benefit more from an in-depth look at each component of the design, and require a design team comprised of highly specialised experts in their own fields. Depending on the specifics and the complexity of the project, multiple roles could be filled by a single professional or by separate specialised teams for IA, IxD, visual design, and so on.

Web Design Workflow

Web design as a profession has evolved a lot over the last 10 years. Effective workflows and practices have emerged and have proved to be the de-facto industry standard. However, there are still certain practices, remnants of the early years of the web design, which should be avoided.

One such ineffective and outdated practice is the “three mockups” approach. In the past, companies that have needed web design services have asked designers to provide three (usually) Photoshop mockups (or other forms of high-fidelity comps) to choose from. These are usually based on a set of initial brief requirements or a couple of talks with the client. The final product of this approach is design-based on personal preferences and subjective choices. Chasing user needs and achieving business goals this way is like shooting in the dark. Working this way (and requesting it from a web designer) should be avoided.

A much better approach to web design is the iterative process introduced by Jesse James Garrett in The Elements of User Design. It involves five stages, each based on decisions made, and work done, in the previous step.

Included here we have a very condensed version of the work involved in each stage:

• Strategy – Defining the key business goals of the product and balancing them with the user needs of the target audience (based on market research, focus groups, user personas, and the like). Deliverables: High level brief, design team requirements, project objectives
• Scope – Documenting the required functionality and the needed content. Also involves deciding what is to be built, and what isn’t, as part of the current project. Deliverables: Detailed project specification
• Structure – Information architecture and interaction design. At this stage, the structure of the website, and its pages, is decided via card-sorting and user-journey maps. For applications, workflow charts and state maps are created. Deliverables: site map, low fidelity prototypes or wireframes
• Skeleton – UI design, information design and navigation. With the structure in place, objective decisions can be made about laying out content, what UI elements to use and how they would work. All navigation elements should be implemented at this point and content added to its proper places. Deliverables: fully functional prototype of the website or application
• Style – Applying the visual treatment and the brand’s style guide to the working product. With a completely functional and properly laid out website, it’s much easier to apply corporate or product branding and make objective choices about its visual treatment.

This is an iterative process and each step can go through several cycles until it’s approved. During each step, it’s also possible to find flaws, or ways to improve the previous, and change the previous set of deliverables to reflect that. The main advantage of the ability to run usability tests at each step is avoiding large commitments of time and budget on ideas which later would prove to be fundamentally wrong or suboptimal.

Web designers well versed in modern practices and workflows should be acquainted with good tools for prototyping and wireframing such as UXpin, Balsamiq or Axure. While some may prefer creating the wireframes in Photoshop, Fireworks or InDesign, others implement them straight into popular CSS frameworks like Bootstrap or Foundation. The advantage of the latter is that these early prototypes later evolve into actual production templates. This eliminates dead-end deliverables and reduces production time.

Finally, the approach described here, as well as similar methodologies, lead to much better informed, researched and data-driven choices and use fewer subjective decisions throughout the whole design process. As such, you can easily identify designers who practice this by asking them about the reasoning behind different elements’ layout, position and style of a project they worked on. They should be able to give you swift and concise answers backup up by facts or research results.

Responsive Web Design Process

These days, with a large percentage of internet traffic coming from mobile devices of different capabilities, it’s crucial that any new website be usable on as many devices as possible. The process of designing and developing websites suited for myriad screens and devices is commonly referred to as “Responsive Web Design” or sometimes as “Adaptive Design” (which is also used to refer to a specific methodology in responsive design).

Today the question whether to have a responsive website is no longer relevant; the answer is a clear “Yes!” and even Google is placing websites not suited for mobile devices behind those that are. The real question is how to execute a successful and effective multi-device strategy without going over budget or missing the point of mobile user experience.

Any experienced web designer should be well versed in the techniques that make a website responsive. To help you find the best matches for your project, we have prepared a few questions and guidelines. There are some important considerations that must be addressed when designing and developing a responsive website.

Content Strategy Across Devices

Responsive design is not just about fitting all your content into any screen size; the designer has to take into consideration the context in which each device would be used along with its capabilities.

Sometimes, it’s better to skip certain pieces of copy on a mobile device, use alternative copy or different image assets because the navigation of a website needs to change between different screens. Other times, specific pieces of content or functionality should be enabled only on mobile devices, such as a “click to call us” button, offer interactions based on a user’s location or show an “app download” button for the specific devices being used.

Q: Do we have to prepare different content or assets for different devices?

Sometimes, yes. Here are instances where such changes are required:

• Most often images have to be cropped differently for a small portrait screen; a wide aspect ratio image is great for a desktop website banner but is almost unusable on an upright smartphone screen.
• Where a large presentational video might be great on a computer screen, it could be replaced with an image and text on mobile devices, especially if you expect traffic from devices with slower mobile internet connection.
• Some pieces of copy may have to be omitted (or rewritten) for small screen devices where the user likely won’t read it.
• Certain call to action controls might be changed to better suit the device; for example, “Send a Message” on computers might be replaced by “Call Now” on mobile phones.
• On small screens, complex graphs, charts and long tables are better left as linked stand-alone pages rather than have them in the content stream of the page. Another idea is to present the same data in a different way, or only show the most important parts.
• Navigation should be rethought, or even designed separately, for different screen sizes. This is not necessarily about its visualisation, but often includes different structure, such as a flat list of links instead of dropdown/drill-down menus, or by showing less levels of depth in more complex menus on specific devices.

Layout Optimisation on Different Screens

While computers and larger tablets held sideways offer a lot of horizontal space to lay out the website’s content, the smaller the screen gets the less space you have for elements placed side by side. That’s why websites on smartphones are usually designed to have a single column of layout. This is one of the primary concerns when designing a responsive website: When and how should the page layout change.

Q: How do you make sure content layout looks good across different devices? What technology do you use to achieve that?

A few “break points” should be defined based on popular device sizes, types and context. These are predefined screen widths (and less frequently screen heights) where the page layout changes, for example, from three columns, to two and then to a single column. Currently, the most popular width breakpoints are:

• 1920 and up: TV screens and large desktop monitors
• 1280 to 1920: for the huge majority of laptops, many modern desktop monitors as well as large tablets (usually 10” and up) when held in landscape mode (held horizontally)
• 800 to 1280: for smaller tablets in landscape mode as well as older or smaller monitors
• 480 to 800: for tablets in portrait mode (held vertically) and smartphones in landscape mode
• up to 480: smartphones in portrait mode

To use different styles based on screen size @media is used in CSS code, for instance, to change a paragraphs’ font size to 14 pixels only on devices with a screen width larger than 480 pixels but smaller than 800, the following rule is used:

css @media (min-width: 480px) and (max-width: 799px) { font-size: 14px; }

Another important consideration is to place HTML code in the same order in which it needs to be displayed on mobile devices. In general, writing clean, well-structured and semantically correct HTML code goes a long way towards the smooth implementation of a responsive website.

Interaction with the user interface on different devices

Since devices differ not only in screen size but also in terms of input methods, make sure every UI element works as expected in the context of each device type. This means that dropdown menus should be acceptable for computer screens but on smartphones and tablets, users would expect navigation methods more akin to those on mobile apps.

Q: What do you do to make sure the UI works well and feels natural on different devices? Name a couple of interaction patterns which are not suited for specific devices.

Different devices come with different capabilities, and users expect websites on their device to function in similar fashion to the apps on their device.

The most important distinction between a desktop and a mobile UI is that desktops are usually controlled with a mouse or trackpad and a fast and easy to use keyboard, while mobile devices rely on a touch screen with no pointer and with an on-screen keyboard that’s often a hassle to use. Another consideration is that devices with no pointer also lack the hover state which is frequently used to trigger certain actions on web pages. The two input methods, pointer and touchscreen, also make different actions easier (more natural) or more difficult and slower. For example, moving items across the screen or dragging is easier on touch screens (therefore, dragging is avoided on desktops), while clicking on smaller controls is much easier with a mouse pointer (thus UI controls should be made larger on touch screens).

Asset Optimisation Based on Screen Size

Even when the same assets can be served to different devices it doesn’t mean the same image size or video quality will be optimal. To reduce load times, especially on mobile internet connection, web designers should be aware of the assets that they serve to different devices.

For example, a 1920 pixel wide background photo of 400 kilobytes, which is fine for desktop computers, will be overkill (quality wise) and slow to download (file size wise) on a smartphone. So, it’s good to have a smaller version of the image, which would be served if the user’s screen is small enough. And you don’t want the user to download both versions while s/he only sees one.

Q: Does it matter if you serve the same assets regardless of screen size? Is there any difference between images and backgrounds in this regard?

It’s important, at least for larger image files, to have separate versions for mobile devices and desktop screens. Smaller copies of the same image can be served to mobile users to reduce load times. Image size, however, shouldn’t be greatly reduced (if feasible) for mobile devices since they usually have screen density that’s much higher than desktop monitors. Decisions should be made on a case-by-case basis since some images can be reduced in size without much visual impact while for others it’s important to retain their details.

On a technical level, there’s a big difference between background images (which are defined in CSS) and content images (included as image files in HTML). Backgrounds can easily be set separately in different media queries in CSS, so each version is only served if the user screen matches a certain query; the others are not downloaded from the web server. For images in HTML, there is still no built-in, working and well-supported way to serve different files based on user screen size. Different techniques can be used to achieve that, such as by using polyfill scripts that simulate the behaviour of the upcoming elements, or other scripts that have conventions of their own, or using CSS background to show an image.

Generally, the CSS method, however, should be avoided because a CSS image background doesn’t have any semantic meaning and is considered decoration. Further, it’s lacking in accessibility as it can’t be described with the title and alt attributes that an tag has.

SEO, semantics, content syndication and accessibility concerns

We’re now living in a highly connected digital world where your website content is not read only by people on screens but also by machines. Search engines crawl your website to find out what it’s all about and help users by showing them your content when they look for it; people use apps to aggregate content to read at their leisure; disabled users rely on machine assistance to access and interact with your content.

All of this is good both for your website and for its audience. To make sure all of the above is possible, and done correctly, your website should adhere to certain standards and conventions. The closest it sticks to them, the better chance you have for machines to interpret it correctly.

Q: How do you make sure a website is well suited for SEO and the content is machine readable?

The first and most important step to making a website machine readable and SEO ready is to write semantically correct HTML markup code, using the new HTML5 elements to mark each piece of content properly.

Q: Are you concerned with accessibility and what do you do to improve a website in that regard?

Properly marked up, semantically correct content, alone, gives a huge boost to accessibility. Making the website accessible to the widest possible audience of users with disabilities is a valid concern in a project; there are additional steps that should be taken to improve on that regard:

• Aria roles – in addition to the semantic HTML5 tags, aria roles can be assigned to the more important elements of content in order to show in greater detail each one’s purpose. This helps assistive tools understand the content, thus making it easier to use.
• Color combination concerns – many users have different types and degrees of color blindness, so in UI design, it’s important to avoid combining certain colors. It’s good practice to not rely on colors alone as a distinction between two UI elements (e.g. unlabeled green and red buttons or indicators).
• User control – The designer must also make sure the user has some degree of control over the way the website looks. Most importantly, the browser’s zoom function must not make the site unusable. Additionally, the content on a correctly marked up page is easily picked by reading apps and re-styled, as per the user’s preference (larger font sizes, a more contrasting color scheme, a more readable typeface, for example).

Q: What about content syndication? What steps should we take to make sure our content can be distributed over different channels and used by other apps?

There are several approaches that can be taken to assure the content can be interpreted outside the context of the website. Choosing the right format depends on the content itself, and the intended syndication channels, but there are a few common things to consider:

• Semantic HTML5 markup is usually the most important and common way to make content redistributable. Make sure the

  tag is used to mark up individual pieces of content, each one with its own heading. Article headers and footnotes can be marked up with the

  and

• If you need clearly defined pieces of content, with their unique characteristics specified, consider using Schema.org to make sure everything is properly listed according to its widely accepted schemas.
• On a technical level, some of the formats that can be used to define specific data structure are RDF, Microformats and Microdata. They use HTML compatible elements (classes or tag attributes) to simulate XML-like structured data.

Content Management Systems, Premium Themes, CSS Frameworks

As the web has matured, developers have created an abundance of well-made tools and apps to assist the job of a web designer, or developer, while adhering to well-established workflows and design patterns.

Content Management Systems (CMS) allow site owners and admin control over the website without requiring them to dabble in code, yet leaving freedom for the designers and developers who use them.

Q: In your opinion, what are the advantages and disadvantages of using a CMS? When do you think it’s good to use one, and what are the alternatives?

Although many web designers have strong preference over one CMS or another, they should be able to objectively decide whether to use one.

• Advantages of CMS: ease of content management, built-in template engines for smoother development, adhering to best development practices, well documented code that can easily be handed to another developer, many available plugins that save hundreds of hours of development work and are well supported, to name a few.
• Disadvantages of CMS: when used incorrectly, may lead to bloated code and slower load times, the tendency to use heavy plugins for small features easily implemented by a few lines of code, limitations for more complex data structures or interactions where the developer may have to “fight” the system to achieve goals.
• It’s a good idea to use a popular CMS for almost any website project where the client needs to have full control over the content. Some larger sites, and especially web apps however, are too complex for conventional CMS, and will perform far better if implemented using a custom made system, tailored to specifics and needs. In many cases, a good CMS can handle these types of projects as well; however, that comes at the cost of heavy modifications, changing fundamental concepts, losing compatibility with plugins and the ability to update or receive support.

The so called “Premium Themes” for popular CMS are a common choice for projects with limited budget or tight deadlines. The built-in features and layout, however, come at a price. Good web designers understand that and can help you decide if this is the right approach for your project, can evaluate the usability of a theme and advise you about its pros and cons.

Q: What are some of the common issues that we face when using off-the-shelf “Premium” themes for a CMS?

Despite the seemingly easily customised components and styles, most of the themes they provide usually come at a cost (performance wise) and have significant limitations. A few common problems found in the popular themes are:

• Loading and executing a lot more code and assets than needed. Theme developers strive to outclass one another by including more and more features and capabilities in their themes. That, combined with the fact that themes are made to be flexible without editing any programming code, leads to a bloated code base with too many scripts and the need to query and process more data than standard templates.
• Themes’ looks and layouts are hard to modify beyond their intended customisation capabilities. Again, due to a code base significantly more complex compared to the standard CMS templates, heavy modifications take much longer and there’s always a chance those changes could break something else.
• If the project requires the use of complex plugins, which add templates of their own, styling those to match the rest of the theme’s visual style is also much harder.
• Finally, despite all their customisation options, themes tend to guide the website’s design direction, placing it on ‘rails’ and limiting the creative potential of the designer. This leads to a form over function approach, where content is made for the layout instead the other way around.

Another way to reduce development times and budget is by using CSS frameworks such as Twitter’s Bootstrap or ZURB’s Foundation. These frameworks come loaded with reusable pieces of code, markup conventions, commonly used javascript interactions and built-in best practices. They also use development tools such as CSS preprocessors (LESS or SASS), task runners (Gulp or Grunt), code linters and minifiers to improve the quality and size of the production code.

You can check our Web Designer Interview Questions article for a sample question about frameworks and front-end development tools.

Of course, all these questions and notes are barely scratch the surface of web design and development practices.

A good designer should be able to give you answers similar to those suggested here, but they may also have other ideas about how to turn your project into a success. Good communication is key. Exceptional web designers also have the ability to understand requirements along with the underlying reasoning behind them. That’s why they are able to come up with better ways to solve problems while also providing solutions for problems hidden beneath the surface. In the end, the skill which unifies all design disciplines is the ability to solve problems.

Read More at The Vital Guide to Web Design Interviewing

Jina Bolton is throwing this brand spankin’ new conference in San Francisco at the end of March, and I’ll be MCing!

10% off with coupon code “CodePen”

Direct Link to Article — Permalink

Clarity (A Style Guide Conference) is a post from CSS-Tricks

Hey there! This month’s roundup comes with some amazing freebies for you to download and try out; including line icons, material design assets, gesture icons, mobile app presentation kits, a restaurant menu template, branding stationery mockups, watercolor illustrations, device mockups, stunning web and mobile UI kits, fancy fonts for all purposes, PSD templates, and landing page themes for WordPress and Bootstrap, stacks of development tools, a terminal formatting tool, and much much more.

Outline & filled vector icons collection

A huge collection containing over 15.4k icons in both outline and filled style available in vector Ai and SVG, as well as multiple PNG sizes.

Multi-touch gesture vector icons set

A set of 58 free vector icons designed for multi-touch gesture purposes featuring nice line hands and amber gesture instruction add-ons. This set comes available in Ai format with a CS4 version compatible file.

Facebook’s devices design resources

Facebook’s original set of device mockups featuring both mobile phones and wearable devices, such as iPhone, Samsung Galaxy, Sony SmartWatch, Nokia, and more, available in both PNG and Sketch formats.

Valentine’s watercolor pack

A beautiful pack of 41 valentine theme greeting card elements in a high resolution of 300DPI delivered in PNG format with a transparent background.

50 branding mockup templates

A pack that contains 50 different mockup scenarios presented in top and perspective views for its realistic and flat styles available in PSD format.

Picnic

Picnic is a cool restaurant menu template that was designed in a lavender theme color featuring pastel colors it comes available in Ai, InDesign, and PSD format files.

Merkury

Merkury is a template in PSD format for a modern-looking web dashboard for CMS including 6 different screens for login page, home, workflow, statistics, calendar, and users.

PSD UI Presentation Kit

A PSD kit for presenting your application or website UI in iPhone devices featuring pre-made compositions and three different scene generators based on different angle views.

Minimal ECommerce PSD UI Kit

A minimal style UI kit containing several items ready for eCommerce purposes available in PSD format and 6 nice colors for its product card, drop-down menu, postcard, icons bar, text inputs, and all other elements.

EventPro

EventPro is a cross-device UI kit that comes available in PSD format featuring several modern cards and widgets for chat, analytics, counters, vertical timeline, dashboard menu, and more.

Colorado

Colorado is a clean UI pack that features a minimal style for its 3 shadow-drop and variation of elements presented in base tone colors available in both PSD and Ai format.

GoodBarber

GoodBarber is a dark and open UI kit that comes with over 150 pixel-perfect iOS UI elements including ones for navigation, sign in/up, menus, articles, photos, videos, events, podcasts, about, and a lot more.

Winter Inspired Mobile UI Kit

A UI kit that contains 30 elements featuring a nice material design winter scheme providing you with screens for calculator, login, profile, calendar, and more.

Quenda

Quenda is a sans-serif font that comes available in 6 different weights and a slight handwritten look including 172 ligatures, 649 glyphs, lining and old style figures, self-building fractions, super and subscript digits, a set of arrows, and more to see.

Arabella

Arabella is a fancy script typeface in a handwritten style that comes in TTF format and works perfectly for headings, signatures, logos, wedding invitations, t-shirts, labels, posters, badges, etc.

Qanelas

Qanelas is a stunningly neat sans font featuring smooth corners for its 20 different weights available in both Latin and Cyrillic alphabet characters and including several stylistic alternates, tabular lining, fractions, superiors and inferiors, and ligatures.

Poste

Poste is a slab serif typeface available in 3 different weights that features a straight line edge shadow which gives it a neat and fancy contrast to excel above content text typefaces.

Brotherhood

Brotherhood is a fancy script typeface that features neatly designed curls and swashes for its uppercase, lowercase, numeral, and special glyph characters.

Pixture

Pixture is a web PSD template that was crafted in a nice artistic style inspired by a Dribbble shot featuring a 1600 pixel width as well as 750px width version for iPhone.

Sertin

Sertin is a Bootstrap one-page web PSD template suitable for landing pages, one-page sites, portfolios, web design companies, personal or business type websites, including an HTML version and 30 sections ready to use.

Abdullah

Abdullah is a smooth dark schemed template available in PSD format for personal portfolio websites featuring a nice layout and an adaptive portfolio grid.

Krakatau

Krakatau is a modern WordPress theme that features a clean style and responsivity across devices featuring google fonts, advanced customization, cross-browser compatibility, SEO optimization, and more.

Spacious

Spacious is a clean style WordPress theme for multiple purposes that features full responsiveness, a full-width header slider, big minimal icons, several layouts, 13 widget areas, translation ready, custom menu, and more.

Lhander

Lhander is a landing HTML template that features a modern design with minimal icons, sticky top navigation bar with smooth scrolling, video modals, pricing tables, testimonials slider, FAQs, and full responsiveness.

Flat Portfolio PSD & HTML Template

An amazing flat template for a portfolio site in both PSD and HTML with responsive features in PSD and organized layers, and bootstrap guidelines for the HTML version featuring jQuery.

Expanding Material Design Contact Form

An appealing Material Design contact form that expands as you hover over the contact icon featuring validation for its email field.

Multi-device Scrolling Menu

A nicely developed menu that scrolls along its horizontal axis allowing you to discover all of its elements, each one changing the background color as they’re clicked.

CSS 3D Solar System

An amazing representation of the solar system that allows you to simulate its behavior and change parameters such as rotation and translation speed of the planets and natural satellites.

SVG Clip-path hover effect snippet

A snippet that allows you to discover portfolio elements as you hover over them through SVG and CSS transforms.

Absolute centering snippet

A pure CSS developed snippet that allows you to align elements to the absolute center of the viewport even when it changes its size and aspect ratio.

Fabric

Fabric is a responsive, mobile-first, front-end framework that allows you to apply the Office Design Language to your web experiences, call a new app or add-in, or update an existing one.

Gitlo

Gitlo basically allows you to manage GitHub issues inside Trello and oversee your pull requests in Trello’s kanban view and thus, making your management more efficient.

CLImate

CLImate allows you to optimize your developing and debugging in an easy and clear way by outputting colored text, special formatting, and even animations directly into the terminal.

Fabricator

Fabricator is a NodeJS based tool that allows you to build UI toolkits in which you pick your own taxonomy, generate your style guide and documentation through markdown. It also uses gulp.js as a build system to compress images, CSS, and javaScript.

Codepad

Codepad is a social ranked snippet site for developers allowing you to share and save code snippets including ones in CoffeeScript, Ajax, Angular, Apache, Ruby, SASS, Swift, XSLT, and stacks more.

Imba

Imba is a new language for programming web applications compiling high performance and readable JavaScript; featuring a language level that supports defining, extending, subclassing, instantiating, and rendering dom nodes.

HackMyResume

HackMyResume is a resume and CV tool for Windows, OSX, Linux, and NodeJS that allows you to generate polished resumes in HTML, Word, Markdown, PSD, Latex, JSON, YAML, XML, and plain text.

Slim

Slim is a micro framework for PHP that allows you to quickly write simple and powerful web applications and APIs featuring an HTTP router, middleware, PSR-7 support, and dependency injection.

PHAP

PHAP allows you to create native iOS, Android, and Windows Phone applications in PHP language providing the advantage of minifying your code.

Milligram

Milligram is a CSS framework (but not a UI framework) that provides a minimal setup of styles for a fast and clean starting point in only 2kb gzipped improving your performance and productivity with fewer properties to reset, resulting in cleaner code.

Philter

Philter is an open source JavaScript plugin that allows you to control CSS filters through HTML attributes counting on hover event triggered effects.

Neutron

Neutron is a Sass framework that allows you to create flexible, clear, and semantic website layouts by featuring amazingly simplified commands.

Placemat

Placemat is a web application that allows you to retrieve image placeholders through single-line URL links featuring parameters for dimensions, overlay and color, text and color, and blend effects.

Handwriting.io

A powerful API that allows you to generate ultra-realistic handwritten texts by featuring up to 25 different glyphs per each character that vary based on the surrounding letters.

Chartico

Chartico is an interactive online tool to create easy bar charts allowing you to customize titles, subtitles, colors, and values, and share it on either Facebook or Twitter as you finish, or save it in JPG format.

Abito

Abito is a WordPress theme that comes with several pages and cool modern effects like fade/blur text loading, smooth parallax loading of elements as you scroll, retractable left sidebar menu, and more to see.

Smoke

Smoke is a collection of neatly developed form validation components for Bootstrap including features for notification, progress-bar, full-screen, panels, and helpers.

Pressure.js

Pressure is a JavaScript Library that allows you to handle both Force Touch and 3D Touch through a single API from a selection of devices in Safari browser.

CMS.js

CMS.js is a fully client-side JavaScript website generator based on Jekyll that uses plain HTML, CSS, and JavaScript to generate your website.

Loud Links

Loud Links is a tiny JavaScript library that allows you to add interactive sounds to your website through HTML5 audio elements for playing mp3/ogg files currently supported in all browsers.

Appolo

Appolo is a set of plugins and themes for Jekyll that creates a static portfolio website for application developers to showcase their work featuring a minimal theme and playful animations.

StickyStack.js: Stacking Effect jQuery Plugin

StickyStacks is a jQuery plugin that allows you to create stacking effects with the use of sticking panels being triggered as they reach the top of the viewport.

Colofilter.css

Colorfilter is a CSS library that allows you to modify your images with DuoTone filters providing you with the possibility of using hue, color, saturation, and luminosity blend modes.

WP Secure Forms

WP Secure Forms is an editor that allows you to generate WordPress PHP, HTML, JS, and CSS forms ready to integrate into WP themes. The forms feature validation, sanitation, spam protection, hidden fields, and optional security questions.

MediumEditor

MediumEditor is a pure JavaScript plugin inline editor, the result of a clone of Medium’s WYSIWYG editor toolbar that uses a content editable API to implement a rich text solution.

Mega Bundle of Illustrator Brushes from Artifex Forge – only $21!

Source

Photoshop is one of the most popular design applications ever, with millions of creatives using it to craft incredible work, for over 25 years.

You can read all about the latest features in Photoshop in our interview with Stephen Nielson, Senior Product Manager for Photoshop; and this is your chance to win a copy, free, for a year. Thanks to Adobe, we have 2 one-year subscriptions for the full Creative Cloud plan (worth $49.99/month) to giveaway, so you can use the very latest Photoshop features free for the next 12 months.

Not only that, but as part of the plan, you’ll also have access to all 29 desktop apps, including Lightroom, Illustrator, InDesign, Premiere Pro, After Effects, Dreamweaver, Muse, Flash Professional, and more; and 10 mobile apps including Capture CC, Illustrator Draw, Photoshop Sketch, Comp CC, Slate, Voice, Lightroom for mobile, Photoshop Mix, and more. And, of course, all these apps are connected by Shared Libraries and the power of CreativeSync.

If you already have a Creative Cloud subscription, fear not! This giveaway is open to existing subscribers too; if you’re a lucky winner then your existing subscription will be extended by 12 months.

How to Enter

For your chance to win 1 of 2 one-year subscriptions to Adobe’s full Creative Cloud plan, all you have to do is:

1. download a free trial of the latest Photoshop;
2. take a screen shot your customised toolbar (hint: learn how to customise your toolbar here), or your favorite typefaces starred in the font menu;
3. post your shot to Twitter with the hashtag #myPhotoshopTools;
4. lastly, post a comment below with a link to your tweet.

Winners will be selected at random, and entries close at midnight (PT) on February 15th 2016. Good luck!

Source

One of my favorite self-declared holidays.

Interesting tidbit. It was considered a mistake by the CSS Working Group:

Box-sizing should be border-box by default.

Direct Link to Article — Permalink

Hey, Look What Day It Is is a post from CSS-Tricks

Web hosting is a saturated and crowded industry, and making a good name for one’s brand is not an easy task. That said, there is one web hosting company that has performed well over the years: InMotion Hosting.

Here at Web Design Ledger, we published a review of InMotion Hosting some days back, and you can check that out on this page. That said, I recently got in touch with Sunil Saxena, co-Founder of InMotion Hosting, to hear his thoughts on various topics: web hosting in general, security, open source, JavaScript as well as web development.

Following is the transcript of the interview, with my questions in bold.

Interview: Sunil Saxena, Co-Founder of InMotion Hosting

InMotion Hosting has been successful in a very crowded industry for many years now. What, according to you, is the biggest reason behind your success?

I think different hosting companies have different strategies. Some might want market share, some might want to develop a specific type of client. From its inception, InMotion has had its focus on customer satisfaction and customer retention. Notwithstanding technical innovation, we feel that as long as we focus on our customers, all else will fall into place.

You also seem to have a secondary brand, Web Hosting Hub, as well as a tertiary site, First Site Guide. How have you managed to integrate your secondary entities with the parent firm, InMotion Hosting?

(First) Site Guide is actually not associated with the InMotion brand. One of our early partners had developed it and is run as a stand-alone with which we don’t have any stake in.

As for Web Hosting Hub – during our early growth stages, we had identified various underserved markets. We wanted to serve and help develop these markets so we established Web Hosting Hub as an independent entity directed to help this burgeoning demographic of new developers and designers.

How do you view the concept of managed WordPress hosting? Do you think it is a better option that traditional cPanel hosts, for users who only work with WP?

The concept of Managed WP Hosting definitely has its merits. Often times, potential clients become inundated with the prospect of having to administer their web presence by themselves. Having your site managed by our team empowers many clients who would not have the confidence to venture out into the web space without some guidance. That being said, I think it’s a better option if you need the assistance.

InMotion Hosting also offers web design services. Do you outsource that or do you offer your in-house design team?

InMotion Hosting is 100% employee owned and operated. Every single product or service component external stakeholders come into contact has been conceived, developed and brought to market by our in house team. Always In-House. Never Outsourced.

In the light of recent activity, how do you view the EIG buyouts of popular web hosts such as Site5 and Arvixe?

Often times, with increased competition, industries move towards consolidation. This is particularly unfortunate for the hosting industry, because many of our competitors did start out as open source advocates and were somewhat anti-establishment. Until they were bought out. I understand it’s a natural occurrence in the open market. Unfortunately, many customers have been the victims of this consolidation. Companies like EIG are coming in, taking over operations, and slashing costs. One of the biggest cost-saving strategies is to cut down on human capital. And the largest human capital expenditure for hosting companies is the support department. In recent months we have seen an influx of customer moving over from Arvixe and Site5, to name a couple. Internally, we’ve even started to refer to them as EIG Refugees.

Where do you see the web hosting industry in the coming years? Which technologies will be dominant?

It’s our core belief that customer pattern identification and forecasting consumer demand trends is paramount in our sector. Our industry is inherently driven by technological innovation. Beyond the technological developments, we need to be aware of the ever changing consumer profile. In the past 10 years, we have already observed a major shift in what customers expect, how they want to purchase, and the increasing demand for better service on multiple platforms. Recently, we’ve seen a significant shift towards bundle demand. Our consumers not only want hosting, but they want a plug and play package that will allow them to seamlessly develop their footprint on the World Wide Web. Everybody wants to own their piece of the digital world. And we want to make that possible with the development of a hosting/builder bundle. Beyond the product shift, we feel we will continue to see industry consolidation and buyouts as competition becomes more fierce in the space

Since JavaScript is rising in popularity, do you have any plans of offering Node.js on shared plans?

Great question. Yes – we have a dedicated team that is currently tasked with formulating an implementation strategy.

InMotion Hosting has been an active name when it comes to commitment to open source software. How important, in your view, is OSS in the web hosting world?

Both Todd and I are from the open source world. We started in the Mambo world (if any of you remember that!). We’ve been contributing to OSS since 90s. Internally, our company culture reflects this as we use a lot of OSS products in our day-to-day operations.

How do you view Plesk and Interworx as viable alternatives to cPanel? Do you think the cPanel monopoly will be challenged anytime soon?

We go with what the customer data tells us. cPanel seems to be the dominant solution, but if that changes, then we will be more than happy to adopt a new control panel solution.

You offer datacenters in multiple locations. How different is the non-US clientele from their American counterparts?

We see as much variance in technical skill and understanding in our US-only clientele as we do when we compare American clientele to its international counterparts. An added hurdle, though, at times, is the language barrier. However, we do unofficially speak about 9 languages at IMH, so we are often able to help our international clientele in their native language.

Do you think overselling is a necessary evil in modern web hosting, with more and more, smaller hosts trying to get a share of the market?

No, we believe it’s the opposite. Overselling creates a logistical nightmare. Further, it severely damages long term reputation. We do not employ this strategy because it will simply be detrimental to our ability to provide our desired level of service commitment. For example, we heard some hosting companies might oversell servers 110-120%. We keep server loads at a 70-80% max

Owing to a recent security breach at Linode, WP Engine’s customer credentials were under threat. How did InMotion respond to this news?

From what I have heard from everyone involved with WP Engine, it was very scary and compromised the entire fleet of servers. InMotion runs various updates on a regular basis, so we aren’t susceptible to the same security issues. Linode was having a few issues including a DDoS that lasted about a week. We helped anyone who was interested in moving to us as much as we could.

You’ve recently added the BoldGrid website builder to your services. How has the response been?

Response has been overwhelmingly positive. We have asked many of our early adopters for feedback, and we consistently hear that site build-out has been intuitive, forgiving and simple. Others, with more technical knowledge, enjoyed the fact that it allows them to fly through some of the more mundane tasks, while retaining the ability to manipulate code to deliver exactly what they need.

Do you think web hosting industry faces competition from hosted CMSs like SquareSpace? Or you’d view their audience as totally different from yours?

Absolutely. There is strong and growing competition in this product class. And more and more, we are seeing traditional hosting companies pivot into this hosted CMS vertical to capture the market that typically would have simply purchased a regular hosting package. This is why we developed BoldGrid; so that we can help provide a solid product to those who need it most.

Got feedback or thoughts on this interview? Share them in the comments below!

Read More at Interview: Sunil Saxena, Co-Founder of InMotion Hosting

Push notifications have finally come to Firefox. With a new feature called Web Push, Firefox 44 can now inform you about WebRTC calls, website updates, incoming messages and email, etc.

Push notifications have been around in Chrome for quite a while by now. Basically, for as long as your web browser is running, it can receive notifications from websites even if those sites are not active or open. Thus, you can close your email tab, and still be informed as and when new emails arrive.

Firefox 44 now offers the same functionality. Web Push connects with websites that support push notifications and informs you of updates as and when they arrive. As such, you can be informed of incoming mails, new messages, chat replies, and other events including news updates from websites directly in your web browser without having to open tabs for different websites.

For the sake of your privacy, Web Push will connect with each website using a unique identifier. Of course, connections are encrypted.

Many people have to rely on push notifications at work, in order to stay updated at the earliest and also to keep their browser uncluttered and free from resource hog that might happen if you open multiple tabs. This new feature of Firefox 44 is a step in the right direction.

Given Web Push a spin yet? Share your views in the comments below!

Read More at Firefox 44 Now Supports Web Push

The following is a guest post by Ray Villalobos. Ray is going to explore many of the different varietals of Markdown. All of them offer features beyond what the original Markdown can do, but they offer different features amongst themselves. If you’re choosing a version to use (or a version you’re offering to users on your web product), it pays to know what you are getting into, as it’s difficult to switch once you’ve chosen and there is content out there that depends on those features. Ray, who has a course on Markdown, is going to share which versions have which features to help you make an informed choice.

Markdown has changed the way professionals in many fields write. The language uses simple text with minimal markup and can convert it to a growing number of formats. However, not all markdown parsers are created equally. Because the original spec hasn’t evolved with the times, alternate versions like Multi-Markdown, GFM (Github Flavored Markdown), Markdown Extra and others have expanded the language.

The original parser was written in Perl. The core features include parsing block elements (such as paragraphs, line breaks, headers, blockquotes, lists, code blocks and horizontal rules) and span elements (links, emphasis, code snippets and images). Since then, the language hasn’t been expanded by its creator John Gruber, so a number of additions and implementations have surfaced with different parsers adding support for different implementations as they see fit, or interpreting how certain elements are parsed.

Choosing a version

There’s a lot to consider when thinking about implementing Markdown into a project, including the language you’ll be developing with as well as the features you want to support. The original implementation was written in Perl, but that’s not a practical option for every project. There are implementations in most popular languages including: PHP, Ruby and JavaScript. Which language you choose will have repercussions as to which features you’ll be able to support and what libraries will be available. Let’s take a look at some of the options:

There are additional implementations in many other languages, just in case you’re looking to implement Markdown in other languages.

Noteworthy versions

With the many versions of markdown available, a few have had a substantial impact on other versions. So much so that you’ll often see them quoted as part of other versions. For example, libraries will mention support of CommonMark, GFM or Multi-Markdown. Let’s take a look at what those mean.

Optional Features

Let’s take a look at the features that are available through different implementations.

```
body {
  margin: 0;
  padding: 0;
  color: #222;
  background-color: white;
  font-family: sans-serif;
  font-size: 1.8rem;
  line-height: 160%;
  font-weight: 400;
}
```

 tags, which makes the text show up as pre-formatted text in a fixed width font. Some implementations can improve on this by allowing you to specify a language next to the tickmarks and may include a parser that automatically lets you choose different color styles and specify which language your code was written so that the colors are more meaningful.

```css
body {
  margin: 0;
  padding: 0;
  color: #222;
  background-color: white;
  font-family: sans-serif;
  font-size: 1.8rem;
  line-height: 160%;
  font-weight: 400;
}
```
Available with: Github Flavored Markdown, Kramdown*, Marked, Maruku, Multi-Markdown, PHP Markdown Extended, Python Markdown, Redcarpet, Remarkable, Showdown
* Some of this support doesn't come embedded into the parser, but is dependent upon other libraries like highlight.js.

Dimensions | Megapixels
---|---
1,920 x 1,080 | 2.1MP
3,264 x 2,448 | 8MP
4,288 x 3,216 | 14MP

---
Title:  SVG Article  
Author: Ray Villalobos
Date:   January 6, 2016
heroimage: "http://i.imgur.com/rBX9z0k.png"
tags:
- data visualization
- bitmap
- raster graphics
- navigation
---

You can find a demo of a site[^Demo] built with PostCSS in our footnotes, or you can checkout the [^Github Repo] for the project.

#### Footnotes
[Demo](http://iviewsource.com/exercises/postcsslayouts)
[Github Repo](https://github.com/planetoftheweb/postcsslayouts)

- [ ] Run `> npm-install` to install the project dependencies
- [X] Install gulp.js via the Mac terminal or Gitbash on a PC `> npm install -g gulp`
- [ ] Run the Gulp command `> gulp`

ES6/ES2015
:   The new version of the popular JavaScript language

TypeScript
  ~ TypeScript is a language that is a superset of JavaScript that can be compiled through a transpiler to JavaScript that will work with most browsers.