HTML RESPONSIVE DESIGN TUTORIAL PC
If we try to navigate this file from devices of different sizes, we will not have any problem to access its contents: the text will be egible on a cell phone, on a tablet and on a PC too. Aplicamos efectos decorativos con CSS3 como sombras, gradientes y relieves. That is, an HTML file to which we do not link any stylesheet, to which we do not model it, for example, the following:Įstamos marcando semánticamente los contenidos de nuestros sitios web, y agregamos microdata. Web pages by nature are "adaptable" from the very beginning of the Web To verify that this hypothesis is correct, let's think of a correctly structured HTML file, with headers, paragraphs and lists. The era in which we use and abuse sites of fixed width in pixels, grids and columns defined in pixels and even visual design methodologies such as layout using table cells, has already come to an end. In the current scenario, we can no longer rely on a majority resolution, or two or three, but it is necessary to understand that the resolutions used by users will increasingly be more fragmented and will be more varied, covering intermediate ranges between two points each time more distant: devices smaller than a PC monitor, on the one hand, and increasingly higher resolution screens at the other end. If the site has a fixed width, it is miniaturized and we depend on constantly zooming, something that is not very usable.
Something like flying over the website in a helicopter, the way we visualize a map. Some change is necessary in our design methodology, since a liquid design simply does not support being "stretched" from a minimum of 320px to several thousand pixels wide.Īnd on the other hand, if instead of giving it liquid width, we defined the widths in pixels, the effect would be equally negative: the site will "miniaturize", being very uncomfortable to navigate, depending on the constant use of zoom in both directions and should make horizontal displacements. For which of all these sizes are we going to design? For all? That's possible? Page adaptable to different devices From that moment, our design decisions became more complex, due to the diversity of screen sizes with which users browse our sites. The mobile phones began to navigate the web, using browsers similar to those of a PC (Opera, Safari, Explorer, Chrome and Firefox) and the first tablet appeared (the iPad).
Then, we gave it a wide liquid (in percentages) so that it stretched between 8px, or we created a container of 800px centered, with a few small fringes at the sides, and a resolved issue.īut when the decade of 2010 arrived, a truly revolutionary change altered our scenario. The solutions for this scenario divided into two sizes were very simple: we made a general container of 640px wide and we centered it leaving a small strip without occupying both sides or we made a site with a defined width in percentages, which stretched slightly between both measurements.Ĭloser in time, around 2005, the decision to make was similar: there were still 800px monitors (there was no longer a 640px wide monitor), but the majority resolution was 1024px. Those of us who have been creating sites since the beginning of the web, are used to our pages being "rigid", that is, of fixed width in pixels.In the 90s, the 14-inch monitors with a screen width of 640px were the only ones that existed, and that was the size we gave to our designs, we did not think of another option, we simply defined pixel sizes for all our columns.Īround the year 2000, a second value emerged: 800px wide (there were already monitors of 15 and 17 inches.) The problem was that, if we defined the total width of our site in 800px, the users of monitors of 640px width that still remained, appeared a little elegant and nothing usable bar horizontal scroll The site did not enter the screen.
0 kommentar(er)
