Thursday, November 30, 2017

Published 1:13 PM by with 0 comment

7 Ways to Keep Your Site Alive

Once upon a dark, stormy night, when all was quiet, a lone web designer was designing away. He had Sketch open, a coffee nearby, and a cheerful tune in his wired earbuds, because Bluetooth is weird and has a delay that bugged the heck out of our Hero. Ahem, anyway…
During a lull in the music, our intrepid designer saw a notification on his phone. It was an email from his favorite customer, and he smiled. That smile disappeared when he read the contents. There were three broken links in the client’s site. Three!
“It’s okay.” he thought. “That happens someti…” But the list went on. The slideshow was broken. The layout looked a “little bit weird, somehow”. And worst of all, the contact form didn’t work.
In a panic, he scrambled to type in the URL. Everything looked fine. No, it looked pristine. He’d just fix the broken links and… no. He was thorough and diligent. He opened up ChromeFox* to see how the site looked in the client’s browser of choice.
It was as though staring into the mouth of Hell, and this portal to damnation was three pixels off-center. But all is not lost, dear Reader. Our fictional designer might be shamed, but we can help you avoid this. New web designers would be wise to follow this list, and save themselves from incredible awkwardness!
* All names have been changed to protect imaginary browsers.

1. CHECK YOUR LINKS

Every so often, go back and click on every link in your website. Every. Single. One. You should definitely do this after making any major changes to your site, obviously, but not only then. Servers can be weird sometimes. And if you link to outside sources of information, you need to check to make sure they’ve not been broken, removed, moved, or simply been eaten by some computer error.
Few things look as amateur as links that are no longer relevant, or don’t work.

2. UPDATE YOUR CONTENT

Out-of-date content doesn’t look great. It’s not as bad as a broken link, but it can make people decide to leave, and not come back. Up-to-date information is relevant information.
God knows how often I’ve been looking for information, only to have Google’s top results be four or five years out of date
Now, if you have a brochure site for a small business, and the prices are not often subject to change, it can be fine to mostly leave the content alone. But if you have any sort of blog, media feed, or what-have-you: keep it up to date. Update once a month at the least.
If you offer useful information, tutorials, or reference information, keep that up to date, too. Go back and make edits when stuff happens. You might even want to publish new editions of entire articles when things change. God knows how often I’ve been looking for information, only to have Google’s top results be four or five years out of date.

3. TEST ON NEW BROWSERS AND DEVICES

When a new browser comes out, test your site. If you friend gets a new phone or tablet, ask to borrow it so you can test your site. New version of JavaScript comes out? Test your site with it. Get a new TV that can browse the web? You get the idea, I’m sure.

4. DOUBLE CHECK ALL JAVASCRIPT INTERACTIONS

This is actually a big one. So many sites now rely on JavaScript for basic functionality. This is a practice I’ve never condoned; but I’ve decided that I dislike beating my head against brick walls. Scripters gonna script. Large swathes of content, and even entire websites will stop working if their JavaScript stops working for any reason.
Even if you didn’t build your site that way,

5. DOUBLE CHECK ALL FORMS

It’s one thing if a small widget stops working. That’s not ideal. Forms are another matter. Forms are typically used for contacting people, or buying things, and other very essential functions. They are one of the primary ways that users provide websites with vital information. If they’re willing to fill out a form, that means they’re at least partially willing to commit to whatever you have to offer.
Forms can stop working for a variety of reasons. Maybe the form has JS, and it stopped working (see above), or maybe the PHP version on your server got upgraded. Maybe the email account your contact form is sending messages to stopped working for whatever reason. Maybe it’s getting flagged as SPAM. Whatever the reason, check the forms regularly, so you don’t lose business.

6. UPDATE ALL HACKS AND WORKAROUNDS

Okay, sometimes, when you build a site, you use hacks. You use workarounds. When things get dire, you use polyfills. This is normal, and everyone does it; because no matter how ugly the hacks might be, your site must be beautiful.
But browsers get updates, browser market saturation changes, and CSS gets updated, too. At least once a year—and whenever you hear of any big changes to browsers that might affect your site—you should check to see if any of your hacks and workarounds are now obsolete. If they are, they could actually slow your site down.

7. HAVE A BACKUP PLAN

No, I mean that literally. Have a plan for backing up your entire website. Now, any decent web host should be handling backups for you, for the most part. However for smaller sites, it’s totally worth it to make regular manual backups yourself.
Large sites are another thing entirely. People with data caps (now those are spooky) could easily run into trouble when downloading gigabytes of data regularly. In this case, look into a third-party backup solution. It costs money, but it’s worth it.
And that’s it. Regular testing and considerable preparation are what it takes to make sure you are never shamed by a site that fails to work, or even “Just looks wrong”. Good luck!
 By Ezequiel Bruni   - Orginal Post: https://www.webdesignerdepot.com/2017/10/7-ways-to-keep-your-site-alive/
Read More
      edit
Published 1:10 PM by with 0 comment

5 Ways to Design With Accelerated Mobile Pages

The mobile web keeps growing at a rapid pace.
Smartphones continue to sell strongly, with Apple alone forecasting to bring in $180 billion from its smartphones by 2021. There are over 224 million smartphone users in the United States, making the mobile web an essential focus for any website owner.
The continued growth of mobile web users makes it important for designers and front-end developers to grasp proper design for accelerated mobile pages.
The practice of accelerated mobile pages emphasizes design choices that align with what search engines perceive as friendly, including a defined audience, high-quality content, proper formatting and seamless mobile compatibility. You will notice a variety of accelerated mobile pages when browsing Google in mobile by the abbreviation AMP in search results.
Accelerated mobile pages still use HTML, though they incorporate special elements that prioritize speed on mobile devices. AMP technical requirements are established by the AMP Project, with the standards worked on alongside major traffic influencers like Google. The project was created in response to clunky user interfaces and slow load times when browsing sites on a mobile device.
AMP emphasizes instant speed and a familiarized appearance, giving creators the ability to style their pages within the AMP framework. The boilerplate-centric design on most AMP pages gives a similar feel of navigation, despite differences in content presentation and color schemes.
The result is a faster, more cohesive browsing experience that improves drop rates, increases reader engagement and ushers in mobile web browsing as a mainstay.
With the power and potential of AMP so evident, it’s practical for designers to regard the tips below to help optimize the AMP experience, so their clients will benefit in a variety of ways.

1. CONSIDER AMP-CAROUSEL FOR THE HOMEPAGE

Make an impression on the page most of your visitors will begin with. Static content can be displayed on AMP to showcase available products, piquing interest for e-commerce sites as well as those displaying general content.
The AMP-carousel feature enables designers to display multiple similar pieces of content on a horizontal axis. After importing the carousel component in the header, you can utilize type=”carousel” to show up a list of images, appearing as a continuous strip. It’s an eye-catching feature that’s ideal for the front page when you’re trying to hook visitors into seeing something beyond the homepage.

2. SHOW RELATED POSTS AND PRODUCTS

Encourage site visitors to dig deep into your content. You can accomplish this by showing a list of related products or posts to the one they’re presently viewing. You can statically publish a list of relevant content, accomplishing it instantaneously by using <amp-list>, which populates a CORS request into an amp-mustache template to result in dynamically generated content relevance you can personalize to your specific preference.
If visitors enter a landing page that doesn’t align with their requests, they will either leave the site or look further for what they’re seeking. The suggestion of product alternatives is an excellent method to accommodate the user’s search process, at the very least drawing them more into the site. Even if they do not find what they are searching for exactly, they may find an alternative that does the job just as well.

3. USE AMP-ANALYTICS TO FIND AREAS TO IMPROVE

It’s important for any website owner to know how visitors are interacting with the content. The <amp-analytics> component can be used either directly or integrated with a third-party analytics platform, including Google Analytics. Within the <amp-analytics> tag, add the “type” attribute and set the value to your vendor of choice, of which there are many options. The <amp-analytics> component will help website owners have a clearer picture of what pages and design elements are resulting in conversions and which components are experiencing low user engagement.
It’s important to keep in mind when analyzing analytics that, with AMP, smart caching is naturally embedded. The result is that you may view less traffic than usual. Just keep the caching element in mind when analyzing your numbers initially.

4. USE THE BUILT-IN VALIDATOR

Ideally, designers will never get something wrong, but it can happen. To ensure everything is working properly on a page, use AMP’s built-in validator by adding #development=1 to the end of the page URL. If you open Chrome dev-tools and see the message “AMP validation successful,” then everything is working. If not, you can dig in deeper until the issue resolves. You can also use Chrome dev-tools to verify that all external resources, ranging from images and videos to custom fonts and iframes, are loaded properly.
Additionally, you can validate metadata by using Google’s Structured Data Testing Tool, either by fetching a URL or inserting a code snippet. These tools can help ensure everything is validated, so search engine crawling is enabled. On the note of search engine crawling, also double-check your robots.txt file, to verify that “Disallow: /amp/”is not present in any line. If it’s there, crawlers will not be able to access your AMP files.

5. IMPLEMENT ADS WITHIN AMP

Another benefit of AMP is a preexisting framework for implementing ads. The amp-ad, or amp-embed, component is a container to display an ad. The ads load alongside all the other resources, with the <amp-ad> custom element.
JavaScript is nonexistent inside the AMP document. Instead, AMP load an iframe from an iframe sandbox. You can set width and height values within <amp-ad>, with the “type” argument specifying the ad network displayed. The “src” attribute loads a script tag for the specified ad network, with various data attributes available to accommodate further configuration from ad networks.
You can also set a placeholder or option for no available ad, via the placeholder attribute. Video ads are also possible with native support, with thorough media component support.
Accelerated mobile pages help increase search engine visibility among mobile users, especially now that Google is embracing AMP pages in its search results.
Additionally, quicker loading times, flexible personalization and visual components that seek to improve bounce rate make for a better mobile user experience than ever.
Accelerated mobile pages provide a fantastic framework for the continuing growth of mobile web users.
 By Kayla Matthews   - Orginal Post: https://www.webdesignerdepot.com/2017/10/5-ways-to-design-with-accelerated-mobile-pages/
Read More
      edit