What are the main technical issues in web design?

Internet Connection Speed Before building a website, a web developer must first consider the technical issues relating to successful website design. Failing to build a site with such technicalities in mind could result in a platform that many visitors find unprofessional and difficult to use.

Internet connection speed

Many internet users do not have high-speed internet access and this should be taken into account by a web developer to ensure maximum exposure and browsing pleasure for visitors.

Inexperienced web developers are often unaware of the impact that images, fonts, scripts, animations and video have on the load-speed of their web pages, or on the perceptions of their website visitors. Information and media overload is a sure fire way to collectively slow a website to a crawl, and to bombard visitors with so much information that they cannot possibly take it all in, resulting in a quick back-step to Google and a click on to the next promising search result.

Web users have very short attention spans and if a website doesn't deliver the information they're looking for in a few seconds, they will get bored and leave. Slow download speeds also impact negatively on search engine rankings, so it is prudent to keep file and image sizes to a minimum and limit the number of resources downloaded and displayed on the screen.

Web technologies

Some web technologies, when used poorly, can hinder users from navigating a website or reading content. These include;

AJAX
Flash
HTML frames
JavaScript

Web Technologies If a website design relies heavily upon them for navigation, AJAX, Flash and frames can also unfortunately impact negatively on page-rank in search engines. Since sub-pages cannot be easily linked to, the home page becomes the only linkable base, which plays havoc with user bookmarks. In short, visitors can't save them, so previously discovered content reverts back to being hidden once more in the depths of a difficult site. Confusion and frustration follows and off they trott to a more user-friendly website.

JavaScript only works if a visitor's browser first loads it, and secondly allows it to be used, and a lot of people disable it to avoid popups, to stop loops in poorly coded routines, and to help speed up websites using slow external resources, such as banner-ads, click-trackers and social networking plugins.

For a website that uses JavaScript sparingly, these users will just forego a bit of formatting, but they'll still be able to access the actual content (it won't look as nice, but they can still get at the important stuff). On the other hand, for a website that uses lots of JavaScript, to display content and render menus, these users won't even be able to access the basic, unformatted information.

An experienced web developer will consider the potential risks and use such technologies sparingly - overuse and poorly written code could otherwise render a website useless!

Screen resolutions

Web-capable device screens and monitors come in many shapes and sizes, so it can be difficult to know what size to design a website around. But, it's a big ol' world of web out there, so, the reality is, that we shouldn't actually base a website design on any fixed size at all. The web isn't a fixed medium, so it's a web devloper's job to create an interface that looks and functions beautifully on any screen.

Modern practices encourage developers to think responsively - that is, to build responsive websites that fluidly shift, flow and adapt to any screen, regardless of size or orientation. The most effective of these practices is the mobile first approach, which begins with a website that looks good and functions fully at the skinniest, linear proportion, and then the layout adapts to maybe 2 or 3 columns as the screen gets wider, using the content itself to determine a design breakpoint rather than any popular device dimensions (320px = iPhone portrait, 480px = iPhone landscape, 768px = iPad portrait, etc.).

Thinking device agnostically can be a bit of a challenge for newbie web developers to wrap their heads (and often their skills) around, and it is not uncommon to see mobile handsets crumble and crash under the weight of an image or script intensive website, that has been designed on a desktop computer, with a desktop capable mindset. A developer with more experience will make allowances for mobile and use techniques that progressively enhance a website to deliver the best possible experience to the widest possible audience.

Device suitability

Not only does screen size influence website design; The differences in bandwidth/data transfer and multi-media functionality also play a huge part in how successfully a website can be used on handheld and mobile devices, as well as desktop computers.

On desktop, hover-functions work brilliantly under the swipe of a mouse cursor, but sadly, events that are triggered on-hover do not translate well onto touch screens. Web developers need to consider this and make substitutions for on-click/tap functions, coupled with a large button or bar (instead of a teeny tiny text link) that can easily be jabbed by a finger on a small touch screen.

We can't be too liberal with the scripts and images either - mobile data packages aren't geared up to handle heavy image downloads, or complex script functions, and many devices have these features disabled to prevent accidental data overuse and incompatibility. It's easy to forget that what takes 2 seconds to load on a speedy desktop computer, can take 15+ seconds to load on a 3G mobile when you're half way up a mountain. And visitors won't hang around that long when they have stuff to do - they'll seek out a competitor's website that loads in a quarter of the time.

Limited screen space also forces us to re-evaluate the organisation of content, and while it's always best to put priority content at the top of any web page, it becomes even more critical on small screen devices where users can't easily scroll to the bottom of very long pages without getting severe finger cramp!

Cross-browser compatability

There are a number of web browsers on the market today - mainly Internet Explorer 9, 10, 11, Edge, Firefox, Safari, Chrome and Opera (see current browser statistics at w3schools.com) and because of widespread browser differences, a web developer must check that their product works properly, and that its appearance is error-free and functional, on any platform used to view it. A professional website will work equally as well, and look almost the same, in all browsers.

Web standards are ever-advancing, but while opening up many exciting design possibilities, many of the new features are still not widely supported by all major browsers. And, design features that are completely ignored on some platforms can pose major problems if not given an alternative fall-back - something that less-experienced developers may not be fully aware of, or be prepared to deal with.

A conscientious web developer will understand browser limitations, make tactical use of browser specific stylesheets, and employ feature detection techniques to help overcome design problems and provide consistent website usability in this hostile and unpredictable environment - afterall, a visitor who cannot use a website, won't be a visitor for very long.

Contact me for prices, discuss a project, or ask a question

I consider all of these points, and more, when designing and developing a website, so why not contact me to start the ball rolling on your very own user-friendly web project.