piperh + size   94

How I responsified my website’s typographic scale
a blog account by designer Rakesh on responsive type sizing
webdesign  web  design  type  typography  size  responsive  vw  rem  em  units  code  coding  viewport 
12 weeks ago by piperh
GitHub - davidjbradshaw/iframe-resizer: Keep same and cross domain iFrames sized to their content with support for window/content resizing, in page links, nesting and multiple iFrames
author says: This library enables the automatic resizing of the height and width of both same and cross domain iFrames to fit their contained content.
webdesign  web  design  iframe  resize  proportion  aspect  ratio  content  size 
june 2019 by piperh
Polypane: The browser for responsive web development and design
paid tool for showing different screen sizes for testing responsive. You see several sizes together in one window, all respond to code edits. 7 day free trial available. It's a browser, you must use it with a coding tool
webdesign  web  design  responsive  screen  size  test  browser  device  window  tool 
june 2019 by piperh
The State of Fluid Web Typography | Better Web Type
there's a bit in here that says sizing type in px limits accessibility - which is contrary to what other articles about font units say. The techniques described here seem like an awful lot of faff and coding for limited improvement. Author concludes (june2019) 'fluid typography' isn't yet ready, better stick with 'responsive'
webdesign  web  design  fluid  typography  type  font  scale  responsive  adaptive  size  css 
june 2019 by piperh
Don't Use Em for Media Queries
article saying that Safari's bug means MQ break points in ems are wrong when user is zoomed. Concludes that only pixels are consistent across all browsers.
Final paras: "But what if the user has changed their browser's default font size?"
The short answer is set an explicit root font size in pixels. It will override the user's custom default font size which is mildly annoying for the user, but it will force them to zoom instead which always behaves the way you want.
webdesign  web  design  screen  media  query  unit  responsive  size  break  point 
may 2019 by piperh
ImageKit.io - Real-time Image Optimization and Global Image CDN
their headlines: Automate image optimization on all platforms
Intelligent real time image optimization, resizing, cropping and super fast delivery.
Generates correct size image on the fly on demand for your website. Lives on a CDN
webdesign  web  design  webdev  images  generate  generator  size  optimise  optimisation  service  online 
august 2018 by piperh
Swapping Images with the Sizes Attribute | Filament Group, Inc., Boston, MA
brilliant use of css and js with srcset and size to achieve zoom effect or magnifying glass on hover. Requires jQuery
Consider this for barcelonaprints instead of fancybox
webdesign  web  design  js  javascript  script  jquery  enlarge  zoom  lupe  magnifier  magnify  glass  image  srcset  size  attribute  css 
march 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
How Big Is That Box? Understanding Sizing In CSS Layout — Smashing Magazine
Smashing article by Rachel Andrew, titled: How Big Is That Box? Understanding Sizing In CSS Layout
webdesign  web  design  css  flexbox  grid  flex  box  size  sizing  layout 
january 2018 by piperh
Cropping Images in CSS With object-fit ← Alligator.io
article with examples of all css object-fit properties and how they affect an image
webdesign  web  design  object-fit  css  image  size  ratio  fill  crop 
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
Viewport Unit Based Typography | Zell Liew
article exploring viewport units for type size.
webdesign  web  design  css  viewport  vw  vh  size  type  typography  font-size  font 
march 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
[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
Scroll Header
Page header reduces and changes colour as you scroll down
webdesign  web  design  js  javascript  script  header  background  bg  size  scroll  change 
february 2017 by piperh
Align SVG Icons to Text and Say Goodbye to Font Icons
useful technique for sizing and aligning svg icons to font baseline
webdesign  web  design  font  icon  svg  vector  inline  illustration  drawing  align  baseline  alignment  sizing  aligning  size  em 
february 2017 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
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
Musketeer
simple tester for media queries. Shows a site on 4 diff sizes. Seems to work well, allows js functionality, too. For a non-rwd site (eg Survey Design) it doesn't shrink down the page to fit the screen width like a real mobile would.
You must enter full address inc http://www.
webdesign  web  design  rwd  test  tester  screen  size  mobile  tablet  desktop  laptop  tool 
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
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 – Falkus.co
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
SVG Vector Effects - Call Me Nick
article about scaling svg's without scaling the stroke width. Could be very handy if reducing large icons or other graphics and keeping stroke width the same across a responsive site. And, eg, for Tria label diagrams, would mean not needing fat lines at large responsive sizes
webdesign  web  design  vector  svg  scale  stroke  width  size  graphic  scalable  line 
july 2016 by piperh
All About Favicons (And Touch Icons)
explanation of different aspects of browser behaviour re favicon, format, link, meta, rel=, size, href. Section about mobiles and touch icon
webdesign  web  design  favicon  ico  png  jpeg  svg  gif  format  size  link  reference  resource  icon 
may 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
Use CSS to Specify the Aspect Ratio of a Fluid...
neat article showing a way to maintain aspect-ratio of an element using only css and padding. Author acknowledges Thierry Koblentz
webdesign  web  design  proportion  aspect  ratio  css  size  width  height  padding 
april 2016 by piperh
SVG-Optimiser
online tool to optimise file size of SVGs
webdesign  graphic  web  design  svg  optimise  optimiser  optimize  optimizer  vector  file  size  reduce  minimise 
march 2016 by piperh
How do I use compressive images in Perch? - Perch CMS solutions
perch documentation article about using large images, heavily compressed, scaled down in the browser
webdesign  web  design  perch  images  image  size  retina  quality  compressioncompress  density 
february 2016 by piperh
The Website Obesity Crisis
text version of talk by Maciej Ceglowski (developer of pinboard.in) from a conference, about over-complication on the web
webdesign  web  design  advertising  ads  privacy  bloat  size  weight  page  webpage  internet 
january 2016 by piperh
Lazy Loading Images on the Web -Telerik Developer Network
roundup of a few lazy loading options, some with jQuery, some vanilla, but all look fairly easy to implement
webdesign  web  design  image  lazy  loading  size  time  weight  page  webpage  load  javascript  jquery  vanilla  howto  comparison 
october 2015 by piperh
Responsive Images: Experimenting with Context-Aware Image Sizing | Filament Group, Inc., Boston, MA
filament group article about using adaptive images using js and htaccess content. Dated 14.12.2010
webdesign  web  design  responsive  adaptive  image  sizing  size 
august 2015 by piperh
YSlow - Official Open Source Project Website
yahoo page about page speed, with advice and reference and browser plugins to test speed
webdesign  web  design  addon  extension  speed  webpage  website  measure  performance  size  yahoo  browser  recommendations  suggestions 
june 2015 by piperh
Compressive Images | Filament Group, Inc., Boston, MA
the article where I read about using responsive images quite large but with heavy compression
image  size  compression  webdesign  web  design  quality  img  performance 
april 2015 by piperh
« earlier      
per page:    204080120160

related tags

%  2x  64base  @media  A  about  accessibility  accessible  adaptive  addon  adjust  ads  advertising  advice  align  aligning  alignment  analyse  analysis  android  apple  aspect  attribute  B  background  background-size  baseline  bg  bloat  box  break  breakpoint  browser  browsers  calculate  calculator  change  chrome  clickable  client  clients  code  coding  comparison  compression  compressioncompress  content  crop  css  css3  density  design  desktop  development  device  devices  dimension  dimensions  display  download  drawing  efficiency  element  em  email  ems  emulate  emulation  enlarge  explanation  extension  facebook  fallback  fancybox  fancybox3  fav  favicon  feed  file  fill  flex  flexbox  fluid  font  font-si  font-size  font-size-adjust  fontforge  fonts  fontsize  format  formats  generate  generator  gif  glass  google  graphic  grid  guide  hack  head  header  heading  headline  height  high  hints  howto  html  html5  http  hybrid  ico  icon  iframe  illustration  image  imageoptim  images  imagesize  img  independent  inline  input  inspiration  instagram  international  internet  ios  ipad  iphone  javascript  jpeg  jpg  jquery  js  keyword  landscape  laptop  large  layout  lazy  length  line  line-height  link  linkedin  list  load  loading  lupe  magnifier  magnify  mail  max  measure  media  media-queries  metrics  min  minimise  mobile  modal  mode  mozilla  mq  network  object  object-fit  online  optimisation  optimise  optimiser  optimising  optimization  optimize  optimizer  orientation  outlook  padding  page  pageload  paper  path  percent  perch  performance  phone  photo  photograph  pica  picture  pinterest  pixel  pixels  platform  plugin  png  point  post  preload  privacy  proportion  px  quality  queries  query  ratio  recommendations  reduce  reference  relative  rem  rendering  resize  resolution  resource  resources  responsive  retina  root  rwd  safari  scalable  scale  scaling  screen  script  scroll  selector  sensor  service  simplify  size  sizes  sizing  small  social  source  speed  srcset  statistics  stats  stroke  style  styling  subset  subsetting  suggestions  svg  tablet  tech  techniques  test  tester  testing  text  text-size-adjust  time  tips  tool  tools  touch  tria  tumblr  twitter  type  typeface  typesize  typography  unit  units  upload  usability  using  value  vanilla  vector  vh  viewbox  viewport  vmax  vmin  vw  w  web  webdesign  webdev  webfont  webkit  webp  webpage  website  weight  width  widths  window  x-height  x2  x3  yahoo  youtube  zoom  zoomable 

Copy this bookmark:



description:


tags: