blog

December 22, 2018

Handy News Reader: most appealing ideas.

This may come in handy:

    Recently I've finished a new project which I have been working on for about six and a half weeks now. It was very interesting because it involved not only a graphic design and coding, but also much of copywriting stuff, both in English and Polish languages. Although I already did have work on English websites, this time was special in that it needed to incorporate three different language versions.

    Handy News Reader WebSite - December 2018

    In that regard it was a great opportunity to face the challenge of creating My first multi-language website - code-wise. Although I was thinking about it once in a while - this time I have had a good pretext to consider this matter in a more real, tangible way.

    The main difficulties for Me was how to remember a user choice (regardless of loading another pages of the website - all of them should be displayed in a particular language which has been chosen by the user). I guessed that a cookie file could do the trick. When I did some research on this matter some time ago I learned that although it is indeed possible to use cookies to remember a user choice - it is not available in the base jQuery library (it seemed that some additional plug-in is necessary). Since I didn't want to have to much hassle and - on the other hand - I always have the aim of avoiding as many "extra plug-ins" as I can - I was still thinking on how I could do a good-enough multi-language mechanism in jQuery.


    I'm happy to say that now I've solved this challenge to a high degree. Although I still don't know how to remember a user choice without a cookie file - I've found a workaround consisting of automatically detecting what language You use - and displaying a website accordingly. The automatic detection here is an interesting subject in particular - because of some "surprises" which popped-up (I'm gonna to describe it in another article). The bottom line is that You can combine a website language with a language used in a web-browser (which most of the time indeed reflects a user native language).

    Nevertheless it was only a part of the story - what remained is a matter of how I could implement multiple language versions into My website, and - moreover - to do it conveniently?

    I think I've achieved this :) . The whole concept is pretty easy in its essence: it comes down to using multiple "language CSS classes" and then showing a desired one alongside with hiding all the rest. Since the whole mechanism is handled by jQuery - the whole process is running immediately at user choice (no need to load another language from the server - because all of them are loaded alongside the website from the very beginning :) ). So if You would like to change the language - it will be changed instantaneously :) .

    What I especially like with this particular, class-based solution is that You can easily apply it to any element of a currently existing website - no need to design it bearing in mind multi-language feature from the get-go. So I finally have the solution which I could use on other websites I designed so time ago to make them more international.


    Idea survey.
    The most characteristic invention I've applied in this project I consider something which I might call "the idea survey": the particular way of presenting a handful of ideas (current and upcoming features of the Android app for which the website is dedicated) in which You can choose a single idea to learn more about it - but the moment You click it - the square box serving as its trigger disappears, making place for all the rest. There is also a count of ideas You've already reviewed this way, which I find quite neat :) . As often this time also was a good opportunity for Me to learn something new: how to count a visible or invisible elements by jQuery :) .

    Handy News Reader WebSite - Idea Survey


    Contact form as a context.
    By default You can put a contact form somewhere on Your page and it will be always visible there. But what if You'd prefer to have it displayed only within a particular, dedicated section? It is easily achievable (maybe I will describe it in details another time) and in fact I much like to do it that way - but in case of the current project I went one step further, making the contact form visible not within some section, but after clicking a particular element on the site which serves as a contact-form-trigger :) . On top of that I added a close button to allow the contact form to be terminated ;) . All of that looks pretty nice - especially with a pinch of animation :) .

    Handy News Reader Website - Contact Form

    No comments:

    Post a Comment