Criar um quadro adaptável com HTML5
Antes de criar um quadro para um site que será exibido no iPhone e iPad, é útil pensar adiante sobre como você quer suas páginas para olhar quando você adiciona os estilos. Este é o lugar onde wireframes pode realmente ajudar.
Nas figuras seguintes, você verá três modelos de estrutura de arame diferentes para a primeira página de um site simples blog - o primeiro é para o iPhone, e os dois seguintes são para o iPad (uma para o modo paisagem e outro para o modo retrato).
Vamos explorar três modelos de estrutura de arame relativamente simples que seria ideal para um blog básico. modelos pré-montados, como os mostrados, pode ajudar a guiá-lo como você criar um quadro para o seu site em HTML.
Como você decide como desenvolver seu site, tenha em mente que você poderia criar três páginas HTML completamente diferentes, cada um com sua própria folha de estilos para atingir estes três monitores diferentes.
Se você tomou esse caminho, você precisa usar um script de detecção de dispositivo, um programa complicado que pode detectar o tipo de dispositivo utilizado pelos visitantes para o seu site e, em seguida, encaminhá-los para a melhor versão de cada página para esse dispositivo. Se você está projetando um site móvel que precisa para atingir o público mais amplo, que é o melhor caminho a percorrer.
A vantagem de se concentrar no iPhone e iPad é que você não tem que ir a todo o problema de criar um script de detecção de dispositivo. Isso porque o navegador Safari no iPhone e iPad pode ler vários arquivos CSS, algo que muitos outros navegadores de celulares não são capazes de fazer.
Assim, você pode usar CSS para criar modelos que funcionam bem nos navegadores mais recentes em computadores de mesa e laptops, bem como o iPhone e iPad.
Embora você possa criar páginas completamente diferentes para exibição em cada dispositivo, a opção mais eficiente é criar uma página em HTML e, em seguida, usar três diferentes conjuntos de folhas de estilo para ajustar o design. Com esse objetivo em mente, primeiro criar uma página de quadro, e então usar CSS para criar designs diferentes de que uma página HTML.
Agora aqui é a parte que pode parecer um pouco louco se você ainda não estiver familiarizado com todas as coisas que você pode fazer com o CSS. O mesmo código HTML pode ser utilizada para criar todos os três dos desenhos mostrados nas figuras. O posicionamento dos elementos, tais como o lado, é feito com CSS.