Advertisement
  1. Code
  2. Yii

Construyendo Tu Startup: Mejorando la Web Móvil

by
Read Time:15 minsLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup: The Dashboard Foundation
Building Your Startup: Issue Tracking and Feature Planning

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Este tutorial es parte de la serie Construyendo Tu Startup Con PHP en Envato Tuts+. En esta serie, te estoy guiando a través de lanzar una startup desde concepto a realidad usando mi app Planificador de Reuniones como un ejemplo de la vida real. Cada paso a lo largo del camino, liberaré el código de Planificador de Reuniones como ejemplos de código abierto de los cuales puedes aprender. También estaré abordando temas de negocios relacionados con startups según se presenten.

Aplicaciones Móviles vs. Web Responsiva

Estratégicamente, construir aplicaciones móviles para Planificador de Reuniones en iOS y Android tiene sentido, pero financieramente no he levantado recursos para esto aún. Mathew Ingram recientemente escribió en Fortune que debido a la plétora de ofertas para usuarios móviles, "estadísticamente hablando al menos---nadie va a descargar tu app." Así que mientras ciertamente podría mejorar la experiencia de Planificador de Reuniones con una app, su probabilidad de adopción no hace sentido inmediato con mis recursos actuales.

Sin embargo, es extremadamente importante hacer de Planificador de Reuniones una gran experiencia web en dispositivos móviles.

En el episodio de hoy, revisaré y discutiré hacer cambios orientados a hacer justo eso---esencialmente hacer nuestra aplicación web más un sitio responsivo, usable fácilmente en dispositivos móviles y tablets. ¡Revisa los resultados (en tu teléfono o tablet)!

Uno de los retos de código para el episodio de hoy era que no soy un diseñador o codificador CSS. Algunos días siento que incluso no debería estar codificando por mi mismo; en Microsoft yo era Group Program Manager, ej. teníamos diseñadores gráficos, un laboratorio de usabilidad con personal, el CSS no existía, etc.

Conduciendo a este trabajo, me sentí intimidado intentando aprender media queries, puntos de quiebre, y CSS especializado--no es un asunto en lo que tenga habilidades, y consume tiempo y está muy orientado a los detalles. Aún así, dentro de 48 horas todo salió rápido y hermosamente. Si escaneo el fondo de la historia, verás como algunas pocas líneas de CSS fueron finalmente necesarias para todos los cambios. De pronto mientras comienzo a navegar Planificador de Reuniones en mi teléfono, me emociono por lo bien que la experiencia web responsiva estaba funcionando.

Francamente, me hizo sentir que una app móvil dedicada solo no era necesaria de momento. Podemos construir nuestra audiencia con la experiencia móvil por ahora, especialmente a través de las críticas próximas fases alfa y beta.

Mientras tanto, si no has probado nuestro Planificador de Reuniones aún, continua y programa tu primera reunión desde tu teléfono o tablet. Participo en la sección de comentarios abajo, ¡así que cuéntame acerca de tu experiencia! También puedes contactarme en Twitter @reifman. Siempre estoy interesado en nuevas peticiones de características y temas de tutoriales sugeridos.

Como recordatorio, todo el código de Planificador de Reuniones es escrito en el Framework Yii2 para PHP. Si quisieras aprender más acerca de Yii2, revisa nuestra serie paralela Programando con Yii2.

El Estado Móvil Actual

Para comenzar, navegué el estado actual del servicio de Planificador de Reuniones con mi teléfono iOS y tomé capturas de pantalla de la aplicación inicial. No es terrible, pero no es grandioso. Revisemos lo que encontré.

La Página de Inicio

La página de inicio se ve bien, aunque estéticamente deseo que el texto principal, "Making Scheduling Easy", se partiera un poco diferente, ej. en tres líneas de longitud aproximadamente igual. Sin embargo, Boostrap administra el menú desplegable bien, y el resto de la página trabaja funcionalmente:

Meeting Planner Responsive Web - Home PageMeeting Planner Responsive Web - Home PageMeeting Planner Responsive Web - Home Page

La Página de Registro

De nuevo, además del diseño estético del encabezado y la consistencia del margen izquierdo, la página de registro es básicamente funcional:

Meeting Planner Responsive Web - Signup PageMeeting Planner Responsive Web - Signup PageMeeting Planner Responsive Web - Signup Page

Planeando Reuniones

Una vez que la persona comienza a planear reuniones, la página principal actual necesita mejoras. Hay demasiadas columnas. El asunto está apretado. Tal vez la información que elegí mostrar aquí en primer lugar no es esencial. Y, ciertamente, las opciones de comando no están a la vista. La página necesita ser ajustada para móvil más significativamente.

Meeting Planner Responsive Web - Meetings ListMeeting Planner Responsive Web - Meetings ListMeeting Planner Responsive Web - Meetings List

Otras páginas funcionan bien, tales como la petición de nueva reunión para un asunto. Sin embargo, los usuarios móviles probablemente no quieran un área de texto para teclear un mensaje más largo introduciendo la reunión:

Meeting Planner Responsive Web - New Meeting Subject FormMeeting Planner Responsive Web - New Meeting Subject FormMeeting Planner Responsive Web - New Meeting Subject Form

Agregar participantes también se vuelve un poco disfuncional con las extensiones bootstrap que estamos usando:

Meeting Planner Responsive Web - Add a Person FormMeeting Planner Responsive Web - Add a Person FormMeeting Planner Responsive Web - Add a Person Form

Y las vistas de planeación para lugares y horarios comienzan a romperse. De nuevo, el diseño de escritorio ofrece demasiado detalle y muchas opciones para móvil:

Meeting Planner Responsive Web - When Times Form with SwitchesMeeting Planner Responsive Web - When Times Form with SwitchesMeeting Planner Responsive Web - When Times Form with Switches

Otras Áreas

La funcionalidad de la página de Lugares trabaja pero necesita un diseño mejorado de los botones. Y tal vez esta funcionalidad no es necesaria para usuarios móviles.

Meeting Planner Responsive Web - Add Places FormMeeting Planner Responsive Web - Add Places FormMeeting Planner Responsive Web - Add Places Form

De manera similar, la pestaña de escritorio y diseño de foto se rompen en móvil. También necesita ser re-pensado:

Meeting Planner Responsive Web - Profile SettingsMeeting Planner Responsive Web - Profile SettingsMeeting Planner Responsive Web - Profile Settings

Desarrollando Soluciones

Ciertamente, hay muchas áreas del sitio que pueden ser mejoradas. Algunas áreas necesitan ser re-pensadas para móvil, algunas minimizadas, y otras solo ajustadas estéticamente. Vayamos a trabajar.

Diferentes Aproximaciones

Tenía prácticamente cero experiencia con media queries y puntos de quiebre cuando comencé esta tarea. Por algunos días antes, procastiné sumergirme en lo que temía era un terreno desconocido. Comencé con un media query de práctica para atormentar a mi editor:

Bromear ayudó a romper el hielo mental en mi cabeza. Siempre estoy disponible y visible a los dioses editoriales de Envato.

Hubo un número de áreas que comencé a considerar:

  • Simplificar funcionalidad, especialmente con el proceso de planeación de reunión
  • Identificar la información crítica a mostrar para móvil
  • Ocultar algo de funcionalidad en dispositivos móviles, tales como elementos, columnas y opciones de menú
  • Trabajar con media-queries y puntos de quiebre
  • Mantenerse concentrado en las áreas más importantes de la liberación alfa

Un concepto útil con el que me encuentro en la web fue "Diseño para Móvil Primero." Desafortunadamente, soy de la vieja escuela y no había hecho eso. Pero fue útil re-pensar cada página con este tema: Móvil Primero.

Por ejemplo, el índice de reunión con cuatro columnas tuvo que irse y fue desconcertante en teléfonos verticales.

Me seguí preguntando cómo habría diseñado todas las páginas para funcionar desde un teléfono.

Calentando para Media Queries

Menús Desplegables

Me tomó algo de esfuerzo superar mi duda de adentrarme en CSS. Para calentar, comencé trabajando en minimizar los botones desplegables y simplificando el alcance de la funcionalidad móvil.

Por ahora, decidí crear un simple media query básico para dispositivos más pequeños y usar a lo largo del sitio. Aquí está frontend/site.css:

Hacer cambios resultó ser relativamente simple. Para cualquier elemento de menú que quería esconder en móvil, solo terminé agregando una propiedad CSS, ej. menuHide.

Aquí está la propiedad menuHide agregada a /frontend/views/layouts/main.php:

De repente, el menú desplegable tenía menos complejidad:

Meeting Planner Responsive Web - Responsive Dropdown MenuMeeting Planner Responsive Web - Responsive Dropdown MenuMeeting Planner Responsive Web - Responsive Dropdown Menu

Gradualmente, me di cuenta de que simplificando y reduciendo funcionalidad en la web móvil crearía la mejor experiencia. La gente siempre puede regresar a su escritorio para acceder otras características, al menos por ahora. Esto también sería un a oportunidad para reunir retroalimentación de la gente durante las fases alfa y beta.

Breadcrumbs

El diseño por defecto de Yii incluye un widget de migas de pan que es cargado via composer y más difícil de personalizar. Experimenté con agregar CSS para ocultar el primer elemento y el primer divisor "/":

Meeting Planner Responsive Web - Desktop BreadcrumbsMeeting Planner Responsive Web - Desktop BreadcrumbsMeeting Planner Responsive Web - Desktop Breadcrumbs

Tomó algún tiempo pero me adentró más profundo a CSS, ej. contenido nth-child, y construyó mi confianza:

No tenía idea de que CSS pudiera modificar contenido.

Aquí está el resultado:

Meeting Planner Responsive Web - Responsive BreadcrumbsMeeting Planner Responsive Web - Responsive BreadcrumbsMeeting Planner Responsive Web - Responsive Breadcrumbs

Espaciado de Botón Mejorado para Puntas de Dedos

Después, agregué CSS para proporcionar padding adicional para botones en móvil para hacer las presiones de las puntas de los dedos menos propensas a errores. Por ejemplo, aquí están los botones enviar y cancelar en dispositivos de escritorio:

Meeting Planner Responsive Web - Default Button Spacing DesktopMeeting Planner Responsive Web - Default Button Spacing DesktopMeeting Planner Responsive Web - Default Button Spacing Desktop

Este es el CSS que usé y comencé agregando a varios botones e iconos cliqueables alrededor del sitio:

Aquí está como luce el formulario en móvil---nota el nuevo padding entre Enviar y Cancelar:

Meeting Planner Responsive Web - Enhanced Button SpacingMeeting Planner Responsive Web - Enhanced Button SpacingMeeting Planner Responsive Web - Enhanced Button Spacing

Envolvimiento de Texto Responsivo

Meeting Planner Responsive Web - Home Page with Text WrapMeeting Planner Responsive Web - Home Page with Text WrapMeeting Planner Responsive Web - Home Page with Text Wrap

Hacer el encabezado de la página de inicio, "Scheduling Made Easy," que se envolviera de hecho tomó un poco más de tiempo. Finalmente, agregué una etiqueta <br /> al texto y oculté por defecto cuando no se está en móvil. Pero también tuve que agregar un espacio en una etiqueta span con la clase itemHide.

Aquí está el CSS para .rwd-break. Está oculto por defecto y solo aparece en displays responsivos, rompiendo el texto del encabezado de la forma que quiero.

Sin el espacio de la etiqueta span, el texto se rompería sin el centrado apropiado.

Simplificando la Página de Lista de Reuniones

Mientras pensé "móvil primero" más y más, me dí cuenta de que el usuario basado en teléfono no necesita toda la funcionalidad en mis páginas. Ellos no necesitan todas las pestañas, ellos no necesitan la tabla de información sobre reuniones, y no necesitas todos los iconos de botón de opciones. De hecho, para la página de reunión, ellos solo necesitan poder abrir reuniones (puedes cancelar reuniones desde la página de vista de reunión misma).

Combiné las columnas de asunto y participante en una sola columna vertical, y el resultado luce mucho mejor.

Meeting Planner Responsive Web - Responsive Meeting List Meeting Planner Responsive Web - Responsive Meeting List Meeting Planner Responsive Web - Responsive Meeting List

En /frontend/views/meeting/index.php, agregué , .tabHide a dos de las cuatro pestañas.

Y, en /frontend/views/meeting/_grid.php, reestructuré la columna para combinar asunto y participante:

Ocultar la ActionColumn requirió un poco de investigación, pero luce así:

Finalmente, estos cambios simplificaron la interfaz de escritorio en el proceso de mejorar la móvil.

El Gran Reto: Programación de Reunión

Meeting Planner Responsive Web - Existing When Times Planning FormMeeting Planner Responsive Web - Existing When Times Planning FormMeeting Planner Responsive Web - Existing When Times Planning Form

Por mucho la tarea más retadora para mi fue adaptar la página de programación de reunión arriba para el móvil. Era un desastre en teléfonos, y yo estaba intimidado. De manera separada, siempre estaba preocupado de cómo adoptaría esta interfaz para múltiples participantes en el futuro---los requerimientos responsivos solo harían esto más difícil.

Mi uso de la extensión Boostrap Switch Widget para Yii de Kartik tenía sus propias limitaciones cuando se trataba de modificar diseño. Colocar estos elementos en columnas de tabla funcionó bien, pero hacer responsivas las columnas de tabla no era tan sencillo con con media queries.

Ciertamente como mostré con la página de lista de Reuniones arriba, ocultar columnas es sencillo, pero modificar la ubicación no tanto.

Comencé alejándome de un diseño horizontal de tabla para mostrar opciones de horario y lugar hacia un estilo vertical. Y, aparentemente, las tablas y columnas tienes su propia capacidad para envolver con HTML5 y CSS sin media queries.

Puedes ver la página vacía de plan de reunión mejorada aquí:

Meeting Planner Responsive Web - Responsive New Plan a Meeting FormMeeting Planner Responsive Web - Responsive New Plan a Meeting FormMeeting Planner Responsive Web - Responsive New Plan a Meeting Form

Cada vista parcial requirió columnas css adicionales para diseños de cuadrícula pre-definidas Boostrap para funcionar bien, ej. left col-xs4 y right col-xs-8. Aquí hay un ejemplo:

Hacer responsivos los formularios de lugar y horario fue lo más difícil. Experimenté y por último tuve éxito usando columnas de tabla que se envuelven naturalmente mientras la ventana de contenido (o dispositivo) se encogen.

También eliminé mostrar estados de participante en su propia columna con switches deshabilitados---no puedes cambiarlos, ¿así que para qué mostrarlos como switches? En su lugar, creé un resumen contextual del estado de tus participantes para lugares y horarios. Aquí está el código para getWhenStatus():

Aquí está cómo luce en escritorio ---nota el diseño horizontal de las filas de texto y switches:

Meeting Planner Responsive Web - Desktop Layout of Times and Places FormMeeting Planner Responsive Web - Desktop Layout of Times and Places FormMeeting Planner Responsive Web - Desktop Layout of Times and Places Form

Y aquí está la versión móvil, más horizontal y apilada sin media queries:

Meeting Planner Responsive Web - Final Responsive Meeting Planning FormMeeting Planner Responsive Web - Final Responsive Meeting Planning FormMeeting Planner Responsive Web - Final Responsive Meeting Planning Form

Como un ejemplo, aquí está el CSS para la forma en que codifiqué las columnas de tabla en el panel Cuándo (horarios):

Y aquí está el código para este formulario parcial desde /frontend/views/meeting-time/_list.php:

Lo mejor sobre estos cambios de vista de reunión es que simplifican reto de diseño UX para futuras reuniones con muchos participantes. Independientemente del número de personas en una reunión, la vista permanecerá básicamente la misma que arriba. Esencialmente, esto resolvió la barrera más grande para expandirme a reuniones de múltiples participantes---diseño UX.

¿Qué Sigue?

Espero que hayas disfrutado seguir a la par mientras trabajo en las minucias del diseño web responsivo. Mientras el código y los cambios visuales del sitio ocurrían, me sentí extremadamente satisfecho e impresionado con qué tan poco CSS se requirió. Tomados en conjunto, puedes verlo aquí:

Mis esfuerzos futuros de diseño comenzarán, "¿Cómo debería lucir esto en móvil?"

Como mencioné, estoy trabajando actualmente fervientemente para preparar Planificador de Reuniones para liberación alfa. Estoy concentrado primariamente en las mejoras clave y características que harán que la liberación alfa vaya suavemente.

Estoy dando seguimiento a todo en Asana ahora, de lo que escribiré en otro tutorial; ha sido increíblemente útil. Hay algunas nuevas características interesantes aún en camino.

También estoy comenzando a concentrarme más en el siguiente esfuerzo de reunión de inversión con Planificador de Reuniones. Recién estoy comenzando a experimentar con WeFunder basado en la implementación de las nuevas reglas de crowdfunding de SEC. Por favor considera seguir nuestro perfil. También escribiré más sobre esto en un tutorial futuro.

De nuevo, mientras estás esperando por más episodios, programa tu primera reunión (¡desde tu teléfono!). También, apreciaría si compartes tu experiencia abajo en los comentarios, y siempre estoy interesado en tus sugerencias. También puedes contactarme en Twitter @reifman directamente. También puedes publicarlos en el sitio de soporte de Planificador de Reuniones.

Espera nuestros siguientes tutoriales en la serie Construyendo Tu Startup Con PHP.

Enlaces Relacionados

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.