This article originally appeared in Website Magazine.
By Briley Kenney, TemplateMonster
Design elements that seem like a great idea at first might cause some pretty serious issues later down the line. That’s exactly what happened with iOS 7 since it launched late last year. With it, Apple introduced several design techniques including fake zooms, parallax scrolling, sliding and more. The animations essentially create a more flashy and attractive UI through the use of visual effects.
Unfortunately, none of these features were included in the previous version of iOS and the upgrade ended up being pretty unsettling to conventional users (many of whom are still using iOS 7 after an embarrassing iOS 8 update). A few folks that deal with motion-sickness found they have difficulty using the new OS and updated devices. This is not something you want associated with your software or overall design.
While the other design elements are also responsible for some of the issues in iOS 7, the biggest offender is the parallax design. Parallax design and parallax scrolling have become incredibly popular over the last few years, especially in the world of Web design.
DEBUNKING THE TECHNIQUE: WHAT IS PARALLAX SCROLLING?
Parallax scrolling is a design technique that became popular around late 2012. Of course, it was being used earlier than that by developers, but that is around the time it was more widely adopted. The concept was originally created for the video game industry to be used as a “special effects” technique. It allows an image or Web page to appear as if it has depth to viewers thanks to an optical illusion. Traditionally, that meant using multiple backgrounds all of which scrolled at different speeds in order to simulate page depth.
More recently, the term has been associated with single page websites that “look cooler” thanks to scrolling images and visual effects (see image below and click on image to visit website). In a way, the concept has evolved to become something entirely different over time. Although, the modern association of the term that refers to single page websites is not technically parallax scrolling.
That said, it’s a common misconception that the technique is easy to implement, or that it adds to the overall usability of the site. Yes, in some circumstances it can improve a page’s design but that is an exception more than it is the rule. In light of that, we’re going to take a look at a few reasons why parallax scrolling is no longer desirable for modern site designs.
EXCESS ANIMATION CAN BE DISTRACTING
In most cases, animation and visual effects such as parallax scrolling are used to make a site look better. While these elements can make a site more attractive, they can also be distracting. Even worse, parallax design will lower performance depending on what device(s) viewers are browsing on. Sure, top of the line smartphones will display effects and animation just fine but not everyone is using them. As a designer you have to think about your entire user base, not just a small portion. You want the site in question to work properly for everyone.
In the case of animation and visual effects, especially with parallax scrolling, less is more. A great example of this is the Nintendo Australia website for Mario Kart. You can see how they used parallax scrolling in the background to give the page more depth, but the entire layout includes way too many distracting elements. As a result, your eyes bounce around the page when it first opens, because there’s no central focus in the design. The website’s designers would have been better off skipping the parallax background and including a more traditional one.
PARALLAX DESIGN WILL HAMPER SEO
To be perfectly honest, who doesn’t rely on SEO these days? If you happen to be one of the few that doesn’t, you should probably take a moment to read about it and understand why it’s so important for modern design.
The greatest benefits of SEO come when a site has been developed from the ground up around the concept. Unfortunately, that’s where parallax scrolling causes some serious issues. It will undoubtedly hamper SEO.
The technique detracts from SEO for several reasons. Those include multiple headers on a single page, slower loading times, lower browser compatibility ratings, and a lack of mobile device support in some circumstances. There are a few workarounds and solutions to these problems, but for the most part you need to understand that with a site using parallax scrolling your SEO is going to take a hit. SEO is so important for a website today that it’s not worth the setback.
Small businesses and sites that rely on geo-targeted search results should never use parallax design. This is because it will ruin organic search rankings, resulting in quite a few problems such as fewer customers discovering your local business.
PARALLAX DESIGN IS NOT EASY TO IMPLEMENT
It’s a common misconception that responsive designs, or those that would use parallax scrolling are easier to put together. That’s not true at all, because they require a completely different development approach. Traditional websites work more like a flow chart, where you must map out all of the different roadways. All you need to start development on a traditional site is a simple plan or blueprint of sorts. In addition, content can be improved and added to the site as it comes together.
(Check out Spotify to see how viewers “flow” through the site.)
Parallax design relies heavily on a single form of navigation. In other words, viewers are simply “flowing” through the site following the narrative the designers have created. This means, the site has to be planned out in full beforehand and the content also has to be put in place then. It is much more difficult to make subtle changes to the design or flow of the site in the long run. It also puts more responsibility on the site owners since they will have to generate most – if not all – of the site’s content up front.
STAY AWAY FROM PARALLAX DESIGN
Even though Parallax Design has gained popularity over the last few years, and was used by Apple in the latest version of iOS, that doesn’t mean you should rely on it for your own design. In fact, it shouldn’t even be considered “fun” to use anymore – it never should have in the first place. It may spruce up a site’s aesthetics sure, but it’s a hassle to implement. Furthermore, your site will likely take a hit to SEO and viewers may have a hard time focusing on what’s important, which is the main content. In other words, don’t use parallax design techniques for your website. After all, you don’t want your site to end up like iOS 7, resulting in discomfort for your viewers. That’s not to say you shouldn’t rely on a responsive design however, but that’s a different beast entirely.
This article was first posted on Quora.com. (Wiki Answer)
UX architecture intelligently provides for the user’s interactive experience via features and functionality of a software-based product or service. This is achieved through a UX process which includes user persona definition, user scenarios/task flows, primary and edge use cases, architecting hierarchy of content and user decision points, etc… The UX-er is known as the primary user-advocate on a team, thereby leading the efforts around understanding the user needs/desires along with balancing those of the business stakeholders. UX documentation informs (and is informed by) content and development requirements; UX informs creative. There is significant interplay between these core disciplines throughout the development process at large, but simply put: developers are building what UX is architecting, and creative provides the visual look-and-feel based on UX architecture and brand requirements.
UI (aka ‘GUI’) visualdesign is the graphical user interface of a software product/service. The GUI is the visual layer informed by the UX architecture, but based on branding/style guide and visual design principles. You can have a GUI without UX and UX without a GUI. The design of a GUI should be heavily informed and guided by the problems that were solved during UX process. UX design is rarely informed by the creative. (If it is, you’re doing it incorrectly). GUI deliverables include mood boards, sketches, mockups, visual toolkits, final art assets and even CSS specs.
Interaction Design is the grey area between UX and GUI design. It is performed well by some (not all) UX-ers. It can also be performed well by some (not all) creative/GUI designers. Interaction, in our vernacular today, refers to the motion between states of controls and states of an interface. Does the user tap or swipe? Does the entire app rotate along with the device rotation or is it locked to a vertical orientation? These are the types of problems that interaction specialists explore and solve. Whether they be UX or GUI, the people most successful here innately understand and prioritize what is best for the user and also understand the mechanics of physics and motion design; they also understand the capabilities of current dev tools such as CSS3 and HTML5. It’s handy (imperative) to have prototyping skills in time-based and/or dev tools to explore and actually simulate/test experiments to arrive at a final interaction design that, again, makes sense for the user and the product as a whole.
Dan Saffer, Designer and Author states:
Simply put: UX is the overall experience one has with a product or service, which can include a UI. A UI is typically a combination of visual design (the look and feel) and the interaction design (how it works). UX, however, can encompass a wide range of disciplines, from industrial design to architecture to content.
A diagram I did a few years ago:
Camille Ysabela Co has provided this graphic:
Antoine Pic provides this visual, which I believe, is the simplest example of the difference between UI and UX.
by Ginny Marvin and first appearing on SearchEngineLand.com.\
It’s been a big year so far for product listing ads on both Google and Bing. Google started putting more ads in the Knowledge Graph. Bing followed Google’s lead on combining tablet and desktop traffic. And Google said it would begin stripping paid search queries from referrer strings. Now that we’re halfway through the year, let’s step back and look at what’s happened so far in paid search.
These were the 10 biggest announcements and changes to come from Bing Ads and Google AdWords in the first half of 2014.
Bing Ads
There were three announcements made by Bing Ads in the first half of the year that stand out:
This is fairly big news for merchants that have seen so much success with Google Product Listing Ads. While early testers, not surprisingly, have seen lower volume, most agree the addition of product ads on Bing is a good move and worth setting up. Look for more advertisers coming on board ahead of the holiday sales season.
Coming closer to conforming completely to Google AdWords — and going back on earlier statements — Microsoft said that it would be combining tablet and desktop traffic. The reason given is that the combination makes Bing Ads more attractive for advertisers that are importing campaigns from AdWords (i.e., most advertisers) to have greater parity between the two platforms.
Bing Ad’s carrot to advertisers who want device control is to offer a tablet bid modifier that ranges from -20 percent to +300 percent. With that range, you can almost opt out of desktop traffic with a +300 percent tablet bid modifier, though you probably can’t get rid of too much tablet traffic with just a negative 20 percent bid reduction.
David Pann, general manager of Bing Ads, said the team will continue to “more closely align” device targeting with enhanced campaigns and rely on bid modifiers rather than explicit device bids. What they’ve shown with the first move on this front is that while they’re moving towards parity, there are areas of differentiation that advanced advertisers will appreciate.
Hallelujah, this was big for Bing Ads. The top request from advertisers for at least three years has been to have the ability to auto-tag destination URLs with UTM tags so that performance data can pass to Google Analytics. Why it took so long, is somewhat baffling (Bizible, a third party firm that focuses on SalesForce integrations with Analytics, came out with a free tool last year that does just this and is actually even more customizable), but it’s here.
Now that auto-tagging is off the to-do list, the engineering team should have some freed up time to spend on the second-biggest request: a Mac version of Bing Ads Editor. We keep hearing it’s in the works….
I have heard from several people on the Bing Ads team that this summer is going to be an exciting time in terms of releases, so stay tuned.
Google AdWords
Google made a notable personnel move early this year in making Sridhar Ramaswamy the sole head of Ads & Commerce, but he’s stayed below the radar so far this year. Ramaswamy had shared the SVP, Ads & Commerce titlewith Susan Wojcicki until she moved over to run YouTube. Ramaswamy oversaw the development and rollout of both enhanced campaigns and Google Shopping becoming a paid solution.
There were seven announcements from Google that are notable from the first half of 2014.
Google continues to make significant investments in Google Shopping and its successful PLA format with the aim of getting more merchants participating and more consumers clicking as it competes aggressively with Amazon in product search.
Google’s new campaign format for product listing ads, Shopping Campaigns, are designed to be easier to set up and manage than the original version. The company has announced that original PLA campaigns will sunset in August.
The move to Shopping Campaigns shows that Google sees much more opportunity in the PLA format and Google Shopping. RKG reported that PLAs drove 29 percent of clicksamong its retail clients in the first quarter of 2014. It wouldn’t be surprising if that number continues to rise. (Interestingly, Facebook just entered the product ad market in a bold way with Multi-Product Ads.)
We saw several of examples of Google testing various ad types in new formats including within Knowledge Graph panels. It originated in December with sponsoredlocal car dealership listings showing inside car Knowledge Graph results. In February, ads for streaming services including Google Play were spotted on the Knowledge Panel for movie results.
Then in March, a variation of a product listing ad appeared in the Knowledge Panel for a book. In April, PLAs were spotted at the top of the page in the carousel interface.
This trend of testing new ways to inject ads into the search results, using features that were originally designed solely for serving organic content, is likely to continue
In an event that was over-hyped, Google made several announcements around advertising capabilities for app marketers and a cool reporting functionality that allows managers to build pivot-like tables in the Web UI.
Was it major news for most advertisers? No, but it’s included it here for two reasons. One, because the lead-up was so amped by Google that instead of getting people excited it had people fearing the worst: enhanced campaigns part deux. Two, because it underscores thegrowth of app marketing and mobile advertising as a whole. Google faces competition from Facebook’s ad exchange, FBX, and its ad units for app marketers, Twitter and its mobile network Mopub, and other mobile ad networks that have come out with their own app ad units. This was Google’s first concerted effort to step up their own capabilities in this arena.
This acquisition didn’t cause any immediate changes for advertisers, but it holds potentially significant future implications for Google Shopping. Rangespan gave merchants the opportunity to identify and source top-selling products from large suppliers, and offered cross-sell suggestions and price competitiveness reporting. The entire team has joined Google Shopping. For a look at what the future of Google Shopping may hold, check out thepresentation given by Frank Koschenash of Mercent at SMX Advanced this year.
This announcement probably made the biggest waves in the paid search (and SEO) community so far this year. Google said it recognized the discrepancy in not passing search queries from organic clicks in the referrer string while allowing marketers that pay for ads to get that data in analytics. The company said it would no longer pass the search query in the referrer string on paid ad clicks, essentially bringing “not provided” to PPC. Yet, search queries are still available in AdWords. Interestingly, the Matched Search Queries report in the AdWords section of Google Analytics still exists and continues to populate.
This update was most notable for the fact that it happened at all. Editor has been lagging behind the Web UI, and there have been thoughts that Google will eventually ditch support for the tool entirely. The version released in April included support for automated bidding strategies, viewable impression bidding, engagement ads and more, but it still lacks functionality available on the web.
While this may not be directly affecting a large number of advertisers yet, Google’s announcement that it has been conducting consumer surveys on brands and merchants and has begun automatically populating ads with ratings feedback is significant for a couple of reasons. First, it shows that Google is sitting on yet another trove of data, this one garnered from its Google Consumer Surveys (GCS) platform. It also underscores a larger effort to find new ways to incorporate ratings and reviews into ads in ways that can’t be manipulated by advertisers.
Bonus: Remarketing And Google Analytics
With Google now facing stiffer competition from Facebook and Twitter for retargetingbudgets, there wasn’t one stand-out announcement in this realm, but instead several that demonstrate Google’s investment in building retargeting capabilities that leverage Google Analytics.
In January, Google Analytics added new functionality for building remarketing lists, making it easier to build lists based on origin, demographics and behavior, and adding the ability to import existing segments.
Google has already said it is working on other ways to facilitate automation and integrate data captured in Google Analytics to help advertisers identify and target users who are most likely to convert.
And that’s it for the first half of 2014. If you think something’s missing, let us know in the comments. Second quarter reports will be coming out in the next couple of weeks. We’ll see then if paid search continued its growth trajectory shown in Q1.
By Ezequiel Ortuno (EZQ Consulting) and originally posted on WebsiteMagazine.com.
We simply can’t keep our hands off the Internet. Whether at home, work or outside; the Internet follows us wherever we go. With more than 60 percent of all mobile users in the U.S. now on smartphones, it is hard not to talk about the mobile Web.
The mobile Web leads us to the most important factor that contributes to a great user experience – Responsive Web Design.
What is Responsive Web Design?
Responsive Web Design or RWD is the process of creating websites that work perfectly visually and in terms of usability across various screen sizes. In other words, RWD creates ‘device-agnostic’ websites which look and work equally well on all types of computing devices.
The pre-cursor to responsive web design was mobile websites, e.g. entire websites created just for mobile devices. These would look entirely different from their desktop counterparts, had different URLs, different navigation and completed unrelated existences.
Responsive Web Design on the other hand builds websites that work on the same URL across all devices, are pretty similar in design and layout and share their entire site architecture.
Why Responsive Web Design?
While we all acknowledge that mobile Internet access is overshadowing desktop Internet usage (especially for certain tasks), many among us still question the need for a responsive Web.
For starters, it is cumbersome. It takes a lot more time and effort to create a responsive website than does a pure desktop or pure mobile site. Since it takes more effort, developing responsive websites can also be more expensive than vanilla websites.
However, responsive Web design has a lot more going for it than the negatives against it. Let’s take a look.
1. BETTER UX
User experience – that holy grail of Web design – is best on responsive websites. You wouldn’t know the difference when you’re on a desktop, but try accessing a non-responsive, non-mobile website on your mobile phone or tablet. The incessant scrolling vertically and horizontally, the need to magnify everything and the frustrating ‘fat fingers’ effect on small touchscreens is enough to put off anyone from accessing such a site on mobile.
Responsive design takes care of all these qualms and more.
2. BETTER CONVERSIONS
When overall user experience and navigation on responsive sites is easy, activities like submitting forms, downloading data or making transactions becomes automatically easier.
Beauty brand NARS switched to responsive Web design in 2013, for example, and found that their conversions on smartphones showed an instant jump of 56 percent.
3. CONSISTENT EXPERIENCE ACROSS DEVICES
A user who regularly visits your desktop site can be totally thrown off guard on visiting a mobile site that looks nothing like its desktop sibling. This is a problem that is deftly handled by RWD.
RWD allows you to create sites that look very similar in design and all other Web elements, with just the layouts shifting to accommodate bigger or smaller screen sizes. This maintains familiarity and strengthens your brand identity.
4. BETTER SEO & SEM
Responsive sites have the same URL for mobile and desktop versions. Users are not redirected from the main site to the mobile version, allowing PPC campaigns to all lead to the same location.
The behind-the-scenes meta data, site architecture, navigation and URL structures remain consistent. This means all your SEO efforts drive traffic to the same site essentially, instead of splitting traffic between your desktop and mobile sites. Every time an update is made to the site, you don’t have to do versions of the same change. Once is enough and takes care of all types of devices.
To top off all of that, both Google and Bing recommend responsive design.
5. EASIER ANALYTICS
As the backend infrastructure, links, call-to-action (CTA) buttons, forms and URLs are all the same for mobile and desktop sites in a responsive website, tracking its performance becomes simplified. The clicks, impressions, referral sites etc. do not get split and can be easily measured and tracked.
6. CHEAPER
While responsive design is admittedly more expensive to execute initially, in the long run the maintenance, upgrades and conversion efficiency of RWD makes it hands down cheaper than having to maintain a desktop site and a mobile site.
In case you do not have a mobile app already, a responsive website is a great choice. It transitions beautifully from desktop to mobile and saves you the expense of building dedicated apps for each type of operating system in the market.
Getting Responsive Web Design Right
Responsive Web design is not just a ‘good-to-have’ feature, it’s more of a ‘must-have’ in today’s times. According to Kentico Digital Experience Research,
• 76 percent of smartphone users and 78 percent of tablet users return often to websites that look good and work well on their mobile devices.
• 44 percent will never go back and 52 percent won’t return often to websites that aren’t optimized for mobile.
The basic aim of responsive design is to rearrange Web content in a way that matches the capabilities of the device being used while still providing a consistent user experience across all devices.
So how do you ensure you don’t mess up your responsive design? By getting your basics absolutely spot on.
The 3 Building Blocks of RWD
1. FLEXIBLE & FLUID GRIDS
As you know, grids are used in Web design to give structure to the content on a page. Fluid or flexible grids allow the content to expand or contract based on the available screen sizes.
Fluid grids define a maximum width for the design and all inside grids are expressed as percentages of the maximum width instead of absolute values like pixels or points.
While calculating the percentages of the grids puts off many designers, it does not have to be so hard. Here are step by step instructions to build a fluid grid from scratch.
However, you don’t always have to build fluid grids from scratch. You can always take your pick from free fluid grid generators like:
The various media elements that go into a page – images, fonts, margins and padding – also need to be flexible to allow a smooth transition from large desktop screens to smaller mobile or tablet screens.
Keep your image sizes manageable – they need to be high quality enough to look great on all screen sizes, but they also cannot be too heavy to load on slow mobile devices. Instead of scaling image sizes in CSS, crop your images to be as small as you can without compromising on image quality. In certain cases, you would be forced to use images of different sizes for different devices. Take charge of these using scripts like Picturefill or Adaptive Images.
Boring system fonts are rapidly being replaced by novelty fonts. However, fancy fonts use more space to be clearly legible. With space at a premium on mobile devices, consider going with sans serif fonts that are more easily readable in smaller font sizes. Give enough space between your text and your letters to allow for easy readability on smaller screens.
In case of spacing, text size should be determined basis screen width. Go with 50-75 characters per line on desktop sites and 35-50 characters per line on mobile devices. Line spacing is usually kept at 140 percent of font size. You may choose to increase line spacing depending on the fonts used and the amount of text present on the page.
3. CSS3 MEDIA QUERIES
CSS3 Media queries are used to pull information about the device being used and to serve different CSS styles based on this information. They apply relevant CSS styles based on the screen size and browser size.
Put simply, CSS3 Media queries serve a CSS style that matches the screen size detected. The most dominant screen sizes are 480 pixels, 768 pixels and 1024 pixels. However, there are always outliers.
Here’s a list of all the various screen sizes that you should factor into your CSS3 media queries.
1. Go mobile first. Most designers find it easier to design for a small screen first and then expand their design for larger screen sizes. This ensures that all vital elements that go into the site are mobile friendly and maintains the visual consistency between mobile and desktop versions.
2. Stick to simple layouts. Avoid five- or six-column layouts, as converting them into a single column layout for mobile screens will be a real pain.
3. Avoid complicated navigation, drop-down menus – they become difficult to use on smaller screen sizes.
4. Use larger site elements. Keep site elements at a minimum of 44 x 44 pixels to allow easy clicks and navigation on smaller screens
5. Drop the fluff from your site that does not add real value to your user. Stuff like ads, site counters, pop up banners, fancy widgets etc. are all avoidable.
By Peter Welch and originally posted on a bunch of sites, including: GIZMODO.
Every friend I have with a job that involves picking up something heavier than a laptop more than twice a week eventually finds a way to slip something like this into conversation: “Bro, you don’t work hard. I just worked a 4700-hour week digging a tunnel under Mordor with a screwdriver.”
They have a point. Mordor sucks, and it’s certainly more physically taxing to dig a tunnel than poke at a keyboard unless you’re an ant. But, for the sake of the argument, can we agree that stress and insanity are bad things? Awesome. Welcome to programming.
All programming teams are constructed by and of crazy people
Imagine joining an engineering team. You’re excited and full of ideas, probably just out of school and a world of clean, beautiful designs, awe-inspiring in their aesthetic unity of purpose, economy, and strength. You start by meeting Mary, project leader for a bridge in a major metropolitan area. Mary introduces you to Fred, after you get through the fifteen security checks installed by Dave because Dave had his sweater stolen off his desk once and Never Again. Fred only works with wood, so you ask why he’s involved because this bridge is supposed to allow rush-hour traffic full of cars full of mortal humans to cross a 200-foot drop over rapids. Don’t worry, says Mary, Fred’s going to handle the walkways. What walkways? Well Fred made a good case for walkways and they’re going to add to the bridge’s appeal. Of course, they’ll have to be built without railings, because there’s a strict no railings rule enforced by Phil, who’s not an engineer. Nobody’s sure what Phil does, but it’s definitely full of synergy and has to do with upper management, whom none of the engineers want to deal with so they just let Phil do what he wants. Sara, meanwhile, has found several hemorrhaging-edge paving techniques, and worked them all into the bridge design, so you’ll have to build around each one as the bridge progresses, since each one means different underlying support and safety concerns. Tom and Harry have been working together for years, but have an ongoing feud over whether to use metric or imperial measurements, and it’s become a case of “whoever got to that part of the design first.” This has been such a headache for the people actually screwing things together, they’ve given up and just forced, hammered, or welded their way through the day with whatever parts were handy. Also, the bridge was designed as a suspension bridge, but nobody actually knew how to build a suspension bridge, so they got halfway through it and then just added extra support columns to keep the thing standing, but they left the suspension cables because they’re still sort of holding up parts of the bridge. Nobody knows which parts, but everybody’s pretty sure they’re important parts. After the introductions are made, you are invited to come up with some new ideas, but you don’t have any because you’re a propulsion engineer and don’t know anything about bridges.
Would you drive across this bridge? No. If it somehow got built, everybody involved would be executed. Yet some version of this dynamic wrote every single program you have ever used, banking software, websites, and a ubiquitously used program that was supposed to protect information on the internet but didn’t.
All code is bad
Every programmer occasionally, when nobody’s home, turns off the lights, pours a glass of scotch, puts on some light German electronica, and opens up a file on their computer. It’s a different file for every programmer. Sometimes they wrote it, sometimes they found it and knew they had to save it. They read over the lines, and weep at their beauty, then the tears turn bitter as they remember the rest of the files and the inevitable collapse of all that is good and true in the world.
This file is Good Code. It has sensible and consistent names for functions and variables. It’s concise. It doesn’t do anything obviously stupid. It has never had to live in the wild, or answer to a sales team. It does exactly one, mundane, specific thing, and it does it well. It was written by a single person, and never touched by another. It reads like poetry written by someone over thirty.
Every programmer starts out writing some perfect little snowflake like this. Then they’re told on Friday they need to have six hundred snowflakes written by Tuesday, so they cheat a bit here and there and maybe copy a few snowflakes and try to stick them together or they have to ask a coworker to work on one who melts it and then all the programmers’ snowflakes get dumped together in some inscrutable shape and somebody leans a Picasso on it because nobody wants to see the cat urine soaking into all your broken snowflakes melting in the light of day. Next week, everybody shovels more snow on it to keep the Picasso from falling over.
There’s a theory that you can cure this by following standards, except there are more “standards” than there are things computers can actually do, and these standards are all variously improved and maligned by the personal preferences of the people coding them, so no collection of code has ever made it into the real world without doing a few dozen identical things a few dozen not even remotely similar ways. The first few weeks of any job are just figuring out how a program works even if you’re familiar with every single language, framework, and standard that’s involved, because standards are unicorns.
There will always be darkness
I spent a few years growing up with a closet in my bedroom. The closet had an odd design. It looked normal at first, then you walked in to do closet things, and discovered that the wall on your right gave way to an alcove, making for a handy little shelf. Then you looked up, and the wall at the back of the alcove gave way again, into a crawlspace of utter nothingness, where no light could fall and which you immediately identified as the daytime retreat for every ravenous monster you kept at bay with flashlights and stuffed animals each night.
This is what it is to learn programming. You get to know your useful tools, then you look around, and there are some handy new tools nearby and those tools show you the bottomless horror that was always right next to your bed.
For example, say you’re an average web developer. You’re familiar with a dozen programming languages, tons of helpful libraries, standards, protocols, what have you. You still have to learn more at the rate of about one a week, and remember to check the hundreds of things you know to see if they’ve been updated or broken and make sure they all still work together and that nobody fixed the bug in one of them that you exploited to do something you thought was really clever one weekend when you were drunk. You’re all up to date, so that’s cool, then everything breaks.
“Double you tee eff?” you say, and start hunting for the problem. You discover that one day, some idiot decided that since another idiot decided that 1/0 should equal infinity, they could just use that as a shorthand for “Infinity” when simplifying their code. Then a non-idiot rightly decided that this was idiotic, which is what the original idiot should have decided, but since he didn’t, the non-idiot decided to be a dick and make this a failing error in his new compiler. Then he decided he wasn’t going to tell anyone that this was an error, because he’s a dick, and now all your snowflakes are urine and you can’t even find the cat.
You are an expert in all these technologies, and that’s a good thing, because that expertise let you spend only six hours figuring out what went wrong, as opposed to losing your job. You now have one extra little fact to tuck away in the millions of little facts you have to memorize because so many of the programs you depend on are written by dicks and idiots.
And that’s just in your own chosen field, which represents such a tiny fraction of all the things there are to know in computer science you might as well never have learned anything at all. Not a single living person knows how everything in your five-year-old MacBook actually works. Why do we tell you to turn it off and on again? Because we don’t have the slightest clue what’s wrong with it, and it’s really easy to induce coma in computers and have their built-in team of automatic doctors try to figure it out for us. The only reason coders’ computers work better than non-coders’ computers is coders know computers are schizophrenic little children with auto-immune diseases and we don’t beat them when they’re bad.
A lot of work is done on the internet and the internet is its own special hellscape
Remember that stuff about crazy people and bad code? The internet is that except it’s literally a billion times worse. Websites that are glorified shopping carts with maybe three dynamic pages are maintained by teams of people around the clock, because the truth is everything is breaking all the time, everywhere, for everyone. Right now someone who works for Facebook is getting tens of thousands of error messages and frantically trying to find the problem before the whole charade collapses. There’s a team at a Google office that hasn’t slept in three days. Somewhere there’s a database programmer surrounded by empty Mountain Dew bottles whose husband thinks she’s dead. And if these people stop, the world burns. Most people don’t even know what sysadmins do, but trust me, if they all took a lunch break at the same time they wouldn’t make it to the deli before you ran out of bullets protecting your canned goods from roving bands of mutants.
You can’t restart the internet. Trillions of dollars depend on a rickety cobweb of unofficial agreements and “good enough for now” code with comments like “TODO: FIX THIS IT’S A REALLY DANGEROUS HACK BUT I DON’T KNOW WHAT’S WRONG” that were written ten years ago. I haven’t even mentioned the legions of people attacking various parts of the internet for espionage and profit or because they’re bored. Ever heard of 4chan? 4chan might destroy your life and business because they decided they didn’t like you for an afternoon, and we don’t even worry about 4chan because another nuke doesn’t make that much difference in a nuclear winter.
On the internet, it’s okay to say, “You know, this kind of works some of the time if you’re using the right technology,” and BAM! it’s part of the internet now. Anybody with a couple of hundred dollars and a computer can snag a little bit of the internet and put up whatever awful chunks of hack code they want and then attach their little bit to a bunch of big bits and everything gets a little bit worse. Even the good coders don’t bother to learn the arcane specifications outlined by the organizations people set up to implement some unicorns, so everybody spends half their time coping with the fact that nothing matches anything or makes any sense and might break at any time and we just try to cover it up and hope no one notices.
Here are the secret rules of the internet: five minutes after you open a web browser for the first time, a kid in Russia has your social security number. Did you sign up for something? A computer at the NSA now automatically tracks your physical location for the rest of your life. Sent an email? Your email address just went up on a billboard in Nigeria.
These things aren’t true because we don’t care and don’t try to stop them, they’re true because everything is broken because there’s no good code and everybody’s just trying to keep it running. That’s your job if you work with the internet: hoping the last thing you wrote is good enough to survive for a few hours so you can eat dinner and catch a nap.
We didn’t start out crazy, we’re being driven crazy
Funny, right? No? How about this exchange:
“Is that called arrayReverse?”
“s/camel/_/”
“Cool thanks.”
Wasn’t that guy helpful? With the camel? Doesn’t that seem like an appropriate response? No? Good. You can still find Jesus. You have not yet spent so much of your life reading code that you begin to talk in it. The human brain isn’t particularly good at basic logic and now there’s a whole career in doing nothing but really, really complex logic. Vast chains of abstract conditions and requirements have to be picked through to discover things like missing commas. Doing this all day leaves you in a state of mild aphasia as you look at people’s faces while they’re speaking and you don’t know they’ve finished because there’s no semicolon. You immerse yourself in a world of total meaninglessness where all that matters is a little series of numbers went into a giant labyrinth of symbols and a different series of numbers or a picture of a kitten came out the other end.
The destructive impact on the brain is demonstrated by the programming languages people write. This is a program:
That program does exactly the same thing as this program:
And this program:
And this one:
And once somebody wrote a programming language that let somebody else write this:
According to the author, that program is “two lines of code that parse two lines of embedded comments in the code to read the Mayan numbers representing the individual ASCII characters that make up the magazine title, rendered in 90-degree rotated ASCII art.”
That program won a contest, because of course it did. Do you want to live in a world like this? No. This is a world of where you can smoke a pack a day and nobody even questions it. “Of course he smokes a pack a day, who wouldn’t?” Eventually every programmer wakes up and before they’re fully conscious they see their whole world and every relationship in it as chunks of code, and they trade stories about it as if sleepiness triggering acid trips is a normal thing that happens to people. This is a world where people eschew sex to write a programming language for orangutans. All programmers are forcing their brains to do things brains were never meant to do in a situation they can never make better, ten to fifteen hours a day, five to seven days a week, and every one of them is slowly going mad.
</rant>
So no, I’m not required to be able to lift objects weighing up to fifty pounds. I traded that for the opportunity to trim Satan’s pubic hair while he dines out of my open skull so a few bits of the internet will continue to work for a few more days.
If you are one of those people who like to skip to the end of a long story or book to find out the ending, I am including the video version so you can simply listen, rather than read.
Simply a list, which was posted, in a much longer format, on brainslink.com.
1. Define your vision, communicate it clearly and instill a sense of urgency for getting things done.
Every company must have a corporate vision. From it, each division, department, workgroup and individual must derive a progressively narrower and more focused vision. Honestly, I’ve rarely seen companies manage their vision like this, which is one reason we’re drowning in crapware.
2. Focus on your customer (or stakeholder).
Everything matters — revenue, profits, products, features, appearance, etc. — but nothing matters more than the customer (or stakeholder) you need to satisfy. Put your ego aside and focus on your target audience. You’ll be more successful and less stressed.
3. Develop an agile mindset — not simply an agile approach.
Scrum, Kanban, XP, Lean, etc. won’t solve anything by themselves. Move beyond being flexible. Flexibility is reactive. Agility is proactive. Embrace change. Seek it out and make it happen. If you’re not changing, you’re dying.
4. Share everything. (Yes, really.)
Honesty and transparency build trusting relationships. There are too many corporate secrets. Most of it is legal gibberish. Stop labeling everything proprietary or confidential. It’s not.
5. Build relationships among business partners, workgroups and individuals.
Your success depends upon the people around you being successful. If they fail, you fail. Why is that simple concept missed much of the time? Success is 80% relationships and the other 20% doesn’t matter.
6. Empower everyone in every way.
Encourage everyone to make decisions, raise issues, offer ideas and just plain speak up. You may believe someone is shy or reserved when, in fact, you haven’t empowered that person to actively participate.
7. Establish accountability.
There’s only so much one person or team can do. We are dependent upon others to meet their commitments too. Everyone should have the tools they need to get their jobs done and the power to push ahead. Assuming they do, hold them accountable for delivering what they promise.
There you have it. Seven simple ideas that could transform you and your team.
These ideas work best when implemented from the top of the management chain down to the lowest levels. Any other approach will not achieve optimal results.
Oh, and one more thing. Don’t pick and choose from the list. It’s all or nothing. You want to change, right?
Silly question, of course you have! Picture this scene for a moment — you type in your search term, Google spits back a gazillion results for you, you sift through the first page or two of results, and if you don’t find what you’re looking for, you’ll probably try changing up your search terms and go again.
Sound familiar?
But what happens if you find the exact website you’re looking for at the top of the first page, you click into it, and are left waiting … wondering … as the page slowly loads sections of the text, and half of the images. You’re now moving your cursor over to the X button and heading back to Google to search again. That website has lost your attention, and potentially your business, because of poor site performance.
Site performance and load time can have a big impact on user experience, affecting how long a visitor is likely to spend on your site, and even conversion rates. But you may not have known that Google has also confirmed that they use load times as a ranking factor for search. Many businesses don’t even consider the performance of their site and how it could be affecting both their organic traffic and conversions.
In this blog, I’m going to show you some quick and easy tips to monitor and improve your site’s load time and performance so that you aren’t pushing your potential clients away before you ever get to meet them.
Get Started Monitoring Site Performance
Site performance and load time can seem complicated at first, but once you’ve got a hang of the basics, everything else begins to make sense. You can use Google Analytics to help you monitor page load times across devices, locations, and operating systems. Simply open your Google Analytics account — click on ‘Behavior’, then ‘Site Speed’, and then start in the ‘Overview’ section.
The Google Page Speed Testing tool also makes it easy to see how your site is performing and provides suggestions for improvements that will help load times. Simply enter your URL and hit ‘Analyze’. You’ll see your current score and suggestions for improvement.
Google Analytics’ site speed monitoring can also be useful for spotting where there might be problems that need urgent attention.
Kicking Your Site Performance Up a Notch
1) Check Browser Speed
In Google Analytics, you can see if some browsers are performing better or worse than others. This can tell you if there’s a design issue that’s not being picked up, and allows you to perform cross-browser testing.
2) Check Country-Specific Performance
You can see if a particular country is slower to load your pages than others. If a specific country is important to your strategy, but your site is not performing well there, you might consider using a server based in that location. Alternatively, you can look at a content delivery network (see point number six below).
3) Optimize Your Images
By checking how each page is performing in comparison to the site average, you may uncover that you’re using too many or too large images. Optimize your images by ensuring they’re no larger than necessary and in the correct format. You can also reduce the number of files that need to load on the page by combining images and code files, as well as removing any unnecessary images.
Here are some tips to help you improve your images as they relate to your page load time:
Crop your images to the correct size. So if your page is 570px wide, resize the image to that width.
Reduce color depth to the lowest acceptable level.
Use JPEG as a first choice, PNG as a second.
Do not use BMPs or TIFFs.
4) Compact Your Code
To speed up load times, you should remove any unnecessary spaces, line breaks, and indentation in your code. Compacting javascript code can make it appear as if your page is loading faster for users.
The average code behind a website is GZIP. One of the best ways to reduce page load time and compact code is to GZIP your files. This can reduce your file size dramatically without sacrificing the image or video quality. If you want you find out if your current website has GZIP compression enabled you can use this handy tool http://checkgzipcompression.com/.
Add CSS, Javascript and other code to external files
Make sure your stylesheets and javascript load in external files where possible. This means they don’t add as much code to each page and aren’t called every time the page loads.
Add JS files to your footer where possible
It’s also a good idea to put javascript files in the footer of your webpages so they load in the background and don’t delay the content of the page appearing. It’s worth speaking to your developer about this option as some elements further up the page (like sliders on menus) may rely on those js files loading first.
Helpful tools to compact your code
Most CMS’ have plugins or add-ons that allow you to reduce all the code on your website.
5) Use Browser Caching
You can use something called browser caching which saves some files in the user’s browser to make moving around the site faster. The browser stores a copy of images, stylesheets, and javascript so the next time the user visits that page, the browser doesn’t have to download it again. The Expires time will vary based on the different resources you’re caching, but most should be set to a minimum of a week and up to one year in the future. Setting it to more than one year is prohibited according to RFC guidelines.
6) Use a Content Delivery Network (CDN) if Needed
If your business operates in multiple countries, you can look at using a content delivery network like Cloudflare, which stores your website’s information closer to the user’s location.
Despite the seemingly instant nature of the web, information and content often have to travel long distances before it gets to you. For example, a person in London visiting a website that’s hosted in the states will see content at a slightly slower rate than a visitor in New York. One way to get around that is by making copies of your content and putting that on servers that are closer to your visitor’s location. So if a person in London now views the website hosted in New York, a copy of the website will be requested from the servers in the UK, making it much faster.
Content delivery networks may sound complicated, but they’re actually very simple to implement, and can lead to big improvements in your site’s load times.
For more tips on optimising your website, check out Hubspot’s video tip series ‘SEO: Bite-Sized’.
Mike Dickman 