My first responsive website to be posted on JF

My first responsive website to be posted on JF

Hi,

I have bee designing dynamic websites for sometime now.Due to the change in technology more internet users will be accessing the web from their mobile devices,thus I decided to learn "responsive web design" .Please have a look here and I will appreciate to have your positive and negated negative contribution on my responsive design.

That is the first phase, I will be polishing it in few days to come to including things like "hiding the menu","click to call" if and only if the thought impossible will be possible.

Please use your mobile if possible to see how it appears, iphone,ipad, tablets, min-laptops etc.

Thank you in advance,did I mention that I am receiving projects?Yes, I do .Everything coded from scratch.
Regards
Aqua

The site is responsive but here's what i would do if i were you.

1. Remove drop shadow on content
2. Use black text on white background (or at least try a different combination)
3. Excessive use of background images ( i'd remove most images including the big background image)
4. Remove the borders or at least make them shout less
5. Work on typography
6. Just flatten the color a bit

what makes this website dynamic? being responsive? u must learn php from scratch as u do on these html and css codes.. good job though!

Kaka punguza kutumia images either kama background or buttons tumia zaidi CSS features. pia hiyo WOWSLIDER ni ya kuondoa hiyo waterMark yao hapo - nenda kwenye folder la DATA-Images then replace hizo images zote coz wamezi punch na logo yao. halafu nenda kwenye folder la ENGINE then tafuta file limeandikwa wowslider, lifungue kwa notepad then tafuta Variable t au m then futa hiyo value yake.. Mfano: var t="wowslider.com" then futa iwe hivi var t=""

hapo umemaliza......

Aqua said:

My first responsive website to be posted on JF

Hi,

I have bee designing dynamic websites for sometime now.Due to the change in technology more internet users will be accessing the web from their mobile devices,thus I decided to learn "responsive web design" .Please have a look here and I will appreciate to have your positive and negated negative contribution on my responsive design.

That is the first phase, I will be polishing it in few days to come to including things like "hiding the menu","click to call" if and only if the thought impossible will be possible.

Please use your mobile if possible to see how it appears, iphone,ipad, tablets, min-laptops etc.

Thank you in advance,did I mention that I am receiving projects?Yes, I do .Everything coded from scratch.
Regards
Aqua

Click to expand...

zech said:

The site is responsive but here's what i would do if i were you.

1. Remove drop shadow on content
2. Use black text on white background (or at least try a different combination)
3. Excessive use of background images ( i'd remove most images including the big background image)
4. Remove the borders or at least make them shout less
5. Work on typography
6. Just flatten the color a bit

Click to expand...

Hi Zech I will work on your suggestions,regarding the issue of background images only the body has background image ,on other div/sections I have used color gradients.On your suggestion no.2 I will try a different combination.
Thanks
Aqua

ymollel said:

Kaka punguza kutumia images either kama background or buttons tumia zaidi CSS features. pia hiyo WOWSLIDER ni ya kuondoa hiyo waterMark yao hapo - nenda kwenye folder la DATA-Images then replace hizo images zote coz wamezi punch na logo yao. halafu nenda kwenye folder la ENGINE then tafuta file limeandikwa wowslider, lifungue kwa notepad then tafuta Variable t au m then futa hiyo value yake.. Mfano: var t="wowslider.com" then futa iwe hivi var t=""

hapo umemaliza......

Click to expand...

Ok kaka nashukuru nitafanyia kazi ushauri wako,hasa hiyo logo ya slider nilikuwa najiuliza nitaitoaje.nafanyia kazi then nitakufahamisha.

Hi
Members
I real appreciate your positive advice and I recently made some changes on the responsive website to be able to hide and show navigation menu on mobile devices.There is one challenge I faced ,when you click the menu for the first time it open the navi menu and wen you click the menu again it close and then open(it is supposed to close only).
Please see the jQuery code I have used below to attain that toggle effect and your suggestion will be appreciated.Have a look here it will be better if you will use mobile phones,ipad,tablets etc.


<script type="text/javascript">

$(document).ready(function(){
$(".menu-trigger").click(function(){
$(".nav-menu").slideToggle(3600,function(){
$(this).toggleClass("nav-expanded").css('display','block');

});
});

});

</script>

Aqua



This code here
Serves no purpose it just adds an inline css display:block; that was acting as a bug to your navigation, however if you wanted this class "nav-expanded" to be added to $(this) -> the element that was clicked, then remove it from your callback function that's executed after the slideToggle action, Assuming that's what you wanted then your code should look like this


Mind you there's now another piece of code that i don't understand why you have there, .css('display', 'block'), so remove that as well because that menu-trigger span already has display block added by media queries.

zech said:

Aqua

Code:

    <script type="text/javascript">
    $(document).ready(function(){
        $('.menu-trigger').click(function(e){
            $('.nav-menu').slideToggle();
        });
    });

</script>

This code here

Code:

[COLOR=#333333]$(this).toggleClass("nav-expanded").css('display','bloc k');[/COLOR]

Serves no purpose it just adds an inline css display:block; that was acting as a bug to your navigation, however if you wanted this class "nav-expanded" to be added to $(this) -> the element that was clicked, then remove it from your callback function that's executed after the slideToggle action, Assuming that's what you wanted then your code should look like this

Code:

    <script type="text/javascript">
    $(document).ready(function(){
        $('.menu-trigger').click(function(e){
            $('.nav-menu').slideToggle();
            $(this).toggleClass('nav-expanded').css('display', 'block');
        });
    });
</script>

Mind you there's now another piece of code that i don't understand why you have there, .css('display', 'block'), so remove that as well because that menu-trigger span already has display block added by media queries.

Click to expand...

Naona desktop browser version imekaa vizuri kuliko mobile browser version.
Jaribu kutumia mobile web app UI library kama vile jQuery mobile UI, Kendo, Sencha, n.k

zech said:

Aqua

Code:

    <script type="text/javascript">
    $(document).ready(function(){
        $('.menu-trigger').click(function(e){
            $('.nav-menu').slideToggle();
        });
    });

</script>

This code here

Code:

[COLOR=#333333]$(this).toggleClass("nav-expanded").css('display','bloc k');[/COLOR]

Serves no purpose it just adds an inline css display:block; that was acting as a bug to your navigation, however if you wanted this class "nav-expanded" to be added to $(this) -> the element that was clicked, then remove it from your callback function that's executed after the slideToggle action, Assuming that's what you wanted then your code should look like this

Code:

    <script type="text/javascript">
    $(document).ready(function(){
        $('.menu-trigger').click(function(e){
            $('.nav-menu').slideToggle();
            $(this).toggleClass('nav-expanded').css('display', 'block');
        });
    });
</script>

Mind you there's now another piece of code that i don't understand why you have there, .css('display', 'block'), so remove that as well because that menu-trigger span already has display block added by media queries.

Click to expand...

Hi zech I did as you suggested and the problem has been solved.
I removed " $(this).toggleClass('nav-expanded').css('display', 'block');" from my code.
Thanks a lot brother,I will keep on working to improve my knowledge in responsive design.
Regards
Aqua

G12 said:

Naona desktop browser version imekaa vizuri kuliko mobile browser version.
Jaribu kutumia mobile web app UI library kama vile jQuery mobile UI, Kendo, Sencha, n.k

Click to expand...

Ok,nashukuru kwa ushauri wako nitajifunza hivyo vitu ulivyosema,kuhusu muonekano wa kwenye simu umesema haujakaa vizuri kama unaweza kunipa maelezo zaidi nitashukuru kwani nimekuwa nafuatilia sana responsive design na ninapopata kitu kipya huwa naboresha.Kwa mafano kuna mtu anashauri menu kama siyo hiden ziwekwe chini ili mtu asome contents zote ,akifika chini ndiyo anaweza kuchagua kitu kingine(hapo unakuwa umemlazimisha kusoma indirectly).
Unaweza nipa link ya responsive website unayoikubali nikaitembelea na kujifunza how it looks.Thanks

Regards
Aqua