Team:KIT-Kyoto/HumanPractice/mobile

From 2014.igem.org

(Difference between revisions)
Line 41: Line 41:
<div class="main-contents">
<div class="main-contents">
<h1>Policy & Practices</h1>
<h1>Policy & Practices</h1>
-
<div class="accordion">
+
<h2>To Connect with More</h2>
-
<h2><a href="javascript:void(0)">To Connect with More</a></h2>
+
-
<div class="ac">
+
<p class="sentence">
<p class="sentence">
Can you read the text without zooming?<br>
Can you read the text without zooming?<br>
Line 50: Line 48:
If you don't have a website compatible with mobile devices, you may be missing out on the chance to spread buzz about your team’s activities. Mobile phone screen sizes are relatively small so browsing websites designed for large monitors on smartphones involves a lot of zooming in and out, panning, and shuffling around. When people look at regular websites on mobile devices such as iPhones and Androids, normal websites do not show up correctly. We frequently see this happening on Wiki pages of iGEM teams. Elaborate colorful website filled with interesting information and activities are so compressed that they are illegible. What a pity! Therefore we designed our website separately for mobile devices to make the best use of the small screen. It is friendly to your thumb and eyes. URL is the same for PCs and smartphones. Our Wiki page automatically chooses and offers the optimum interface by identifying whether your device is a PC or a smartphone. Adapting a website for mobile users allows for easier reading, longer time on site and more repeat visits -all of which are important to get the message across.
If you don't have a website compatible with mobile devices, you may be missing out on the chance to spread buzz about your team’s activities. Mobile phone screen sizes are relatively small so browsing websites designed for large monitors on smartphones involves a lot of zooming in and out, panning, and shuffling around. When people look at regular websites on mobile devices such as iPhones and Androids, normal websites do not show up correctly. We frequently see this happening on Wiki pages of iGEM teams. Elaborate colorful website filled with interesting information and activities are so compressed that they are illegible. What a pity! Therefore we designed our website separately for mobile devices to make the best use of the small screen. It is friendly to your thumb and eyes. URL is the same for PCs and smartphones. Our Wiki page automatically chooses and offers the optimum interface by identifying whether your device is a PC or a smartphone. Adapting a website for mobile users allows for easier reading, longer time on site and more repeat visits -all of which are important to get the message across.
</p>
</p>
-
<figure class="mimg1" style="float:left">
+
<div class="connect-more"></div>
-
<img style="width:240px;" src="/wiki/images/2/28/Kit_mobile2.png">
+
-
<figcaption class="mcap1">
+
-
<h3>Previously</h3>
+
-
<p>iPhone</p>
+
-
</figcaption>
+
-
</figure>
+
-
 
+
-
<figure class="mimg1" style="float:left;">
+
-
<img style="width:240px;" src="/wiki/images/5/5b/Kit_mobile1.png">
+
-
<figcaption class="mcap1">
+
-
<h3>Now</h3>
+
-
<p>iPhone</p>
+
-
</figcaption>
+
-
</figure>
+
-
 
+
-
<figure class="mimg2">
+
-
<img style="width:400px;" src="/wiki/images/8/8b/Kit_mobile.png">
+
-
<figcaption class="mcap2">
+
-
<h3>PC</h3>
+
-
<p>Desktop</p>
+
-
</figcaption>
+
-
</figure>
+
-
 
+
-
</div>
+
-
</div>
+
<div class="clear"><hr /></div>  
<div class="clear"><hr /></div>  
Line 110: Line 83:
</div>
</div>
<!--メインコンテンツ終わり-->
<!--メインコンテンツ終わり-->
 +
<style type="text/css">
 +
.connect-more{
 +
background:url('https://static.igem.org/mediawiki/2014/3/3d/Kit_Connectmore.png') contain no-repeat;
 +
}
 +
</style>
</html>
</html>
{{Team:KIT-Kyoto/footer}}
{{Team:KIT-Kyoto/footer}}
{{Team:KIT-Kyoto/hidelogo}}
{{Team:KIT-Kyoto/hidelogo}}
{{Team:KIT-Kyoto/mobile}}
{{Team:KIT-Kyoto/mobile}}

Revision as of 21:12, 7 October 2014

Policy & Practices

To Connect with More

Can you read the text without zooming?
Can you navigate without pushing wrong buttons?

If you don't have a website compatible with mobile devices, you may be missing out on the chance to spread buzz about your team’s activities. Mobile phone screen sizes are relatively small so browsing websites designed for large monitors on smartphones involves a lot of zooming in and out, panning, and shuffling around. When people look at regular websites on mobile devices such as iPhones and Androids, normal websites do not show up correctly. We frequently see this happening on Wiki pages of iGEM teams. Elaborate colorful website filled with interesting information and activities are so compressed that they are illegible. What a pity! Therefore we designed our website separately for mobile devices to make the best use of the small screen. It is friendly to your thumb and eyes. URL is the same for PCs and smartphones. Our Wiki page automatically chooses and offers the optimum interface by identifying whether your device is a PC or a smartphone. Adapting a website for mobile users allows for easier reading, longer time on site and more repeat visits -all of which are important to get the message across.