Responsive Design, Mobile First y Utility First

Una extension para Chrome que hace algo parecido al navegador sizzy es https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb/related?hl=en

Responsive Web Design

La web como la conocemos, hoy en día, no es una tecnología pensando en un UX o User Experience generando, desafortunadamente, que muchos de los sitio web no estén optimizados para los dispotivos móviles.

Definido por Ethan Marcotte, es una filosofía que responde a las necediades de los usuarios y a los dispositivos que estamos usando.

Mobile First

Como su nombre sugiere, significa que iniciaremos con el diseño de móviles y expandiendo éstas características para crear una verión en tableta o escritorio/web tradicional.

Cabe mencionar que esta filosofía no es sinónimo de limitación, por lo que tenemos que tener el mismo contenido tanto en escritorio como en móvil. Google describe las best practices en su sitio.

Utility first

CSS posee diferentes tipos de paradigmas para abstraer un diseño, como BEM descrito por Tailwind en ésta sección:

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

Sin embargo, llega a ser muy complicado establecer un armonía entre desarrolladores-diseñadores si no hay una concesión de sintaxis o linter. Por ello, Tailwind establece su propio orden con el objetivo:

• No invertir tiempo en inventar nombres para las clases
• Detener el crecimiento, sin fin, de CSS
• Simplificando y asegurando los cambios al CSS

Herramienta para desarrollo 🚀

Como desarrolladores necesitamos herramientas que nos permita exlotar nuestra creatividad al máximo por ellos exiten algunas DevTools:

• Safari for Developers
• Chrome o Chrome for Developers
  Y otras más … 🤯

En texto para cortar y pegar XD

Breakpoint -> Tamaño

• Default : Mayor a 0px
• sm : Mayor a 640px -> Mobil
• md : Mayor a 768px -> Tablet
• lg : Mayor a 1024px -> Laptop
• xl : Mayor a 1280px -> Table grandes o computadora de escritorio

Responsive Design: Es una técnica para asegurar que la aplicación se vea bien en diferentes dispositivos.
Mobile First: Prioriza el desarrollo pensando en los dispositivos móviles.
Utility First Css: Construir componentes a partir de clases con nombres descriptivos

https://responsively.app/

Tamaños en Tailwind

Esta es otra opcion de Sizzy, https://material.io/resources/resizer/

Tambien esta una alternativa a Sizzy, se llama Responsively. Es free y open source. 😉

Para los Opera Lovers como yo, https://addons.opera.com/es/extensions/details/responsive-web-design-tester/
con esta extensión podemos imitar un poco la funcionalidad de ese navegador que usa el profe

Browser for Developers:
https://blisk.io/

Este programa te permite realizar la misma tarea de visualizar diferentes breakpoints de una página web.

Responsively
https://responsively.app/

Es una alternativa opensource a sizzy, funciona muy bien y ahorra muhco tiempo al ver al mismo tiempo como va quedando nuestra web en cada dispositivo

Responsively app es un navegador libre que cumple la misma funcionalidad que sizzy

Sizzy se ve como un muy browser…