UX

My New Portfolio/Personal Website is Up and Running

During the Christmas holidays I finally found the time to spend a couple of days to tackle something I’ve been planning to do for quite some time – to fully redo (in terms of code and design) wemakesites.net, my portfolio/personal website. Honestly, I wasn’t sure if I should announce it here, but I am pretty happy with the result, so this is why I am doing it – version 7.0 is now up and running!

wemakesites

Here are a few facts:

  • Custom CMS. PHP backend with RESTFul services.
  • Semantic, elegant, valid and SEO-friendly HTML5 output.
  • Scores an average of 96-100 optimization points on Google PageSpeed (depending on visitors’ network connection speed and my hosting provider’s health).
  • Scores an average of 96-100 optimization points Y!Slow (depending on visitors’ network connection speed and my hosting provider’s health).
  • Optimized both for client- and server-side rendering.
  • Unified modular client- and server-side MVC/MVVM architecture.
  • Async history management.
  • The front-end, templating, session caching and URL routing are built on top of my Semtex UI HTML5, CSS3 and JavaScript framework.
  • Fully async with JavaScript turned on.
  • Asynchronously switchable themes (the icon to the left of the search box in the navigation bar).
  • Supported browsers: Firefox, Chrome, Chromium, Opera, Opera Webkit, Safari, Internet Explorer 9+.
  • Cool social sharing toolbar, achieved with AcidJs.Tiles.
  • Fully responsive CSS3.
  • Lazy loading of images, achieved with AcidJs.ImgLazyload.
  • Decent accessibility score on WAVE.
  • The average loading time of the home page is 1.70 seconds with cache turned off.
  • The average loading time of non-cached async pages is 0.253 seconds.
  • The average loading time of session-cached async pages is 0.019 seconds.
  • CSS and JavaScript build tools.
  • Fully g-zipped.
  • Google PageRank: 4.
  • Version 7.0 (Released January 2014).

Thanks for reading and enjoy the weekend! Please, do not hesitate to contact me if you are interested in more facts about the wemakesites.net!

Related Posts and Links

Advertisements

Loving my CSS3 Babies

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

I am not a huge fan of roundups, but this morning, I found that I have a few pretty popular CSS3 posts and decided to put them in a single post which will be updated whenever a new one appears and is worth seeing.

How to Create a Fully Functional CSS3-only Treeview

css-3-treeview

How to Create a Fully Functional CSS3-only Tabstrip without a Single Line of JavaScript

css3-tabstrip

How to Create Semantically Correct Imageless Custom Checkboxes and Radiobuttons with CSS3

css-pages-imageless-css3-custom-checkboxes-and-radio-buttons

How to Style HTML Dropdowns with CSS3

selectbox

Creating Crossbrowser CSS3 and SVG Reflections

css3-element-reflections

How to Create iPhone Toggle Buttons with CSS3

iPhone

How to Achieve Gaussian Blur Effect with CSS3

gaussian-02

CSS3 Driven Slides Viewer Without any JavaScript

Just check this amazing presentation here.

How to Create Fancy Animated Tooltips without any JavaScript

Download CSS3 Tooltip

How to Crop Background Sprite with CSS3

css3-background-image-cropping

New website for Acid.JS Web UI

I am happy to announce that the new website for the Acid.JS Web UI toolkit is already up and running with new design, improved accessibility, better user experience and loads of new and cool features.

Here are some of the highlights:

  • The Personal Bar at the top of each page allows you to:
    • Use Google to search Acid.JS.
    • Add pages to your very own bookmarks directly on the page that will be accessible when you return back to the site.
    • Add your very own notes in cool PostIt notes fashion which will be available after you return back to the site and will never expire unless you delete them.
  • New component purchase system for buying single components or component bundles via PayPal.
  • Improved user experience on component information pages with convenient tabs and direct access to the component demo, news, help page, purchase page, etc.
  • Tag cloud to see what is currently trending on Acid.JS.

The website is making heavy use of HTML5, CSS3, JavaScript, offline storage and client/server-side JSON and XML.

Below are a few screenshots from the new website, or you can just go and give it a try!

Acid.JS Library 3.1 Has Been Released With 1 New Script

Get most of the website widgets and tools I’m developing in a single package that is regularly updated. Whenever a new script or script update is available, it will be included in the download file. To stay informed and up-to-date with Acid.JS, please, subscribe to my RSS feed.

Acid.JS Library 3.0 Has Been Released With 6 New Additions

Get most of the website widgets and tools I’m developing in a single package that is regularly updated. Whenever a new script or script update is available, it will be included in the download file. To stay informed and up-to-date with Acid.JS, please, subscribe to my RSS feed.

Download the latest version of Acid.JS

A Word About the PSD to (X)HTML Services on the Internet

“How much costs the “alt” attribue of an image? Should I use it or not? If I have 20 images per page, what is the total cost of the <img /> tags with the “alt” attribue?”

If you are a web-developer, you have certainly noticed the growing bunch of websites that provide the convenient and relatively unexpensive service of design to layout conversion, also known as psd to (x)html coding. It works like that – you create a beautiful design, and then leave it up to experts to create a beautiful code out of it, that is semantic, accessible, usable and valid in markup. Some of these companies do a really great job, however the majority provides coding that has nothing to do with the good coding practices and search engine optimization.

A cursory glance at the code of the latter reveals that:

1. Most of the layouts created by these companies have nothing to do with coding at all. Using <div> for layout instead of <table> still does not mean that the code is semantic. A <div> element does not bear any semantics if its content structure is meaningless. A navigation bar, that consists of <a> elements within a <div> is even less semantic and lousy as using <table> for the same purpose. A good navigation list requires the links to be nested within a list, and to be supplied with suitable “title” attributes.

2. 98% of the forms created by such conversion services are missing fundamental form elements such as <fieldset> and <legend>. And most of the guys creating such layouts miss the fact that a contact form is still a list, and the semantics of a list requires a list tag. The accessibility of an input element is achieved with <label>, accesskey and title attributes, which are forgotten in most of the cases.

3. Having a valid markup is fashionable, but unfortunately most of the companies that provide psd to (x)html service have somehow missed the essence and purpose of the valid markup. And yet more – most of these guys believe that if a website has successfully passed the W3C SGML validation, it is automatically search engine optimized, semantic, usable and accessible. And they are totally wrong, as writing a valid code is nothing but conforming to the formal requirements created by the W3C.

Another funny thing – a number of websites that provide conversion services additionally charge their clients for:

1. 100% valid markup. Is there a 42% valid markup? What percent of valid code is included in the base price? The markup is either valid, or not. 99% of valid markup is as invalid as 1%.
2. XHTML compliance at an additional price. What is the exact difference between HTML and XHTML? Why should I pay additional $$ to have my website coded in XHTML1.1? Should I choose XHTML1.0 Transitional, because it is cheaper? How about HTML3? I am sure that if I ask a company that charges differently according to the doctype why it is so, they will not be able to give me an adequate answer. Accoring to such logic, the cheapest website should be coded in XHTML1.1, as coding under standards compliace mode requires less browser hacks, and is much easier to utilize.
3. 100% browser compatibility is not included in the base package. Yes, if you want a website that looks good under older versions of Opera, Konqueror, Safari, Chrome, K-Meleon, NetScape or your favorite exotic browser, you should pay additional $$. A good conversion service is obliged to provide crossbrowser coding, and 100% browser compatibility should be a undisputed default.

Of course, these are cheap and lousy marketing tricks, and such guys make money from the presumed ignorance of their clients, but the fun here is that they make you buy additional stuff, that should be used by default by every developer that respects their own work and coding abilities.

UX – Abuses, Misuses and Misinterpretations of the Term

* This post does not aim to offend real UX engineers, it is just my personal view as a professional developer, based on a 7+ years of experience in the field of web development.

In the era of the highly misused and rather vague term Web 2.0, being a UX engineer (also – expert, guru, developer or whatsoever) has become a quite fashionable occupation.

Unfortunately, neither most of the employers, nor the future UX guru employees do not even have the slightest notion of what stands behind the two letter abbreviation, which soon leads to persisting conflicts between UX persons and developers.

A typical UX job description that may be found in job ads reads:

The company X is looking for a skilled User Experience developer with expert knowledge of PhotoShop, FireWorks or other design software.

And not even a word about usability, accessibility, code semantics and front-end development skills.

UX is not a lonely island in the ocean of web development, but rather a collective term for expert skills in:

– Usability
– Accessibility
– User Interface design
– Strong front-end programming (xhtml, css, javascript) skills
– Code semantics
– Sound knowledge of web standards, best practices and strategies
– Wireframing and prototyping
– User testing

The UX developer with strong design skills is hired after an interview on which developers are not invited, and in a few days the devs receive the first work of the new UX expert – in most of the cases a bulky graphic file with absurd, strange and unusual design, a living hell for the front-end developer, who is responsible to port this Web 2.0 beauty into a beautiful, accessible and usable code.

The first conflict – if the front-end developer is a really experienced professional, he or she asks for a meeting with the UX guru where he talks to him or her and politely advises them to reconsider the design, as it has nothing to do with the good UX practices. The UX person feels offended and tries to defend, and points out exactly those unusual characteristics of his design, which makes it a real piece of Web 2.0 art. Afer a few attemtps, the front-end guy gives up, codes the design, gives the templates to the back-end developers, and finally the application, along with its state-of-the art design and UX is online.

And then come the support tickets from angry customers. Users complain about the unusual layout, complain that they get lost in the sloppy (pardon – Web 2.0) navigation, etc. And guess whom are such support tickets assigned to? To the back-end developers? No, their server code works like a charm. To the UX engineer? Of course, not – he or she is responsible for the design only, and that particular design has been approved for coding from his or her team leader or boss. To the frontend developer? Exactly, right to the point. And everything starts over. The frontend person tries to explain to the UX person the most common web-design strategies, mentions of Jacob Nielsen (I am sure that 70% of those who call themselves UX engineers have never heard of him) and finally, after the usual verbal battle the front-end developer gives up, the back-end guys give up as well, and the compaining customers are assured that the UX issues have been logged in the bug tracking system and will be fixed soon (i.e. never, or close to never).

Next, there comes the moment, when the UX guru, having acquired enough confidence in their misunderstood UX skills decides that the company he or she works for, and especially the evil developers are against him or her and quits. The UX specialist knows that UX is a fashionable occupation and he or she will not remain unoccupied for long.

But the legacy of that UX work remains, and the support tickets keep coming, and soon the team, responsible for the development of the product with the killer Web 2.0 features finds themselves just before a total redesign and reconsideration of the code, its semantics, accessibility, usability, etc. But this time without alleged UX developers and other Web 2.0 gurus.

UX is not an occupation or job description at all. Once more – UX is a collective term for skills that are not studied at school or at university, but acquired at work, the very result of the experience on the web.