CouchCMS Forum Showcase your site
Showcase your site built with CouchCMS here. Feel free to post in your site's screenshots (width not more than 640px please), links and your experience with Couch.
8 posts Page 1 of 1
Post a reply
Previous Next

My Homepage

avatar
tanja
Registered User
Hello Couches!

I have finally made a website for myself as I would for a client. Proudly powered by Couch :P

Sorry I was not thinking of this line in my previous projects, but since the last one I do include it proudly on each page...

Thanks Kamran for such a great product... Couch inspired me to learn further in this area, because it opend so much new possibilites for me...I can do now so much more than two years before...
My site is just with a regular static features, but Couch is so beutifully handy to work with and it makes building a website so much faster and simpler .... I am an absolute fan, as you might already know KK :P

My last client worked previously with Word Press, and is now just in love with the Couch Admin Panel - with all styles beutifully customized and pages easy access... she works with dynamic folders too - switching pages on and off - no problem at all....

And I am delighted too to use Admin Panel myself now....

So here's the link http://www.atelier-t.at

best regards to all in this great forum

Tanja

Re: My Homepage

avatar
Musman
Registered User
Hello @tanja,
I really like the desing of the site! Awesome!

Let me please give you some advise about the frontend)
1. There are redundant tags which call errors:
Remove <pre> below:
Code: Select all
<link rel="icon" type="image/vnd.microsoft.icon" href="http://www.atelier-t.at/favicon.ico"></pre>

Remove the first <ul> below:
Code: Select all
    <ul>
        <ul class="title-area">
            <li class="name"><h1><a href="http://www.atelier-t.at/" class="">Home</a></h1></li>

       <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href=""><span>Menu</span></a></li>
    </ul>

In the bottom change:
Code: Select all

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>
<!-- Piwik -->
<script type="text/javascript">
  var _paq = _paq || [];
  _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
  _paq.push(["setDomains", ["*.www.atelier-t.at"]]);
  _paq.push(["trackPageView"]);
  _paq.push(["enableLinkTracking"]);

  (function() {
    var u=(("https:" == document.location.protocol) ? "https" : "http") + "://www.atelier-t.at/analytics/";
    _paq.push(["setTrackerUrl", u+"piwik.php"]);
    _paq.push(["setSiteId", "2"]);
    var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
    g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- Piwik Image Tracker -->
<noscript><p><img src="http://www.atelier-t.at/analytics/piwik.php?idsite=2&amp;rec=1" style="border:0" alt="" /></p>
</noscript>
<!-- End Piwik Img Tracker-->
<!-- End Piwik Code -->
</body>
</html>

to:
Code: Select all
<!-- Piwik -->
<script type="text/javascript">
  var _paq = _paq || [];
  _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
  _paq.push(["setDomains", ["*.www.atelier-t.at"]]);
  _paq.push(["trackPageView"]);
  _paq.push(["enableLinkTracking"]);

  (function() {
    var u=(("https:" == document.location.protocol) ? "https" : "http") + "://www.atelier-t.at/analytics/";
    _paq.push(["setTrackerUrl", u+"piwik.php"]);
    _paq.push(["setSiteId", "2"]);
    var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
    g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- Piwik Image Tracker -->
<noscript><p><img src="http://www.atelier-t.at/analytics/piwik.php?idsite=2&amp;rec=1" style="border:0" alt="" /></p>
</noscript>
<!-- End Piwik Img Tracker-->
<!-- End Piwik Code -->


2. I think that in the left menu on page http://www.atelier-t.at/referenzen/ it's better not to delete a link when clicked, but to make it active.

3. It's a nice idea to higlight active links it top menu:
Code: Select all
.top-bar-section ul li a.active {background: #dbdcdc !important;}

4. I was a little confused with a button "zum Webdesign Angebot". It looks like a history button, so should lead to the previous cathegory of "Referenzen", but actually it drops you to another area.. So maybe let the breadcumbs like "Referenzen » Grafikdesign" appear instead of "Grafikdesign" title? Just an idea.

Anyway, the site is nice and I like it) Thanks for sharing!

Re: My Homepage

avatar
KK
Moderator
@Tanja, thank you very much indeed :)

Re: My Homepage

avatar
tanja
Registered User
Hi Musman and KK,
thanks for taking a look! I 'm glad you liked the design..

@Musman, thanks a lot for taking a look at errors....

Could you please tell me what software do you use to detect those errors as redunant tags etc?

And thanks for suggestions, I do appreaciate that - your points are good in all points...

Tanja

Re: My Homepage

avatar
Musman
Registered User
Hi,
yep, now the code looks much better! I just used Firefox>Right Click>View Source, it highlights all the code errors. For detailed testing suggest using Fire Bug addon - really helps to detect JS bugs and to apply CSS changes 'on fly'.

There are also some quick suggestions:
- for small screen sizes it's a good idea to make vertical lists flow horizontally, for example
Code: Select all
.gallerylist div {
    display: inline-block;
    margin-bottom: 0.5rem;
}

- it's redundant to write
Code: Select all
<link rel="icon" type="image/png" href="http://www.atelier-t.at/favicon.ico">
<link rel="icon" type="image/gif" href="http://www.atelier-t.at/favicon.ico">
<link rel="icon" type="image/jpeg" href="http://www.atelier-t.at/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="http://www.atelier-t.at/favicon.ico">

all these icons are the same .ico, so use either just
Code: Select all
<link rel="icon" href="http://www.atelier-t.at/favicon.ico" type="image/x-icon">

or
Code: Select all
<link rel="icon" href="http://www.atelier-t.at/favicon.png" type="image/png">

I always use .png favicons, they are less size and better customized.

- find JS files that you really use and combine them in 1-2 files, then minify. It will increase speed load significantly and the server will be more free than now. Also combining is just a sign of a nice web-developer.

- try to include only needed Google Fonts. They have nice API here http://www.google.com/fonts/ , so you could check only needed functions. I suppose you need only Normal, Normal Italic and Bold. And maybe Latin Ext. So, use
Code: Select all
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

it is 2.5x smaller than your existing include.

Looking forward for your future projects)

Re: My Homepage

avatar
tanja
Registered User
HI Musman,

thanks again for the next tips, much appreciated...I'll see what I can do about it...

best

Tanja

Re: My Homepage

User avatar
Tomarnst
Registered User
Tanja,

Nice work ... very clean design... looks great !
I load frameworks and write bugs on top of them, after that I rearrange the code so that it looks like a cool product.

Re: My Homepage

avatar
tanja
Registered User
Hi Tomarnst,

thanks :-)

Tanja
Post a reply
Previous Next
8 posts Page 1 of 1
Return to Showcase your site