O documento discute conceitos e técnicas de design responsivo para sites mobile, incluindo: layouts fixos, fluidos e elásticos; uso de CSS media queries para criar diferentes layouts com base nas dimensões da tela; e a meta tag viewport para adequar sites a dispositivos móveis. O design responsivo permite que um mesmo conteúdo se adapte a diferentes telas de forma flexível e usufruível.
Web design responsivo - Criando um site adaptávelGuto Xavier
O documento fornece instruções passo-a-passo para criar um site responsivo utilizando o framework Bootstrap, começando com a instalação do Bootstrap, adicionando HTML básico, CSS e JavaScript, e concluindo com a adição de elementos como barra de navegação, container, títulos, tabelas, formulários e imagens.
Slides da apresentação realizada dia 29/10/2014, para a disciplina Programação para Internet I, do curso de Análise e Desenvolvimento de Sistemas da faculdade Senac Porto Alegre.
Carlos Eduardo é um desenvolvedor da Vítrio especializado em design responsivo. Seus interesses incluem HTML, CSS, JavaScript, otimização de sites e experiência do usuário. Ele pode ser contatado por e-mail ou nas redes sociais onde também mantém um blog sobre design responsivo.
O documento discute o conceito de design responsivo, como criar sites responsivos sem JavaScript ou frameworks, e boas práticas para desenvolvimento responsivo, como focar na experiência do usuário em diferentes dispositivos e resolver problemas de manutenção de código.
O documento discute UX (Experiência do Usuário) e UI (Interface do Usuário), explicando como ambos melhoram a satisfação e lealdade do cliente ao facilitar a interação entre o consumidor e o produto. Apresenta também técnicas de UX/UI como agrupar funções similares, destacar a conversão e usar menos elementos para não distrair o usuário.
O documento fornece diretrizes sobre como projetar uma boa arquitetura de informação e navegação em websites. Ele discute a importância de adequar a estrutura às necessidades dos usuários, criar uma navegação intuitiva e consistente, evitar design complexo e reduzir poluição visual. Exemplos de websites bem-sucedidos e problemas comuns são apresentados.
Web design responsivo - Criando um site adaptávelGuto Xavier
O documento fornece instruções passo-a-passo para criar um site responsivo utilizando o framework Bootstrap, começando com a instalação do Bootstrap, adicionando HTML básico, CSS e JavaScript, e concluindo com a adição de elementos como barra de navegação, container, títulos, tabelas, formulários e imagens.
Slides da apresentação realizada dia 29/10/2014, para a disciplina Programação para Internet I, do curso de Análise e Desenvolvimento de Sistemas da faculdade Senac Porto Alegre.
Carlos Eduardo é um desenvolvedor da Vítrio especializado em design responsivo. Seus interesses incluem HTML, CSS, JavaScript, otimização de sites e experiência do usuário. Ele pode ser contatado por e-mail ou nas redes sociais onde também mantém um blog sobre design responsivo.
O documento discute o conceito de design responsivo, como criar sites responsivos sem JavaScript ou frameworks, e boas práticas para desenvolvimento responsivo, como focar na experiência do usuário em diferentes dispositivos e resolver problemas de manutenção de código.
O documento discute UX (Experiência do Usuário) e UI (Interface do Usuário), explicando como ambos melhoram a satisfação e lealdade do cliente ao facilitar a interação entre o consumidor e o produto. Apresenta também técnicas de UX/UI como agrupar funções similares, destacar a conversão e usar menos elementos para não distrair o usuário.
O documento fornece diretrizes sobre como projetar uma boa arquitetura de informação e navegação em websites. Ele discute a importância de adequar a estrutura às necessidades dos usuários, criar uma navegação intuitiva e consistente, evitar design complexo e reduzir poluição visual. Exemplos de websites bem-sucedidos e problemas comuns são apresentados.
Web Designer é uma extensão da prática do design gráfico, onde o foco do projeto é a criação de sites e documentos disponíveis no ambiente da World Wide Web.
Análise de uma narrativa transmídia através da experiência do usuário (ux)Rita Paulino
Este documento apresenta um método para avaliar a Experiência do Usuário (UX) em sites transmídia através do rastreamento do mouse. Os autores analisaram o site DeBarrioSomos usando a ferramenta AIMT-UXT para rastrear interações e identificar áreas de interesse dos usuários. Entrevistas com alunos revelaram que eles gostaram principalmente dos vídeos em 360° e dos jogos/conteúdos para download. Alguns problemas de design também foram identificados.
Este documento discute o design responsivo na web. Primeiro, define o que é design responsivo e seus princípios, como projetar para diferentes dispositivos. Também discute as tecnologias fundamentais para o design responsivo, como HTML5, CSS3 e JavaScript. Por fim, fornece exemplos e dicas sobre como implementar design responsivo na prática.
Entrevista concedida para alunos do curso de Jornalismo da Unoeste de Presidente Prudente. Parte do projeto de conclusão de curso - Implementação de um Portal para a Faculdade de Comunicação Social "Jornalista Riberto Marinho" de Presidente Prudente.
Ux design/Experiência do Usuário - Conexão KingHost 2015Luisa Ambros
MOMENTO 1: PALESTRA
U.X. Design/Experiência do Usuário: O que é e por que importa
— Conceito e origem
— Como o usuário, você e seu negócio se beneficiam
— O que faz um profissional de UX
MOMENTO 2: WORKSHOP
Entregáveis de UX & Teste de Usabilidade
http://www.luisaambros.com/blog/palestra-e-workshop-de-ux-designexperiencia-do-usuario-no-conexao-kinghost-2015/
Edu Agni é um designer e criador do blog UX.BLOG que trabalha há nove anos com projetos de design de interfaces e usabilidade. O documento discute vários tópicos relacionados à experiência do usuário, como avaliação de produtos, design centrado no usuário, desenvolvimento front-end, semântica, acessibilidade e design responsivo.
Qual o papel do design de interação? Como entender as reais necessidades e projetar soluções mais adequadas para as pessoas?
Porque a mobilidade é a linha principal a ser seguida, não apenas em termos de aparelhos e dispositivos, mas entendendo que as pessoas precisam ter acesso a transações e conteúdos onde estiverem, de maneira que lhes seja conveniente.
O documento discute tendências e práticas em design de interfaces. Aborda conceitos como arquitetura da informação, experiência do usuário, metodologias ágeis e o papel dos designers nestes processos. Também apresenta exemplos de técnicas como personas, mapas de experiência e testes de usabilidade que podem melhorar o design centrado no usuário.
Apresentação realizada para os alunos da faculdade de comunicação da Universidade de Brasilia - UNB, assim como integrantes da agencia de comunicação junior, a 296
O documento descreve o framework JQuery Mobile, que permite a construção de interfaces gráficas para dispositivos móveis. Ele surgiu para atender a necessidade de frameworks JavaScript que permitam maior interação com recursos de dispositivos móveis do que soluções puramente web. O JQuery Mobile reduz esforço e custo de desenvolvimento e vem com o objetivo de acelerar, facilitar e estruturar o desenvolvimento de aplicativos móveis.
O documento discute como a experiência do usuário (UX) está se tornando mais importante do que o marketing e otimização para mecanismos de busca (SEO) para empresas. Investir em UX pode trazer resultados melhores do que SEO, pois mecanismos de busca estão considerando mais a experiência do usuário ao ranquear sites. Desenvolver produtos centrados no usuário é a melhor estratégia para SEO.
- O documento discute frameworks front-end para desenvolvimento web, com foco no Bootstrap. Apresenta conceitos de design de interface, User Interface, User Experience e a importância dos frameworks para facilitar a criação de sites responsivos.
O documento discute como o JavaScript pode ser usado para tornar sites mais interativos para os usuários, listando exemplos de sites que usam JavaScript para zoom de imagens, galerias de fotos interativas e apresentação de programas. Ele também fornece exemplos de sites que disponibilizam códigos JavaScript.
Apresentação UX e UI - Webdesign - Aula 07Renato Melo
O documento discute experiência do usuário (UX) e interface do usuário (UI) na web. Apresenta como os usuários interagem com a internet de forma diferente dependendo da idade e como UX e UI melhoram a satisfação do cliente através de estratégias como simplificar formulários e destacar a conversão.
Wireframe em Aplicativos - Webdesign 2022Renato Melo
O documento discute as regras de usabilidade para o desenvolvimento de aplicativos e wireframes. Ele fornece 6 regras gerais de usabilidade, como ser objetivo, usar menos é mais, deixar sua marca, cuidar do layout, ser responsivo e ir direto ao ponto. Ele também explica o que é um wireframe e como pode ser usado no início do processo de desenvolvimento para estabelecer a estrutura básica de uma página.
O documento discute estratégias de design responsivo para websites adaptarem-se a diferentes dispositivos. Aborda tags semânticas do HTML5 que melhoram a acessibilidade e o SEO, além de técnicas como viewport, grid layout fluido, imagens flexíveis e media queries para estilização condicional de acordo com características dos dispositivos.
Este documento discute os princípios básicos do design responsivo, incluindo dividir o layout em blocos verticais para telas menores, usar imagens e medidas flexíveis, e media queries para adaptar o estilo às diferentes resoluções.
O documento descreve o design responsivo, que permite que sites se adaptem ao tamanho da tela do usuário. Ele é composto por layouts fluidos com base em porcentagens, imagens flexíveis e media queries para especificar estilos CSS de acordo com a capacidade do dispositivo. O design responsivo surgiu para permitir uma melhor experiência no uso de sites em dispositivos móveis.
O documento descreve o conceito de design web responsivo, que defende que sites devem ser capazes de se adaptar a diferentes tamanhos de tela. Isso é feito usando grids flexíveis, imagens e mídia flexíveis e media queries do CSS3. Um design web responsivo garante uma experiência de usuário eficiente e agradável em diferentes dispositivos como desktops, tablets e smartphones.
O documento discute técnicas e desafios de design responsivo para websites, incluindo layouts fluidos, imagens flexíveis, media queries, navegação, imagens, tabelas e conversão de sites antigos para design responsivo. Também aborda como vender o valor do design responsivo para clientes, principais problemas e como evitá-los.
O documento discute o design responsivo para websites, propondo uma abordagem flexível com grid, imagens e media queries que permitem a adaptação do layout a diferentes telas. O design responsivo garante que a web seja acessível em qualquer dispositivo.
O documento discute o conceito de design responsivo e como criar sites adaptáveis para diferentes dispositivos. Ele explica que o design responsivo usa grids fluidos, layout adaptativo e conteúdo flexível para se ajustar a telas de diferentes tamanhos. Também fornece dicas sobre como criar estruturas fluidas usando fontes, grids e imagens relativas, além de explicar o uso de media queries e breakpoints para personalizar o design em diferentes resoluções.
Web Designer é uma extensão da prática do design gráfico, onde o foco do projeto é a criação de sites e documentos disponíveis no ambiente da World Wide Web.
Análise de uma narrativa transmídia através da experiência do usuário (ux)Rita Paulino
Este documento apresenta um método para avaliar a Experiência do Usuário (UX) em sites transmídia através do rastreamento do mouse. Os autores analisaram o site DeBarrioSomos usando a ferramenta AIMT-UXT para rastrear interações e identificar áreas de interesse dos usuários. Entrevistas com alunos revelaram que eles gostaram principalmente dos vídeos em 360° e dos jogos/conteúdos para download. Alguns problemas de design também foram identificados.
Este documento discute o design responsivo na web. Primeiro, define o que é design responsivo e seus princípios, como projetar para diferentes dispositivos. Também discute as tecnologias fundamentais para o design responsivo, como HTML5, CSS3 e JavaScript. Por fim, fornece exemplos e dicas sobre como implementar design responsivo na prática.
Entrevista concedida para alunos do curso de Jornalismo da Unoeste de Presidente Prudente. Parte do projeto de conclusão de curso - Implementação de um Portal para a Faculdade de Comunicação Social "Jornalista Riberto Marinho" de Presidente Prudente.
Ux design/Experiência do Usuário - Conexão KingHost 2015Luisa Ambros
MOMENTO 1: PALESTRA
U.X. Design/Experiência do Usuário: O que é e por que importa
— Conceito e origem
— Como o usuário, você e seu negócio se beneficiam
— O que faz um profissional de UX
MOMENTO 2: WORKSHOP
Entregáveis de UX & Teste de Usabilidade
http://www.luisaambros.com/blog/palestra-e-workshop-de-ux-designexperiencia-do-usuario-no-conexao-kinghost-2015/
Edu Agni é um designer e criador do blog UX.BLOG que trabalha há nove anos com projetos de design de interfaces e usabilidade. O documento discute vários tópicos relacionados à experiência do usuário, como avaliação de produtos, design centrado no usuário, desenvolvimento front-end, semântica, acessibilidade e design responsivo.
Qual o papel do design de interação? Como entender as reais necessidades e projetar soluções mais adequadas para as pessoas?
Porque a mobilidade é a linha principal a ser seguida, não apenas em termos de aparelhos e dispositivos, mas entendendo que as pessoas precisam ter acesso a transações e conteúdos onde estiverem, de maneira que lhes seja conveniente.
O documento discute tendências e práticas em design de interfaces. Aborda conceitos como arquitetura da informação, experiência do usuário, metodologias ágeis e o papel dos designers nestes processos. Também apresenta exemplos de técnicas como personas, mapas de experiência e testes de usabilidade que podem melhorar o design centrado no usuário.
Apresentação realizada para os alunos da faculdade de comunicação da Universidade de Brasilia - UNB, assim como integrantes da agencia de comunicação junior, a 296
O documento descreve o framework JQuery Mobile, que permite a construção de interfaces gráficas para dispositivos móveis. Ele surgiu para atender a necessidade de frameworks JavaScript que permitam maior interação com recursos de dispositivos móveis do que soluções puramente web. O JQuery Mobile reduz esforço e custo de desenvolvimento e vem com o objetivo de acelerar, facilitar e estruturar o desenvolvimento de aplicativos móveis.
O documento discute como a experiência do usuário (UX) está se tornando mais importante do que o marketing e otimização para mecanismos de busca (SEO) para empresas. Investir em UX pode trazer resultados melhores do que SEO, pois mecanismos de busca estão considerando mais a experiência do usuário ao ranquear sites. Desenvolver produtos centrados no usuário é a melhor estratégia para SEO.
- O documento discute frameworks front-end para desenvolvimento web, com foco no Bootstrap. Apresenta conceitos de design de interface, User Interface, User Experience e a importância dos frameworks para facilitar a criação de sites responsivos.
O documento discute como o JavaScript pode ser usado para tornar sites mais interativos para os usuários, listando exemplos de sites que usam JavaScript para zoom de imagens, galerias de fotos interativas e apresentação de programas. Ele também fornece exemplos de sites que disponibilizam códigos JavaScript.
Apresentação UX e UI - Webdesign - Aula 07Renato Melo
O documento discute experiência do usuário (UX) e interface do usuário (UI) na web. Apresenta como os usuários interagem com a internet de forma diferente dependendo da idade e como UX e UI melhoram a satisfação do cliente através de estratégias como simplificar formulários e destacar a conversão.
Wireframe em Aplicativos - Webdesign 2022Renato Melo
O documento discute as regras de usabilidade para o desenvolvimento de aplicativos e wireframes. Ele fornece 6 regras gerais de usabilidade, como ser objetivo, usar menos é mais, deixar sua marca, cuidar do layout, ser responsivo e ir direto ao ponto. Ele também explica o que é um wireframe e como pode ser usado no início do processo de desenvolvimento para estabelecer a estrutura básica de uma página.
O documento discute estratégias de design responsivo para websites adaptarem-se a diferentes dispositivos. Aborda tags semânticas do HTML5 que melhoram a acessibilidade e o SEO, além de técnicas como viewport, grid layout fluido, imagens flexíveis e media queries para estilização condicional de acordo com características dos dispositivos.
Este documento discute os princípios básicos do design responsivo, incluindo dividir o layout em blocos verticais para telas menores, usar imagens e medidas flexíveis, e media queries para adaptar o estilo às diferentes resoluções.
O documento descreve o design responsivo, que permite que sites se adaptem ao tamanho da tela do usuário. Ele é composto por layouts fluidos com base em porcentagens, imagens flexíveis e media queries para especificar estilos CSS de acordo com a capacidade do dispositivo. O design responsivo surgiu para permitir uma melhor experiência no uso de sites em dispositivos móveis.
O documento descreve o conceito de design web responsivo, que defende que sites devem ser capazes de se adaptar a diferentes tamanhos de tela. Isso é feito usando grids flexíveis, imagens e mídia flexíveis e media queries do CSS3. Um design web responsivo garante uma experiência de usuário eficiente e agradável em diferentes dispositivos como desktops, tablets e smartphones.
O documento discute técnicas e desafios de design responsivo para websites, incluindo layouts fluidos, imagens flexíveis, media queries, navegação, imagens, tabelas e conversão de sites antigos para design responsivo. Também aborda como vender o valor do design responsivo para clientes, principais problemas e como evitá-los.
O documento discute o design responsivo para websites, propondo uma abordagem flexível com grid, imagens e media queries que permitem a adaptação do layout a diferentes telas. O design responsivo garante que a web seja acessível em qualquer dispositivo.
O documento discute o conceito de design responsivo e como criar sites adaptáveis para diferentes dispositivos. Ele explica que o design responsivo usa grids fluidos, layout adaptativo e conteúdo flexível para se ajustar a telas de diferentes tamanhos. Também fornece dicas sobre como criar estruturas fluidas usando fontes, grids e imagens relativas, além de explicar o uso de media queries e breakpoints para personalizar o design em diferentes resoluções.
O documento discute aplicações responsivas e webdesign responsivo. Resume três principais técnicas de webdesign responsivo: layout fluído com valores percentuais, imagens flexíveis e consultas a mídias. Também discute performance como aspecto crucial para aplicações móveis.
O documento descreve o desenvolvimento de portais e sites governamentais realizado pela Procergs. A Procergs possui mais de 4500 redes instaladas, atende 100% dos órgãos do estado e desenvolveu mais de 700 sistemas. Ela utiliza um processo metodológico e um framework matriz para desenvolver portais e sites de forma rápida e padronizada.
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAISRoberto Mitraud Aroeira
O documento apresenta os conceitos básicos de design para web e mídias digitais. Aborda temas como layout, grid, tipos, cor, imagem e elementos de interface comum a maioria dos sites para explicar como a construção de páginas web requer conhecimentos de diversas áreas para proporcionar uma experiência agradável ao usuário.
1) O documento discute design e usabilidade, categorizando diferentes tipos de usuários e erros comuns em projetos de interface.
2) São listados dez equívocos em design de interface para cada ano entre 1996-2005, como uso excessivo de frames e animações.
3) O documento recomenda focar em melhorar a qualidade dos elementos básicos de um site em vez de adicionar novas tecnologias.
Responsive web design, conteúdo em todos os dispositivosDiogo Souza Machado
O documento discute o conceito de design responsivo, que permite que sites se ajustem automaticamente a diferentes tamanhos de tela. Ele explica como CSS, HTML e JavaScript tornam isso possível através de recursos flexíveis, viewports e queries de mídia. Também aborda por que o design responsivo é importante devido ao crescimento do uso de dispositivos móveis.
Portal De Serviços Acadêmicos - IHC para linhas de produtoDiego Armando
O documento discute princípios e diretrizes para projetar interfaces humano-computador (IHC) para linhas de produtos baseadas em serviços. Aborda conceitos como IHC e linhas de produto, objetivos da IHC como segurança e usabilidade, princípios de design como visibilidade e feedback, e diretrizes para usabilidade na web e em dispositivos móveis.
This document discusses strategies for responsive user experience (UX) design. It covers topics like understanding UX versus interface, taking a content-first approach, using mobile-first design, best practices for responsive design like breakpoints and performance optimization, and selling responsive design proposals to clients. The overall goal is to provide guidance on creating responsive designs that adapt to different devices and deliver a quality user experience across all screens.
Responsive Design - Responsive UX StrategycomOn Group
O documento discute estratégias de design responsivo e UX. Ele define design responsivo como uma abordagem que adapta a estrutura e design de um site ou app às diferentes resoluções de tela. Também discute como uma estratégia de UX responsiva deve ir além de simplesmente adaptar ao tamanho da tela e focar na experiência do usuário ao priorizar conteúdo, aproveitar recursos de dispositivos e medir o comportamento dos usuários.
1. O documento discute regras para criar um website eficaz, focando-se no conteúdo e na forma. É explicado que o conteúdo deve ser categorizado e condensado de acordo com os objetivos e público-alvo, e a forma deve ser consistente e previsível para os usuários.
2. Modelos de páginas como páginas de abertura, páginas iniciais, páginas FAQ e páginas de contato são discutidos como estruturas comuns para websites. Tecnologias como HTML, CSS,
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhosGilberto Crespo
Palestra para iniciantes no desenvolvimento responsivo, onde são explicada algumas técnicas para dar maior orientação ao desenvolvedor de como se aprofundar posteriormente.
Dica fundao-sites-responsivos-140528101304-phpapp02Bruno da Silva
O documento discute o design responsivo, abordando conceitos como mobile first, dicas, exemplos e referências. O foco é planejar sites para dispositivos móveis primeiro e depois para desktops, removendo conteúdo desnecessário e melhorando a usabilidade e acessibilidade em diferentes telas. Wireframes, imagens apropriadas para cada resolução e formulários simplificados são algumas dicas apresentadas.
O documento discute o design responsivo, abordando sua definição, princípios como mobile first e dicas para sua implementação. É destacado que o foco é apresentar a informação de forma acessível em diferentes dispositivos e que é importante começar pelo mobile, melhorando progressivamente para outros formatos.
O documento discute o ambiente móvel e o perfil dos usuários móveis no Brasil, destacando que os clientes estão cada vez mais no celular e as empresas precisam estar presentes nesses dispositivos também, e apresenta pesquisas sobre o comportamento dos usuários móveis no Brasil.
The document contains a list of links related to mobile user experience design. Specifically, it lists links to websites about mobile UX/UI design concepts for Twitter, the Discovery Channel, and an iPhone music app. It also lists general links about mobile experience design and mobile-optimized websites.
O documento discute os principais elementos necessários para melhorar a experiência do usuário em sites mobile. São eles: funcionalidade, arquitetura da informação, conteúdo, design, inputs do usuário, contexto móvel, usabilidade, confiabilidade, feedbacks e ajuda. Para cada elemento, o documento fornece diretrizes de projeto visando tornar a navegação gratificante em diferentes dispositivos móveis.
O documento discute conceitos e atividades relacionadas a interfaces móveis, incluindo touch events, lei de Fitts e pontos events. Ele explica como esses eventos lidam com entrada de toque e como fornecem uma experiência consistente em diferentes dispositivos. Além disso, discute a importância do tamanho e posicionamento de elementos na interface de acordo com a lei de Fitts para melhorar a usabilidade.
O documento discute a abordagem "mobile first" para projetar sites, sugerindo começar com as regras básicas para mobile e depois adicionar funcionalidades para desktop através de media queries. Também recomenda testar a performance mobile usando ferramentas como Mobitest IO para analisar recursos lentos e melhorar a experiência de navegação de forma progressiva.
O documento descreve a técnica de Coding Dojo, originalmente inspirada em Dojos de artes marciais japonesas, que promove a prática constante de programação em grupo de forma colaborativa e sem distinção de experiência, para aprendizado contínuo de todos os envolvidos.
O documento discute os principais navegadores móveis, incluindo Firefox, Chrome, Opera Mini, Opera Mobile e Internet Explorer Mobile. Ele fornece detalhes sobre as características e funcionalidades desses navegadores, como segurança, HTML5, sincronização, velocidade e privacidade. Além disso, inclui links para sites dos fabricantes e vídeos demonstrados as capacidades dos navegadores móveis.
O documento discute os browsers móveis, com foco no Safari da Apple. Apresenta as características e recursos do Safari, incluindo o WebKit, abas, compartilhamento, desempenho e recursos para desenvolvedores. Recomenda que desenvolvedores para dispositivos Apple foquem no Safari devido à sua popularidade e recursos integrados nesses dispositivos.
O documento discute as características e funcionalidades do navegador Opera para desktop e mobile, incluindo sua velocidade, recursos para desenvolvedores e suporte a padrões web.
O documento discute as características e melhorias dos navegadores Internet Explorer 9 e 10, incluindo melhor desempenho, compatibilidade com HTML5, proteção contra rastreamento e segurança aprimoradas.
O documento descreve as características e funcionalidades do navegador Firefox. Ele discute como o Firefox oferece alta performance, segurança, suporte a novas tecnologias como WebSockets e WebM, e uma comunidade ativa de desenvolvedores. O documento também menciona o concurso Firefox Flicks para vídeos sobre dispositivos móveis.
O documento descreve um desafio proposto para agências criarem interfaces para dispositivos móveis considerando as necessidades dos clientes. As agências devem realizar brainstorming para listar aspectos fundamentais para websites mobile e projetar um layout para apresentação, demonstrando os resultados do brainstorming.
Este relatório compara o desempenho de anúncios no feed de notícias versus anúncios no painel lateral do Facebook. Os anúncios no painel lateral tiveram maior alcance, impressões e frequência, enquanto os anúncios no feed geraram mais cliques e ações. No geral, cada formato tem vantagens e o relatório conclui que vale a pena investir em ambos.
Este documento descreve o site de uma empresa de móveis corporativos, incluindo seções sobre produtos, linhas corporativas, quem somos, contato e informações sobre a empresa. Há também detalhes sobre promoções e pagamentos.
O relatório resume os resultados das mídias sociais de setembro a dezembro, incluindo 306 likes no Facebook em setembro e crescimento de seguidores no Twitter. Anúncios no Facebook geraram cliques no site. O LinkedIn teve aumento de visualizações. Recomendações no Twitter aumentaram acessos ao site em 150%.
O relatório resume as métricas de tráfego de um site de setembro a dezembro, mostrando um crescimento de mais de 100% no período. As sessões, visualizações de página e usuários aumentaram consideravelmente, enquanto a taxa de rejeição e duração média da sessão diminuíram. O blog do site teve bons resultados, sendo a segunda página mais visitada e atraindo visitantes recorrentes.
O documento discute as mudanças trazidas pelo HTML5, incluindo a adição de elementos semânticos que melhor descrevem o conteúdo, como section, header e article, e a capacidade de incorporar vídeos e mídia diretamente na página sem a necessidade de plugins.
2. usabilidade e padrões
de design mobile
Atividades e conceitos da aula:
- Layout fixo
- Layout fluído
- Layout elástico
- Layout híbrido
- Responsive Web Design
3. usabilidade e padrões
de design mobile
"A tecnologia de desenvolvimento
mobile se tornou um estilo de vida,
misterioso e confuso e que envolve
uma desconcertante velocidade de
crescimento."
Lyza Danger Gardner (@lyzadanger)
Jason Grigsby (@grigs)
5. usabilidade e padrões
de design mobile
Responsive web design
Um site com design bonito desenvolvido
para mobile não corresponde a um site
adaptável para mobile.
A beleza muitas vezes se torna superficial...
6. usabilidade e padrões
de design mobile
Responsive web design
Conceito criado por Ethan Marcotte, Responsive Web Design
(RWD) representa uma série de técnicas de programação
de interface de sites em CSS que tem o objetivo de adaptar
layouts de acordo com a forma de utilização do dispositivo
móvel para navegação na Internet, tornando o conteúdo
acessível de forma fácil e permitindo acessibilidade ao
conteúdo do web site.
7. usabilidade e padrões
de design mobile
Responsive web design
A utilização do Responsive Web Design é uma das formas
mais rápidas e simples para adaptar websites às
especificações nos dispositivos móveis, possibilitando a
reutilização do design do website, caso este já tenha uma
versão para computadores pessoais.
Caracteriza-se pela combinação de
CSS3 media queries, fluid grid layouts e fluid images.
8. usabilidade e padrões
de design mobile
Responsive web design
Visa atender a um dos objetivos do W3C
"Uma marcação para todos os tipos de mídia"
Sua tentativa para solucionar esse problema iniciou com a revisão do CSS 2.0 de 1998:
As CSS 2.0 suportam folhas de estilo específicas para diferentes
mídias, possibilitando aos autores criar apresentação de seus
documentos para servi-los de maneira diferenciada para
navegadores visuais, dispositivos aurais, impressoras, dispositivos
braille, móveis, etc.
9. usabilidade e padrões
de design mobile
Responsive web design
Problema: Os navavegadores implementaram suporte
aceitável somente para leitura e aplicaçãopara mídia - print.
Solução - Aplicação de Técnicas para o desenvolvimento de
Responsive Web Design
10. usabilidade e padrões
de design mobile
Responsive web design
• CSS Media Queries – Permite a avaliação de certos aspectos do
navegador e do ambiente de navegação do usuário para determinar as
regras de estilo em CSS que deverão ser aplicadas. Utiliza-se de
expressões lógicas (true or false) para representação das regras
aplicadas.
• Fluid-grid layouts – Utiliza proporções relativas e absolutas para
fornecer o layout dos elementos de uma página, utilizando layout
baseado em porcentagem para adequação;
• Fluid images and media – Permite a utilização dos elementos de um
web site dentro dos limites das matrizes do navegador.
11. usabilidade e padrões
de design mobile
Responsive web design
CSS Media Queries
O funcionamento do conceito de CSS 3.0 Media Queries representa
expressões lógicas que identificam as características do navegador do
usuário, caso as regras determinadas tenham retorno verdadeiro, a
aplicação das regras para Media Query são aplicadas adaptando o layout
para o formado do dispositivo do usuário.
12. usabilidade e padrões
de design mobile
Responsive web design
CSS Media Queries
Para entender media queries é ideal relembrar formas de vincular folhas
de estilo em CSS 2.0 para diferentes tipos de mídia:
<link rel="stylesheet" type="text/css" media="print, handheld" href="foo.css">
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media screen, print {
body { line-height: 1.2 }
}
13. usabilidade e padrões
de design mobile
Responsive web design
CSS Media Queries
Mais sobre media types - http://www.w3.org/TR/CSS2/media.html
14. usabilidade e padrões
de design mobile
Responsive web design
CSS Media Queries
Para realizar a importação de CSS 3.0 Media Querie continuamos com a
sintaxe de CSS 2.0, porém com nova sintaxe para definir a mídia:
@media screen and (min-width:480px) { /* CSS Rules */ }
<link rel="stylesheet" type="text/css" href="my.css" media="screen and (min-
width:480px)" />
15. usabilidade e padrões
de design mobile
Responsive web design
CSS Media Queries
Operadores media query:
and - Concatenação - retorna true se as condições à esquerda e à direita forem
verdadeiras
only - Esconde folhas de estilo em navegadores que não suportam media query
not - negação - retorna true se a funcionalidade não existir
16. usabilidade e padrões
de design mobile
Responsive web design
Otimização de layout para desenvolvimento de
layouts “mobile-friendly”
O desenvolvimento de layouts já existentes em versões para
computadores pessoais adaptados para dispositivos móveis
devem seguir algumas recomendações, sendo estas:
17. usabilidade e padrões
de design mobile
Responsive web design
Otimização de layout para desenvolvimento
de layouts “mobile-friendly”
• Analise da estrutura do layout existente;
• Identificação das áreas do layout a serem adaptadas para
“mobile-friendly";
• Desenvolvimento do CSS adaptável;
• Aplicação de regras lógicas de Media Queries para adaptação
de um mesmo layout CSS para desktop e mobile.
18. usabilidade e padrões
de design mobile
Responsive web design
Adequação do layout a ser adaptado para dispositivos mobiles
• Identifique o tamanho ideal para resolução mínima desejável para navegação
do web site. Segundo O´Reilly 320 pixel é a resolução mínima padrão para
dispositivos mobiles.
• Identificar as regras de formatação de folha de estilo padrões para a
utilização em ambas as versões, reduzindo a necessidade de requisições de
regras repetidas para ambas versões;
• Inserir a meta informação “viewport” no cabeçalho HTML, permitindo que os
navegadores renderizem o conteúdo aplicando a ampliação máxima definida;
19. usabilidade e padrões
de design mobile
Responsive web design
Funcionalidades de mídia
As diferenças entre funcionalidades de mídia e propriedades CSS são:
- Propriedades CSS são usadas em declarações CSS que
fornecem informações sobre como apresentar o
documento.
- Funcionalidades de mídia são usadas em expressões
destinadas a descrever requisitos do dispositivo de
saída do documento
20. usabilidade e padrões
de design mobile
Responsive web design
Funcionalidades de mídia
As diferenças entre funcionalidades de mídia e propriedades CSS são:
- Propriedades CSS requerem a declaração de um valor
- Funcionalidades de mídia podem ser usadas com ou sem
declaração de um valor, exceto com os prefixos min- e max-.
21. usabilidade e padrões
de design mobile
Responsive web design
Fixed Layout
Fluid Layout
Elastic Layout
Hibrid Layout
22. usabilidade e padrões
de design mobile
Responsive web design
Fixed Layout
O desenvolvimento de websites utilizando o conceito de
layout fixo caracteriza-se pela utilização de unidades de
medidas fixas (ex.: pixels) para estruturação das áreas de
conteúdo um web site.
23. usabilidade e padrões
de design mobile
Responsive web design
Fixed Layout - Desvantagens
O principal problema apresentado por esta técnica deve-
se a não uniformidade das resoluções dos computadores
ao redor do mundo, fazendo com que um mesmo layout
definido em uma medida fixa tenha perda na visualização
do conteúdo em diferentes resoluções.
24. usabilidade e padrões
de design mobile
Responsive web design
Fixed Layout - Desvantagens
Ao visualizar um site em resoluções com medidas maiores das
definidas, áreas vazias e sem conteúdo irão aparecer.
Layouts com largura fixa funcionam bem com o tamanho padrão
de texto do navegador, mas ao aplicar-se zoom ou aumentar o
tamanho da fonte para que os espaços disponíveis aos textos se
tornem inadequados para leitura.
25. usabilidade e padrões
de design mobile
Responsive web design
Fixed Layout - Vantagens
Fornecem ao desenvolvedor mais controle sobre o layout e
posicionamento dos objetos.
26. usabilidade e padrões
de design mobile
Responsive web design
Fluid Layout
O desenvolvimento de websites utilizando o conceito de layout
fluído caracteriza-se pela utilização de porcentagens para
estruturação das áreas de conteúdo um web site.
27. usabilidade e padrões
de design mobile
Responsive web design
Fluid Layout - Vantagens
A principal vantagem na utilização de layout fluído está na
possibilidade de adaptar o layout de um web site a qualquer tipo
de dispositivo, sem que áreas fiquem fora do campo de visão do
visitante.
28. usabilidade e padrões
de design mobile
Responsive web design
Fluid Layout - Desvantagens
Em resoluções muito pequenas, a leitura do texto pode ser
comprometida, por tornar-se extremamente estreitas.
Inversamente, se a resolução for muito grande, as linhas podem
tornar-se longas demais para uma boa legibilidade.
29. usabilidade e padrões
de design mobile
Responsive web design
Elastic Layout
Layouts elásticos funcionam configurando a largura dos
elementos em relação ao tamanho da fonte em vez de em relação
à largura dos navegadores.
30. usabilidade e padrões
de design mobile
Responsive web design
Elastic Layout - Vantagens
Configurando a largura em ems - quando o tamanho da fonte
aumentar, o layout todo será redimensionado.
Permite manter o comprimento das linhas de acordo com um
tamanho legível e é extremamente útil para pessoas com visão
reduzida.
31. usabilidade e padrões
de design mobile
Responsive web design
Elastic Layout - Desvantagens
Assim como layouts fixos, podem não utilizar toda área útil
adequadamente.
Como todo layout aumenta quando o texto aumenta, podem
surgir barras de rolagens indesejadas horizontais.
32. usabilidade e padrões
de design mobile
Responsive web design
Elastic Layout + Fluid Layout
Layouts híbridos podem ser uma solução adequada para seus
layouts:
- Larguras em ems
- Larguras máximas em %
33. usabilidade e padrões
de design mobile
Responsive web design
Atividade 01 - Desenvolver um layout
nas 04 possibilidades de layout.
34. usabilidade e padrões
de design mobile
Responsive web design
Atividade 02 - A partir do layout
desenvolvido, aplicar a configuração através
de media query da seguinte forma:
● De 760px a 1000px - 03 colunas
● De 400px a 760px - 02 colunas
● Abaixo de 400px - 01 coluna
35. usabilidade e padrões
de design mobile
meta viewport
Utilizada para "servir" o layout nos dispositivos
móveis e afeta diretamente a forma como o
usuário utiliza seu website.
<meta name="viewport" content="
width=device-width, initial-scale=1.0,
maximun-scale=1" />
37. usabilidade e padrões
de design mobile
THE FLUID FORMULA
Como converter corretamente as medidas de
um layout fixo em fluido?
The fluid formula:
target (tamanho elemento em px) = result*100 (%)
content (tamanho total do elemento pai)