How to Build a Filtering Component in Pure CSS
Let’s get building!
1. Begin With the HTML MarkupWe start by identifying the filter categories in our component. In this example, we’ll use seven filters:
To do this we first define seven radio buttons which we group under the categories keyword. By default, the first radio button is checked:<input type="radio" id="All" name="categories" value="All" checked>
<input type="radio" id="CSS" name="categories" value="CSS">
<input type="radio" id="jQuery" name="categories" value="jQuery">
<input type="radio" id="WordPress" name="categories" value="WordPress">
<input type="radio" id="Slider" name="categories" value="Slider">
<input type="radio" id="fullPage.js"...
6 Tips for Accessibility in Form Design
Forms are a really important part of the web experience. They catalog requests, complete purchases, assist signup flows, and play a crucial role in your business’ key metrics. Here are some best practice tips and examples to ensure your forms are usable, logical and effective for a wide range of users.
1. Test the Tool!One of the best ways to understand the limitations of your design is to test it. While you might not have access to every existing assistive technology on the market, there are plenty of browser extensions and free software you can use to simulate accessibility scenarios. They might help you, for example, navigate with a screen reader; a tool that navigates a page through heading structure and link text. You might also check out videos of screen readers in action, to get an impression of how they might handle your forms.Some popular examples of screen readers include: JAWS from Freedom Scientific, Window-Eyes from GW Micro, and Dolphin Supernova by Dolphin.
Building an Inclusive Web: Why Accessibility Matters
2. Clearly State the Information NeededOne issue that users with disabilities encounter is a barrier to understanding what information or input is required. Be sure to clearly indicate what is needed. If something is optional, make it known with a label. First name rises to the top of the field on input focus warbyparker...
AMP Conf 2019: Successful web experiences for everyone
Konnichiwa from Tokyo and our third annual AMP Conf! More than 500 developers are joining us over the next 2 days to hear from 50 speakers about how they’ve used AMP, what they’ve learned, and what’s coming next. With over 850 code contributors to the project and billions of AMP websites, the AMP team is more motivated than ever to build towards our vision of a strong user-first open web forever. And with a new governance model announced last year, leading voices across the web will ensure the project aims to meet the needs of both developers and users.
See all the announcements in the AMP Conf Keynote
AMP means great user experiences on the web
What’s in a name? When AMP started more than 3 years ago, Accelerated Mobile Pages fit pretty well. But AMP isn’t just accelerating webpage experiences anymore – it’s drives an overall superior user experience across the web. And mobile phones are just one of a myriad of supported devices AMP runs on, including desktop and tablets. Plus with immersive stories, dynamic emails, and better ads we are well beyond our original pages name.
Moving forward, The AMP Project will just be known as AMP – no acronym necessary, just a word that signifies speed and a great user experience across the web. You’ll see this reflected in our newly launched home for all things AMP, amp.dev, where you’ll learn all there is to know about...
New Course: Figma to HTML
What You'll Be CreatingIf you haven't yet got to grips with the Figma interface design application, now's your chance. In our new course, Figma to HTML: Code Up a Single-Page Design, you'll master Figma by going through the process of converting a Figma website design to HTML. What You’ll LearnIn this course, Kezz Bracey will show you how to take a one-page design for a travel website in Figma and convert it into HTML.In the process, you’ll learn some tricks about working with Figma and using CSS Grid and Flexbox to make layout control a breeze.Here are some free lessons from this course, as a preview of what you can expect:Create the Basic ShellIn this video, you'll see how to create the basic shell of your site. You'll create the required documents, add basic HTML, link in your stylesheet, and load the fonts you’ll need. The last element of the groundwork is to set up some base layout classes you’ll use throughout the content of the site. Create the Top HeaderIn this video, you'll start coding up the content of the site, beginning with the three headers that comprise the upper portion of the page. Create the Tours Section GridIn this later video from the course, you'll start building the main content sections of the site. You’ll start by laying out the content of the “Tours” section using CSS Grid. Take the CourseYou can take our new course straight away with a subscription...
15+ Best eCommerce Website Templates: Updated for 2019
Adding an online store to your website, or creating one from scratch, is a great way to increase your business revenue and reach new customers. This is especially true if you’re a small business owner looking to expand your customer base without a big budget needed for another physical location. Incorporating an online store, or in other words, adding eCommerce functionality is an affordable way to spread the word about your business online and reach people beyond your regular business location.When it comes to building eCommerce websites, a great design, no matter which eCommerce platform you’re using, is a must. A well-designed, responsive, and eye-catching template will put your products in the spotlight and help skyrocket your sales.Whether you’re a business owner looking to create a new online store, or a web professional that is helping your client with their eCommerce setup, working with a top-notch site template gives you a leg up.Build an Effective eCommerce Store, With a Great DesignWhen shopping for an eCommerce website template, you should keep an eye out for some important features to make sure you are delivering the best possible experience to your visitors. These features include:
A responsive and mobile friendly design.
A template that allows for featured product images.
A cart that automatically updates.
Customizable design options.
Product variation features...
How to Draw Patterns with CSS Using CSS Doodle
CSS helps us get creative in all kinds of ways, and today we’re going to take our CSS creativity to the next level. We’re going to use a tool called CSS Doodle to create some awesome repeated patterns.CSS Doodle is a web component, you use it just like any other HTML tag (for example <css-doodle>). We’ll begin with the basics, learn how to install and use it, then we’ll create four unique patterns. Check out the video tutorial, or scroll down to read the written version and see what we’re building.Patterns with CSS Doodle
Shopify Apps make AMP easy and effective for eCommerce
Online retailers are always looking for ways to exceed their customers’ expectations. With most online shopping now happening on mobile devices, it’s important for merchants to deliver fast, engaging experiences optimized for mobile. Because AMP guarantees consistently fast webpages, it’s becoming an increasingly popular framework for eCommerce.
Shopify Apps add functionality or features to Shopify stores, like plugins or extensions do to other platforms. Apps built to support AMP provide an easy way to launch a lightning fast, mobile optimized AMP version of a store that users love.
The best AMP Apps for Shopify are able to easily create many page types, including product, collection, home, and blog pages. They’re free or low cost, and come with reliable support. Some integrate with third party apps, meaning AMP versions of stores will not lose critical functionality such as product reviews. These Apps generate pages can be cached and served nearly instantly when accessed through Google Search.
The most popular AMP Apps have been installed thousands of times and have received 5 stars in 87% of user reviews. AMP by Shop Sheriff has great user reviews, and has been able to grow quickly because of their focus on user experience. “Merchants using our app, as well as their customers who get to experience the AMP pages, all love the experience,” said Shop...
AMP on the Times of India
Editor’s Note: The below post was originally posted on the AMP WordPress Plugin site by the Times of India.
Site performance and user experience matter to the Times of India, and therefore we keep tabs on new solutions and advanced technologies that allow us to make our website faster, more engaging, and more user-friendly. This is why we decided to evaluate the official AMP plugin for WordPress to leverage the performance and usability advantages that AMP enables. Our goal was to evaluate the plugin on some sections of our web presence, and then scaling it across other Times of India sites.
We started this project with Timesofindia.indiatimes.com/blogs. At the beginning of the evaluation we faced some expected challenges having to do with the need to make changes to the site to align it with AMP principles, such as CSS size constraints and the removal of 3P JS. Some of the aspects that were tackled included the refactoring of certain components and widgets, such as the Social Share widget to implement them using AMP components, replacing pop-ups with the AMP-lightbox component, implement tab panels using the amp-selector component, and other similar changes required to make the site compatible with AMP. One important change was the replacement of all the Google Ad Manager/CTN ads on the site with AMP ads...
17 Best Shopify Templates for Your Online Store
Managing an online store can be difficult; it’s challenging to differentiate yourself in ever busier marketplaces. If this is what’s facing you at the moment, you’re in the right place. Below is a list of the best Shopify templates available on Themeforest to help you take your website and online business to the next level. Every single one of these templates is perfect for getting your store noticed and racking up more sales!Shopify Templates on Envato MarketEnvato Market (Themeforest) is home to hundreds of premium Shopify templates. With more being added each month, we recommend you check back regularly to see what’s new!Shopify templates available on Themeforest
1. Manor - Clean, Minimal, Drag & Drop
Manor is one of the more versatile examples among the many Shopify templates featured in this post. The Manor Shopify template comes with over 30 different homepage templates to choose from, plus 24/7 support, thorough documentation, as well as video tutorials. Its minimalist design is a great option for your Shopify store2. Mantis - Minimal & Modern Shopify Theme
Oozing style, Mantis is an absolutely stunning and colorful Shopify template. It comes with a variety of different pre-made pages including a great collection of product pages. It also features a few different pre-made sections to choose from, including footers and headers. It has a fresh and uncomplicated...
WordPress Gutenberg Editor: Quick Start Tutorial
In this tutorial I’m going to give you a quick start for working with the WordPress Gutenberg editor.WordPress Gutenberg Quick Start
Let’s run through the points made in the video:
1. First Step: Update Everything!Before you even look at the Gutenberg editor, before you do anything else, you’ll want to make sure you have a backup, then update everything on your WordPress website. Update whichever theme you’re using, and update all of your plugins. Many theme and plugin developers have made changes to their software to make sure it’s all compatible with Gutenberg. In some cases they’ve even added new features which take advantage of what Gutenberg offers. Take a look at the Gutenberg optimized themes on Themeforest to see what’s available.Gutenberg optimized themes on Themeforest
2. Introducing the Blocks EditorThe core of how Gutenberg works is in something called “blocks”, and you can break down how we work with blocks into three essential concepts:
Insert your blocks
Configure your blocks
Sort your blocks
Let’s take a closer look at each of these concepts.Insert Your BlocksAfter you’ve created a new post or page and you’ve added your title (by the way, that title is separate to the blocks you’ll be adding) you’re ready to start inserting blocks into your content. Gutenberg offers a few ways to add blocks.There’ll be a block at the top of the post by default, into which...
AMPproject.org moves to amp.dev!
It’s been over 2 years since the current version of ampproject.org launched, just before the very first AMP Conf in early 2017. Since then the AMP Project has grown a lot and launched entirely new applications of AMP on the web like emails and stories. Additionally AMP resources were scattered across multiple websites like ampbyexample.com and ampstart.com. So we decided to bring everything together into something new, better organized and easier to use.
To bring all of AMP under a new home, we’re thrilled to announce amp.dev! The all new amp.dev will replace ampproject.org in order to provide developers (and their business counterparts) everything they need to know about AMP across all its various forms. And of course, it’s built entirely with AMP, using AMP optimizer to make the site load even faster when not served from a cache.
The all new amp.dev homepage
On amp.dev you’ll find information for all the applications of AMP- sorted by color across websites, stories, ads and email. Overall the documentation section was designed to make navigation as straightforward as possible. Guides and tutorials are sectioned by stages in the AMP developer workflow. This will give you the resources and confidence to build successful AMP sites at each step in your process!
Documentation across websites, stories, ads and emails
All of the existing ampbyexample.com...
Note: This tutorial assumes some flexbox knowledge. If you’re just beginning, Anna Monus has a great collection of primers to get you started:Flexbox
A Comprehensive Guide to Flexbox Alignment
1. Begin With the Page MarkupThe page markup is pretty straightforward; a header, a heading, a mailto link and a section:
<body class="position-fixed d-flex flex-column text-white bg-red"> <header class="page-header"> <nav class="d-flex justify-content-between"> <a href="" class="logo">...</a> <ul class="d-flex"> <li> <a href="">...</a> </li> <!-- possibly more list items here --> </ul> </nav> </header> <h1 class="position-absolute w-100 text-center heading">...</h1> <a class="position-absolute contact" href="">...</a> <section class="position-absolute d-flex align-items-center justify-content-center text-black bg-white skills-section" data-...