It's been quiet here at ImAFish for the past week because we have been working on our new website!
The site features some of the best cars in the world and lets you review and score each one of them. We have found some stunning pictures, the top statistics and some mind blowing videos giving you a great overview of each car.
Check it out today and start reviewing cars!
Clever, Burger King, Very Clever
Originally uploaded by SA_Steve
Here are some of my best photos from Paris.
The Eiffel Tower at night.
Boats moving along the river under the Eiffel Tower.
The Eiffel Tower.
Traffic under the Eiffel Tower.
More traffic under the Eiffel Tower.
The view from the second level of the Eiffel Tower.
The Arc De Triomphe from the Eiffel Tower.
The Arc De Triomphe.
The view from the Arc De Triomphe
The Louvre.
The Notre Dame Paris.
A bridge with gold statues.
The Eiffel Tower in the day.
The Notre Dame.
The Obelisque.
Inside the Panthéon.
Responsive design is the idea that web site layouts should change based on the users choice of device. Depending on the users environment the design may adapt to the screen size, platform or orientation.
I've put together an example that you can use in your own web sites. Look what happens when you resize the page horozontally in your web browser or on your mobile.
View now - Responsive Design
Feel free to inspect with Firebug and copy into your own project where suitable.
It uses a condition to tell the web browser which stylesheet to include:
<link rel="stylesheet" type="text/css" media="screen and (max-width: 660px)" href="1col.css" />
In the above example we are saying to include 1col.css when the media is a screen and the maximum width is 660px.
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1000px) and (max-width: 1200px)" href="2col.css" />
Here we are saying to display 2col.css when the media is a screen, the minimum width is 1000 pixels and the max-width is 1200 pixels.
Any questions I will try to answer in the comments.
Update: When setting the viewport you might want to detect the device with PHP first otherwise the viewport will be set too small on the iPad.
Following on from my post at the weekend about Responsive Design, a fellow blogger Tristan Bettany has emailed in his example for detecting either the iPad or the iPhone and the screen orientation.
It uses a small amount of PHP to detect the device then CSS to detect the orientation. Copy and paste the following into the head of your page.
<?php
//Functions to check user agent for iPad, iPod, iPhone
function iPadCheck(){
return preg_match('/(iPad)/', $_SERVER['HTTP_USER_AGENT']);
}
function iPhoneCheck(){
return preg_match('/(iPhone|iPod)/', $_SERVER['HTTP_USER_AGENT']);
}
//Set correct css files based on detected device
//orientation property supported in mobile safari to change layout on rotation
if (iPadCheck()) {
echo'
<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="iPadPortrait.css" />
<link rel="stylesheet" type="text/css" media="screen and (orientation:landscape)" href="iPadLandscape.css" />
';
} else if (iPhoneCheck()) {
echo'
<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="iPhonePortrait.css" />
<link rel="stylesheet" type="text/css" media="screen and (orientation:landscape)" href="iPhoneLandscape.css" />
';
} else {
echo'
<link rel="stylesheet" type="text/css" media="screen and (max-width: 1199px)" href="minDesktop.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1200px)" href="fullDesktop.css" />
';
}
?>
The script detects the device then includes the associated stylesheet depending on the orientation.
Any questions add a comment.
| Attachment | Size |
|---|---|
 Apple Device Orientation Example | 4.56 KB |