recentpopularlog in

garrettc : responsivedesign   188

« earlier  
Responsive design (designers and developers working together)
"This is a deep-dive into the role of development in the design process, with a focus on responsive design. It’s aimed at design leaders/managers and developers working with design teams, and visual designers looking to become better web designers."
responsivedesign  webdevelopment  webdesign  management  userexperience 
december 2018 by garrettc
Concise Media Queries with CSS Grid
Write less CSS and organize responsive layouts with ease.
css  flexbox  grid  webdesign  webdevelopment  responsivedesign 
november 2018 by garrettc
I Used A Phone Like Most People In The World And It Was Awful
"I lived with a best-selling Indian phone for 10 days. Nothing went smoothly."
android  userexperience  device  phone  mobilefirst  performance  responsivedesign 
july 2018 by garrettc
Designing Web Content for watchOS
"watchOS 5 brings web content to Apple Watch by rendering rich HTML in Messages and Mail. Gain insights into how watchOS maintains compatibility with existing web content, and find out what you can do to optimize your web content for Apple Watch."
watchos  apple  webdesign  responsivedesign 
june 2018 by garrettc
The Illusion of Control in Web Design
"We think of our job as controlling the user’s experience. But the reality is, we control far less than we imagine."
accessibility  userexperience  webdevelopment  webdesign  userinterface  worldwideweb  networking  offlinefirst  responsivedesign 
may 2018 by garrettc
Designing for Inclusion with Media Queries
Did you know that media queries aren’t just limited to screen size? This talk will dive into some lesser-known media queries that can help developers and designers create experiences for people browsing the web using assistive technologies.
responsivedesign  webdevelopment  webdesign  mediaqueries  accessibility  inclusion  society 
may 2018 by garrettc
Responsive And Fluid Typography With vh And vw Units
"Embracing fluid typography might be easier than you think. It has wide browser support, is simple to implement and can be achieved without losing control over many important aspects of design."
css  webdesign  responsivedesign  typography 
may 2018 by garrettc
HTML5 and jQuery Super Simple Drop Down Nav
Tutorials, guides, blogs and courses on Angular, TypeScript, JavaScript and front-end development.
webdevelopment  webdesign  userexperience  css  javascript  navigation  jquery  responsivedesign 
april 2018 by garrettc
We're not ‘appy. Not ‘appy at all.
GDS is leading the digital transformation of the UK government.
mobile  app  government  strategy  technology  gds  govuk  mobilefirst  responsivedesign 
april 2018 by garrettc
Custom properties for breakpoint debugging
Clever trick using CSS variables to display the currently active breakpoints during development.
css  webdevelopment  webdesign  debugging  responsivedesign  testing 
february 2018 by garrettc
Using Media Queries For Responsive Design In 2018
This article will take a look at the use of media queries for responsive design today, how they work alongside Flexbox and Grid Layout, and also have a look at what is coming in the future.
css  flexbox  grid  webdesign  webdevelopment  responsivedesign  mobileweb 
february 2018 by garrettc
Designing for Mobile Performance
Mustafa Kurtuldu mulls over the topic of performance - both perceived and measured - for users of mobile devices. Of course, in managing to deliver millions of gifts around the world on the night before Christmas perhaps Santa is the real expert in mobile performance.
mobileweb  mobile  performance  responsivedesign  webdesign  webdevelopment 
december 2017 by garrettc
Left to our own devices.
"For me, the real value of a device lab isn’t in testing. A device lab is a design tool."
webdesign  webdevelopment  responsivedesign  defensivedesign  designthinking  testing 
november 2017 by garrettc
Viewports
PPK's presentation on all things browser viewport.
browser  responsivedesign  viewport 
november 2017 by garrettc
Using SVG as placeholders — More Image Loading Techniques
"I’m passionate about image performance optimisation and making images load fast on the web. One of the most interesting areas of exploration is placeholders: what to show when the image hasn’t loaded yet.

During the last days I have come across some loading techniques that use SVG, and I would like to describe them in this post."
progressiveenhancement  responsivedesign  webdesign  webdevelopment  performance  svg 
november 2017 by garrettc
Fundamentals of Responsive Images
Picture this: images that look awesome and load fast. Learn how to size up responsive image solutions to choose what's right for your site.
css  responsivedesign  webdesign  webdevelopment  images  photography  mobileweb  progressiveenhancement 
october 2017 by garrettc
Above the fold is a myth.
The simplest reason as to why 'above the fold' is a myth.
webdesign  responsivedesign  fold 
august 2017 by garrettc
Fun with Viewport Units
"Viewport units have been around for several years now, with near-perfect support in the major browsers, but I keep finding new and exciting ways to use them."
css  layout  webdesign  responsivedesign  typography  css3 
june 2017 by garrettc
20 Useful CSS Snippets for Responsive Menus
You'll find CSS snippets for vertical and horizontal navs with dropdowns, slideouts and also some animated menu systems.
webdevelopment  navigation  webdesign  css  html  responsivedesign 
may 2017 by garrettc
Your Traffic Went Mobile; Why Hasn’t Your Design Process? | Big Medium
"We increased revenue by reducing the number of ads. Lesson: better mobile UX means better business value."
mobileweb  responsivedesign  webdesign  webdevelopment  business  designthinking 
march 2017 by garrettc
Responsive CSS Patterns without Media Queries
Andy Kirk looks at some neat techniques to achieve responsive CSS patterns while we wait for element and container queries to be available!
css  webdesign  webdevelopment  responsivedesign 
march 2017 by garrettc
Responsive Data Tables
Tables of data can only squish horizontally so far, so they can be a pain to browse on small screens (like mobile devices) where you may need to scroll both horizontally and vertically to browse the information at readable text sizes. We'll explore a CSS-based possible-solution to this issue.
css  html  table  responsivedesign  data  webdevelopment  webdesign 
february 2017 by garrettc
Yes, progressive enhancement is a fucking moral argument
"I wrote about that shitty progressive enhancement article and how I'm fucking done with the lack of empathy in tech."

Hear hear!
progressiveenhancement  webdevelopment  webdesign  mobileweb  responsivedesign  accessibility 
december 2016 by garrettc
Debating Progressive Enhancement
"Don’t make up your mind about Progressive Enhancement by reading reductive blog posts or presentations that gloss over or outright ignore the details and nuances of actual web work. Read up on the individual tactics used. Judge them in terms of how effective they might be at solving the problems you are tackling. Every tactic strikes a different balance. Unless you plan on only solving one kind of problem, again and again, throughout your career, you owe it to yourself to study the tactics that lie outside your comfort zone."
responsivedesign  mobileweb  progressiveenhancement  webdevelopment 
december 2016 by garrettc
Rethinking Responsive Design
"We need to recognize that screens are ephemeral, and that making something responsive will no longer be about screens. It’ll be about experiences."
designthinking  responsive  responsivedesign  sensors  mobilefirst  userexperience  pamoja 
november 2016 by garrettc
The Web is not Fashionable.
"A good website in my mind has a number of features:

Robust on the Network
Progressive Enhancement
Accessible
Responsively Designed
"
webdevelopment  webdesign  responsivedesign  mobileweb  offlinefirst  progressiveenhancement 
october 2016 by garrettc
Galen Framework
Automated testing of look and feel for your responsive websites.
css  testing  responsivedesign  webdesign  java 
september 2016 by garrettc
Choosing between min-width and max-width media queries
I’m often asked a variation of the following question: Should I use min-width or max-width media queries? The obvious answer is, of course, “yes”. But you know what they’re …
css  webdesign  webdevelopment  responsivedesign  mobileweb  bestpractice 
december 2015 by garrettc
Redesigning The Toast — Responsive Web Design
Incredible in-depth case study of the responsive redesign of The Toast, including front and back-end.
responsivedesign  webdesign  webdevelopment  contentstrategy  contentdesign  casestudy 
october 2015 by garrettc
The Battle for the Body Field
"As we attempt to combine multi-device design requirements with complex, media-rich narratives, we’ve hit the wall. The chunky, fields-and-templates approach we’ve developed can’t save us from the mismatch between our content and HTML’s descriptive tools. The good news is we don’t have to convert all our projects to XML to learn from the XML community’s wisdom. By using custom elements and properties to represent content’s meaning, transforming it into HTML on output, and ensuring that editing tools share the same vocabulary, we can publish structured content that supports the needs of today’s editors and art directors while also making our content safe for future generations."
content  contentdesign  contentstrategy  webdevelopment  responsivedesign 
september 2015 by garrettc
Will someone do this on mobile? Cloud Four Blog
Trying to decide if someone will do something complex on a mobile device? Here’s a simple two part answer.
mobileweb  responsivedesign  webdevelopment  userexperience 
august 2015 by garrettc
Responsive Solutions for Feature Comparison Tables
Adrian Sandu looks at two different solutions to displaying a feature comparison table (often seen on hosting websites) that looks good on smaller screens.
css  tutorial  responsivedesign  table  webdesign  webdevelopment 
august 2015 by garrettc
BreakpointTester
Breakpoint Tester shows you ALL breakpoints in your responsive design at once.
responsivedesign  webdesign  webdevelopment  tools  bookmarklet  css  testing 
july 2015 by garrettc
Atomic Design Methodology
✎Atomic design is for user interfaces:

You can apply atomic design to any UI, like Instagram
responsivedesign  atomicdesign  instagram 
july 2015 by garrettc
Importing CSS Breakpoints Into Javascript
A simpler way to keep your project's CSS and JS in sync
javascript  responsive  responsivedesign  css 
june 2015 by garrettc
Responsive Deliverables
In a world of growing front-end complexity, what are we handing off to clients?
css  webdesign  webdevelopment  bestpractice  responsivedesign 
june 2015 by garrettc
Resizr
Test responsive layouts in-browser.
browser  css  webdesign  responsivedesign  testing 
april 2015 by garrettc
15 Years of Dao
"15 years have passed since we published John Allsopp's “A Dao of Web Design.” Join us as we take a look back at John's piece and consider what it means for the web today."
design  history  designthinking  webdesign  webdevelopment  css  responsivedesign  responsive 
april 2015 by garrettc
A Dao of Web Design
"Web designers often bemoan the malleable nature of the web, which seems to defy our efforts at strict control over layout and typography. But maybe the problem is not the web. Maybe the problem is us. John Allsopp looks at web design through the prism of the Tao Te Ching, and decides that designers should let the web be the web."
css  design  web  webdesign  responsivedesign 
april 2015 by garrettc
Quantity Queries for CSS
Dynamic content Responsive web design is primarily concerned with one variable: space. In testing responsive layouts, we take an amount of content and see which spaces it will successfully fit into. The content is deemed constant; the space, variable. The @media query is the darling of responsive web design because it allows us to insert “breakpoints” wherever one layout strategy ceases to be viable and another should succeed it. However, it’s not just viewport dimensions, but the quantity of content that can put pressure on space. Just as your end users are liable to operate devices with a multitude of different screen sizes, your content editors are liable to add and remove content. That’s what content management systems are for. 
css  responsivedesign  mobileweb  webdevelopment 
april 2015 by garrettc
Precise control over responsive typography
It is possible to have precise control over responsive typography. Using calc() and viewport units you can create fluid type that scales perfectly between specific pixel values, within a specific viewport range.
css  typography  fonts  responsivedesign 
march 2015 by garrettc
Responsive Hero Images
"Hero images present unique challenges for responsive designs. During a recent responsive images audit, we found a unique solution which I wanted to share."
webdesign  responsivedesign  images 
march 2015 by garrettc
How we make RWD sites load fast as heck
Filament Group outline how they speed-up site performance by choosing to inline certain parts of CSS and JS
javascript  performance  responsivedesign  grunt  gulp  css  webdevelopment 
february 2015 by garrettc
Responsive WebVR, Headset Optional
VR on the web threatens to cleave the web platform in twain, like mobile
did before it.
virtualreality  responsivedesign  webstandards  progressiveenhancement 
february 2015 by garrettc
the simplest responsive css grid
"ungrid is a responsive, table-based CSS grid system. To use, simply put as many .cols as you wish in your .rows and the .cols will automatically be evenly spaced. This allows you to roll your own simple grids."
css  framework  grid  responsivedesign  responsive  webdesign  webdevelopment 
february 2015 by garrettc
Skeleton: Responsive CSS Boilerplate
Light as a feather at ~400 lines & built with mobile in mind.
Styles designed to be a starting point, not a UI framework.
Quick to start with zero compiling or installing necessary.
webdesign  framework  boilerplate  grid  responsive  responsivedesign 
december 2014 by garrettc
M dot or RWD. Which is faster?
"…these findings show that RWD sites can indeed compete with m dot sites in terms of load time!"
performance  responsivedesign  webdevelopment  devops 
december 2014 by garrettc
TableSaw
A group of plugins for responsive tables.
html  css  javascript  responsivedesign  table  userinterface 
october 2014 by garrettc
Resized
This is an incredible little bookmarklet to view pages at various sizes.
bookmarklet  testing  tools  webdesign  responsivedesign 
april 2014 by garrettc
Fluidity
HTML is almost 100% responsive out of the box. These 247 bytes of css fix the ‘almost’ part.
css  responsivedesign  mobileweb  webdevelopment 
april 2014 by garrettc
Liquidapsive (Liqui-dap-sive)
Know the difference between static, fluid, responsive, and adaptive layouts? This demonstrates them all for you:
webdesign  webdevelopment  responsivedesign  mobileweb 
march 2014 by garrettc
Surveying the Big Screen
With over three years of responsive web design in our collective portfolios, we now have a solid set of design patterns for making websites work on small devices. But what about larger screens?
responsivedesign  webdesign  webdevelopment 
december 2013 by garrettc
Responsive Design on a Budget | Clear Thinking - The Clearleft Blog
"…using the ‘size budget’ as a touchstone throughout the UX and visual design process (as well as the dev process, of course) proved surprisingly helpful."
performance  webdesign  webdevelopment  responsivedesign 
november 2013 by garrettc
Words
"You and I have been able to connect because I wrote this and you're reading it. That's the web. Despite our different locations, devices, and time-zones we can connect here, on a simple HTML page."
essay  web  writing  inspiration  webdesign  responsivedesign 
november 2013 by garrettc
« earlier      
per page:    204080120160

Copy this bookmark:





to read