The seven deadly sins of web design

Sin #1: Non-Responsiveness

In 2019, it is sim­ply incon­ceiv­able to think of a web devel­op­ment firm that neglects to make a respon­sive site. Since 2016, inter­net traf­fic flow­ing through mobile devices has been high­er than the traf­fic orig­i­nat­ing from desk­tops and lap­tops. Cur­rent rates are about 53 per­cent smart­phones and tablets ver­sus 47 per­cent desk­tops, lap­tops, kiosks, and smart TVs.

Fail­ure to devel­op respon­sive web­sites means poten­tial­ly alien­at­ing more than 50 per­cent of prospec­tive vis­i­tors. As for the “Cap­tain Mar­vel” web­site, it is amaz­ing­ly respon­sive when con­sid­er­ing that inter­net users in the 1990s bare­ly dreamed about the day when they would be able to access the web from hand­held devices (mobile phones were yet to be mass dis­trib­uted back then).

Sin #2: Way too much Jargon

Not all web­site devel­op­ers have a good sense of read­abil­i­ty, and this is some­thing that often shows up when com­plet­ed projects result in prod­uct vis­i­tors strug­gling to comprehend.

We’re talk­ing about jar­gon. There’s a lot of it online, not only in the usu­al places like the pri­va­cy pol­i­cy and terms of ser­vice sec­tions but some­times in con­tent too. Regard­less of how jar­gon creeps onto your web­site, it should be root­ed out.

The “Cap­tain Mar­vel” web­site fea­tures legal notices writ­ten by The Walt Dis­ney Com­pa­ny, and they are very read­er-friend­ly with min­i­mal jar­gon. The best way to han­dle jar­gon is to avoid it as much as pos­si­ble unless the busi­ness devel­op­er has good rea­sons to include it.

Sin #3: A noticeable lack of content

No con­tent means no mes­sage, and this is the rea­son 46 per­cent of vis­i­tors who land on B2B web­sites end up leav­ing with­out fur­ther explo­ration or inter­ac­tion. Qual­i­ty con­tent that is rel­e­vant to the inten­tion of a web­site is cru­cial in terms of estab­lish­ing cred­i­bil­i­ty, and this goes beyond B2B websites.

In the case of “Cap­tain Mar­vel,” the amount of con­tent is reduced to match the retro sen­si­bil­i­ty, but there are enough pho­tos, film trail­ers, char­ac­ter bios, and games to keep vis­i­tors enter­tained. Mod­ern web­site devel­op­ment firms that pro­vide full-ser­vice solu­tions can either pro­vide or advise clients on the con­tent they need to get started.

Fur­ther­more, they can also offer lessons on how to oper­ate con­tent man­age­ment systems.

Sin #4: Making essential information hard to find

There was a time when the “mys­tery meat nav­i­ga­tion” issue of web­site devel­op­ment was thought to have been erad­i­cat­ed through the judi­cious appli­ca­tion of rec­om­mend­ed prac­tices, but then mobile apps came around.

Even tech­nol­o­gy giant Google fell vic­tim to mys­tery meat nav­i­ga­tion with its 2016 release of Mate­r­i­al Design, which intro­duced bot­tom nav­i­ga­tion bars intend­ed to offer a more clar­i­fy­ing alter­na­tive to ham­burg­er menus.

Unless there is a clever pur­pose for prompt­ing vis­i­tors to click or tap on a but­ton, link or page ele­ment, that does not explain next steps, mys­tery meat nav­i­ga­tion should be avoid­ed, par­tic­u­lar­ly when it comes to essen­tial information.

When the 1990s “Cap­tain Mar­vel” page loads, vis­i­tors can click or tap on labeled links to get infor­ma­tion about the film, enjoy mul­ti­me­dia con­tent, play games, inter­act with the guest­book, or get tick­ets. There is a mys­te­ri­ous old woman that pops up every now and then from the edges of the screen, but the rea­son behind this mys­te­ri­ous ele­ment is explained in the infor­ma­tion section.

Sin #5: Website loads too slow

There is an anachro­nism relat­ed to the “Cap­tain Mar­vel” web­site that users who actu­al­ly used Netscape in the 1990s will notice: all pages load very fast. This is one retro aspect that Mar­vel Stu­dios decid­ed to not include on this site, and it makes per­fect sense.

For a fast-load­ing site, a web design rule of thumb is to sim­pli­fy and this respon­si­bil­i­ty lies square­ly with the devel­op­er. It stands to rea­son that the more “stuff” you have on a page (images, forms, videos, wid­gets, shiny things), the longer it takes the serv­er to send over the site files and the longer it takes the brows­er to ren­der them. Here are a few design best prac­tices to keep in mind:

1 Make the site light – get rid of non-essen­tial ele­ments, espe­cial­ly if they are band­width-suck­ing images or video.

2 Com­press your pages – it’s easy with Gzip.

3 Split long pages into sev­er­al short­er ones

4 Write clean code that doesn’t rely on exter­nal sources

5 Opti­mize images

For more web design tips that help your site load in the sub-three sec­ond range, as Google expects in 2019, check out our arti­cle on cur­rent design trends.

Once you have design issues under con­trol, inves­ti­gate your web host. They aren’t all cre­at­ed equal. Cheap, entry-lev­el shared pack­ages are noto­ri­ous­ly slow and unpre­dictable, espe­cial­ly as your traf­fic increas­es. But even beyond that, the real­i­ty is that some com­pa­nies spend mon­ey buy­ing bet­ter, faster servers and don’t over­load them with too many clients. Some do.

Recent test­ing from review site HostingCanada.org checked load times across the lead­ing providers and found vari­ances from a ‘meh’ 2,850 ms all the way down to speedy 226 ms. With pric­ing amongst cred­i­ble com­peti­tors rough­ly equal, web devel­op­ers should know which hosts are the fastest and point clients in that direction.

Sin #6: Outdated information

Func­tion­al and accu­rate infor­ma­tion will always tri­umph over form. The “Cap­tain Mar­vel” web­site is gar­ish to look at by 2019 stan­dards, but all the infor­ma­tion is current.

The film’s the­ater release date is clear­ly dis­played, and should some­thing hap­pen that would require this date to change, you can be sure that Mar­vel Stu­dios will fire up Front­Page to prompt­ly make the adjustment.

Sin #7: No clear call to action

Every web­site should com­pel vis­i­tors to do some­thing. Even if the pur­pose is to pro­vide infor­ma­tion, the call-to-action or CTA should encour­age vis­i­tors to remem­ber it and return for updates. The CTA should be as clear as the nav­i­ga­tion ele­ments, oth­er­wise, the pur­pose of the vis­it is lost.

Cre­at­ing entice­ments is accept­able, but the CTA mes­sage should be explained nonethe­less. In the case of “Cap­tain Mar­vel,” vis­i­tors can click on “Get Tick­ets” link to be tak­en to a Fandango.com page with geolo­ca­tion redi­rec­tion for their region.

SOURCE