HTMLcut blog

About PSD to HTML Conversion and More

Web Design 2013: Emphasis on Website Performance?

Web Design 2013: Emphasis on Conversion and Performance?For web design 2013 should be a year of the website performance and conversion. I don’t mean so-called PSD to HTML conversion. I say about the ability of websites to convert visitors into buyers (or Likes, repeat visitors, and so forth).

But why does web design need to make an emphasis on the website performance and conversion in 2013? They should always be on the top of the list. Unfortunately, “should” does not often mean “is”. However, when the economy is not good, businesses and individuals have to remember the role of conversion and that one of the main tasks of websites is to help companies and people to achieve their business and living goals. This circumstance may strongly affect web design in 2013 and stimulate a more pragmatic approach to the web.

Let’s look at some popular web topics of 2012 and possible trends of 2013 through the prism of the website performance and conversion.

Responsive Web Design (RWD)

Responsive Web Design (RWD)“Responsive” has been one of the most used words in the web design community this year. Lots of large websites have been redesigned responsive, many of web designers have started to develop such websites regularly. Three practical lessons from 2012 are that

  • RWD is first and foremost about user experience and content, rather than about devices
  • RWD shouldn’t be a set of tricks, it should be a clear regular procedure
  • Responsive web design doesn’t have to mean sacrificing the website performance

A responsive website may look good on different mobile devices. But what is the sense of it if it’s slow and with tricky and bloated code? Solving one part of the problem, we shouldn’t forget about others: loading and reaction times crucially affect website visitors and their loyalty. So, 2013 has to be a year when web designers and developers will combine responsiveness and adaptivity to the user behavior and advanced device functionality with performance and, as a result, increase the website chances to attract, retain, and “convert” visitors.

The work in this direction has already started. For example, see a number of December’s posts on 24ways.org.

Frameworks and Preprocessors

Frameworks and PreprocessorsRecently we’ve collected some thoughts about frameworks, preprocessors, and libraries used in the front-end development. The bottom line: even taking into account that people vary in their behavior (some of us prefer to use only the most modern gadgets and software, while others are more conservative) and in their circumstances (whether they have enough time to learn new tools or not), the opinions are too much different.

I remember the time when programmers wrote and tested their code on the paper first and only then went to computers. Programmers didn’t know the “Copy-Paste” function and used to count bytes, strive to develop as small programs as possible and respect neat code. First IDEs automated a lot of routine (command-line) operations and immensely improved the working efficiency. Some IDEs provided great templates and examples which were a real coding academy.

Windowing operating systems introduced a new level of complexity. Now even the “Hello, world” program could require more than 3 lines of formatted code. Demand on software for the graphical OSs was high, and hand coding became considering as an obstacle. The IDEs transformed into comprehensive development platforms with lots of options, libraries, templates, their own programming rules and language dialects, as well as communities and fans.

The IDEs separated system and application layers in application development and made it more rapid. On the other hand, a typical program became comparatively large and had a complex file structure (under DOS a program installation often meant just to copy a few files on a hard disk, in Windows it was a much more complicated procedure). Performance quite often suffered, but it was alleviated with fast hardware development. One more sign of those times was that some programmers knew exactly how to develop an application with the help of IDE but couldn’t do the same without it. Nevertheless, new applications offered an unprecedented level of interactivity and control over the computer for users (several apps working simultaneously, possibility to switch over apps by a single click, Copy-Paste between apps, just to name a few), and very soon they absolutely conquered the users’ hearts and market.

Now history is repeating itself. Web development – both front-end and server-side – has been becoming more and more complex and sophisticated every single day. And we need assistants again. Demand creates supply, and now we have a lot of CSS generators and preprocessors, HTML frameworks, Javascript libraries and code snippets. They add an important abstraction level and help to separate the system (cross-browser compatibility, polyfilling, and so on) and application layers, provide useful templates, pre-made controls and functions. Surely these tools help to develop websites faster. As usual the side effects are a bigger size, suffering performance issues, and a lower level of understanding and even creative freedom.

In my opinion, these tools are here to stay. However, they need improvements to generate an acceptably optimized code and provide reasonable website performance. On the other hand, developers (and clients?) should be aware of their shortcomings and use them wisely to achieve a reasonable balance between development costs and the website efficiency and user experience.

Social Buttons

One more point which I’d like to discuss is disappearance of social buttons from some websites. Sure, it is not a global phenomenon as the foregoing, but it is important for the website conversion too and looks like an interesting fashion (or fad?).

If the website conversion rate is high yet traffic is small, usually it is an unacceptable result. This is the reason why the website owners strive to attract as more relevant visitors as possible. A common recipe to achieve this goal is search engine optimization. If done right, SEO may essentially improve the website ranking and provide an additional traffic. Unfortunately, in spite of all recent updates Google’s algorithm still is not perfect. Just take a look at the results of this search:

Strange Google results - screen shot

 
Number 1 on this list is a website which in its essence is a doorway to another website: it contains only one post of 124 words length but with a link to the target website. ‘Sample Page’ of the blog is not even deleted. It takes a few seconds to understand that the title is borrowed, moreover, it is written with a mistake. Nevertheless, this is the best result from the viewpoint of Google.

That is why a lot of businesses and website owners add social media optimization to their website promotion mix. Today the social network buttons are a generally accepted way to share the website content, and clicking them has become a habit for many people when they want to bookmark or inform about a favorite post or image. Surely, the social buttons shouldn’t be obtrusive or play the role of the main element of the website design. But when they are absent at all, I reckon that the website owner clearly points out that he or she doesn’t want their content to be shared or promoted and the website doesn’t need new visitors/clients. Will that be reasonable in 2013?

Conclusion

In my dreams I have a pocket-sized device which I can attach to flexible screens that can be carried in a small box. If I need a phone, I don’t use additional screens at all or use a small one. If I need to check my email or work with my documents in the clouds, I attach a middle-size screen. If I want to watch a film on Youtube, I take the biggest screen. And every time I want the same (high) loading speed and expect only nice look and feel of websites, otherwise I’ll leave them in a few seconds. Is the web ready for such challenges? Hope it will, because good dreams should come true.

About the Author
Sean Brown is the editor of HTMLcut blog. Starting as a software developer (FORTRAN, Lisp, C, C++, HTML / CSS / JS), now he is wearing the hat of marketing and copywriting manager.

 

Comments (5)

  1. Nice read guys!

    Agree, but I hope we’ll stay low on using frameworks (non-semantic, bloated, etc, etc), polyfills and Javascript/jQuery!

    This way we keep RWD also fast on mobile devices .. just saying ;-P

    Gonzo the Great

    • Thank you for your comment, Jan!

  2. Pingback: Web Design 2013: Emphasis on Conversion and Performance? | Design News

  3. Pingback: Web Design 2013: Emphasis on Conversion and Performance? « human being | #INperfeccion┬«

  4. Good and interesting post. Waiting for your next descriptive post on psd to html conversion.

    Thanks.

    PSD To HTML Conversion Service

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>