Registros 3- O que é e o que não é 4- Vantagens 5- A importância Composição 6- Layout Fluido baseado em % 7- Vídeo e imagens Flexíveis 8- Media Queries 9- Codifi cando um layout de exemplo Conteúdo: Frameworks, quando e porque? 10- O que são frameworks 11- O que tem no mercado: Bootstrap, Skeleton, Foundation, 960gs, Titan, Blueprint Css, Less Framework 4, ResponsiveAeon, 12- Como escolher um framework? 13- Bootstrap | 960gs | Responsive Aeon 14- Performance 15- Ferramentas e Recursos Introdução Composição Frameworks, quando e porque?
2009: Ethan Marcotte, http://www.alistapart.com/articles/fluidgrids, foi o embrião para o primeiro registro oficial. 2010: Responsive Webdesign - Editora A Book Apart 2009-2011: Mobile First - Editora A Book Apart
Sim Sim Responsive Design: Não é mobile design. E sim uma maneira de criar conteúdo flexível e que se adapte mais facilmente aos diversos tamanhos da tela.
de um site responsivo de acordo com o seu público alvo: - Plano de dados - Velocidade de conexão 3g, wi-fi - Complexidade da aplicação, - e por ai vai... -10% da web em 2012 esta preparada para mobile (Michael Martin)
em doações online. Com o layout responsivo na última eleição, é esperado o triplo deste valor. As pessoas vêm para o seu site para encontrar uma resposta para a sua pergunta, ou para executar uma determinada tarefa. E eles encontram suas respostas e executam suas tarefas com base em seu conteúdo. {“Responsive design is design for content” Identifi car onde um site móvel separado é necessário, ou utilizar o design responsivo é o ideal. Essa decisão [...] deve ser base- ada em: investigação, estratégia de conteúdo, e estudando as necessidades do público específi co desse site.
que os elementos de design são estabelecidos em percentuais em vez de pixels. Com percentuais como unidade de medida, signifi ca que um elemento que é projetado em 50% sempre ira ocupar metade da tela, não importa o quão grande ou pequena for a tela. Layout fl exível ou fl uido Imagens e videos fl exíveis São o que o próprio nome diz, fl exível dentro de um contexto e auto ajustável ao conteúdo. Media Queries Consite em uma ou mais expressões que verifi am as características de um determinado tipo de midia.
do browser incluindo a barra de rolagem). Height : Altura do viewport (janela do browser incluindo a barra de rolagem). Device-width : Largura da mídia. No caso de uma mídia digital é o tamanho da tela. No caso de impressão é o tamanho da folha. Device-height : Altura da mídia. Orientation : Orientação da mídia. Aspect-ratio : Proporção. Razão entre os valores do ‘width’ e ‘height’. Apenas aplicável a mídias do tipo bitmap. Device-aspect-ratio : Proporção da tela do dispositivo. @media screen and (device-aspect-ratio: 16/9) { /* estilos */ } Color : Número de bits por cor. Se o valor for zero o dispositivo é monocromático. Color-index : Número de entradas na tabela de pesquisa de cores do dispositivo de saída. Se o dispositivo não utiliza uma tabela de pesquisa de cor, o valor é igual a zero. Monochrome : Este recurso de mídia descreve o número de bits por pixel em um buffer de quadros monocromáticos. Se o dispositivo não é um monocromático o valor será 0. Resolution : Resolução do dispositivo (densidade por pixel). Apenas aplicável a mí- dias do tipo bitmap. Scan : Tipo de formação de imagens especifi co para televisores. Valor : progressive (progressivo) ou interlace (entrelaçado). Grid : Determina se o dispositivo é baseado em bitmap ou em um grid. Grid neste contexto é um tipo de dispositivo. Operadores : Através dos operadores not (não), and (e) e only (apenas) você con- segue ter um controle muito mais preciso. Parâmetros ? Polyfi ll ? É um pedaço código ou plugin que fornece a tecnologia que, você desenvolvedor, espera que os navegadores ofereçam nativamente. - Css3-mediaqueries-js - Respond - Modernizr - jQuery Media Helpers
newaeonweb
oztick139
oracle4engineer
thomasvitale
fujiwara3
dayjournal
nakasho
toru_kubota
lmi
kaz29
ohbarye
chibiegg
rinchsan
revolveconf
lemiorhan
marktimemedia
chriscoyier
lara
thoeni
pedronauck
sstephenson
morganepeng
brettharned
zenorocha
mthomps
