Du vet redan hur du använder mediafrågor för att skapa en lyhörd design, men har du försökt använda dem för något annat? Är det möjligt att mediafrågor kan användas för att förbättra ditt arbetsflöde?
Följ med när vi bryter helt från tradition och kapar mediasökningar för att hjälpa oss att testa och anpassa en design. Du har aldrig sett mediafrågor så här tidigare!
Utöver Responsive Design
Med ökningen av lyhörda designtekniker har mediafrågor blivit inskjutna i rampljuset som frälsaren av modern webbdesign. De ger en otroligt enkel och praktisk metod för att skapa en webbplats som fungerar över en mängd skärm- och webbläsarfönsterformat.
? Förutom att använda mediasökningar i min slutprodukt för att ge en bättre användarupplevelse, kanske jag kan använda mediafrågor i en lokal testmiljö för att hjälpa till med några grundläggande uppgifter.?Allt som är trevligt, men jag ville skaka saker lite upp. Jag började fråga mig en intressant fråga: Vad mer kan jag använda mediasökningar för?
Denna fråga leder till några intressanta brainstorming. Här har vi en teknik som gör att jag kan ändra min CSS på en grundläggande booleska sätt: Om mitt webbläsarfönster är x-storlek, gör y. Detta medför omedelbart konsekvenser för att förbättra mitt arbetsflöde. Förutom att använda mediasökningar i min slutprodukt för att ge en bättre användarupplevelse, kanske jag kan använda mediafrågor i en lokal testmiljö för att hjälpa till med några grundläggande uppgifter.
Löp med denna tankegång, låt oss se vad vi kan komma med!
Felsöker din CSS och visualiserar DOM
CSS-layout kan vara ett knepigt djur. Oavsett om du är en helt ny utvecklare eller en erfaren veteran, finns det tillfällen då läget av något i ditt liveförhandsgranskning inte stämmer överens med vad du gick till i din kod.
Under dessa omständigheter hjälper det verkligen att kunna visualisera just det som händer i DOM. När du får en visuell bild av föräldra / barn / syskonförhållandet tillsammans med en anständig bild av vad dina marginaler och vadderingar gör, skulle du bli förvånad över hur många problem du direkt kan upptäcka svaret på.
Chris Page lagt upp en lösning tillbaka i 2006 som är ganska användbar för bara ett sådant syfte. Den använder universalväljaren för att applicera färgade konturer till olika lager i DOM-trädet så att du enkelt kan få en känsla för hur innehållet är strukturerat:
Jag tog det här steget och tog det ett steg längre genom att lägga till några hjälpsamma bakgrundsfärger och sedan sätta in det hela i en mediefråga:
Varför skulle du göra det här?
Jag vet att det här är galet, men det är faktiskt ganska användbart. När du använder fönstret ovan för att felsöka din CSS kan det vara en smärta att kommentera den in och ut så att du kan se din layout som den är tänkt att vara. Med mediefrågan kan du snabbt och enkelt växla mellan de två vyerna genom att ändra storleken på ditt webbläsarfönster.
Här är en provsida eftersom den normalt visas i full bredd i min webbläsare:
Nu när jag drar sidan av webbläsarfönstret lite ser jag mina layouthjälpmedel. Observera att när vi blir djupare in i DOM blir bakgrundsfärgen mörkare.
Nu kan jag tweak min kod när jag tittar på resultaten i felsökningsläge, sedan dyker in i min normala vy med ett snabbt drag i fönstret.
Se den i aktion
Nu när vi har sett koden är det dags att starta demoen. Var noga med att ändra storlek på webbläsarfönstret och se hur felsökningshjälparna dyker upp när du får cirka 1100 pixlar breda.
demo: Klicka här för att starta.
Måste ses på skrivbord eller anteckningsbok.
Tweak din design
Ett annat sätt att använda mediafrågor är att hjälpa till att fatta beslut mellan subtila skillnader i en design. Till exempel, säg att du inte är helt nöjd med linjens höjd i din kroppskopia och vill testa några alternativ. Du kan ställa in några olika mediefrågor, var och en med egen linjehöjd:
Nu när du tittar på din design i webbläsaren kan du se de olika iterationerna genom att dra ditt webbläsarfönster in och ut. Detta hjälper dig att snabbt jämföra dina linjens höjdalternativ och välja vilken du vill bäst.
Du kan använda samma teknik för bakgrundsfärger, teckensnitt och allt annat du kan tänka dig.
Se den i aktion
Den här gången när du ändrar webbläsaren, titta på hur det påverkar linjens höjd. Detta skulle definitivt göra ett anständigt sätt att snabbt jämföra de tre alternativen.
demo: Klicka här för att starta.
Måste ses på skrivbord eller anteckningsbok.
Jämför webbdesign med Photoshop Mockup
Om du ofta bygger webbplatser från Photoshop comps hjälper det dig att kunna jämföra din levande version med den mockup som du försöker efterlikna.
Återigen ger en mediefråga oss ett enkelt sätt att byta mellan de två versionerna. Här har jag gjort allt innehåll till 40% opacitet, då tog jag in min ursprungliga komp som bakgrunden till kroppen. Detta skapar en slags överlagseffekt som hjälper mig att upptäcka några större skillnader.
Se den i aktion
För den här senaste demo kommer en webbläsarsändning att släppa opaciteten för allt innehåll på sidan och ge upp en fullständig opacitet av Photoshop-mockupen så att du kan jämföra de två.
demo: Klicka här för att starta.
Måste ses på skrivbord eller anteckningsbok.
Slutsats
Syftet med denna artikel är mer utforskande än pedagogiskt. Avsikten är att starta en diskussion om huruvida mediefrågor har potential för andra ändamål än responsiv design.
Alla tre av mina experiment ovan lutar mot lokal designtestning, så vi behöver inte ens ens bekymra oss för semantik, webbläsarkompatibilitet och andra problem som vanligtvis kommer med denna typ av konversation. I stället handlar det om att komma med användbara knep som förbättrar ditt eget personliga arbetsflöde.
Kan du tänka på något roligt eller användbart att göra med mediafrågor? Låt oss veta dina tankar i kommentarfältet nedan.