Category Archive

Optimization

What’s the deal with Google.amp links?

Google And Fast Loading

If a mobile site takes even a second too long to load, users navigate away. This is a well-studied phenomenon, and all companies can do is try and optimize loading so the user gets some feedback before they bounce.

Facebook created Instant Articles, an easier-to-read and easier-to-load format than the original old method of simply copying and pasting a link to your wall, which worked fine on desktop and not so well on mobile. Ads, videos, and assorted other tidbits really slow loading down on mobile devices, even on WiFi. Consumers agree via engagement: Instant Articles is great. After all, who likes autoplay videos? Google sees a fantastic channel for improving loading times, pictures how it could monetize it, and begins to assemble the Accelerated Mobile Pages project, or .amp for short, and introduces Google.Amp links. You search something on mobile, you find it, and instead of being taken directly to the site, you’re taken to a Google.Amp page that optimized the site for you.

 

How does it work?

 

How does .amp make things load faster? Well, firstly, dynamic content doesn’t show up. Everything on that .amp version of the page is as simple and easy-to-load as possible.

That means if you’ve mistagged a menu, the consumer might not be able to see it. The same goes for embedded videos and music clips. If your site is really reliant on those things being present to function, allowing .amp links is a bad move!

Secondly, the website is stripped down to its bare bones: website creators are given a small selection of tags to build out their website, which usually results in something plain, but quick-loading. If the website is really, really insistent on keeping all of its content, .amp links are unfortunately unable to help. .Amps are a trade-off!

 

And Results

 

It makes some websites downright ugly. People using .amp links have very limited tags in their toolbox, so the end websites almost always look really similar. Sometimes that’s a good thing, sometimes it’s bad. After all, if you, as a business owner, spent however many hours going back and forth with a designer (or designing a site yourself) only to have to cut most of it when signing up for those .amp links, you might be a little mad, right? Menus, color options, images – if all of it goes missing, it may as well be written in plaintext. One critic complains that this makes it easier for fake news and disinformation to squeak into the regular news stream, because when all pages look the same, all pages receive the same quality assessment from readers who don’t know better, whether they deserve it or not.

.Amp links can negatively impact search ratings and valuable data for the client website, as well. People see the page via Google, not the host’s website. As a result, the brand gets out there and impressions improve, but the website itself can’t track that data as effectively. If you’re trying to navigate the complicated world of SEO optimization, then that’s a major issue.

It also has the potential to limit ad revenue. If the ad takes too long to load, it takes to long to load, and the end user never actually sees the ad. Most Google ads function by clicks – that means that customers clicking or tapping the ad is the only way the website gets money from them. As a result, unloaded ads = lost potential revenue.

 

Good Results?

 

However, the ability to load the website so quickly is often worth it to small business owners. Customers are impatient and often expect instant feedback – with Google.amp links, they can provide that instant feedback, usually for cheaper than other speed-up options, like redesigning the site or removing certain content features.

Besides, many users actually like the lack of ads. The mobile web is riddled with annoying popups and other assorted garbage that makes sketchy websites even more annoying to navigate. Of course customers are going to pick a .amp if it means not having to struggle with jerky, autoloading videos and annoying, jumpy ads. Not to mention that .amp links take away windows for viruses!

 

Google and… Data

 

It’s not a secret anymore. Google is always gathering data. It knows what device you’re using, it has some understanding of who you are as a person, and it’s using it to build ads that people like you are more likely to click on.

Google primarily started the .amp project as a way to compete with other data hogs like Facebook and Messenger. Why? Data, valuable data. You clicked on X? We’ll show you more articles about X! You clicked on a fashion article? Why, we just so happen to have ads from Calvin Klein’s newest collection.

Now, sometimes this is good – many people find new and interesting things via algorithms. Sometimes this is bad for the consumer, where they get ad after ad about dog food despite not having a dog because they clicked an article about dogs, and sometimes it’s bad for society at large, where conspiracy theorists get more and more misinformation funneled to them via the algorithm. Nothing tells Google to stop. Once you start on a path, it takes some serious effort to get algorithmically plugged content away from your feeds.

.amp links are obviously not the only things tracking you. Anything with Google anywhere is tracking you. Adsense is tracking you. But .amp links are part of the problem, and Google is getting your info before it’s getting filtered down to the actual website’s owner.

 

Turn It Off!

 

While turning off customized ads won’t stop the data collection, it will mean you’re less likely to see oddly specific, creepily accurate ads when you’re just trying to browse. As for the .amp links, turn that off too. .AMP links are giving a lot of power to Google, and some of the information you accumulate during normal browsing may very well be sucked up by Google.

Look here: and here to control how you’re seeing ads.

Sources:

https://www.discovertec.com/blog/amp-speed-page-the-good-and-bad-of-faster-load-times

https://www.theverge.com/2019/4/16/18402628/google-amp-url-problem-signed-exchange-original-chrome-cloudflare

Small Sites Vs. A Big Internet

Art projects

 

Some little art project websites deliberately avoid indexing their page, so it’s well-hidden from traffic. Web development classes, modern art classes, and all sorts of other classes will ask students to make something online. They don’t necessarily want those websites getting shared outside of the class. Keeping a page un-indexed makes it much harder to stumble upon, but it’s not a perfect cure – people with the direct link can still post it elsewhere. If they retain it after they leave the class, and remember how cool it was, and then it ends up on Reddit… suddenly it’s a curse, especially if identifying information like names are left on-site.

Websites made as a joke in the first place can turn into a curse too! Youtuber Drew Gooden’s “Hot Dog” website was made as part of an advertising campaign for Wix, but it’s unclear if he actually wants to maintain it. It’s still in his ownership today. This is a unique problem to have! It may cause him more issues to close the site, now that it’s address has been immortalized in videos. Besides, they’ve come to expect the website to function, they’ve bookmarked it, and they’re demanding that their entertainer dance.

 

Real Retail Hours

 

Tiny DIY shopping websites sometimes get cratered by that same ‘hug of death’, especially if they accidentally go ‘viral’. Look at TikTok advertisers for example: anyone can post, and because of the app’s algorithm, it’s possible for a creator with no followers to suddenly end up with 100,000+ views on a particularly entertaining video. No ad dollars were spent, the creator was just super funny that day and it spread. This is great! Until their traffic jumps from an expected 500/day to 20,000/day, because their product has gotten much more reach than they could have prepared for. Sellouts are inevitable, frustrated users are also inevitable.

In fact, a broken or slow website will even push away people who did get to make a purchase. Unpleasant shopping experiences steer consumers away from online retailers at a horrifying rate! The same goes for lag – mobile users are unwilling to wait for an item they don’t really want, or don’t really need from that specific store. I could get a hat anywhere, for instance – why should I wait five seconds to get through to a store on mobile when I could go ding a different store? Obviously it’s not that simple, but big websites have resources that little ones don’t, and the especially wishy-washy buyers will be put off by the difference in experiences.

There are ways to handle this, but unfortunately many businesses don’t have the chance to prepare.

 

Welcome, But…

 

And then there are websites that are really hoping for growth, and it suddenly happens. It’s rare to have a site blow up overnight – most repeat visits are the result of hard work and consistent effort to capture the visitor’s attention. Unfortunately, in this era of social media, it’s very easy to accidentally blow a website out of the water. Yay, Growth! Turns into Oh No, They Aren’t Stopping. The server for the website crashes, and a lot of potential viewers are shut out from it. If the website’s lucky, the interested folks will bookmark the page and come back, so they’ve got a better distribution the second time around.

Some websites go offline a few hours after Reddit’s discovered them, to recover. The ‘hug of death’ is a well-known phenomenon – nobody’s DDoSing the website on purpose!

 

Lonesome Town

 

Single-person websites are often hoping to not be discovered by somewhere huge. Think about it: if they haven’t paid for advertising, if they don’t get revenue from hosting ads, if they don’t sell anything on their site, then they don’t make money from page views. They’re probably not looking for a giant spike in page views out of nowhere, with some exceptions like ‘public service’ projects made by civilians, or ARGs.  

 Tiny websites and tiny forums alike struggle to handle being “discovered” on websites like Reddit, Digg, or Youtube. Famously, a Buffy the Vampire superfan’s website (which I’m deliberately not linking here) was crashed by new visitors after forums made it a spectacle. Sure, the superfan posted a lot – as is their right. The information they posted helped other fans find information about meetups and appearances by the actors. The flood of people showing up on other social media to comment on and harass the single poster was unfortunate, and it could have been avoided if people hadn’t dogpiled. Even deeper, maybe people wouldn’t have dogpiled if the website hadn’t shown up on blogs. The sole commentator, maintainer, and moderator made the website private after people showed up to screw around.

 

Similarly, small sites get flooded when a big site ‘discovers’ them, and then suffer from community collapse and site breakdown. A forum with 200 or so regular posters isn’t going to be able to moderate new conversations from other, bigger sites – and even worse, newcomers who might have been interested in the topic get the idea that the website’s a total dumpster fire when it’s just understaffed. These sites want traffic, yeah, but they want the right kind of traffic. Well-intentioned traffic. On-topic traffic. If a community behaves itself, there’s no reason to have a team of 20 moderators. People showing up to flame the forum are going to stretch resources thin.

Don’t go spread news about some wacky website on big forums without knowing the site first. The consequences may be greater than you could imagine!  

 

Sources:

https://queue-it.com/blog/how-high-online-traffic-can-crash-your-website/

https://www.siteuptime.com/blog/2019/09/26/the-top-8-reasons-behind-a-website-crash/

https://www.inmotionhosting.com/blog/my-website-crashed-now-what/

Apple Wheels – It’s Wheely About Advertising

Ah, Complaining.

 

Apple Wheels

 

The Apple Mac Pro cost several thousand dollars, and it looked like a cheese grater. The little Apple-branded wheels to make it move cost about 700$, or approximately the price of the iPhone 8 at launch. Oh, but don’t worry – you can buy the feet for a mere 300$, if you just have to have Apple Brand. How did we get here? How did we, as a society, get to 700$ computer wheels?

 

Brand = Trustworthy

 

Branding by itself is an interesting mark of human psychology. It’s a shortcut to trusting something! The brand of an item itself purely imaginary – the brand, by itself, does not produce value for the final product except for the value the consumer gives it in their mind. “A rose by any other name would smell as sweet”. Look at IKEA: all those items come from different factories, so customers shouldn’t just blindly trust whatever they buy, right? But because IKEA has put their name behind it, consumers still buy the cheap shelves with the understanding that IKEA has endorsed them. If these shelves were somewhere else, and un-branded, consumers wouldn’t trust them as much. They’d sell less. Branding, in this way, is extremely valuable even though it’s intangible.

And it’s good for the customer, too! It allows them to make a more informed decision. Emotionally, people become loyal to brands that have served them well. Fortunately for the brand, they’ll stay loyal unless something seriously impacts their mental image of that brand.

All of this sounds totally logical and reasonable, right? It’s the way people have done business since cash was invented. It made sense for people to trust the smithy, who branded their creations, over someone who wouldn’t put their name to what they made.

Strange things start happening when people like the brand more than the products, and we’ll get there.

Even though consumers may know the store-brand comes from the same plant that the name-brand does, they may still pick name-brand. This is part of that trust – it is scary to try new things, and keeping one constant, the brand, the same, makes buying big electronics or new foods less scary. When consumers stop showing a brand loyalty, or they start complaining, the brand could do things like throw in warranties or spare parts for free and retain that good will. Store brand doesn’t stand a chance even if it’s literally identical.

 

Brand = Money

 

Branding can save a company even if they’re like modern day Pyrex, which has a different heat tolerance depending which factory you get it from. People post infographics online so consumers can identify the ‘good’ pieces, because they love Pyrex so much. A change to the glass manufacturing process means that the brand is no longer a reliable indicator of quality, but people still want to like Pyrex. Otherwise they wouldn’t go through all this effort to find the right Pyrex factory, they’d buy somewhere else. This is where brand starts to become more important than what it’s selling.

People will pay a premium for a brand they trust, and companies know this. We see this everywhere, from cars to computers. If something was good, some people will believe it’s still good. That’s the business principle of goodwill. Sears might have survived a couple years off of goodwill and nostalgia alone.

Branding, therefore, can become a phylactery in the hands of a new controlling board. As soon as a company starts to rely on goodwill to sell items that they know other companies would have ditched, they become like Apple. Unlike Apple, many of them don’t sell high-ticket items as a luxury.

For Apple, the brand is demand. Where Steve Jobs might have demanded innovation out of every item they released, the controlling board doesn’t. They know that the brand reputation he built will sell items because people love Apple, and they know people want to look like they have money, and by smearing Android products as ‘cheap’, Apple became a shortcut for ‘expensive’. Apple wheels are a natural result of a market that’s so hyperfocused on branding that it doesn’t care about functionality. A combination of goodwill and a little psychology gives us these overpriced items that are only overpriced for the sake of it.

The irony of all of this is that people will eventually buy the item as a ‘flex’, unironically, and then the product exists in a quantum state of sincerity. How does Apple live where others die?

 

Wheely Worth It

 

Apple sells sincere items alongside their ‘meme’ items. While Apple sells things like wheels and pens for hundreds of dollars, the past generations of phones are still about the right price for what the user gets. Factoring in things like R + D, factory overhead, and the materials to go into it, a comparable phone made by a third party would be cheaper, but not by much. They’re only at a small premium to other comparable brands for the same computing power, which makes sense with Apple’s well-known tech support. They haven’t gone full ‘Sears’ yet, and there’s still some value in the idea of their brand, and they still release ‘worthy’ items alongside the garbage ones. Why risk it with wheels that cost as much as an iPhone, a genuinely expensive item?

Simple: it’s for advertising, and it’s fairly cheap as far as campaigns go. Either ‘hype beasts’ (people known for buying branded clothing just because it’s expensive) buy it to flex on others, or regular people discuss how out-of-line Apple is. Either way, Apple’s name is out there. Apple might not actually expect to make money with these wheels, but the items are so cheap to make that a single purchase could finance the production of 50 more sets. Not to forget hype beasts!

This new trend of “flexing” expensive-but-nearly-worthless items has led to the creation of the Supreme Brick, the Apple wheels, and all sorts of other tomfoolery that relies on branding. Now, some brands use branding as a shortcut to ‘luxury’ instead of ‘trust’. Luxury clothing items have already been doing this for years, so while the material is thin, the manufacturing process cost cents on the dime, and shipping it en masse cost maybe a couple dollars, the final item is an 800$ shirt. Not because it’s made of especially good materials, or hardy – because it has a logo on it.

The only reason knockoffs are not worth as much is because the original brand has convinced people that their product is ‘better’ because it cost more, not that it cost more because it was better. And people believe it! Anyone self-conscious enough to get fake Airpods or a third-party Gucci shirt are still pursuing that image of luxury, which is fantastic for the brand. The same goes for Apple Wheels, and Airpods, and Supreme clothing… if the consumer values it, then they’re worth it. The Apple Wheels are worth 699$ to the people who want it, and that’s good enough to keep making them.  They’re buying Apple Brand, after all.

Apple Wheel. It’s wheely about the advertising.

 

Sources:

https://www.apple.com/shop/product/MX572ZM/A/apple-mac-pro-wheels-kit

https://www.apple.com/shop/product/MXNM2ZM/A/apple-mac-pro-feet-kit

https://www.thedrum.com/opinion/2020/02/26/shout-or-whisper-dissecting-quiet-and-loud-luxury

 

Curb-Cutting Effect: Accessible Software is Good for Everyone

 

Certain design choices make software easier to use – and there’s no reason not to use them.

What is the curb-cutting effect?

Most sidewalks have a dip in the curb, where the concrete comes down to meet the street. This is designed for accessibility: people in wheelchairs would struggle to cross the street if the curb didn’t do this. They could even be injured trying to get up and down over the curb, or rolling along in the street til the next loading ramp for a business intersected with the road. However, the dip also makes life easier for everyone on wheels – skateboarders, bicyclists, roller-skaters, etc. don’t have to dismount and carry their transportation over the curb. Elderly folks, able-bodied people, and people suffering from conditions like drop-foot can now aim for the dipped curb as well to make tripping less likely. The curb being carved out has benefited everyone, even though it was only put in place for the folks in wheelchairs.

Accessibility features, when done right, can benefit everyone, not just the people they were made for. This is the curb-cutting effect in action!

 

Menu Design

 

Good, clean, accessible menus benefit everyone, not just sight- or mobility- impaired people. The faster and easier it is for someone to find information, the less likely they are to leave the site. How many times have you tried to find something specific on a website, only to give up and Google it again to find it, on the same website? For example, say you’re looking for a local museum’s hours. They have a drop-down menu along the top, but the options are only there when you hover.

You see information about the exhibits, you see information about the team, about the funding, about the history of the museum itself, you see where to buy tickets or make donations – but the hours are nowhere to be found. You give up, turn around, and instead of engaging with the website, you engage with Google to find the hours. This is obviously annoying for the end-user, especially since that info may be outdated! For people with dyslexia, people with cognitive delays, and sight-impaired people, it’s nearly impossible to navigate, and they end up calling instead.

If your website is really, really big, it’s better to include a table of contents menu instead of a dropdown. You can get more specific about what exactly is in each section, so users can navigate the site faster. If your website’s pretty small, a menu that just brings the user to the right point on the page may work – the user can get there either through scrolling or the menu, so they can Ctrl + F to find the museum’s hours. This also helps users in a hurry to find info!  If your website’s pretty medium, a solid, non-retreating, clickable menu is more helpful than ‘hover’ menus. All of these options also have the benefit of making the website easier to use on mobile devices!

 

Readable Text

 

Screen readers are a popular choice for blind and seeing-impaired folks, but a critical problem they face is images of text rather than plain text the reader can read. Unfortunately, a lot of information is lost when the image also contains text, like screenshots of tweets or memes with the caption built in, and text captions can give at least some of that information back. Captions help screen-readers out tremendously, and make websites like Reddit, Facebook, and Tumblr, which all use a lot of pictures, more accessible to the blind. However…

Readable text is also easier to copy-paste, easier to cite or quote, and easier to search for. If you remember part of a quote from someone on LinkedIn and want to share it elsewhere, for example, you’ll probably search for it on Google and see if the website crawlers can find it first. If that quote was shared in a photo, the website crawlers won’t be able to find it – there’s no text for them to read. You’ll be forced to either plagiarize (don’t do that), drop the quote, or scroll through your feed til you find it. All of that could be avoided if the person had captioned their photo.

Closed-Captions and Transcript Options

Captions aren’t just for the blind. Many deaf and hard-of-hearing people can lipread, but many more can’t, and some would just rather not if other options, like captions, are available. Besides, lipreading isn’t perfect anyway. Think about shows where someone’s saying something off-screen, or mouths are covered, like Cops, or Grey’s Anatomy. Captions make these shows watchable for people who don’t want to spend half a show guessing what the person with the surgical mask is saying.

Captions also help hearing people. If you’ve learned a language in a classroom setting, including captions, even if they’re also in that language, helps comprehension. Captions make it possible to mute a training video in the office and still gain the information, without disturbing coworkers.

Transcription options are another great example. Most adults read faster than they can speak – a transcript that takes five minutes to read may take ten or fifteen to speak out loud. When a website has no textual information about a video they’re hosting, it suddenly takes 20 minutes of video to gain information that could be read in seven minutes, without the annoying stop-start of rewinding to critical information, watching it forwards again, rewinding when you can’t figure it out, rewatching, watching further to see if they mention it again, etc. etc. It’s so much more efficient to have a transcript. Transcripts also allow readers to use Ctrl + F if the transcript is digital, so singling out specific lines of information are easy as pie.

Besides video-tutorials and learning material, choosing poorly while audio-mixing will make captions mandatory. Tenet was an entirely different movie when there were captions. I’m not joking, important information was completely incomprehensible the first time I watched it, and I’m not hard-of-hearing. Captions were only way to get all the information out of the movie!

Better Mouse-Input Technology

Part of the reason so many things behave themselves with gaming mice is because of accessible software. Not everyone has the strength or dexterity to use a mouse and keyboard, so software designers comply with the ADA by making the software take any generic input as a mouse click, if previously set by the operating system. Things like on-screen keyboards further help people with limited movement, and voice-to-text or voice-commands enable folks like Stephen Hawking to communicate and control their surroundings better.

Game designers took the idea a step further and allowed users to key-bind to any set of keys they like. Players that only have enough mobility to reach half a keyboard, or use a thirteen-button gaming mouse, alongside people going for speed records and people on small desks, can now set the buttons to be on a half-board if they so desire!

Those onscreen keyboards also help if you’re using your laptop as your media center and have it semi-permanently hooked up to a bigger screen. Are you going to get up off the couch to look up a video on Youtube? With the onscreen keyboard, all you need is a Bluetooth mouse, and you don’t have to get up anymore!

These software choices are not only good for ADA compliance – they also make your website more pleasant to use!

 

 

Sources:

https://www.washington.edu/doit/designing-software-accessible-individuals-disabilities

https://medium.com/@mosaicofminds/the-curb-cut-effect-how-making-public-spaces-accessible-to-people-with-disabilities-helps-everyone-d69f24c58785

https://ssir.org/articles/entry/the_curb_cut_effect

https://www.smashingmagazine.com/2017/11/building-accessible-menu-systems/

 

.PNG vs .JPG: What’s the Difference?

Elizabeth Optimization January 15, 2021

What’s the difference between a .jpg and a .png? Loss, mostly.

Picture this: it’s 2005, you’re online, and you go to save a funny image to your family computer so you can send it to a family member later. The image saves, but when you go to open it again, you notice the image is a little grainier than it had appeared on the website. You shrug and brush it off since the image is still clearly legible, but then that family member does the same thing: they save the image from your email to send it to a friend they have across the state. That friend opens it, and it’s a little grainier than before. Repeat. Add grain. Repeat. Add grain. Eventually, the picture is a mess: seemingly random squares of color and gray splotches are everywhere, and the colors in spots that aren’t all glitchy are different.

So what happened?

Under Compression

Data needs to be compressed before it can be taken to or from places on the computer. Compressing the file means it takes up less storage space, which improves response time. However, there are different methods of compression depending on what kind of content you’re dealing with.

Lossless compression replaces long bits of data with shorter bits, while lossy compression deletes bits and pieces outright. If you open a losslessly compressed file, it is put back together exactly as it was; lossy files are still missing pieces.

The Curse of the JPG

Certain image formats are more focused on storage space than on the quality of the image. Generally, most people don’t have a problem with this, since saving an image once to send it somewhere (or hang on to for reference) doesn’t cause too much loss. Loss in photo terms means that some of the information in the photo was, well – lost. Jpgs can normally get away with this at first; lossy compression, after all, looks for unimportant parts to delete first during compression. At worst some of the shadows might get a touch harsher and some of the lines a little blurrier.

If it’s saved again as a .jpg, it’s compressed again and more data is lost from the image, blurring it a little more every time, which leads to that unique “.jpg rainbow” sometimes seen around text that was black but slowly turned red, blue, and green.

The PNG Files

Fun fact, .png files were actually made to replace .gif files, which were patented by UNIX at the time. Copyright gave us a better photo format, as .gif files aren’t fantastic at recreating colors accurately.

A .png is better suited for basically everything else except for storage space, which is a small trade-off if you’re trying to make graphics for things that you sell. Company logos, professional headshots, images that may need to be resized larger – all of these are better saved as a .png.  .png files also have the benefit of transparency, meaning that there’s no white square hiding behind the image if that’s how you saved it, like there would be for .jpg files no matter what you do.

Long story short: .png is better for graphics that have to look a certain way, and .jpg is better for casual photos that are allowed to get a little blurry.

Sources: https://shuttermuse.com/glossary/lossy/

https://www.techwalla.com/articles/why-is-file-compression-important

https://www.techsmith.com/blog/jpg-vs-png/