34% OFF BlueHost Shared Hosting

Get 34% OFF the Shared Hosting Basic Package at Bluehost.com!

BlueHost is a web hosting company owned by Endurance International Group. BlueHost is one of the 20 largest web hosts in the world that collectively hosts over 1.9+ million domains,along side its sister companies, HostMonster, FastDomain and iPage.

Join NOW!

Introducing Google Analytics 360 Suite Policies

We have been making improvements to the admin section of Google Analytics 360 Suite to fit the needs of modern enterprises. Recently, we made account recovery easier. Today, we’re pleased to announce another feature we’ve heard users ask for: User policies for your organization. User policies are a user management feature to help Google Analytics 360 Suite organization administrators to better control who has access to their corporate data.

Continue Reading >>

Disable Text Selection with CSS

See the Pen Disable Text Selection with CSS by Brandon Himpfen (@brandonhimpfen) on CodePen.16787

You can use CSS if you wish to disable / disallow text selection.

Firstly, add the following to your CSS file:

.disable-selection {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}

Once you’ve added the above code snippet to your CSS file, you can use it in your HTML code by adding the disable-selection class:

<p class="disable-selection">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

Convert PSD to PNG with ImageMagick

To convert a PSD file into a PNG file using ImageMagick use the following command:

convert 'image.psd[0]' image.png

The above command will convert the entire PSD to one PNG file. Make sure you change the file name if the file name is not image.

However, if you want to convert all layers into individual PNG files, use the following command:

convert image.psd image-%d.png

SEO Checklist

This is a start of a SEO checklist. Each item should be checked off in order to help you rank higher in search engines, particularly Google.

  • Pages can be indexed
  • Mobile version of website is available
  • Sitemap is available
  • Structured-Data is used where possible
  • Headlines used
  • Headlines in correct order
  • Meta descriptions used
  • Meta keywords used
  • Meta title is filled correctly
  • Keywords used in headlines
  • Images use the alt-attribute
  • Links use a title-attribute
  • Links in navigation do not use title-attribute
  • No Duplicate Content
  • Usage of absolute URLs
  • Internal links point to HTTPS version of page
  • Redirects are done with 301
  • No 404-errors
  • No 500-errors
  • Canonical Tags are used if applicable
  • Ratio of code and content is around 25% for shop pages and 50% for content pages
  • Affiliate links have rel="nofollow"
  • Website uses HTTPS

Front-end Checklist for Websites

Use the following checklist for pre-launch websites or websites that are already live. This checklist is for the front-end of your website or blog, and are based on Google’s Progressive Web App Checklist.

Fork on GitHub

Performance

General

  • HTTP/2 is being used
  • CDN is used for assets
  • CDN is used for static resources
  • Cookie-less domain used for static files
  • DNS prefetching is used
    • <link rel="preload" as="script">
    • <link rel="dns-prefetch">

Resources

  • JavaScript files combined into one file
  • JavaScript is minified
  • JavaScript is compressed
  • No inline JavaScript
  • CSS files combined into one file
  • CSS is minified
  • CSS is compressed
  • CSS has no use of @import
  • No inline CSS
  • HTML is minified
  • Static files are compressed with gzip or brotli
  • Static files are server-side pre-compressed
  • HTML is compressed with gzip or brotli
  • Usage of correct image formats
  • Usage of responsive images
  • Images are optimized
  • Image size served is only what is required
  • Image are cached in the browser
  • SVG files are minized
  • SVG files are used where possible
  • Only fonts that are used are loaded
  • Browser cache is used efficiently
  • ETags is not used
  • Expires, cache-control and max-age headers for static resources is set to 1 year
  • Asychronous or deferred loading of non-critical content
  • Tracking scripts loaded asynchronously

Measurements

Usually I measure the main pages of a project here.

  • Count of all files
  • Size of all files combined
  • Download time of the page
  • Google Page Speed analysis (Desktop, Mobile and Mobile UX; x of 100)
  • SpeedIndex

Rendering Performance

  • Intrinsic image sizes are specified in the markup
  • CSS is loaded in the document head
  • Scripts are loaded at the end of the document
  • Scripts are loaded with defer-attribute
  • Scripts are loaded in the document head after styles are loaded
  • Scrolling is possible with 60fps
  • No usage of document.write
  • CSS animation causing layout(reflow) is not heavily used

Device performance

  • CPU usage
  • Memory usage
  • GPU usage

Cross-Browser

  • Website is loading on all current desktop browsers (Safari, Firefox, Chrome, IE11, EDGE)
  • Website is loading on all current mobile browser (Chrome for Android, iOS Safari)
  • For Shops: Checkout is usable on all necessary devices and browsers
  • Viewport Meta Tag is used correctly
  • Usage of correct input types

SEO

  • Pages can be indexed
  • Mobile version of website is available
  • Sitemap is available
  • Structured-Data is used where possible
  • Headlines used
  • Headlines in correct order
  • Meta descriptions used
  • Meta keywords used
  • Meta title is filled correctly
  • Keywords used in headlines
  • Images use the alt-attribute
  • Links use a title-attribute
  • Links in navigation do not use title-attribute
  • No Duplicate Content
  • Usage of absolute URLs
  • Internal links point to HTTPS version of page
  • Redirects are done with 301
  • No 404-errors
  • No 500-errors
  • Canonical Tags are used if applicable
  • Ratio of code and content is around 25% for shop pages and 50% for content pages
  • Affiliate links have rel="nofollow"
  • Website uses HTTPS

Accessibility

  • Color Contrast is good (WCAG 2.0)
  • WAI-ARIA roles are used
  • Usage of accessible elements like nav, footer, aside
  • URLs are accessible
  • Keyboard accessibility is available
  • Correct input types are used

Security

  • HTTPS is used
  • There is no mixed content on the pages
  • External plugins and trackings get loaded via HTTPS
  • Robots.txt is in use
  • Cross-Site-Scripting is not possible
  • HSTS Header is set
  • Content-Security-Policy is set and only allows specific hosts and no inline scripts

More

  • Strict usage of domain with or without www
  • Correct language set in HTML tag
  • Charset is set
  • HTML is valid
  • 404-page is available
  • A special print style sheet is in place

Server

  • Correct language set by the server
  • Correct content types set by the server

Why is mobile speed important?

In our mobile-first world, we don’t just expect to have all the world’s information at our fingertips: we expect to get it the instant we’re looking for it.

Unfortunately, most mobile sites don’t live up to this expectation, despite major advancements in network speeds. Slow loading sites frustrate people with bad user experiences and cause publishers to lose revenue.

You can be the exception— with careful planning, you can optimize your site for mobile speed. The mobile web revenue calculator below will help you explore how optimizing the speed of your mobile website could help you increase your revenue.

Continue Reading >>