I am getting into creating mobile device friendly websites and apps.
I am using bootstrap and HTML5 so I am fine with rearranging my layouts.
My question is, is what is the best way to resize images depending on what device the website is being viewed on?
Should I make multiple versions of main images such as the website logo, i.e. a version for Iphone, Ipad and desktop computers? Or have one image where the height and width change?
I currently have a PHP class that detects what browser the user is using by checking the header e.g. the Ipad safari browser has "ipad" in the user-agent header.
I know this isn't 100% reliable and can be spoofed. I'd say 95% of the time it's going to be accurate, because users who are genuinely interested in using your site aren't going to try to break it for lolz.
I would probably just use the width and height approach. Most of my mobile implementations have been very light on graphics, so it hasn't been an issue. You should also look into the viewport meta tag if you haven't done so already.
How to set viewport meta for iPhone that handles rotation properly?
Using Viewport to create a mobile friendly version
If you are asking how to send different sized images to different devices (based on the window width) adaptive images is one good option. It will test the visitors viewpoint then send an appropriately sized image based on break points you specify.
Good luck!
Related
I see there is a lot of info on how to save a websites to an image with PHP, however I cannot find any information on how to take a screen shot of a website using a specific width.
I want to take a screen shot using PHP of my websites in different widths, so I have screen shots of the design in different responsive modes (Desktop, Tablets, Phones).
Does anyone know how to save a url to an image with a specific width set, using PHP? (or with help from Javascript/jQuery for all I care)
Since every one is so smart on Stackoverflow and just down votes for a question that has not been answered on Stackoverflow ever! Here is my solution to a perfectly valid question.
PHP cannot set the width of the website when taking a screen shot (using cUrl or copy), however using iFrame, you can create an iFrame, set the width of the iFrame and take a screen shot of that page.
I currently use the YouTube API to allow website users to upload their videos through the site straight to our YouTube channel (adding META data etc) at the time of upload.
Ideally we would like to dynamically add some sort of title, watermark, opening screen or an image to the beginning and / or the end of the video. Essentially we just need any method of adding something to the video which adds some form of branding to it (even if just a plain company name at the bottom).
The uploads are from internal users (i.e. secure and trusted) and there is not an excessive amount so I would be happy to upload to our server first (instead of straight to YouTube), manipulate the video then upload to YouTube.
The site runs PHP on a dedicated Linux / Apache server setup.
Any suggestions greatly appreciated
Thanks
Here's a really quick and easy one: Invideo Programming. Invideo Programming lets you add a small logo to a corner of the video, or promote another video in a different corner, or both.
You can add this to the API via the Channels resource as as invideoPromotion attribute. We recently did a show on Google Developers Live explaining how to configure this on both the web UI as well as in the API. Check it out - I think this'll do what you need.
I have an web page that is a widget and has to be embedded on another website (the domain is not the same)
I tried using the iframe approach
This works but the problem is that the height of my page increases according to the height. I cannot use javascript to access the content height because the domain is different and the call is blocked due to cross site scripting.
Is there any easy solution available for this problem.
one option would be to make a little mini API on the widget side.
calculate the height. and let the other webpage get that information via JASONP(which is basically cross site scripting).
heres some info about JASONP
What is JSONP all about?
I have a responsive design I am working out that starts around 960 pixels wide and reduces down to 320px using css3 media queries.
I'm currently using a 728px banner above and below my content, but this obviously breaks once you get below 728px.
What I need is the easiest way to display a smaller ad once the browser width goes below 728px. I can't simply load the ad units in divs and hide them using css because this is against adsense TOS.
Any suggestions?
What about doing it with javascript. Your page can load with no ad unit html code at first but it could detect screen size with javascript and then add to the page the appropriate ad units for the initial browser size. Only a desktop type browser can resize the viewport window so maybe just forget about that issue. People resizing the browser viewport probably are playing around or whatever and will still see the first AD impression. Think about it, you open a browser and then you resize the window because of not being able to see properly and even then how many times are you going to be doing it as you navigate a site from page to page, maybe once (the first time). Google doesn't want you mucking up AD impressions so I don't think this violates TOS to load the ads based on window size. Just don't destroy the ads after resize and load others (risky). Mobile devices can't resize viewport (other then rotate) and they will always see the correct AD size.
Ryan Underdown provides a simple solution at http://ryanunderdown.com/ppc/responsive-ads-with-adsense.php
Another SO question: Making Adsense Responsive
Even Google's CSE will not show ads on your site if the initial viewport size is too small for the ads and even after you resize the window larger it won't reload ads in it until browser is refreshed.
Use a responsive AdSense unit.
If this is not what you want, use JavaScript to detect the available width then select the appropriate ad unit, then inject it to your content.
1st - I did AB test of 728 leaderboard vs 336 large rectangle. 336 performed over 75% better, over 300,000 page views.
Point is - don't use 728, and also don't recommend using responsive ad unit at all.
My other test improved earning by over 100% by switching from responsive ad unit to 2 fixed size rectangles (one for mobile, one for desktop/tablet).
You can use something like this to determine user agent:
$iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
Then based on user agent you can show either "mobile" or "desktop" ad size.
Here is how to use USER_AGENT to select which ad to show: http://www.adsenseninja.com/show-mobile-optimized-adsense-ads-for-smartphone-visitors-automatically-free-mobile-ads-php-script-for-wordpress/
It is possible via hidden div and media libraries but I think It's forbidden by google :(
I'm looking to build a javascript/jquery gallery that meets the criteria below, and would love to know if there are any existing gallery modules that have all/most of these features:
1. Photo wall with zoom (single view) functionality. eg. http://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/
2. Responsive, so that the photo wall images tile properly for desktop & mobile devices, and reshuffle if the user resizes their browser. eg. http://isotope.metafizzy.co/
3. (optional but desirable). If a user is on a mobile device, allow them to swipe through single-view images.
In a nutshell. A user will go to the thumbnail wall, select an image, and can then either swipe through more enlarged photos, or switch back to the wall.
The photos will be sourced from a folder on the server. Moderators are simply camera girls, who will upload images from their digital cameras to this folder via ftp - They wont resize / optimise the images, so it would be great if this could happen in the process somewhere too.
We are hosting on a PHP / Linux environment.
Have a look at jQuery Mason: http://masonry.desandro.com/
It can be used as a responsive wall.
What your asking for is not called 'zoom' (that is another effect), you seem to what what is called a lightbox. There are a lot of these, here is a comparison, http://planetozh.com/projects/lightbox-clones/
To re-size images your going to have to write some php to make use of image GD or imagemagick, here is a tutorial, http://net.tutsplus.com/tutorials/php/image-resizing-made-easy-with-php/ or possibly a script, http://shiftingpixel.com/2008/03/03/smart-image-resizer/ (or timthumb.php).
For serving them your going to have to write some php with your javascript.
There is no all in one solution for what you asking for, you're going to have to write it or hire someone to do so.
As far as I know you have to create a plugin or write you own jquery functions for getting all customized features.(that will be very good in sense of performance and maintenance)
for zooming functionality you can use some of the modal windows with ajax call or you can create.
to achieve this you have to write good css so that your photo aligned according to screen.reshuffle will be handled if you write good css.
yes you can achieve this by detecting the browser navigator and changing the css and javascript accordingly.
For pre processing images(re sizing,dynamically generating thumbanails) you can opt for php backend solutions.
And no worries you can handle images from folder via Ajax and show them as they requires.