Team:KIT-Kyoto/HumanPractice/mobile

From 2014.igem.org

(Difference between revisions)
 
(36 intermediate revisions not shown)
Line 3: Line 3:
{{Team:KIT-Kyoto/SlideShow}}
{{Team:KIT-Kyoto/SlideShow}}
{{Team:KIT-Kyoto/navi}}
{{Team:KIT-Kyoto/navi}}
 +
{{Team:KIT-Kyoto/close_navi}}
{{Team:KIT-Kyoto/Scroll}}
{{Team:KIT-Kyoto/Scroll}}
{{Team:KIT-Kyoto/btn}}
{{Team:KIT-Kyoto/btn}}
Line 11: Line 12:
<!--サイドメニュー-->
<!--サイドメニュー-->
<ul id="nav5">
<ul id="nav5">
-
<li class="menuimg"><a href="/Team:KIT-Kyoto/Test">home</a></li>
+
<li class="menuimg"><a href="/Team:KIT-Kyoto">home</a></li>
-
<li class="menuimg"><a href="/Team:KIT-Kyoto/Test/About">about</a></li>
+
<li class="menuimg"><a href="/Team:KIT-Kyoto/About">about us</a></li>
-
<li class="menuimg"><a href="/Team:KIT-Kyoto/Test/Project">project</a></li>
+
<li class="menuimg"><a href="/Team:KIT-Kyoto/Project">project</a></li>
-
<li class="menuimg"><a href="/Team:KIT-Kyoto/Test/Notebook">NoteBook</a></li>
+
-
<li class="menuimg"><a href="/Team:KIT-Kyoto/Test/Parts">Parts</a></li>
+
</ul>
</ul>
<div class="active">
<div class="active">
-
<a href="/Team:KIT-Kyoto/HumanPractice">human practices</a>
+
<a href="/Team:KIT-Kyoto/HumanPractice">policy & practices</a>
</div>
</div>
<ul class="submenu">
<ul class="submenu">
-
<li><a href="/Team:KIT-Kyoto/HumanPractice/oh">Open House</a></li>
 
<li><a href="/Team:KIT-Kyoto/HumanPractice/survey">Survey</a></li>
<li><a href="/Team:KIT-Kyoto/HumanPractice/survey">Survey</a></li>
 +
<li><a href="/Team:KIT-Kyoto/HumanPractice/oh">Open House</a></li>
<li><a href="/Team:KIT-Kyoto/HumanPractice/ws">Workshop</a></li>
<li><a href="/Team:KIT-Kyoto/HumanPractice/ws">Workshop</a></li>
<li><a href="/Team:KIT-Kyoto/HumanPractice/collaboration">Collaboration</a></li>
<li><a href="/Team:KIT-Kyoto/HumanPractice/collaboration">Collaboration</a></li>
<li><a href="/Team:KIT-Kyoto/HumanPractice/hsv">High School Visit</a></li>
<li><a href="/Team:KIT-Kyoto/HumanPractice/hsv">High School Visit</a></li>
<li><a href="/Team:KIT-Kyoto/HumanPractice/media">Media</a></li>
<li><a href="/Team:KIT-Kyoto/HumanPractice/media">Media</a></li>
-
<li><a href="/Team:KIT-Kyoto/HumanPractice/mobile">To Connet With More</a></li>
+
<li><a href="/Team:KIT-Kyoto/HumanPractice/mobile">To Connect with More</a></li>
 +
<li><a href="/Team:KIT-Kyoto/HumanPractice/discussion">Discussion</a></li>
 +
<li><a href="/Team:KIT-Kyoto/Safety">Safety</a></li>
</ul>
</ul>
<ul id="nav5">
<ul id="nav5">
-
<li class="menuimg"><a href="/Team:KIT-Kyoto/Test/Safety">safety</a></li>
+
<li class="menuimg"><a href="/Team:KIT-Kyoto/Achievement">Achievement</a></li>
-
<li class="menuimg"><a href="/Team:KIT-Kyoto/Test/Attributions">attributions</a></li>
+
<li class="menuimg"><a href="/Team:KIT-Kyoto/Notebook">NoteBook</a></li>
</ul>
</ul>
</div>
</div>
Line 39: Line 40:
<div id="container">
<div id="container">
<div class="main-contents">
<div class="main-contents">
-
<h1>Human Practices</h1>
+
<h1>Policy & Practices</h1>
-
<div class="accordion">
+
<h2>Japanese Website</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>
+
In addition to this Team Wiki website, we opened another <a href="http://kitkyoto.html.xdomain.jp/iGEM_index.html">website in Japanese</a>. iGEM is the world largest competition in synthetic biology in which nine other teams from Japan also participate. But if you look beyond the iGEM community, it is not widely known in Japan. Even some of our team members had never heard about it when they decided to join it. This website written in our local language will PR iGEM widely in Japan. People in Japan will be interested in iGEM and more broadly in synthetic biology.<br><br>
-
Can you navigate without pushing wrong buttons?<br>
+
</p>
-
<br>
+
<h2>To Connect with More</h2>
-
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 class="sentence">
 +
Can you read the text without zooming?
</p>
</p>
-
<figure class="mimg1" style="float:left">
 
-
<img style="width:240px;" src="/wiki/images/2/28/Kit_mobile2.png">
 
-
<figcaption class="mcap1">
 
-
<h3>Before</h3>
 
-
<p>In the iPhone.</p>
 
-
</figcaption>
 
-
</figure>
 
-
<figure class="mimg1" style="float:left;">
+
<p class="sentence">
-
<img style="width:240px;" src="/wiki/images/5/5b/Kit_mobile1.png">
+
Can you navigate without pushing wrong buttons?
-
<figcaption class="mcap1">
+
</p>
-
<h3>After</h3>
+
-
<p>In the iPhone</p>
+
-
</figcaption>
+
-
</figure>
+
-
<figure class="mimg2">
+
-
<img style="width:400px;" src="/wiki/images/8/8b/Kit_mobile.png">
+
-
<figcaption class="mcap2">
+
-
<h3></h3>
+
-
<p></p>
+
-
</figcaption>
+
-
</figure>
+
 +
<p class="sentence">
 +
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 <b>we designed our website separately for mobile devices to make the best use of the small screen</b>. 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 the site and more repeat visits - all of which are important to get the message across.
 +
</p>
 +
<div class="connect-more">
 +
<img src="/wiki/images/3/3d/Kit_Connectmore.png">
</div>
</div>
-
</div>
 
-
 
<div class="clear"><hr /></div>  
<div class="clear"><hr /></div>  
     <div id='kitfooter-box' class='noprint'>
     <div id='kitfooter-box' class='noprint'>
Line 107: Line 92:
</div>
</div>
</div>
</div>
 +
<!--メインコンテンツ終わり-->
<!--メインコンテンツ終わり-->
 +
<style type="text/css">
 +
.connect-more{
 +
position:relative;
 +
width:100%;
 +
}
 +
</style>
 +
<script type="text/javascript">
 +
var imgfix = function(){
 +
var imgw = $('.main-contents').width();
 +
$('.connect-more img').css({width:imgw});
 +
}
 +
$(function(){
 +
imgfix();
 +
$(window).resize(imgfix);
 +
});
 +
</script>
</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}}

Latest revision as of 20:24, 17 October 2014

Policy & Practices

Japanese Website

In addition to this Team Wiki website, we opened another website in Japanese. iGEM is the world largest competition in synthetic biology in which nine other teams from Japan also participate. But if you look beyond the iGEM community, it is not widely known in Japan. Even some of our team members had never heard about it when they decided to join it. This website written in our local language will PR iGEM widely in Japan. People in Japan will be interested in iGEM and more broadly in synthetic biology.

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 the site and more repeat visits - all of which are important to get the message across.