jtuds

First thing I noticed was that you need a hint that your homepage is scrollable. Unless you notice the vertical scrollbar on the browser it looks like there is no more content than what you initially see. It only has to be an arrow or move the text up a bit etc.

I've recently started gearing my code more towards SMACSS and OOCSS but in doing so it's opened up a can of worms. I've had all kinds of ideas on how best to structure CSS and CSS related HTML. For example I've started using a lot more classes to isolate different elements for a) potential reuse and b.) avoidance of potential clashes with other elements, e.g. using one class for many elements is eventually going to force you to overwrite that class whereas having specific classes means you give each element its' own styling. I'm currently thinking about devoting a section of my CSS purely to any structural element that could potentially be reused. So instead of a promotion box layout and styling going under a page section it would simply go under something like /* Promo box A */ so that the tags could simply be reused not only across a specific site but any site in the future. Anyway to my point, I wondered if anyone else was thinking along these lines or if anyone has any other interesting/useful ways to structure CSS?

I think you need a sidebar plugin to deal with all that functionality. In the default WP theme the plugin has the categories, previous posts etc and you call it with get_sidebar but starkers doesn't have this. I would search for a plugin that deals with what you need and follow the instructions on how to call it. What you're basically after is pre made code that deals with your needs, this code will be called in base file. That is all the sidebar, or any other part of the page is it's just with default WP the sidebar provides certain functions. On a related note, but separate from this particular situation, you call sidebar.php with a PHP include. You can do this with any file whatsoever. So in future you may create a site based on WP but has no visible WP features so you might have 3/4 of the page for main content and a bit on the right for let's say social buttons. You would have <div class="main-content">loop code to fetch WP editable content</div> <div class="social"><?php include 'social.php' ?></div>. All social.php is, is a load of HTML but when you have lots of different components to a site and some are consistent it's useful to separate them into small individual files and include them when needed.

Don't take this as certain because I'm not but I think widgets link into Wordpress which means you need to use code that corresponds. If you just use an include to fetch the sidebar which could be anything from ads.php to righthandside.php and you fill that file with HTML then WP won't do anything with it other than simply fetch the file. To use WP functionality there has to be some code in the PHP file that WP can work with, I think this is where the default WP sidebar comes into play. Starkers won't come with a sidebar I don't think. You might have to find a plugin to give you the functionality you want.

Best thing to do is don't think of Wordpress as a concrete structure, it's very flexible. The get functions just fetch files that are defined in the WP settings (possibly function.php not sure though) so in theory I could change the settings so that get_sidebar fetches the file "nonsense.php". All you're doing is inserting different bits of code in certain parts of the site by pulling in files. You can use PHP includes alongside the default WP functions so you could fetch a file called pre-footer.php for example and use an include to fetch that. In your page, which could be index.php or 2col.php etc you just include pre-footer.php where you want it to appear in the HTML. It's basically a big jigsaw, you're putting files into slots to make it all work as one. Having the files separate just makes things easier in the long run, you could in theory have a static site like, index.php, page1.php etc and just have specific HTML in each page, obviously this defeats the purpose but I'm just trying to get across that you don't have to think of WP as being rigid, don't be afraid to break it. EDIT: You're 100% correct about the 2 col and having the loop in one bit and the sidebar in the other. Your file would look something like; <div class="left-col>the loop</div> <div class="right-col>get_sidebar (or use an include if you wish, for example you could get "ads.php")</div.

You need more base files. Typically I use; head.php (<head> stuff), header.php (actual header/banner), nav.php, home.php/2col.php (depends on the page design and I have as many of these as I need with relevant filenames), footer.php, (I rarely use a sidebar but you can use sidebar.php). That isn't concrete, you can use get header, get sidebar etc I just prefer to use includes. Basically you need more files. WP should automatically load home.php if it exists so use that as your base then for different pages use a different file, e.g. 2col.php and define this as a template on the WP page edit admin. Hope this kind of makes sense.

By coding the HTML/CSS. There's no shortcut unless you pay somebody to do it for you.

It looks much better. I'd add some more white space between the boxes, they still seem too close together. Align the green links. Give the text in the top 3 boxes some bottom padding. The phone number in the logo looks cheap.

I wouldn't buy from that site. Can't really evaluate it though with it being just an image.

Huge improvement but still room for lots more. What I would do is; make each case study in that slider full width, 100% get rid of that graphic with the keywords in different colours, make your blurb a little bit more concise and give the containing box a nice colour, make the 6 boxes you have below the main blurb all half the container width so you have a 2x2 grid and again give each a colour. In regards to what I mean by colour I would take influence from your nav (which I really like) and chose a vibrant colour but not that same green.

There isn't a simple code change or anything you can do to improve the display at all resolutions unfortunately. You will need to look into it and probably recode the site for the best results or at least do some changes. Resolution can be solved by text and CSS wherever possible, these won't lose quality like images. Images are a problem area, there is a few approaches to solving this issue such as loading different images depending on resolution. You would be best looking into responsive images for this. Which leads into your other question about browser resizing. To do this you need to apply responsive design techniques such as percentages and max-width which will allow the browser to decide how to display the page depending on the window size.

For the nature of the site, there's far too much information. I am not drawn to anything inparticular and as a result I'm not really drawn to anything at all. Do you really need the right sidebar? The blurb? I would use your pages for the content they relate to rather than trying to get it all into one.

Just my opinion but if you're advertising yourself as a front end developer with skills in accessibility, typography and layout whilst hardly showcasing any of these on your portfolio you are not showing any of these skills to the potential employer. I can see you have good design skills but I certainly can't tell if you have good developer skills. I think you should use your portfolio more to your advantage. On a less general note, the logo needs to link back to the first image. I got about 5 images in and wanted to go back but I had to either click back through or refresh to do so.

Brilliant, useful for me personally as well. Bookmarked!

A better display font would work wonders. The body font is fine though.

My advice from reading 19at's responses would be to just avoid PHP for now. Everything said on here is true of course but I don't think you're at a level where you need to worry yourself about PHP files, just get to grips with HTML for now would be my suggestion, for your first site at least.

OK I admit the title is to get your attention, apologies for that, but it's still relevant to my question. I've done a search and can't find much about this. When it comes to app development is their a significant enough advantage to learning your way around XML/Java (I'm starting with Android) to justify the extra effort? It looks as if a lot of the development can be achieved with an IDE (I'm using Eclipse) but a beginner web developer would say this about Dreamweaver and HTML/CSS so I'm wary of going that route in case I end up creating apps as bad as Dreamweaver creates websites. Thanks in advance.

I think you could do with just going through every element and asking yourself how you can tone it down, everything is very in your face, font-sizes, colours, element sizes etc. Also you advertise HTML5 compliant websites but as far as I can see other than the doctype there isn't a HTML5 element in site and the code is generally a poor standard.

They've just announced a family of products branded Edge at Adobe. I don't really trust Adobe when it comes to web products, in the past it's been like they've tried to say using their tools makes everyone a brilliant developer which we all know is nonsense but this stuff seems to work with and for developers and does looks quite good. I particularly like the look of Reflow which looks like it's going to allow designers to create like they would in Photoshop but with a responsive angle, so everything is going to be resizeable meaning designs will be responsive from the outset and not just ported from a single fixed width design. The new web fonts service looks good too. http://html.adobe.com/edge/

I don't see responsive as a feature, I see it as just web design. Obviously it will take time for this idea to be widespread because it is a relatively new concept and people are accustomed to developing for fixed-widths/desktops but it is true, the web is fluid by nature and I think we've always been doing it wrong which feeds in to the Andy Clarke quote. In terms of being in a position to develop responsively, personally I spent ages reading articles and books and looking at different responsive sites along with their code trying to figure it all out. Then I got a project that had to be responsive so I just did it. To put this very simply, what I would do if you were struggling to get your head around it but know the fundamentals from reading up about it; create a few breakpoints using media queries, create a HTML element, give that element a different colour and font-size on each breakpoint and you have a very basic base for a responsive site. Resize you window to something resembling a mobile viewport and go, from there you'll find yourself reading up on bits as you go along.

Wordpress = good. Indian fella charging you 2k to do nothing but buy a theme and install a plugin = bad. If I was you I'd contact some local design agencies and get some quotes from them, at least that way you can meet face to face and get a clear idea of what needs to be done.

I don't see why any website should aspire not to be responsive. If there is constraints such as time or the experience of the developer then I can see why it wouldn't be responsive but it shouldn't be something you actively want to do. If possible a website should be responsive and if not possible the developer or studio/company should be taking steps to make future projects responsive. Responsive design in my eyes is thinking about your design and asking, would it work on that screen, in that location, in that situation, with that person and to try and design your site to suit as many as possible of, or the most likely of those answers. It's not easy and you won't get it spot on every time, if ever and it's still a developing idea which has come a long way since Ethan Marcotte sparked it all up but it's definitely worth doing.

Ok so I've added a full body banner background which fades to black, I didn't do the same for the footer because I thought it looked a bit too much. I've tried various background textures but I just think they add too much noise to the site so I'm leaving that for now. I've made the circles less circular like on Fran's link and I think they really add something, delighted with them, thanks. I've toned down the box-shadows. On the portfolio page I've gone for a 1px grey border on the images and a bit of a box-shadow on hover. I've got rid of it altogether below the nav and just opted for a 1px grey border again. Fixed the h2's to be h1's Got rid of div id=main in favour of just div role=main In hindsight I should have used the article tag for generic article styling then classes for the individual pages so I agree .maincontent is somewhat redundant, I'll look to change this at some stage. I can't make my mind up on the <nav> front in terms of keeping it for the back and top buttons so I think I'm going to keep that as it is for now. I think I've at least attempted to look at every point made and I'm definitely happier with the design as it is now so thanks for all the feedback. I do still think it lacks "something" but as I cannot define what "something" is I've gone ahead and made it live so at least now there's a new design up and running, most users aren't going to notice any little design changes I might make in the future if I ever work out what "something" is. Thanks again, if anyone's got any other ideas or any further ones on the edits then I'm all for it. The new link incase you didn't guess is simply http://jtudsbury.com

I've thought about a full body banner and footer and had feedback from elsewhere saying the same so I think I'm definitely going to go for that. Hopefully a red to white gradient will help with not making them both too much but it's something to play with. Textures, again, I'm going to have a hunt for some and see what they look like as it does seem to be a bit of a theme and one that I have thought myself that it it needs "livening" up. Great suggestion with the circles, I have a thing with this site about it being as resolution independent as possible so I probably will avoid using any images for them but I'll see what kind of effects I can conjure with CSS. Certainly good inspiration anyway. Very useful stuff, thanks Fran. I'll report back. It drives me mental this part of a design, it's so close to being ready yet so far, takes so much willpower to not launch it.

Thanks for looking. In terms of being stuck in the middle, do you refer to the site as a whole or the portfolio page just because I do maybe agree the portfolio page is a bit just stuck on there with the way the screenshots take up so much room so it would be good to know if you mean that or the whole thing. If you have any ideas for adding detail, I'd be happy for them as well. Thanks for the feedback Inspired, it comes across just fine. Is there any specific elements you're referring to re box shadows? I think the box shadows on the portfolio items are fairly subtle. The one's that do stick out to me are the "logo", i.e my name as this has very heavy text shadows, the Twitter link on hover because I didn't want to make it red so I made the shadow obvious and the line under the nav bar which I am debating, it was originally just a 2px black border like what's under the header. If you think it applies to the site more in general I'll see what it looks like without them. Can't argue with the h1 in the article, needs to be and will be changed, thanks. I do disagree with <section role="main"> though. The main reason the div is there is so I can use the role element so it is half redundant half useful, but I think using section adds a semantic meaning that you don't have with a div, which doesn't fit the content. A section isn't supposed to be used as a generic content wrapper in my eyes, even though the name of it may suggest otherwise. If I target all the article tags with the role "main" assigned to them this will influence every article on the site won't it? I cannot do this as they are styled differently, hence the multiple classes. There is other nav classes that cover little back and to the top buttons which is why the nav isn't targeted by the element. Modernizr is on there due to me using Boilerplate and I'm not sure whether I am going to use so that does need removing (or utilising), thanks for spotting that. Hope that doesn't come across as me blindly defending my site, just wanted to explain some of my decisions so you know I'm not ignoring any of your feedback and I'm prepared to be wrong on any of them. Thanks again, both of you.