<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>functionalaesthetics &#187; webdesign</title>
	<atom:link href="http://old.functionalaesthetics.eu/tags/webdesign/feed/" rel="self" type="application/rss+xml" />
	<link>http://old.functionalaesthetics.eu</link>
	<description>digital expert network</description>
	<lastBuildDate>Fri, 08 Apr 2016 12:03:15 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
	<item>
		<title>Coding responsive websites with media queries</title>
		<link>http://old.functionalaesthetics.eu/coding-responsive-websites-with-media-queries/</link>
		<comments>http://old.functionalaesthetics.eu/coding-responsive-websites-with-media-queries/#comments</comments>
		<pubDate>Tue, 22 May 2012 08:00:01 +0000</pubDate>
		<dc:creator><![CDATA[Brant Riddell]]></dc:creator>
				<category><![CDATA[personalities]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[media-queries]]></category>
		<category><![CDATA[responsive]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://old.functionalaesthetics.eu/?p=211</guid>
		<description><![CDATA[While coding your responsive website you sometimes face unexpected problems. For example the iphone automatically adjusts text elements to a &#8220;more readable&#8221; size. This results in different font sizes on your website in mobile view. To avoid this problem you can simply add a single line in your css. html { -webkit-text-size-adjust: none; } This [&#8230;]]]></description>
				<content:encoded><![CDATA[<p>While coding your <a href="http://www.abookapart.com/products/responsive-web-design">responsive website</a> you sometimes face unexpected problems.</p>
<p>For example the iphone automatically adjusts text elements to a &#8220;more readable&#8221; size. This results in different font sizes on your website in mobile view. To avoid this problem you can simply add a single line in your css.</p>
<p><code>html {<br />
-webkit-text-size-adjust: none;<br />
}</code></p>
<p>This disables the automatic size adjustment on the iphone. Another common problem are flexible images on your responsive website. Often the images are displayed with a wrong width-to-height ratio when the browser only refers to a percentage width. An easy workaround, without complex javascript image managing, can solve the problem with css.</p>
<p><code>img {<br />
max-width: 100%;<br />
height: auto;<br />
width: auto\9; /* ie8 */<br />
}</code></p>
<p>Note that this solution is not saving any data transfer because the full resolution of the image is always downloaded.</p>
<p>More tips for coding with media queries can be found in <a href="http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries">that article</a> on webdesignerwall.</p>
]]></content:encoded>
			<wfw:commentRss>http://old.functionalaesthetics.eu/coding-responsive-websites-with-media-queries/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
