Skip to main content

Home/ Web Development, Design & Programming/ Group items tagged sizing

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Soul Book

The Incredible Em & Elastic Layouts with CSS - 0 views

jontangerine.com/...m-and-elastic-layouts-with-css

blog css tools webdesign typography design fonts text layout web framework layouts em elastic

shared by Soul Book on 01 Apr 10 - Cached
  • Elastic design uses em values for all elements. Ems are a relative size, written like this: 1em, 0.5em, 1.5em etc. Ems can be specified to three decimal places like so: 1.063em. “Relative” means: They are calculated based on the font size of the parent element. E.g. If a <div> has a computed font size of 16px then any element inside that layer —a child— inherits the same font size unless it is changed. If the child font size is changed to 0.75em then the computed size would be 0.75 × 16px = 12px. If the user increases (or decreases) text size in their browser, the whole interface stretches (or shrinks.)
  • All popular browsers have a default font size of 16px. Therefore, at the default browser setting, 1em = 16px.
  • The <body> inherits it unless styled otherwise using CSS. Therefore 1em = 16px, 0.5em = 8px, 10em = 160px and so on. We can now specify any element size we need to using ems!
  • ...9 more annotations...
  • However, (gasp) IE has a problem with ems. Resizing text from medium (default) to large in IE5/6 would lead to a huge increase in font size rather than the gradual one expected. So another selector is needed to get IE to behave: html{ font-size:100%; }
  • Let’s give our <body> some more style, and center everything in the viewport (this will be important later for our content wrapper.) Our initial CSS ends up like this: html{ font-size: 100%; } body{ font-size: 1em; font-family: georgia, serif; text-align: center; color: #444; background: #e6e6e6; padding: 0; margin: 0; }
  • 1 ÷ 16 × 740 = 46.25em (1 ÷ parent font-size × required pixel value = em value)
  • While we're here, we might as well add some typographic goodness by selecting a basic leading and adding some vertical rhythm, with everything expressed in ems.
  • Set a 12px font size with 18px line height and margin for paragraphs
  • Dividing the desired line height (18px) by the element font size (12px) gives us the em value for line height. In this example, the line height is 1 and a half times the font size: 1.5em. Add line height and margin properties to the CSS: p{ font-size: 0.750em; line-height: 1.5em; margin: 1.5em; } Now the browser will say to itself, “Oh, line height and margin is set to 1.5em, so that should be 1.5 times the font size. What’s the font size, again? 12px? OK, cool, make line height and margin 1.5 times that, so 18px.”
  • To retain our vertical rhythm we want to set an 18px line height and margin. Easy: If the font size is 18px then 18px in ems is 1em! Let’s add the properties to the CSS (and make the font weight light:) h1{ font-size: 1.125em; line-height: 1em; margin: 1em; font-weight: 300; }
  • Jon, good article and very useful chartm but your text sizing method has one major drawback. If elements with font-sizes set in em’s are nested, i.e with lists, these elements inherit the font size. Therefore each child element will be 0.75em (or 75%) of the previous one: See an example here. (Would have posted the code put it was coming out really ugly!) I would recommend against using that method and setting the global font size in the body tag i.e. 'font-size:75%' for 12px. Then only setting different font-sizes where necessary.
  • Thanks Will, interesting point, but that is solved with a simple font-size:1em on the first child. Retaining the default ensures that even images are sized correctly in ems. IE (surprise) will compute incorrectly against a parent length equivalent to 12px. My preference born out by some minor but painful computed size errors in complex layouts is not to adjust the body, and only set font size where necessary for specific elements.
  • Soul Book on 01 Apr 10
     
    A nice and simple explanation of using EMs to make elastic layouts
wetechsoftware

Top 10 software development companies in Vietnam 2024 - 1 views

image

started by wetechsoftware on 23 Jan 24 no follow-up yet
Vernon Fowler

Font sizing with rem - Snook.ca - 0 views

snook.ca/...font-size-with-rem

css3 rem font css fonts sizing webdesign web design

shared by Vernon Fowler on 10 Sep 12 - No Cached
  • The problem with em-based font sizing is that the font size compounds. A list within a list isn't 14px, it's 20px. Go another level deeper and it's 27px!
  • The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that. html { font-size: 62.5%; } body { font-size: 1.4rem; } /* =14px */ h1 { font-size: 2.4rem; } /* =24px */
  • We can specify the fall-back using px, if you don't mind users of older versions of Internet Explorer still being unable to resize the text (well, there's still page zoom in IE7 and IE8). To do so, we specify the font-size using px units first and then define it again using rem units. html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* =14px */ h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
  • ...3 more annotations...
  • I'm defining a base font-size of 62.5% to have the convenience of sizing rems in a way that is similar to using px.
  • consistent and predictable sizing in all browsers, and resizable text in the current versions of all major browsers
  • The compounding nature of em-based font-sizing can be frustrating so what else can we do?
Jennifer Ray

Quick PSD to WordPress Integration Trick : Using WordPress "Featured Image" To Create H... - 0 views

www.html-experts.com/...reate-highly-responsive-images

to Integration HTML web hire WordPress developer Psd conversion

shared by Jennifer Ray on 26 Jun 12 - No Cached
  • Jennifer Ray on 26 Jun 12
     
    Did you know that responsive web design is at boom when it comes to WordPress driven sites. It is a combination of a fluid layout, media queries and high quality graphics implemented together to create a website that fits easily on a particular screen size of Smartphones, iPads or Tablet computers. And we all know that huge image files are majorly responsible for slowing down the loading speed of your web page which results in poor search engine ranking. Taking all this into account, you need to reduce file sizes so that a website can run smoothly on all platforms including mobile devices. Many developers have a hard time to develop highly responsive websites that fits easily on a particular screen size of Smartphones, iPads or Tablet computers. The biggest challenge is how to reduce the size of file to deliver different-sized image files to different devices. Read this post to know everything on how to use WordPress "Featured Image" to create highly Responsive Images
Soul Book

CSS techniques I use all the time - 0 views

www.christianmontoya.com/...-techniques-i-use-all-the-time

blog css tools webdesign typography design fonts text layout web layouts webdev reference code coding

shared by Soul Book on 01 Apr 10 - Cached
  • EM calculations Sizing text is always an important part of making a usable design. I start all my CSS files with the following rules: html { font-size:100.01%; } body { font-size:1em; } The explanation for this comes from "CSS: Getting Into Good Coding Habits:" This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current "best" suggestion is to use the 100.01% value for this property.
  • I used the following calculation: 14px/16px = .875, 18px/16px = 1.125. So my default text at 1 em would translate to 16px for most users, and my small text I sized at .875em which I can trust to result in 14px for most users, while my large text I sized at 1.125em which I can trust to result in 18px
  • Safe Fluid-width Columns I work with hybrid fluid layouts all the time, usually with max-width set at anywhere from 900 to 1000px. I usually have floated columns with percentage widths, and browsers will calculate these percentage widths to whole pixel values when rendering the columns.
  • ...3 more annotations...
  • A typical problem is the following: when a user has the viewport at a size that makes the outer container 999 pixels wide, if the first column is 60% and the second is 40%, IE 6 will always calculate the two columns as 600 and 400 pixels and as a result, the two will not fit (600+400 = 1 more than 999) and it will drop the second column. This is obviously not intended behavior, and in a world where we still have to use floats for columns (I can't wait for display:table support across all browsers), it's important to work around this problem. I used to give my last column 1 less percent (in this example, it would have 39% instead of 40%, but this would usually result in columns that don't quite fill up the container. Of late I have been giving the last column .4 less percent (in this example, 39.6%), which seems to work perfectly. Browsers will calculate this width and round up, but it will still fit even with an odd container width like 999px and I won't have to worry about dropped columns.
  • Filtering for Old Browsers To be honest, I barely support IE 6 nowadays. If there is something special about my layout that doesn't work in IE 6, I will simply filter it out of the CSS that IE 6 understands
  • Because old browsers like IE 6 don't support the "first child" selector (right caret >), I can do the following to make sure that IE 6 only gets the basic setting and all the new-fangled browsers get the right result: div#container { width:900px; } html>body div#container { width:auto; max-width:900px; } /* This overrides the previous declaration in new browsers only, IE 6 simply ignores it. */
  • Soul Book on 01 Apr 10
     
    Excellent simple collection of CSS tips that are easy to remember and implement. It's an old article, but i think everything is still relevant
magecompinc

How to Add Customized Size Charts in Magento 2? - 0 views

magecomp.com/...add-size-charts-in-magento-2

magento2 sizechart magento2sizechart customizedsizecharts sizeguide magecomp

shared by magecompinc on 11 Mar 21 - No Cached
  • magecompinc on 11 Mar 21
     
    Basically, Online Stores provides Customized Size Charts so the customer can select their desired size accordingly. In this tutorial blog, I will help you to Add Customized Size Charts in Magento 2.
magecompinc

How to Add Size Chart In Shopify | Shopify Tutorials - 0 views

magecomp.com/...add-size-chart-in-shopify

shopify sizechart sizechartinshopify addsizechart shopifysizechart shopifytutorials

shared by magecompinc on 18 May 21 - No Cached
  • magecompinc on 18 May 21
     
    Size Chart is necessary for all eCommerce stores to provide perfectly detailed size guides on various product types and categories. Today, I am here to help Shopify merchants. In this tutorial blog, we will learn How to Add a Size Chart in Shopify.
Soul Book

A List Apart: Articles: How to Size Text in CSS - 0 views

www.alistapart.com/...howtosizetextincss

reference fonts text font typography layout tutorial blog css webdesign design web tools html webdev

shared by Soul Book on 31 Mar 10 - Cached
  • Soul Book on 31 Mar 10
     
    "When pixels failed before, we turned to ems. Repeating the logic gives us the following styles: body { font-size:100%; line-height:1.125em; /* 16×1.125=18 */ } .bodytext p { font-size:0.875em; } .sidenote { font-size:0.75em; }"
Arch Aznable

Getting A File's Information In Ruby Using File::Stat | Blogfreakz - Web Design and Web... - 0 views

blogfreakz.com/...rmation-in-ruby-using-filestat

web web design design web development development resources

shared by Arch Aznable on 15 Oct 12 - No Cached
  • Arch Aznable on 15 Oct 12
     
    An example scenario would be like this: a program has to iterate over the files in a directory and determine the files sizes and the total size. Plus, it must work recursively, totaling the file sizes of all the files in all subdirectories of the current directory. To be able to achieve this task, we use the find library included with Ruby.
Arch Aznable

Responsivator: A Responsive Design Previewer | Web Design Blog | Web Design Fan | Resou... - 0 views

webdesignfan.com/-a-responsive-design-previewer

web web design blog fan resources designers graphic

shared by Arch Aznable on 31 Oct 12 - No Cached
  • Arch Aznable on 31 Oct 12
     
    Just key in the URL of any website built with a responsive template and Responsivator will load it up in a series of iframes that are set in different sizes. Aside from desktop sizes, other default screen sizes include mobile devices such as the iPhone, iPad and the Nexus 7.
Vernon Fowler

Best Practice: Get your HEAD in order - EricLaw's IEInternals - Site Home - MSDN Blogs - 1 views

blogs.msdn.com/...s-and-improve-performance.aspx

best practice head order IE browser performance

shared by Vernon Fowler on 10 Sep 12 - No Cached
  • To ensure optimal performance and reliability when rendering pages, you should order the elements within the HEAD element carefully.
  • Optimal Head Ordering <doctype>     <html>         <head>             <meta http-equiv content-type charset>              <meta http-equiv x-ua-compatible>             <base>             <title, favicon, comments, script blocks, etc>
  • If you must specify the character set using a META tag for some reason, it is critical that the META tag is the first element in the HEAD.
  • ...1 more annotation...
  • If you must specify the X-UA-Compatible value using a META tag for some reason, this element MUST appear before any script blocks and SHOULD appear as early in the HEAD element as possible.
Redesign Unit

2015 Social Media Image Sizes: A User's Guide for Graphic Designers - 4 views

webredesignidea.blogspot.com/...a-banner-logo-image-sizes.html

social media images banner size facebook

shared by Redesign Unit on 01 Oct 15 - No Cached
  • Redesign Unit on 01 Oct 15
     
    As designers, we've all been there: you create a beautiful new Facebook or Twitter cover photo, only to have the platform change its social media image sizes the next day.
  • Daniel Falk on 01 Oct 15
     
    Great.
  • anonymous on 26 Oct 18
Vernon Fowler

Your Body Text Is Too Small - 0 views

blog.attackthefront.io/text-is-too-small-5e02d36dc902

typography font size body text web webdesign usability readability legibility

shared by Vernon Fowler on 23 Nov 16 - No Cached
  • Some examples of sans-serif fonts that work well for large body text include Atlas Grotesk, Futura, Lato, Maison Neue, Real Text, Roboto, and Suisse Int’l.
  • Some examples of serif fonts that work well for large body text include Equity, Franziska, Leitura News, Merriweather, Miller, PT Serif, and Tisa.
  • better to optically select a font size according to near-finalized colors, or in different color scenarios
  • ...6 more annotations...
  • a better starting point would be 20px on small desktop displays and greater. We should only have to resort to 16px for body copy on very small mobile devices
  • down to the eye again to optically adjust the letter-spacing and font size together
  • the optimal line length, or number of characters per line (CPL) in typography is around 55 to 75
  • line height should also be relative to the font size as it scales up for larger displays
  • This is not about having the biggest body text, because biggest isn’t best. It’s about optimizing for the best reading experience you can possibly give your users
  • sites that have adopted bigger body text even at small desktop or laptop resolutions such as 1440 x 900. They go from 20px all the way up to 58px!
Vernon Fowler

Best Practices for Speeding Up Your Web Site - 1 views

developer.yahoo.com/...rules.html

performance best practices web web site site webdesign web design

shared by Vernon Fowler on 09 Sep 12 - No Cached
  • Arranging the images in the sprite horizontally as opposed to vertically usually results in a smaller file size. Combining similar colors in a sprite helps you keep the color count low, ideally under 256 colors so to fit in a PNG8. "Be mobile-friendly" and don't leave big gaps between the images in a sprite. This doesn't affect the file size as much but requires less memory for the user agent to decompress the image into a pixel map. 100x100 image is 10 thousand pixels, where 1000x1000 is 1 million pixels
  • Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced.
  • Many web sites fall in the middle of these metrics. For these sites, the best solution generally is to deploy the JavaScript and CSS as external files. The only exception where inlining is preferable is with home pages, such as Yahoo!'s front page and My Yahoo!. Home pages that have few (perhaps only one) page view per session may find that inlining JavaScript and CSS results in faster end-user response times. For front pages that are typically the first of many page views, there are techniques that leverage the reduction of HTTP requests that inlining provides, as well as the caching benefits achieved through using external files. One such technique is to inline JavaScript and CSS in the front page, but dynamically download the external files after the page has finished loading. Subsequent pages would reference the external files that should already be in the browser's cache.
  • ...1 more annotation...
  • CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.
Tolga İnam

Yazılım Geliştirme - 0 views

www.konseptika.com.tr/...yazilim-gelistirme.html

css website development programming web tools

shared by Tolga İnam on 16 Aug 13 - No Cached
  • Tolga İnam on 16 Aug 13
     
    Günlük iş yaşamı içerisinde size vakit kaybettiren, organizasyonunuzda aksamalara neden olan tüm detayları belirleyerek bize amacınızı ve almak istediğiniz sonucu tarif edin. Uzman ekibimiz size bunun analizini yapsın, amaçlarınızı en iyi şekilde anlayıp en uygun ve en basit çözümü üretsin. İhtiyaçlarınız doğrultusunda size özel hazırlanan program belli kurallar çerçevesinde çalışacağı için sizi ve ekibinizi daha iyi organize edecektir. Süreklilik ilkesi doğrultusunda yazılan tüm programlara yazılım uzmanlarımız destek vermekte, ihtiyaca göre yeni eklentiler yapmaktadır. Web tabanlı yazılım: Web tabanlı yazılım çözümleriyle şirket yapınıza uygun uygulama geliştirme hizmetleri sunuyoruz. Örneğin web tabanlı teklif formu, stok takip, cari yönetimi ve buna benzer iş süreçlerinizi yönetebilmek için size özel web tabanlı yazılım uygulamaları geliştiriyoruz. Web üzerinde çalışan yazılımlarda bilgisayar fark etmeksizin dünyanın herhangi bir yerinde internet bağlantısı olan her yerden programınıza erişebilirsiniz. Web tabanlı yazılımlar sayesinde firmanızın tüm kullanıcıları tek bir havuzda çalışabilir. Bu sayede veri bütünlüğünü korumayı sağlamış olursunuz. Masaüstü Uygulamaları: Masaüstü bilgisayarınız, dizüstü bilgisayarınızı veya genel amaçlı bir bilgisayar dahil, standart bilgisayarlarda çalışacak yazılımları ihtiyaçlarınız doğrultusunda geliştiriyoruz. www.konseptika.com.tr
builderfly

How to get your Builderfly image sizes to picture-perfect? - 0 views

www.builderfly.com/image-sizes-to-picture-perfect

Store Design Store Builder

shared by builderfly on 04 Oct 19 - No Cached
  • builderfly on 04 Oct 19
     
    Studies reveal that the human brain processes image more than written texts. It means that images not only are easy but also faster to understand as compared to texts. Due to this reason, it is essential to include the right images on your website to bring in more viewers using quality images with consistent loading time. Ideally, it is suggested that you must optimize the image bandwidth instead of the image size in order to make your online website more consistent. Moreover, it helps you measure your customer experience with accuracy and precision.
Ahxn Amc

Responsive Medical Website Design | Expand Your Medical Business - 0 views

www.sooperarticles.com/...al-website-design-1475351.html

Responsive Mobile friendly design development HTML5 web designer Patient education Sites for hospitals

shared by Ahxn Amc on 03 Jun 17 - No Cached
  • Ahxn Amc on 03 Jun 17
     
    An extremely responsive site means that the site will fix itself according to the screen size and the basic computer resolution or the mobile resolution. This can be done by using the identical basic design of the website along with the adaptable images and fluid grids, which can size themselves as per the screen resolutions.
Media Striker

MediaStriker provide Digital Marketing to Build Customer Business and Brand! – Me... - 0 views

mediastriker.wordpress.com/...ld-customer-business-and-brand

digital marketing in noida seo company in noida cheap digital marketing companies Digital Marketing Company in India Cheap SEO Company India Digital Marketing Agencies Best Digital Marketing Company SEO_SMO_PPC for your Business ?

shared by Media Striker on 25 Apr 17 - No Cached
  • Media Striker on 25 Apr 17
     
    No matter what is the size of your business large or small to medium sized business / venture – you can successfully online market your business through affordable cost d…
1 - 20 of 193 Next › Last »
Showing 20▼ items per page