Tecnologias Web Design Responsivo Prof. Esp. Douglas Mariano dos Santos
Design Responsivo É a tecnologia que torna o website automaticamente adaptável ao dispositivo que o estiver acessando Torna desnecessário a confecção de vários layouts Utiliza tecnologias modernas Renderização automática
Layout Fixo
Layout Fluído
Novas TAGs <head> </head> <meta charset=“utf-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1”> <title> ... </title> <meta name=“description” content=“...”> <meta name=“keywords” content=“...”> <meta name=“robots” content=“index, follow”> <meta name=“author” content=“Seu nome”> <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel=“stylesheet” href=“css/style.css”> <link rel="icon" href="img/icon.png"> </head>
ViewPort – O que é/Como funciona Tamanho das telas do computador são diferentes das telas de outros dispositivos. Resolução de tela é diferente de tamanho de tela Ex: iPhone possui uma resolução alta, porém, o tamanho da tela é de 320px; Ex: Resolução de tela de 1024x768, possui o tamanho da tela de 960px; Hoje, a quantidade de dispositivos é enorme e cada um possui um tamanho de tela específico. content=“width=device-width, initial-scale=1” Significa que a largura da página vai ser igual a largura do dispositivo E que o nível inicial de zoom é igual a 1
Mobile First É um conceito que promove que primeiro deve-se iniciar seu projeto, desenvolvendo-o para uma tecnologia móvel. Isto torna, em tese, que seu website ficará mais leve e mais clean, tornando- o assim, mais fácil para ser adaptável para a versão desktop.