Our site appears to we working decently (written with PHP, HTML and CSS) on big and small screens. However, when we link to it on social media (Facebook prominently) the rendering no longer works as we would like. Is there a way to provide CSS dedicated to social media rendering?
Related
I am currently creating a Bootstrap 3 website for mobile and desktop, taking the mobile first approach.
I have been following this webpage Creating a Mobile-First Responsive Web Design
It mentions using a style.css for mobile view and enhanced.css stylesheet for a desktop view.
I know this is possibly quite basic but I am slightly confused as I am currently using one stylesheet which holds the mobile styles as default and I am using media queries for the tablet and desktop views.
I want to know what styles should be added into the enhanced.css stylesheet for desktop view?
It really doesn't matter whether or not you separate it into multiple stylesheets or one stylesheet. It really is a matter of personal preference.
I personally use one style sheet for things that I want to be universal throughout the entire website (such as a universal font, or a universal font color). I call that sheet pageFormat.css.
Then I create a separate CSS file for each page I create if I plan on adding and adjusting things such as button sizes specific for that page.
Just be sure that whether you are including one stylesheet, or multiple, you are including the link reference so your HTML browser knows where to locate the CSS file that has all the data.
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 am creating a website and I am trying to disable the responsive design feature. When I resize my browser, a few things get jumbled up, and I am not experienced with responsive design coding. Here is the link to my website
http://www.jiddrs.com
There is no simple answer to this, especially without knowing the code. It looks like the CSS for the search bar is out of place. Wordpress is a CMS that uses PHP to deliver content from the server. It compiles on a long running list of conditional statements that serve up content as needed.
Responsive CSS is completed by media queries. There's likely one stylesheet inside of your theme's folder labeled responsive.css or something similar.
Media queries look like this
#media screen and (max-width:640px) {
.classChange { style }
}
My current Website-Design is built with the Bootstrap responsive framework. It uses several custom fonts, which make up about 50% of the document size. The fonts are included via CSS, the way of inclusion can not be changed.
My goal now is to stop mobile devices from requesting these fonts, in order to reduce their bandwidth consumption.
Is there a CSS way, like #media (min-width: 480px), to not load the fonts in the responsive layout?
In most implementations, background images that are referenced in CSS media queries get pre-downloaded. (Unless you do some fiddling with your use of display:none;, but that won't be supported in all browsers.)
The same applies to any fonts you've included via media queries — even if they're specified for a larger/different viewport.*
Why?
This allows for a smoother transition if viewport size is changed, e.g. from portrait to landscape.
Solution?
Considering the constraints you mentioned, I don't see a clean way to do this only with CSS. You could do something with JS (but make sure it degrades gracefully), or PHP.
But the easiest ways to reduce HTTP requests and how much your visitors have to download include doing one or all of the following:
Using less fonts, or web-safe fonts instead.
Using a CDN for fonts.
Including 'minified' font files that only have the characters you'll
be using them for.
Check out Google Web Fonts for the latter two.
If you expect or get a lot of mobile traffic that's important for the site, it's always worth re-thinking a website's design and markup from a mobile-first approach: what's necessary and what isn't. (That approach can often help to even reduce clutter on the desktop version of your site.)
* The fiddling approach could be useful for fonts too, but you'd have to do browser testing yourself, as so far it's undocumented.
You could create two different stylesheets, one for mobile and one for desktop, then use PHP browser detection or various other methods to see if the user is on a mobile device or desktop device, and provide them with the corresponding stylesheet.
Take a look at the PHP get_browser function: http://php.net/manual/en/function.get-browser.php
All background images aren't necessarily pre-downloaded if referenced in your media queries -
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
perhaps this technique would also work for fonts too. Not if you're using anything that'd need JS (like typekit, google) your font's will be requested because of the JS anyways afaik.
I am using CSS Media Queries on my ASP.NET MVC webpage and I can see that when I make the browser smaller in Windows the CSS Media Queries will kick in.
But when visiting the webpage from my Phone (HTC Titan(Windows Phone)) the page will be shown only on the regular desktop version(not CSS Media Queries)?
Why?
The webpage is www.biss.se
A simple explanation would be that the browser on your phone doesn't support them (yet).