I hate to ask what seems like something that could be Googled but I can't really find much and WP forums and such just tell me to re-size my GIFs.
I have a sports site and after events I like to post GIFs in my articles, the problem is they end up being about 4-7mb per GIF usually and I usually have about 10 of them. This obviously isn't very user friendly for some people and mobile, so I'm looking for suggestions on the best way to manage these things.
My current visitors love the GIFs but I don't want to discourage new people from using the site.
Have you tried photoshop to optimize them?
http://www.digitalfamily.com/tutorials/optimizing-images-in-gif-and-png-formats/
What you could do is use create two different image sizes one for mobile and one for desktop and then using css media queries you can change them.
/* iPhone 4 ----------- */
#media only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min- device-pixel-ratio : 1.5) {
/* Styles */
.mobile-only {background: url('your-image.gif');
}
Related
I'm developing a web app for feature phones in Africa (non- smartphones whose screen size is usually 128 x 160 px (1.80")).
I need to learn how to make the website responsive, or display properly for a screen size so small. I'm aware that regular CSS queries dont work well for feature phones, so any other suggestions?
This:
https://developers.google.com/webmasters/mobile-sites/mobile-seo/other-devices/feature-phones?hl=en
is something I read on the topic, but it's vague for me to understand what changes to make in my CSS file (which is using bootstrap at the moment) Will really appreciate your help!
To make a website responsive we have to use CSS3 #media queries. Write #media queries for different screen sizes. But #media queries doesn't support for older version browsers. In your case (non-smartphone) #media doesn't work. I suggest create a sub domain for mobile phones like http://m.website.com and use javascript to redirect to mobile version site if user opens http://website.com .
#media only screen
and (min-device-width: 128px)
and (max-device-width: 160px)
{
/* Put your CSS Code for small screen */
}
Some useful articals about #media .
http://code.tutsplus.com/tutorials/quick-tip-a-crash-course-in-css-media-queries--net-14531
http://www.htmlgoodies.com/html5/tutorials/an-introduction-to-css3-media-queries.html
https://css-tricks.com/logic-in-media-queries/
http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
You can either try things like foundation which you can use pre-made tables, and sections with pre-defined css properties:
http://www.foundation.zurb.com/
Or you can use percentages, width: 15%. So it will get the designated percentage of your device and calculate the correct size based on that.
Also what your listed site is saying(google), it creates different css files based on your device. So when you use <link> to set your CSS file you can make it so certain devices use certain files:
(Taken from Google):
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" />
I've been working on web coding and just launched my first website. I made it on my MacBook Pro Retina 13 inch. This MBP screen displays bright and clean colors. But if I test it on other screens (for example, Windows PC's), my site will display too light colors. Its really bothering me cause many people own a Windows PC.
I want to know if it's possible to change the color profile on different platforms? Perhaps via CSS, Javascript or Media Queries?
This is the site (sorry for the foreign language, it's dutch): http://www.sallas.nl/nieuw.
You should be able to find some information here:
http://css-tricks.com/snippets/css/retina-display-media-query/
Generally the media queries are something like:
#media (min-resolution: 192dpi){
}
The support for this isn't great, especially on mobile browsers.
You might want to look here:
Media queries for tablet min-resolution and max-resolution
I am asking this question here to get some information and ideas from the professionals. My question is I just start to learn Bootstrap 3.1 for my front end developments. So I have followed some basic tutorials regarding to the subject. With that tutorials, I found that the look and feels of every page layout have same structure and design. So I am afraid, Can we design advance and very different layout using Bootstrap 3.1?
Here I have attached a navigation bar. Someone can tell me, is it possible to design like this navigation bar using bootstrap 3.1?
I am not asking to someone to code this, just I ask this to make a strong sense about bootstrap 3.1.
hope someone pointed me out to the right direction.
Thank you.
Yes, it is easy to override any bootstrap styles you want.
It is designed to be usable out of the box, but also to provide good base styles in a logical way to be over ridden. The designers did not want to force you to use their styles.
If you use SASS or LESS, it will be easy. If you use the finished compiled CSS, it will be VERY tedious to edit.
I've built several apps entirely from Bootstrap 3, and most do not look like 'bootstrap' but use a ton of their base styles.
Simple answer, Yes you can. I don't think its that complicated to do. You can checkout the Grid system here in Bootstrap that meets your dimensions, it it doesn't meet then you always have your own custom grid made.
Hence you will have to do Media queries condition in your style-sheet on how will the site works on other devices.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
If I base my CSS on mobile styling, then use #media queries for gradually larger displays (tablets, desktops etc), will the mobile devices use the desktop styles?
I believe that typically, mobile devices will load all images even if they don't apply to its own particular media size. Meaning it will load all images and hide ones not matching its query-based stylesheet.
What I am trying to do is use one background for the larger version of the site:
.splash {
background: #1a1a1a url('/assets/imageLarge.png') no-repeat;
}
and another for the mobile version:
.splash {
background: #1a1a1a url('/assets/imageSmall.png') no-repeat;
}
If I apply the mobile CSS before any media queries, and add the large media CSS below using a query like #media screen and (min-device-width: 481px) {...}, will mobile devices load the large image too?
Behaviour is browser depended but iOS Safari and Android Chrome will respect the media queries and only download the background images for the applicable media queries.
If you want to inspect this behaviour, try loading the page with Mobitest (http://mobitest.akamai.com/) or a tethered device.
If you use separate CSS files (and I'd urge you not too) the browser will download each of them even if it doesn't need them, this is a limitation of the CSSOM. Some browsers e.g. WebKit and Blink based ones prioritise the stylesheets so the ones needed to render the page are downloaded first and the others at some point later.
One thing to watch out for is display:none on content images as it won't prevent download in many situations. Tim Kadlec explores this more here: http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Tim Kadlec has put together some awesome research for this – Media Query & Asset Downloading Results
Your specific question is answered in Test #4 – results are spotty. Better to have media queries for both your images.
This sounds like it would be largely browser dependant, but I'd imagine any mobile browser worth its salt would try to cut down on data usage by not loading images (and possibly not loading entire stylesheets) that are marked as not for it. Furthermore many mobile browsers prefer to not be recognized as mobile browsers. I know I hate it when I pop open a site on my iPad and a mobile-stylesheet forces me to view a skinny sliver of single column site on my 9.7" screen.
So media queries are unreliable, but still worthwhile (they really don't hurt anything, so long as they're used responsibly), and that doesn't help what is a fairly obtuse (but still good) question; time to do some testing!
Most modern desktop browsers come packaged with developer tools. My current favorite is FireFox's dark and pretty web inspector (the 3D view is especially to die for). But what about on Mobile? The largest parts of your mobile audience will not be on browsers that come with developement tools.
Well, you have a couple options:
Firebug Lite has some mixed results on mobile browsers, but is
an excelent choice in most cases where other inspectors are
unavailable. It does seem to work in iOS and other mobile
browsers with HTML5 support, though.
This question suggests using something called "weinre". I've never used it, but it looks legit enough.
If you're okay with targetting just a few certain browsers, many DO include developer tools. Such as Google Chrome for Android!
Whatever you choose, you'll be looking for an asset viewer of some sort; perhaps a timeline view. Any sort of tool that will allow you to see what the page loaded, in what order it loaded it, and how long it took to load.
Good luck!
I'm coding up HTML for an email that would be viewed both in Outlook and in mobile devices. I'd like to use tables for Outlook (I need a multi-column set up), and single column divs for mobile devices (or anything < 400px).
I'm trying to do this with #media queries, and I know Outlook's CSS support is extremely shoddy, but I'm wondering if anybody knows a hack that can make Outlook "ignore" the #media query for < 400px, and apply styles for the >400px part. I tried this:
#media (max-width: 480px)
{
.mobile-email { background-color:green; }
}
#media (min-width:500px)
{
.mobile-email { background-color:red;}
}
The trouble seems to be that Outlook ignores both. Is there any way I can make this sort of a thing work in Outlook?
Thanks in advance!
In all honesty I'd steer well clear. HTML emails are a horrile horrible business. Adding media queries into the mix is asking for trouble.
Blackberrys don't support media queries for a start...
http://www.emailonacid.com/blog/details/C13/media_queries_in_html_emails
Outlook barely even does standard CSS since it switched it's rendering engine to MS Word's.
Check out this site about email standards support for more information. I still use inline styles and tables in HTML emails as it's still the most consistent way of getting results (which in 2013 is pretty terrible)
The best practices would be to do inline css for background color. Your writing a class that does not work a cross the border. Some devices like script this way some like script this way. For example when you a responsive email that calls for a hidden: border; most devices and browser will do as the media queries call. However Android gingerbread does not do a hidden border. An iphone will do hidden the border. Outlook 2013 will do hidden the border but yahoo won't do it. For what your doing background colors for Outlook 2007 and 2010 need to have that inline You would want it to read Text here
Am hoping that will help you.