• Howdy! Welcome to our community of more than 130.000 members devoted to web hosting. This is a great place to get special offers from web hosts and post your own requests or ads. To start posting sign up here. Cheers! /Peo, FreeWebSpace.net
managed wordpress hosting

Feedback on new design

sarmth

Active Member
Hi guys.

So, I've been living underneath a rock for some time now, and only recently heard about these Responsive Website Designs (apparently google looks favourably on them :wink2:)
Considering this, I did some research and came across twitter bootstrap, as well as font-awesome and a jQuery image slider named unslider. So, I thought, "why the heck not".

After a bit of playing around, I came up with the following responsive website design (my first responsive website design) which took little to no time, and was overall very easy to develop.

http://bizz.net.au/bizzDesign/test.html

Using jQuery, I have developed a little DIV scroll to top of page which displays when the viewer has scrolled down, the navigation links scroll down the page to the appropriate section, in the footer, there is space for social media links, twitter feed, flickr gallery and various other "goodies".

What do you think?

Design loosely based off Produkta, using 5 produkta components which are relatively easy to change. The two images in the slider, the pattern above the slider, and the two patterns (body, and footer) This design is an example only, and was coded from the ground-up, only 5 items were sourced from a previous design which for distribution purposes would need to be amended as I did NOT make those 5 components.
 
You have been under a rock indeed. Your theme isn't compleetly responsive tho.

The footer/social media doesn't fit.
 
You have been under a rock indeed. Your theme isn't compleetly responsive tho.

The footer/social media doesn't fit.

Perhaps you could provide screenshots? It works perfectly on OSX, Windows, iOS (iPad and iPhone) and Android... So I'm not quite sure by what you mean.
 
There is:

1

2

3

In the footer with no text.

Hahaha, No worries. That isn't due to a lack of responsiveness in the design, that's because I haven't coded in the features yet.
1 Twitter Feed.
2 Flickr Gallery.
3 Contact Us form. (Removed from page content, and moved to footer)
 
@Everyone.

I've found a half decent (very basic, but very customizable) jquery flickr gallery.
It's called jflickrfeed and can be seen here: http://files.gethifi.com/posts/jflickrfeed/example.html.
With some very basic HTML / jQuery + CSS knowledge, you can easily achieve some decent results.

Below is the basic jQuery behind jflickrfeed which I modded so that when someone clicks on one of the images, jQuery will show a DIV with the image in it.
HTML:
<script>
		function loadImage($image){
			$("#imagePreview").fadeIn(1000);
			$("#imagePreview img").attr("src",$image);
		}
		$(document).ready(function() {

			$('#flickr_div').jflickrfeed({
				limit: 15,
				qstrings: {
					id: '121295716@N08'
				},
				itemTemplate: 
				'<li>' +
					'<a href="javascript: loadImage(\'{{image_b}}\');" target="_blank"><img class="clickable2" src="{{image_s}}" alt="{{title}}" /></a>' +
				'</li>'
			});
</script>

I'll try and make a bundle for everyone to use complete with CSS and what-have-you if I get a number of people commenting on this post. ;)
 
Last edited:
I would suggest using the burger icon for the menu along with centering the logo :)
The logo is already centered in it's designated place, I don't quite understand why I would want to have a Burger Icon in my menu, considering this isn't a Burger King / Hungry Jacks website... Care to elaborate ?
 
The logo is already centered in it's designated place, I don't quite understand why I would want to have a Burger Icon in my menu, considering this isn't a Burger King / Hungry Jacks website... Care to elaborate ?

Sorry for not explaining in more detail! The "burger icon" is the UX terminology for an icon which is made up of 3 lines, and when pressed will make the site's navigation pop out which can save a lot of space. The "burger icon" get's it's name from the icon consisting of 3 lines, so therefore looking like a burger. Hope this helped!
 
13531572135_02616cc7fe.jpg


Shows actual screenshots from the devices.
 
Looks very cool!

Thanks ^_^

I've got a couple of [MENTION=41370]media[/MENTION] CSS3 mods I need to do for the cell size, once those are done, it should look fantastic on All screens :)

Can't wait until I get a new MacBook Pro with Retina display.
13550385385_0bb78e0914.jpg
 
Back
Top