We have finished recoding the Spanish pages of the ecommerce project website www.namikoshibas.com from html 4 into html 5 and CSS 3 so that the website ow can be easily browsed in a smartphone.
Using html 5 and CSS 3 for a responsive design changes the website design paradigm from “pixel perfect” to “a design that can be used on any type of device”.
I am very proud of this acomplishment, as I am an engineer, not a programmer and I had to learn many new things and concepts. These new concepts will surely help me better facilitate AD 737 and AD 648. There was a 20 % improvement on the number of facebook likes referring to the www.namikoshibas.com site.
Here are the steps that I followed:
1) I spoke with a student of systems engineering at ITBA. He told me that I should use responsive desgin using html 5 and CSS3. He showed me a site that he had developed himself and the results were awesome!
2) I watched several youtube tutorials on responsive design. I also consulted several pages on responsive design.
3) I chose the simplest page in the website and started translating it from html 4 to html 5, using the bluefish html editor. The Kompozer opensource web authoring project has stopped, I think because its main feature is that it is WYSIWYG, “what you see is what you get”, and this “pixel perfect” vision now has changed to responsive design, allowing for any page to be browsed on a variety of different screens: desktops, laptops, netbooks, smartphones, and so on….
4) More than 70 versions of the CSS 3 code followed, till I had the page that I wanted.
5) Finally, I migrated the rest of the pages This was somewhat mechanical, it was very fast compared to step 4!
I am now working on the English pages!!! I am trying to get these pages finished soon.
Cheers,
Eduardo
2 Comments
zwangerschapskleding posted on December 15, 2014 at 8:23 am
Any links to the tutorials you followed?
fracassi posted on July 7, 2015 at 9:16 am
Thanks for asking! I followed an html5 / responsive design video posted in youtube. However, it is in Spanish!, and I do not remember the exact name of the video. It was done by two very young programmers in the context of their regular youtube posts. The most tricky part of it was figuring out the different blocks in which each page would be divided, and after that assigning CSS3 attributes to each block.