recentpopularlog in

piperh : responsive   297

« earlier  
Using Media Queries For Responsive Design In 2018 — Smashing Magazine
Rachel Andrew Smashing Mag article about responsive design currently (Feb 2018) - flexbox and grid reduce the need for MQs.
webdesign  web  design  grid  flex  flexbox  media  queries  mq  responsive  css 
january 2019 by piperh
Fun Tip: Use calc() to Change the Height of a Hero Component | CSS-Tricks
complicated demo of using css calc to resize type or images for different window widths, instead of using media queries
webdesign  web  design  scale  responsive  fluid  proportion  aspect  ratio  css  calc 
november 2018 by piperh
Responsive images with constant aspect ratio
a codepen using the top padding trick to maintain aspect ratio in responsive code
webdesign  web  design  css  code  coding  aspect  ratio  proportion  responsive 
november 2018 by piperh
CSS Grid
ready-made css 12-column grid layout, using css grid.
webdesign  web  design  grid  12-column  12  column  layout  responsive  css 
september 2018 by piperh
Responsive Table | Jeremy Church
A mobile-friendly table solution, which persists headers for each table-cell on mobile devices.
webdesign  web  design  css  js  javascript  script  table  cell  header  responsive 
june 2018 by piperh
A Reference Guide For Typography In Mobile Web Design — Smashing Magazine
in-depth article on typography for mobile. Some stuff obvious or common sense but some useful references and advice.
webdesign  web  design  mobile  responsive  type  typography  font  android  apple  default 
june 2018 by piperh
Choosing a Responsive Email Framework: MJML vs. Foundation for Emails | CSS-Tricks
Compares MJML with Foundation for emails - two frameworks. There are ready-made implementations of both I think (eg Slinky). From the Conclusion and some Comments, MJML looks better for me.
html  email  design  construction  responsive  construct  build  make  comparison  mjml  foundation 
april 2018 by piperh
About responsive images, best formats and sizes
article title: A Guide to Responsive Images with Ready-to-Use Templates
webdesign  web  design  image  images  format  responsive  jpg  svg  png  inline  64base  resolution  size  webp  compression  srcset  pixel  density  picture  element  source 
february 2018 by piperh
Maintaining Accessibility in a Responsive World | Filament Group, Inc., Boston, MA
Filament Group article about coding accessible toggle button for visually hidden content (eg, a nav menu)
webdesign  web  design  toggle  menu  nav  responsive  accessible  accessibility  hidden  visually 
january 2018 by piperh
responsive tables Archives - CSS-Tricks
links to several resources about making responsive tables
webdesign  web  design  table  layout  html  code  coding  responsive 
november 2017 by piperh
Fundamentals of Responsive Images | Lullabot
article titled: Fundamentals of Responsive Images
webdesign  web  design  responsive  images  picture  srcset  sizes  method  vector  raster  breakpoints  code 
october 2017 by piperh
Building Better Backgrounds – Zack Krida – Medium
author says: Approaches to stacking css background images on mobile for improved readability, using object-fit and ES2015+
webdesign  web  design  mobile  css  image  img  background  background-image  stack  z-index  layer  responsive  object-fit  js  javascript  script 
july 2017 by piperh
slick flickable carousel for mouse and touch, vanilla js. Update to previous version that I think maybe I used somewhere
webdesign  web  design  carousel  flick  responsive  touch  tap  js  javascript  script  flickable 
july 2017 by piperh
Responsive Icons
an svg sprite method for showing icons depending on screen width - the icons change, they don't scale
webdesign  web  design  icon  responsive  svg  sprite 
june 2017 by piperh
rems and ems, and why you probably don’t need them – Hacker Noon
article claiming that you don't ever need rem or em, but important to see the discussion comments
webdesign  web  design  rem  em  pixel  size  unit  css  accessible  accessibility  responsive  zoom  zoomable  scale  proportion 
april 2017 by piperh
Responsive email design made simple
paid-for service (I think) to design/make fast html emails, with a drag and drop builder
design  html  responsive  email  construct  constructor  builder  build  code  develop  service  online  draganddrop 
april 2017 by piperh
CSS Viewport Units: A Quick Start — SitePoint
sitepoint guide to viewport units. Interesting aside about scroll bars eating into 50vw. Handy tip for centering vert and horiz using vh and vw
webdesign  web  design  vw  vh  viewport  units  size  width  height  css  responsive 
march 2017 by piperh
Responsive CSS Patterns without Media Queries
some techniques for getting responsive behaviour without media queries. Interesting use of fab four technique to make an image occupy only part or all of a column using only the container's width.
webdesign  web  design  css  responsive  fab  four  technique 
february 2017 by piperh
[no title]
version 3 of fancybox, the jQuery modal zoom I use on tria site. There's a stackexchange answer to my question about size of zoomed image, with sample callback code. One can reduce the image to, eg, 50% of its real pixel size. Sounds good if it works and isn't slow.
fancybox  fancybox3  tria  modal  zoom  image  clickable  enlarge  reduce  responsive  pixel  size  resolution  x2  x3  density 
february 2017 by piperh
XRespond – Virtual Device Lab
site for testing sites on different devices and screen sizes
webdesign  web  design  test  device  responsive  site  online  tool  lab  virtual 
january 2017 by piperh
the new code
Dudley Story's site - lots of teaching material, free.
webdesign  web  design  code  coding  css  js  javascript  html  technology  language  teaching  learning  learn  technologies  svg  responsive  php  mysql 
january 2017 by piperh
Making Responsive HTML Email Coding Easy With MJML – Smashing Magazine
SmashingMag article about a tool (online and ondisk) for making responsive mobile first html emails
design  html  email  tool  online  responsive  mobile  develop 
january 2017 by piperh
Milligram - A minimalist CSS framework.
yet another framework. they say its really light. Grid is based on flexbox
webdesign  web  design  css  framework  layout  responsive 
january 2017 by piperh
Responsive Email Resources
they say: A collection of tools & resources for responsive email design. Also has related sites 'Responsive email process' and 'Responsive email patterns'
webdesign  web  design  html  email  responsive  resources  templates  modules  code  pattern  library  reference 
january 2017 by piperh
online tool to create placeholder images - can produce responsive srcset in correct proportions / aspect ratio
webdesign  web  design  image  prototype  placeholder  responsive  test  lag  delay  simulate 
january 2017 by piperh
Dev.Opera — Responsive Images: Use Cases and Documented Code Snippets to Get You Started
good primer on responsive image techniques, explanation of the <picture> element and srcset and fallback. Code snippets for real practical use.
webdesign  web  design  picture  srcset  image  img  code  snippets  howto  responsive  photo 
december 2016 by piperh
Get the Balance Right: Responsive Display Text ◆ 24 ways
a technique for setting display font sizes by using combination of vmin and rem
webdesign  web  design  type  typography  font  head  heading  headline  vmin  vh  vw  rem  hybrid  size  css  display  responsive 
december 2016 by piperh
Compressive images in Perch - Perch CMS documentation
Perch docs page explaining image tags to use to generate compressive images
webdesign  web  design  cms  perch  image  compressive  responsive  tag  density  quality  sharpen  examples  howto  template 
december 2016 by piperh
Control Image Aspect Ratio Using CSS - css Video Tutorial #free @eggheadio
video about maintaining aspect ratio of responsive videos and images.
( Nov 2016: object-fit not supported in IE or Edge )
webdesign  web  design  image  aspect  ratio  size  proportion  css  responsive  object-fit  object 
november 2016 by piperh
Pulp. Mashed up email.
slick looking responsive html email template builder. Fast. Hate the photo of the hipster nerd who built it
html  email  template  builder  constructor  responsive  css 
october 2016 by piperh
the new code
Very handy web-related tutorials and explanations. formerly
webdesign  web  design  code  coding  svg  js  javascript  html  mysql  responsive  css  php  server  hosting 
october 2016 by piperh
SVG & media queries -
article about MQs and svg. With useful explanation of the svg's viewport, the difference between an svg inside img element and inline svg and svg in iframe
webdesign  web  design  css  svg  mq  media  queries  rwd  responsive  image  browser 
october 2016 by piperh
GitHub - Heydon/fukol-grids
really minimal grid framework using flexbox. Sets every child of container as a flex item using *
webdesign  web  design  flex  flexbox  grid  css  system  framework  responsive 
october 2016 by piperh
Responsive table layout · Matt Smith
article showing technique for responsive table design, and how to adapt design for mobile. There's a neat css only example shown as an animation
webdesign  web  design  tables  css  responsive  desktop  mobile  table  data 
october 2016 by piperh
Simple CSS Media Query Generator
online tool for finding generic or specific device screen dimensions. Gives MQ code for you.
webdesign  web  design  rwd  responsive  code  mq  media  query  list  reference  css  breakpoint  width  size  screen  platform 
september 2016 by piperh
Generates code for embedding third-party services (eg youtube) in your page. Gives you styles and html, you can insert your own video or iframe url
webdesign  web  design  embed  code  youtube  vimeo  maps  embedding  responsive  html  css 
august 2016 by piperh
Practical SVG · An A List Apart Article
article about sizing svg's on fixed and responsive. Also touches on the drawing in vector progs and how the artboard affects the web rendering
webdesign  web  design  graphic  svg  size  sizing  viewport  viewbox  aspect  ratio  max  min  css  responsive  vector 
august 2016 by piperh
Neat uses for CSS’s awesome viewport units –
some useful tips, some silly. Nice way to make font size responsive
webdesign  web  design  css  vw  vh  width  height  type  font  size  responsive  fluid  font-size 
july 2016 by piperh
polyfill to make picture element work in all browsers
webdesign  web  design  script  js  javascript  html5  html  polyfill  picturefill  picture  element  css  image  load  lazy  lazyloading  responsive  img  srcset  attribute  1x  2x  3x 
july 2016 by piperh
Use Cases For CSS Vertical Media Queries
some examples of when one might use a vertical media query. With code
webdesign  web  design  vertical  media  queries  mq  responsive  css 
july 2016 by piperh
Completely CSS: Progressively Collapsing Navigation | Kenan Yusuf
example of a menu with progressively hidden items using only css.
'More' always shows so you must always have at least 1 hidden item otherwise it's confusing
webdesign  web  design  navigation  menu  flexbox  css  nav  responsive  hide  hidden  progressively  example 
july 2016 by piperh
Adactio: Journal—Sticky headers
article explaining some gotchas with a fixed header and work-arounds
webdesign  web  design  css  sticky  header  fixed  responsive 
june 2016 by piperh
Carrd - Simple, free, fully responsive one-page sites for pretty much anything
templates for simple, free one-page sites. Not sure if you must host with them
webdesign  web  design  templates  one-page  website  wysiwyg  responsive  free  editor 
june 2016 by piperh
GitHub - Selz/plyr: A simple HTML5, YouTube and Vimeo player
accessible, customisable media player for web page. Uses vanilla js, no dependencies
webdesign  web  design  video  embed  embedded  display  controls  customisable  responsive  audio  html  js  javascript  media 
june 2016 by piperh
Truly Fluid Typography With vh And vw Units – Smashing Magazine
technique to achieve responsive fluid type size using css vw, vh and calc. Looks excessive to me and can't really see why you'd want to do it - but, who am I to know?
webdesign  web  design  typography  fluid  responsive  css  font  type  size  vw  vh  width  screen 
may 2016 by piperh
Spectre.css: a lightweight, responsive and modern CSS framework
They say: "Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development." Looks interesting. Doesn't contain some necessary js - they assume you have the skill to hook up your own
webdesign  web  design  grid  system  framework  css  flexbox  responsive  components  layout 
april 2016 by piperh
MJML - The Responsive Email Framework
a css framework for responsive html email, with templates. Looks useful, can't see any reason not to use it.
html  css  email  marketing  responsive  framework  template  code  coding  design 
april 2016 by piperh
PX, EM or REM Media Queries? | Zell Liew's blog about web design and development
article showing why em is best mq unit to use. Author's examples tried changing font size and zoom in browser, and only unit to behave consistently across all browsers is em. Main offender in inconsistent behaviour is Safari
webdesign  web  design  em  rem  pixel  media-query  mq  responsive  break  point 
march 2016 by piperh
Responsive Typographic Headlines with CSS & JavaScript | NOUPE
roundup of techniques for dealing with large headlines in responsive design, where you want to control line breaks and size.
webdesign  web  design  howto  responsive  typography  type  css  js  javascript  plugin  slabtext  fittext  bigtext  code  coding  headline  large 
march 2016 by piperh
The Fab Four technique to create Responsive Emails without Media Queries — Free Code Camp — Medium
interesting technique for responsive columns using css calc and without MQs. Based on min-width wins
webdesign  web  design  html  email  responsive  width  min-width  max-width  calc  css 
march 2016 by piperh
GitHub - VPenkov/okayNav: The world's okayest responsive navigation
a horizontal menu that progressively goes into a sidebar as the page narrows, so you could keep the most important links still showing on the left. Requires jQuery
webdesign  web  design  responsive  navigation  menu  collapsible  progressive  jquery  js  horizontal 
march 2016 by piperh
Remodal v1. The modal done right.
Code for a modal window. Requires jQuery. They say "done right". Works smoothly, a click outside of window closes it.
webdesign  web  design  modal  window  popup  css  responsive 
february 2016 by piperh
Bootstrap · The world's most popular mobile-first and responsive front-end framework.
Philippe Wittenbergh says he uses Bootstrap navigation components for menus that require dropdown subnav. He rec's responsive-nav for simple menus
webdesign  web  design  framework  bootstrap  components  css  html  js  responsive 
february 2016 by piperh
ResponsifyJS – A jquery plugin that makes images truly responsive, without sacrificing anyone's face.
jquery js for making the point of interest of an image always centre in different proportions of window size. You specify the coordinates of image (top left right bottom) which you want to show always. Useful eg if you image to remain a certain min size on small screen
webdesign  web  design  responsive  image  photo  resize  subject  js  javascript  jquery  window  proportion 
january 2016 by piperh
Skeleton: Responsive CSS Boilerplate
simple css grid system. Doesn't state on home page if it's based on floats or inline-block or flex or what
webdesign  web  design  grid  layout  responsive  css  code  row  column  boilerplate 
january 2016 by piperh
How to deal with :hover on touch screen devices
useful code for adding 'no-touch' class to elements - so you can code for both touchscreen and mouse hover
webdesign  web  design  modernizr  touch  no-touch  touchscreen  hover  tap  drop-down  css  code  coding  responsive  menu  jquery  js  javascript 
january 2016 by piperh
« earlier      
per page:    204080120160

Copy this bookmark:

to read