Важность порядка следования исходного HTML-кода

Если мы держим телефон вертикально, то при условии сохранения читаемости страницы там просто не хватает места не только для трех, а даже для двух колонок в строке. Поэтому многие разработчики для отображения страницы в мобильном телефоне просто выкладывают ее в одной большой колонке. Для этого нужно удалить из создаваемых колонок все плавающие элементы. Например, если создается дизайн, состоящий из трех колонок, для дисплея настольной системы и в нем используются плавающие элементы для позиционирования колонок рядом друг с другом, нужно просто установить для свойства float таких элементов значение none. Тогда они будут отображать HTML в обычном порядке — один тег блочного уровня над другим. Это придает порядку следования исходного HTML-кода особую важность. Например, у страницы могут быть две боковые панели, первая — с перечнем ссылок на родственные сайты, а вторая — с рекламой товаров, продаваемых вашей компанией. При этом основная информация, за которой, собственно, и приходят на веб страницу, содержится в средней колонке. Один из способов раскладки всего этого по колонкам заключается в смещении первой боковой панели в качестве плавающего элемента влево, а второй боковой панели — вправо, позволяя основной колонке просто обтекать две остальные колонки и находиться в центре.

В понятиях HTML это будет означать, что сначала появляются два div-контейнера боковых панелей, а затем следует тег, содержащий основную информацию. Если приспособить эту страницу под мобильные устройства, удалив указание на то, что боковые панели являются плавающими элементами, то получится, что две боковые панели появятся перед основным содержимым. Вашей аудитории придется прокручивать информацию вниз по странице, чтобы пройти рекламу и ссылки и добраться до нужного ей содержимого.

С точки зрения пользователей было бы лучше поместить контейнер с основным содержимым до боковых панелей. Этот метод может потребовать добавления дополнительных контейнеров и превращения всех элементов в плавающие, включая и div-контейнер с основным содержимым.

Необходимо соблюдать соответствующий порядок следования HTML-кода, прежде чем создавать раскладку для многоколоночного дизайна, предназначенного для настольных систем. Проще всего понять, что происходит, — это просмотреть страницу вообще без применения к ней CSS. Тогда вы увидите все div-контейнеры и другие блочные элементы поставленными друг на друга и сможете понять, как будет выглядеть страница в виде одной колонки на телефоне.