Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Please have a look at this website

Featured Replies

I am currently designing a web site for a solicitors.

 

I have temporarily uploaded it.

 

www.conveneit.co.uk/purelegal

 

It is not finished yet.... please can you just look and make sure im designing the correct way and that my coding is correct.

 

Thank you

Jack.

It seems to be going pretty well so far, but I'd have a think about the following things:

 

  1. The colours on the website seem a little bland, I'd avoid doing white on white if I were you, you want your site to be striking, but in a positive way, which judging by your current design, you'll be able to achieve in no time.
  2. I'm not a massive fan of drop shadow, unless with subtle use, and particurly not with colour, because it looks more like a glow than a drop shadow, so perhaps change it to black, and make it more and more opaque until it's noticable but not too apparent.
  3. The "Pure Legal" heading at the top needs to stand out much more, at the moment it doesn't look like the name of the website, it looks like an addition, so have a play with some typography in Photoshop/Fireworks, make the letter-spacing smaller, different colours, different weights etc.
  4. The menu is absolutely fine, so I'd leave that, it's really nice and simple, something that's difficult to achieve on most sites.
  5. Not a fan of the blue text, for some people it might be difficult to read, it's okay for us, but someone with eye problems find some colours more difficult than others.
  6. With the "Welcome to pure legal", have a little more emphasis, perhaps create your own "title" class, with a dashed bottom border*
  7. With the "services, training ...", I wouldn't use images for the text, I'd use some nice real text, with some hover effects.
  8. The "by lawyers, for lawyers" thing isn't amazing, it looks like it's been placed there randomly, once again, have a work on your typography, with some alternate colour schemes.

 

Other than that, you've made an excellent start, all of your xhtml and css is valid, and it's a really nice, uniform site, I like it!

 

*

.title{
font-size:15px;
font-weight:bold;
padding-bottom:4px;
margin-bottom:5px;
border-bottom:dashed 1px #929292;
width:*px;
}

//

<div class="title">Welcome to Pure Legal</div>

Hi,

 

I like the things that Traktor says and especially the blue text on white.

 

Find it somewhat difficult to read the text.

 

Maybe you could go with a darker blue or maybe blue-gray.......

 

But It looks like you've a good idea and with some minor adjustments it will look perfect.

 

Good work

 

/Jute

  • Author

Thank you for your coments traxor and Jute,

 

I will have a look at all the pointers you have surrgested and re upload the site later ill let you know when i have changed some of the pointers. Thanks

  • Author

Still not finished yet but i have done a few bits. I have changed the width made it wider. I have also used the css code that you gave me and done a couple other bits using borders. What do you think?

 

Also did a diffrent shade behind by lawyers for lawyers.

 

What do you think?

 

Thanks Jack.

  • Author

Just done some more work on the navigation on the services and training and the others made them highlight on mouseover.

 

What do you think?

 

Please let me know any sugestions

 

Thank you.

That looks so much better, it's like a different website, much nicer, i particularly like the changes you've made on the banner at the top, centrally align the menu though, that'll make it look better. Also, the vertical dashed lines at the bottom of the page should be taller, so that it goes to the bottom of the text.

 

Try changing the line height a little on all of the text using the following code:

 

{line-height:*px}

Just been helping out with some CSS tutorials here, to ensure code is all nice and clean, it's available here at pastebin

 

or:

 

/* always remember to make sure your body & html section have no padding
or margin that is added automatically by your browsers auto-css files */

body,html{height:100%;width:100%;margin:0;padding:0;}

/* use the body selector to set any styles that you want stuff to inherit
automatically, such as background colour, default font size etc */

body{
background:#ffffff;
font-size:12px;
font-family:Trebuchet MS, Arial, Tahoma;
color:#000000;
}

/* when using IDs and Classes, make sure you don't over-use them, sometimes
certain software can make too much use of them when it's not necessary, so
when something is inherited and doesn't need a class, don't bother using
them. it's always best to keep your code minimal and clean


WRAPPERS------------------------------------------------------------------

Using wrappers in invaluable, because it allows you to keep your divs nice
and clean in one area, removing the need for any sort of positioning within
the wrapper, make sure that your divs don't overlap however, especially with
shadows etc, you'll need some padding or a margin, otherwise it'll display
incorrectly

*/

#wrapper{
background:url(images/pure-legal_01.jpg) repeat-y #ffffff; /* make sure you save your images in a .png or .gif format to reduce loading times */
min-height:100%;
height:auto;
padding-left:16px; 

/* padding affects the width, so make sure you take 32 pixels from the width (usually 800px for this image), otherwise your divs 	that have been wrapped will overlay because you've used padding, it eradicates the need for a margin in the divs that you've wrapping */

width:768px; 
}

/* how i do the rest, is doing it from the top down, so do the header first, followed by the navigation, the header, content, footer etc */

#header{
width:768px; /* always set the width!!! */
background: url(pure-legal_03.jpg) no-repeat #ffffff; /* set this as a background image so you can align text to the right for the nav */
height:35px;
line-height: 35px; /* a little hack to centralise text vertically, does not work on images*/
text-align:right; /* does what it says */
}

#mainImage{
width:768px;
height:194px;
border-bottom:5px solid #fef164; /* adding borders that aren't graphic reduces loading time and time on your end */
margin-bottom:5px; /* this means that the next div will be displayed five pixels beneath the header */
}

/* Just follow this general rule throughout for the wrapper, to keep everything nice and central and aligned */

<div id="wrapper">
<div id="header">NAV HERE</div>
<div id="mainImage"></div>
<div id="content">
	<p>Lorem Ipsum etc...</p>
</div>
<div id="horizontalImages">
	images images images images
</div>
<div id="secondaryNav">
	your Secondary Nav can go here
</div>
<div id="servicesTable">
	Services table here
</div>
<div id="footer">
	Footer stuff
</div>
</div>

  • 3 weeks later...
  • Author

Any one got any comments please? Thanks

  • 2 weeks later...
  • Author

Is it that bad that no one wants to reply lol?

Whenever I go to your website in IE, it says that "Internet Explorer cannot display this webpage". I'll look at it in opera when I get home, but unfortunately that's not going to be anytime soon.

This is a very nice website. My favorite part of the webpage is the navbar and banner. I would, however, try to separate some of the content on the banner (logo, info, etc) as it looks clumped in one spot. Try aligning the search bar to the left of the banner. The news panel needs a little bit of work.....maybe....I don't know. There's just something about it....

 

Overall 8/10

  • Author

Yes now you have mentioned the clumped up logo and info i know what you meen. I will have a look into that. The news area isnt finished yet, i might be putting some rss feeds there but not sure how that would work atm. How do you meen about the search bar, do you meen move the logo and put the search bar there?

 

Thank you

Jack

I mean to put the entire search panel to the left corner of the banner (Where the leaf is"

  • Author

Do you meen the right hand side?? >>>

Oops. I mean to the right. Sorry

Both of those links are the same :) and I already reviewed it. It wasn't thorough because I'm not at home and I can't completely analyze all aspects using the various browsers and validators. I will do this later, when I'm home.

Only two thing from my side.

1 - Text in your website is left aligned, use justify text command.

2 - Apply dark green border to all images with 3 points thickens.

Rest of the things are ok.

  • Author

I have got a problem atm with the lower half of the site. Please can someone have a look for me in firefox and tell me why its like this and in internet explorer its fine?

 

f_screen2m_ec89de6.jpg

 

f_screen1m_50b42ab.jpg

 

http://www.conveneit.co.uk/purelegal/compu...d_analysis.html

 

As you can see the border also disapears.

 

Thank you.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.