Starting a site design from scratch
Permalink
I've gone through the tutorials on how to convert an existing HTML/CSS site design into a Concrete5 theme (i.e. "Concrete-izing" a design).... and have a couple "conversions" under my belt with some simple sites.
I'm in the process of working with a graphic designer on a new site... so I'll be slicing up a fresh design into HTML with the intent of it becoming a Concrete5 custom theme (i.e. not with the intent of the theme being for sale in the Marketplace, or anywhere else).
How do others on here go about it? Do you slice the design and create a free-standing HTML site first, then "concrete-ize" the code? Or do you slice-and-code for Concrete5 directly?
How do you account for and/or plan for various page types, blocks, etc.? Or do you just "wing it" and start slicing... assume a single page type... and just adapt as the need arises?
I'd appreciate any thoughts/input/experiences.
I'm in the process of working with a graphic designer on a new site... so I'll be slicing up a fresh design into HTML with the intent of it becoming a Concrete5 custom theme (i.e. not with the intent of the theme being for sale in the Marketplace, or anywhere else).
How do others on here go about it? Do you slice the design and create a free-standing HTML site first, then "concrete-ize" the code? Or do you slice-and-code for Concrete5 directly?
How do you account for and/or plan for various page types, blocks, etc.? Or do you just "wing it" and start slicing... assume a single page type... and just adapt as the need arises?
I'd appreciate any thoughts/input/experiences.
I take it nobody got back to you? I have the exact same question, so if you found any answers and would be kind enough to share it here that would be great! Thanks
@henigin,
No... no one replied. I've been "winging" it and doing things sort of ad-hoc. I'm finding that it seems easier for me to slice the designs into HTML first. Then "Concrete-ize" the resulting HTML. Of course, WHILE I'm slicing the PSD, I'm thinking through how I plan to integrate the content and editablility into Concrete5. So it's not just a blind slicing, like I would do if it was a non-CMS-managed site.
Don't know if that's the standard or not... but until I know Concrete5 better, it's working for me. Let's me focus on the slicing and coding without getting too wrapped up in how I'm going to get it into the CMS. Then, when I'm putting it into the CMS, I already know everything works, etc.
Plus... it gives me the option of putting the HTML, non-C5 version of the site up on a public server for the client to see. Helps them visualize interactivity that wasn't easily shown in the PSD. And making changes to the design/layout is easier to roll forward into HTML without having to deal with any added "complexities" associated with porting it into C5.
But... it does feel like double work. So I'm hoping that, with time, I'll be able to go straight from PSD to C5 without the interim step.
Sorry I don't have more to report.
No... no one replied. I've been "winging" it and doing things sort of ad-hoc. I'm finding that it seems easier for me to slice the designs into HTML first. Then "Concrete-ize" the resulting HTML. Of course, WHILE I'm slicing the PSD, I'm thinking through how I plan to integrate the content and editablility into Concrete5. So it's not just a blind slicing, like I would do if it was a non-CMS-managed site.
Don't know if that's the standard or not... but until I know Concrete5 better, it's working for me. Let's me focus on the slicing and coding without getting too wrapped up in how I'm going to get it into the CMS. Then, when I'm putting it into the CMS, I already know everything works, etc.
Plus... it gives me the option of putting the HTML, non-C5 version of the site up on a public server for the client to see. Helps them visualize interactivity that wasn't easily shown in the PSD. And making changes to the design/layout is easier to roll forward into HTML without having to deal with any added "complexities" associated with porting it into C5.
But... it does feel like double work. So I'm hoping that, with time, I'll be able to go straight from PSD to C5 without the interim step.
Sorry I don't have more to report.
Well, it's helpful enough. If I happen to find a straight forward answer I'll let you know.
Thanks again!
Thanks again!
Great. If nothing else, post back here with what seems to work for you. If no one else is participating in this topic, maybe the two of us can share "best practices" and come up with something that fits us both. ;)
Good luck!
- John
P.S... even with the "extra" work of converting from PSD to HTML and then making the HTML into a Concrete5 theme, there are other areas where having the site in Concrete5 makes things easier: like if you have images in the File Manager and the client wants a new version, using the "Replace" option in C5 is super-simple, etc. So it may end up being a wash in the long run.
Good luck!
- John
P.S... even with the "extra" work of converting from PSD to HTML and then making the HTML into a Concrete5 theme, there are other areas where having the site in Concrete5 makes things easier: like if you have images in the File Manager and the client wants a new version, using the "Replace" option in C5 is super-simple, etc. So it may end up being a wash in the long run.
Thanks for the info.
I'm a true beginner at this, but really hope to tackle this thing. Thanks!
I'm a true beginner at this, but really hope to tackle this thing. Thanks!
Hi John,
This is how I do it, not saying this is good practice, or "right" this is simply how I do it.
I use to start with a straight HTML boilerplate and then Concreteize it, but now I have developed my own starting boilerplate, I have incorporated everything that remains a constant, like calling header required, and footer required, placing the execute or die statement at the top of each php file, adding the areas for site name and logo, and for nav. Once I had this set up with a basic bit of site structure, I then found slicing my designs into C5 quite easy.
My boilerplate consists of common pages, default.php, view.php, full.php, right_sidebar.php, left_sidebar.php, blog_entry.php style and typography css files, I also isolate the header, footer and nav into includes.
I have also now incorporated Modernizr and skeleton.js by default, modernizr helps with ie conditional statements where needed, and skeleton takes care of media queries, and that all important mobile compatibility.
I have found making a basic C5 boilerplate a great timesaver, as even when you need to deviate from the boilerplate it doesnt take long to change, I have also created my own basic grid system, found a lot of grid systems too bloated to be worthwhile, I can then drop in column layouts into the boilerplate at will.
Functionality wise I account for that on a per need basis, if I know certain blocks will be needed I account for them early on, but otherwise alter and build as needed.
This is how I do it, not saying this is good practice, or "right" this is simply how I do it.
I use to start with a straight HTML boilerplate and then Concreteize it, but now I have developed my own starting boilerplate, I have incorporated everything that remains a constant, like calling header required, and footer required, placing the execute or die statement at the top of each php file, adding the areas for site name and logo, and for nav. Once I had this set up with a basic bit of site structure, I then found slicing my designs into C5 quite easy.
My boilerplate consists of common pages, default.php, view.php, full.php, right_sidebar.php, left_sidebar.php, blog_entry.php style and typography css files, I also isolate the header, footer and nav into includes.
I have also now incorporated Modernizr and skeleton.js by default, modernizr helps with ie conditional statements where needed, and skeleton takes care of media queries, and that all important mobile compatibility.
I have found making a basic C5 boilerplate a great timesaver, as even when you need to deviate from the boilerplate it doesnt take long to change, I have also created my own basic grid system, found a lot of grid systems too bloated to be worthwhile, I can then drop in column layouts into the boilerplate at will.
Functionality wise I account for that on a per need basis, if I know certain blocks will be needed I account for them early on, but otherwise alter and build as needed.
Vidall,
Thanks! It's a big help to hear about how other developers/designers handle things like this. The discussion is so often about a minute detail about how to accomplish a specific task that we forget that the "big picture" is important, too.
Your C5 Boilerplate idea is a great one... and one I'd like to get setup for myself, too. All in good time, I guess! ;D
Thanks, again, for your input. Very valuable!
- John
Thanks! It's a big help to hear about how other developers/designers handle things like this. The discussion is so often about a minute detail about how to accomplish a specific task that we forget that the "big picture" is important, too.
Your C5 Boilerplate idea is a great one... and one I'd like to get setup for myself, too. All in good time, I guess! ;D
Thanks, again, for your input. Very valuable!
- John
@55webdesign,
Thanks! I've read through these before (several times!), and they are a huge help in understanding the details for taking an existing HTML theme/template and making it Concete5 compatible. But I was wondering about starting from a PSD and whether people tend to slice it to HTML first and THEN Concrete-ize it? Or what?
How do you go about taking a PSD design and making it into a C5 theme?
Thanks!
- John
Thanks! I've read through these before (several times!), and they are a huge help in understanding the details for taking an existing HTML theme/template and making it Concete5 compatible. But I was wondering about starting from a PSD and whether people tend to slice it to HTML first and THEN Concrete-ize it? Or what?
How do you go about taking a PSD design and making it into a C5 theme?
Thanks!
- John
Part one:
I don't slice anymore, to much excess baggage, image.. div.. image.. div...
I still use DW, but only because it makes development quicker (IMO)
I work with a blank canvas and DW has the tools to check for flaws, with a couple of add-ons.
I build from scratch, as Michael says and make sure it works first.
Then convert to C5.
There are no short cuts, you need to understand the basics of how HTML and CSS work together.
Having said that if you REALY know what your doing PS, you could slice and remove the s**t you don't need.
My new site has one image, the logo, everything else is CSS.
Gradients, shadows, rounded corners, fonts and drop shadows on fonts.
A far cry from shed loads of images or massive image sprites.
I don't slice anymore, to much excess baggage, image.. div.. image.. div...
I still use DW, but only because it makes development quicker (IMO)
I work with a blank canvas and DW has the tools to check for flaws, with a couple of add-ons.
I build from scratch, as Michael says and make sure it works first.
Then convert to C5.
There are no short cuts, you need to understand the basics of how HTML and CSS work together.
Having said that if you REALY know what your doing PS, you could slice and remove the s**t you don't need.
My new site has one image, the logo, everything else is CSS.
Gradients, shadows, rounded corners, fonts and drop shadows on fonts.
A far cry from shed loads of images or massive image sprites.
OK, if you guys can help me it would be awesome. I am a TOTAL rookie at this - concrete5, mamp, php, all of it! I've downloaded concrete5, downloaded mamp... HOW IN THE WORLD DO I GET STARTED WITH A LOCAL SITE??
Very frustrated...
Very frustrated...
Have you set up Mamp?
If you haven't, then set that up first.
Then we'll go the next step of setting up a database.
Then we can set up C5.
Create a new folder in 'Home/Sites' called concrete or something else.
Put the concrete stuff in that folder, they start with "blocks and end with updates", 24 items.
Then we can have fun with C5!!
Almost as good as 'Bungee jumping'
See how you get on with that first
If you haven't, then set that up first.
Then we'll go the next step of setting up a database.
Then we can set up C5.
Create a new folder in 'Home/Sites' called concrete or something else.
Put the concrete stuff in that folder, they start with "blocks and end with updates", 24 items.
Then we can have fun with C5!!
Almost as good as 'Bungee jumping'
See how you get on with that first
I have MAMP installed and c5 downloaded and placed in MAMP/htdocs. Next?
Oops, sorry. I moved the concrete5 material, blocks to updates, to a folder in Home/Sites in a folder called c5site...
Thanks!
I haven't been able to make the switch to using so much CSS3 "goodness"... so I'm still a bit beholden to images. I don't use PS's generated code at all... just render the images and use them as needed in sprites/site elements.
Appreciate the input!
- John
I haven't been able to make the switch to using so much CSS3 "goodness"... so I'm still a bit beholden to images. I don't use PS's generated code at all... just render the images and use them as needed in sprites/site elements.
Appreciate the input!
- John
