Type Nugget: Good Typography is About Finding the Right Playground

This is a golden era for web typography – in relative terms at least.

After spending most of two decades working within the tiny design sandpit of Times, Helvetica, Arial and Courier, we now have the facility to embed almost any font we like on a page or app (without needing a flashy hack either).

Have our tools caught up? Probably not.

While online type services offer thousands of free embeddable fonts, experimenting with those fonts in Sketch, Illustrator, Photoshop or even XD is hardly seamless.

And good typography is so often about trial and error. While sound typographic principles will always help to guide you, lots of fantastic type combinations shouldn’t work so well in theory.

So here’s a promising new free tool to help your typographical tweaking.

Type Nugget

Type Nugget is a handy web app designed to be that place to play and experiment. It brings together an extensive external font list with robust CSS controls to let you tune your way to attractive type. This is a compl

The UI

The Type Nugget UI is divided into left and right halves – live preview on the left, controls the right. There are five fairly sensible categories for your type styling, nicely organized into an accordian menu.

1. Global type styles: Including background color
2. Headings: H1 - H6
3. Paragraphs: Base text, Strong, Emphasis
4. Links: Hover, Active, Visited
5. Lists: Order lists, Unordered lists & List items

Each accordian panel offers all the relevant CSS text properties you’d want to have access to including font-style to letter-spacing to text-align to text-transform.

Importing External Fonts

For me, the most interesting part of Type Nugget is being able to play with fonts. Adding fonts to your collection is easy. Hit the ‘Font-family’ dropdown to open the ‘Select Theme Fonts’ option.

This launches a scrolling modal window that lets you browse hundreds of fonts and collect the ones you like. As far as I can tell, Type Nugget currently only offers Google Fonts – though there’s nothing stopping them from adding other font services in future. Your fonts collect at the top.

Continue reading %Type Nugget: Good Typography is About Finding the Right Playground%

by Alex Walker via SitePoint

6 SEO Myths Debunked

This article is part of an SEO series from WooRank. Thank you for supporting the partners who make SitePoint possible.

Whether you’re brand new to search engine optimization, got some experience or you’re a seasoned vet, you’re probably operating under some faulty assumptions or outdated information you’ve picked up along the way. Unfortunately, there’s a chance you think you’re doing everything right but unknowingly hampering your own marketing. As you move forward into the holiday shopping season and the next year (we’re already in Q4, people), put these persistent misconceptions to bed so you can get the most out of your digital marketing efforts.

1. SEO Is All about Keyword Density

This myth is the remnant of a bygone age. In the old days of SEO you could trick search engines into thinking you had a highly relevant page by publishing thin content (just a few hundred words per page) that was crammed with keywords and their synonyms. This type of SEO was struck down by Google’s Panda update, which targeted low-quality, thin and duplicated content. Sites that had over optimized took a hit to their rankings and traffic. If you’re still operating under the idea that keyword density matters, you’ll probably struggle to rank well, and you’re providing your visitors with a worse user experience to boot.

That doesn’t mean don’t optimize your site for a specific keyword. You just need to do it naturally and keep in mind how you’re providing value to your users. Places you should still use your keyword are:

• URL: Search engines and human users look at URLs to tell them what they should expect to find on the page, so they play a big part in SEO. Best practice for optimizing URLs is to use your keyword at the beginning, use hyphens as word separators and keep them as similar to the page title as you can.
• Title tag: One of the most important on page SEO factors, title tags are one of the strongest hints you can give search engines about what the page is about. Like with URLs, use your keyword at the beginning of the title. This is a spot that’s really easy to over-optimize, so you should really think carefully about using more than one keyword here. Only do so if it can happen naturally and if the two keywords are very closely related. Otherwise, stick to one keyword, and once is enough — using the same keyword in the title tag repeatedly is a surefire way to make Google think you’re web spam.
• Headers and sub-heads: Headers (<h1> tags) and sub-heads (<h2>-<h6> tags) give your content order and structure, which makes it easier for search engines to interpret it and more enjoyable for humans to consume it. H1 tags are extra important as they function as the content’s title (although note that they are not the same as the <title> tag). Using keywords in these spots will tell readers what to expect from each section of content, but overdoing it will tank your ranking.

When it comes time to write your page content, don’t worry about how many times you’ve used your keyword — search engines don’t really look at it that way and if the content is too keyword rich it will make you look bad. Instead, focus on using your keyword in the places mentioned above and throughout the entire page. This is where longer content really pays off: you’ll have your keyword and semantically related words naturally appear in different places, which will make your page look better. Measure how consistently you use keywords and related words with a WooRank audit:

2. Images & Videos Don’t Matter for SEO

Images and videos play a role in SEO in two important ways: Regular search results rankings and image/video search results. Images and videos help your on page SEO in two ways:

• Improved user experience. No one wants to click through to a page only to be confronted with a giant, unbroken wall of text. Photos, illustrations, infographics and other images make your page look attractive and break up text for easy consumption. This will increase time on page and decrease bounce rate, two factors Google uses to rank pages. Keeping your image size down will reduce page load time, which is another important factor in UX and SERP ranking.
• More relevance to keywords. Even though search engines can’t see what’s in an image, they are able to crawl the image HTML tag on the page. Use this to your advantage by optimizing your images with alternative text and filenames that are clear, descriptive and use keywords naturally.

Well-optimized images and videos will also open up your page to a new channel of traffic: image and video search results. What’s really great about this sort of SEO is that you can double dip here: optimizing your media to help your pages rank will also help them rank in image search results. There are two vital parts of multimedia code to optimize:

• Filename: Use filenames like you would URLs for a webpage. Use keywords at the beginning, separate words using hyphens and be descriptive and include as much detail as you can.
• Alternative Attribute: Also known as the alt tag or alt attribute, the alternative attribute gives details about the media that didn’t fit in the filename. Write alt attribute like you’re describing the image to a person who can’t see — because that’s exactly what the alt text does. Search engines rely heavily on alt attribute since they can’t crawl an image to figure out what it is.

Check your image optimization with a WooRank audit to verify that your images have correctly implemented alt attributes.

Ensure that search engines are properly crawling and indexing your images and videos by using the <image> and <video> extension to your XML sitemap. If you’ve got a lot of images and/or videos, create image and video sitemaps and add them to your site as part of a sitemap index file.

3. Rich Snippets are Bad for Marketers

Rich snippets, both the Knowledge Graph and Answer Box, are part of Google’s effort to enhance search results by interpreting search intent and providing the searched-for information directly in SERPs using semantic search information, gathered from the web in its entirety. These rich snippets have some marketers tearing their hair out. Since Knowledge Graph gathers information from all over the web, it won’t always link back to your site.

Continue reading %6 SEO Myths Debunked%

by Greg Snow-Wasserman via SitePoint

CodeSix

CodeSix is a full-service digital agency specialising in everything online from Mobile Apps through to Internet Marketing

by csreladm via CSSREEL | CSS Website Awards | World best websites | website design awards | CSS Gallery

6Q Employee Surveys

6Q is an employee pulse survey startup that allows you to survey your employees and get valuable feedback in less than two minutes per week. The SaaS application platform is custom developed, and marketing website was recently redesigned.

by csreladm via CSSREEL | CSS Website Awards | World best websites | website design awards | CSS Gallery

Letterwine

We took one part great wine, one part brilliant design, and created a great wine concept.A concept focused on personality and creativity. Every letter of the alphabet is represented, which opens up a world of possibilities. Spell out your friends nam

by csreladm via CSSREEL | CSS Website Awards | World best websites | website design awards | CSS Gallery

This Week's HTML5, CSS and Browser Tech News #261

Read this e-mail on the Web FrontEnd Focus formerly HTML5 Weekly The State of HTML5 Input Elements Tim Severien A look at HTML5 input elements, how each browser interprets them and what the best strategy is for using them in your web projects. Is jQuery Still Relevant? Telerik Developer Network The transcript of a chat with web and mobile dev experts discussing whether the jQuery project is still useful for modern web development. How to Use CSS Feature Queries Abbey Fitzgerald An overview of how CSS Feature Queries can be used to detect support for specific features on different browsers. Discover the world’s most trusted SQL Server comparison tool Red Gate  Sponsored SQL Compare is the industry standard for comparing and deploying SQL Server database schemas quickly and accurately. Find out why 71% of the Fortune 100 use it to create error-free deployment scripts with a free trial. You Might Not Need JavaScript Una Kravets JavaScript is great, yet you can build so many functional UI components without it. Here’s a number of typical web components built with HTML and CSS/SCSS. The Average Web Page, From Top Google Results Advanced Web Ranking This study looks at HTML usage data from 8M pages gathered from top Google results (for about 30M keywords, chosen by volume). An example: The average web page uses twenty-five different element types. Inclusive Markup: A Practical Look at Accessibility Estelle Weyl A practical exploration of the native Web accessibility landscape with expert Estelle Weyl. Usability Testing of Inline Form Validation Christian Holst The benefits of inline form validation are numerous when implemented correctly but many sites don’t use it or do it poorly. Lots of tips here. Jobs Senior Front End EngineerEveryone should have the power to create professional-quality videos. As a member of the Animoto team, you'll be developing a responsive, elegant web experience and pioneering the next generation of video creation software. Animoto Front End Developer at GeckoboardGeckoboard is a successful and growing 30-person startup based in East London looking for curious and creative problem solvers to help create beautiful UIs with React and ES6. Geckoboard Don't Get Frustrated - Get HiredSick of pushy recruiters, and dead end interviews? Try Hired to hear from top tier companies, and only talk to relevant companies. Hired In brief Moving Towards a More Secure Web news Beginning in January 2017, Chrome will mark HTTP pages that collect passwords or credit cards as non-secure.  Google AMP Is One Year Old and Growing Fast news There are now 600 million AMP pages on 700,000 domains.  Greg Sterling Blink Intent to Implement: The 'system-ui' Generic Font Family news This new generic font family allows a standardized way to use the system font, on all platforms Blink supports.  blink-dev Is WebVR Ready? The Current State of WebVR Browser Support news  Mozilla VR Team Join Google for Polymer Summit 2016 via Livestream on 17-18 October news Two days of talks on Polymer, Web Components, Progressive Web Apps, and the future of the mobile web.  Google Inc. SPONSOR Latest WebKit Build Supports JavaScript Internationalization API news  WebKit Why Nexedi is Suing Apple for Better HTML5 Support in iOS news  Nexedi Chrome Dev Summit 2016 news Chrome Dev Summit 2016 will take place at the SFJAZZ Center in San Francisco, CA on November 10-11. Join Chrome VP Darin Fisher for two full days of announcements and talks from the Chrome team. Register now with code FRONTENDFOCUS.  Google Building a Maintainable and Scalable CSS Codebase with ITCSS tutorial  Oliver Thomas Klein Styling Underlines on the Web tutorial Styling the underlines that sit beneath links can be trickier than you’d think — this post aims to get you up to speed on your options.  John Jameson Responsive Images 201: Client Hints tutorial Client Hints can make the day-to-day task of creating responsive images easier by greatly simplifying the markup.  Jason Grigsby Level up your Ember Skills with simplabs' workshops  simplabs are offering Ember.JS workshops, ranging from 3 day Jumpstart events to advanced workshops which cover techniques like complex component architectures, FastBoot and Testing.  simplabs SPONSOR Component Based Style Reuse video Pete Hunt, who worked on React at Facebook, talks about techniques for CSS styling in web apps versus documents - 37 minutes.  Pete Hunt You Might Not Need a CSS Framework video Frameworks can come at a cost, paid in big CSS files and unused styles.  Belen Albeza The Right Layout Tool for The Job video Rachel Andrew takes a look at Flexbox, CSS Grid Layout and Box Alignment through a lens of performance.  WebExpo Laying Out The Future with Grid and Flexbox video 25 minutes.  Rachel Andrew Your Body Text Is Too Small opinion Why website body text should be bigger, and ways to optimize it.  Christian Miller Critical Style Snapshot: Capture CSS Used Above The Fold tools Capture and copy CSS above the fold with one click.  Léon Smit Hero Patterns: Repeatable SVG Background Patterns For Your Projects tools  Steve Schoger Jpeg.io: Web Service to Convert Any Image into a Highly Optimized JPEG tools  Kraken.IO Font-Awesome Assets code Convert any of FortAwesome’s Font-Awesome icons to an asset, such as an ‘svg’ tag or a Base64-encoded PNG/SVG ‘img’ tag.  CrocodileJS A Tweet-Sized CSS Layout Debugger code A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random CSS hex color.  Addy Osmani Chnl: Connect Together Web Audio API Effects and Channels code  Maximilian Torggler Stretching The Limits of CSS 3: 5 Creations in Pure CSS demo  Independent Software Curated by Peter Cooper and published by Cooper Press. Unsubscribe : Change email address : Read this issue on the Web Published by Cooper Press Ltd. Fairfield Enterprise Centre, Louth, LN11 0LS, UK

by via FrontEnd Focus

13 jQuery SelectBox/Drop-down Plugins

This popular article was updated on 12th October, 2016 to reflect the current state of select/dropdown plugins.

The default styling for select elements isn't for everyone. Sometimes you might want to control how it looks (to keep it consistent across browsers and devices) or you might want additional functionality that just isn't supported natively.

Thankfully there's a heap of great jQuery powered plugins out there to simplify the process.

We're going to run through a selection of plugins you can incorporate into your next project. Some of these plugins are highly configurable with options, methods, and events, while others are simple replacements for select elements for styling and ease of use.

Chosen

Chosen is an extensive plugin that not only restyles your select elements but provides additional functionality such as in-select searching, multiple element selection, and highlighting.

You can use this plugin if you're looking to update the default styling of your select elements, but the real power here comes from the additional functionality:

• The ability to handle multi-select options. Each choice is saved and easily removed if required
• The ability to filter elements by searching. Perfect for when you have a long list of options (such as country names)

Everything just works with this plugin and the desktop support reaches back to IE8 compatibility. One positive (or negative) factor is that on mobile devices the select elements revert back to their native form, letting mobile browsers control how you interact with them.

The options documentation outlines all the settings, methods, and events that you can interact with to customize your elements. The plugin itself is maintained by the developers who worked on the Harvest project management tool. Their GitHub repository is continually being updated, with additional features, bug fixes, and optimizations being rolled into the plugin.

Website / GitHub

Select2

Select2 is a fully-featured, rich select replacement / enhancement plugin. It not only restyles your select elements but also extends them with additional functionality.

Much like other advanced select plugins, it packs in a whole heap of customizable feature such as:

• Single select element / element with optgroups
• Multi-select element
• Sortable / filterable search field for select elements
• Ability to load data from a remote data source (e.g from an API to dynamically change options)
• Tagging support (selecting from a predefined list / adding dynamic tags on the fly)

Select2 has been in development since back in 2012. The developers have moved from version 3 to version 4 and in the process re-written the plugin to make it faster, more responsive and mobile friendly. The GitHub page for Select2 is impressive, with a group effort behind making the plugin better with each release.

The plugin is significantly more developer focused, with their options page showing comprehensive examples of how you'd use each of the different features.

This plugin provides a high level of customization and is a great go-to solution if you're looking for a plugin that can be customized to match your project.

Website / Demos / Github

jQuery Nice Select

This plugin is a lightweight select replacement library. jQuery Nice Select replaces the default native select elements with restyled dropdown menus.

There isn't much to this plugin as it's meant to be used as a quick way to restyle select elements, providing something visually appealing without much effort. The plugin is actively being developed and improved on their GitHub repo and works really well across both mobile and desktop browsers.

Continue reading %13 jQuery SelectBox/Drop-down Plugins%

by Simon Codrington via SitePoint