Your Web Design/Development Process

Limbo
Limbo
Established NormPosts: 27,224 in Web Design
Could be a TL;DR topic but I've been meaning to streamline my process somewhat so I've invested a little time over the past few projects tidying up the phases of work and how I integrate design into front-end and front-end into CMS.

I'd be interested to know what I need to improve on, and how others are targeting time traps/phases that cost time or can be reduced.

Here's a rough breakdown of an 'average' build (I know there's no such thing).
  1. Set up of project: contract, invoicing, sitemaps/UI flowcharts, spreadsheet, contacts, assets and brief/spec - all organised in consistent directory structure.
  2. Concept Design (iterative and version controlled) - Client sees PNG scamps shown at 100% in the browser - I think this is an important step - they will have a better idea of what to expect in the finished article when presented this way (As opposed to emailed JPEGS or whatever).
  3. Sign off concepts
  4. Design Development - same as above with all major page layouts covered/considered + a catch all for common in-page elements like form controls, maps, lists, tables etc. Should also consider the squeeze and push of responsive here so smart phone and tablet views (don't leave this till the build)
  5. Sign off all Design work
  6. Front-end set-up including copy of base files/framework, SFTP, GIT repo and SASS
  7. Creation of all the major content 'groups' as basic HTML includes considering ALL templates designed at this time so that there's not as much scurrying to and from the design to code up.
  8. Basic CSS styling using SASS and site tested as I go in the lowest common denominators/standards (Mobile Safari IOS6, Current Firefox/Chrome and whatever version of IE I'm going back to, basically covers the most common bugs I find)
  9. Core includes fleshed out and refined (masthead, footer) + adding in scripts to get a feel for interactivity
  10. Retina sprites created and a 100% version saved out for IE7/8 - everyone else gets 200%
  11. Key pages fleshed - focus on progressive enhancement and responsive
  12. Sign Off
  13. All other pages built ready for CMS and remaining scripts/styles sorted
  14. Sign off
  15. CMS installed from a set of developer files that includes a directory for commonly used Extensions, Modules and Plug-ins.
  16. Template integration both locally with MAMP and remotely (synced through Mountee in my case - brilliant Expression Engine dev module)
  17. I've got nothing here for client to monitor progress really - they just have to be patient while we work.
  18. Closed testing by key stakeholders only
  19. Sign off
  20. Soft release and debugging with wider group of testers / environments
  21. Sign off
  22. General release (holds breath)
  23. Inevitable amendments
  24. Sign off
  25. Evaluation, final invoicing and closing of project including client testimonial and packshots.
  26. Tell client we did it wrong and we need to upgrade a load of shit (joke, sort of).

With regard to the front-end side of things, here's my dev environment set up as it is now:
  • Win 7 with IE9/10 and XP with IE7/8 as virtual machines on second Screen (set for windows gamma).
  • MAMP running locally so I can use includes etc and useful for testing devices over IP
  • GITHub monitors changes locally so I can reverse a commit if I really fuck something up (useful for teams working on same file set too).
  • LiveReload monitoring site development folder also means I don't have to fuss with terminal for SASS
  • Using localhost with MAMP and pointing at local IP for iPad, iPhone and Samsung Android (4) + Livereload running so all environments are updated as we go (no refreshing is a fucking godsend!)
  • A remote site set up under a test domain (often password protection) for testing on weird kit on larger projects, and for clients to monitor progress. I generally just push builds up over SFTP but this part I'd like to improve. Perhaps a nice modal CMS that can cushion the content with user functionality without imposing any kind of impact on the development environment...
  • live site with real time DB linked to local templates
--- would love to know how folks are deploying a site and keeping backups of databases locally etc. Just don't feel I've got the measure of this at all.

So is some of this dumb? Got any ideas for the PERFECT set up given the multifaceted sides to the industry?
«1

Comments

  • Giraffe
    Giraffe
    toxic designer Posts: 9,798
    Well that has done a great job making me feel like an inexperienced bum.
  • Nick
    Nick
    Cream of DT Posts: 18,098
    tl;dr

    :)
  • slate
    slate
    Senior Member Posts: 6,137
    I'd say you are doing better than most Limbo.

    We struggle with the local vs live environment. I've read about things like localtunnel where an external person can review locally stored environments. But really its above my knowledge level to implement. Ideally I'd like to keep a site local as long as possible.

    Are you doing your Design Development stage in browser? Or or those static visuals?

    Additionally how do you handle revisions after a stage has been signed off? I can tell you from experience this is where a lot of budget goes.

    When you step into the front-end set up, take a look at CodeKit — THE Mac App For Web Developers might make the process of gathering your base easier. Also includes LiveReload and a pre-complier for SASS.
  • Limbo
    Limbo
    Established Norm Posts: 27,224
    Design Dev is 100% flat. I personally HATE designing in browser and think the idea is too radical and far to time consuming when you factor in client's kit/situation.

    I've deliberately left out as much of the software as I could from the list above as I think it'd spawn the wrong debate, but just for the in browser debate I'll use Illustrator as an example. To create a box in CSS and control it's look and feel + make it responsive and test it takes a little know how and a fair few minutes. To do the same in illi with snap to grid is a few seconds. I'd much rather be editing in Illi than making client amends in a browser. It's heart wrenching enough when a really well thought out section of the design is radically changed this way and that in the design process without also having to code those changes as you go along. I just can't see how you can design 'in browser' unless it's a personal project.

    Regarding revisions. When a stage is signed off, we make it damn clear that we can only accept minor amends without revisiting the work and charging our daily rate. This scares them into making damn sure they like it at the design stage. I often find that when a design 'comes to life' they are so blown away by the interactivity/responsiveness and all the trappings of jQuery and CSS3 that they usually don't care about making amends here anyway - and that changes are feature requests or oversights which are all chargeable anyway (within reason).
  • Limbo
    Limbo
    Established Norm Posts: 27,224
    I've read about things like localtunnel where an external person can review locally stored environments.

    That I'd like to look into. I don't much like fucking about with (s)FTP or similar - especially on my BB line when there's 1000's of files.

    I'm sure there's a way to have it sync in the background mind you - so any thoughts on that would be appreciate. Perhaps GIT + some deployment tool on test/live servers would be the way? Needs to be as friendly as possible. Peter and jane for me.
  • calder12
    calder12
    Senior Member Posts: 13,303
    I don't have anything to add other than a thanks for posting, another good learning resource for me.

    I do have a couple of question whens it comes to design though, do you design each of the responsive breakpoints in Illy (or whatever you use) too? And are you doing the mobile first as seems to be the trend now?
  • Limbo
    Limbo
    Established Norm Posts: 27,224
    Usually just design three views. Desktop/laptop, tablet and smart phone. But with 5 break points in the CSS/HTML phase.

    I do my best to explain that there's many things that change A LOT during the breakpoints between these sizes so the client understands how it will compress for different users - luckily I can show them live sites with this in action, as it can take a big leap of the imagination for someone new to it.

    I'm also putting more thought into having 100% functionality in mobile, and thus removing things from a design at full screen that won't convert. So yeah, 'mobile'* first thinking, but designing full screen first.

    *mobile - harder than ever to define. 320px at the smallest end of the scale at the mo... but that is already changing with the onset of the smart watch... and at the large end of the scale (phoblets) we have almost netbook size resolutions.
  • Limbo
    Limbo
    Established Norm Posts: 27,224
    P.S. I really can't stress enough how useful LiveReload is when doing frontend. Wish I'd gotten on it a year back.
  • slate
    slate
    Senior Member Posts: 6,137
    Limbo wrote:
    That I'd like to look into. I don't much like fucking about with (s)FTP or similar - especially on my BB line when there's 1000's of files.

    I'm sure there's a way to have it sync in the background mind you - so any thoughts on that would be appreciate. Perhaps GIT + some deployment tool on test/live servers would be the way? Needs to be as friendly as possible. Peter and jane for me.
    You can probably understand this better than I can. localtunnel: instantly show localhost to the rest of the world Need to install Ruby and go from there.


    Calder for our responsive workflow it will depend on size of site/budget. There are HUGE advantages to having a designer that can do front end development when it comes to responsive design.

    If its a smaller brochure site, it may be a matter of sitting with the developer or refining things on my own. For larger projects I will do desktop resolution mocks as well as <600px versions. Tablet breakpoint will be a matter of refining at the end.

    I don't know what kind of budgets projects have that warrant 4-5 breakpoint designs, when you are creating 7-8 templates that is huge amounts of work.

    There are a tone of different mentalities out there for how to handle the process. Imo the earlier you can get into the browser the more effect the process is. A meshing of roles really helps keep things moving smoothly. I have mixed feelings of doing things that adapt at certain resolutions vs setting a break point for when the design breaks (based on content).

    In the end, how picky you are with responsive design can absolutely destroy a budget.
  • Limbo
    Limbo
    Established Norm Posts: 27,224
    slate wrote:
    You can probably understand this better than I can. localtunnel: instantly show localhost to the rest of the world Need to install Ruby and go from there.

    Niceone! That looks grand actually.
  • David
    David
    Keeping Tom Happy Posts: 12,891
    I include a bit more UX up front, including some content requirements/ wireframing and (if necessary) some task lists and personas. I also usually do some mood board/scamping before any design is done

    I am trying to move away from flat designs but I think that in-browser design is not practical or intuitive on it's own, that said I am trying to mock up less flat templates to set the style and moving to css/html sooner

    Testing across different browsers and making sure responsive stuff is working is worth putting in, I'm conscious that I'm not testing across enough different devices (especially the myriad of Android devices)

    that's all that comes to mind for now, your development process makes me look feel like a monkey with a keyboard
  • RockMeAmadeus
    RockMeAmadeus
    Banned Posts: 3,938
    Someone sticky this. It's a fantastic read.
  • bennyboy
    bennyboy
    Ah yo Boogie Down B-TownPosts: 3,756
    Ha ha, same here, d*d. Thanks for this Limbo, really is interesting to see how other people do it. Certainly stuff here regarding local dev that I might take on board - will def look at livereload for use with mamp.

    One thing I am doing is make sure clients see initial designs in browser (usally use prevue.it)- as you say, less surprises. But clients do still want PDF/jpgs so they can share via email etc.

    Don't do enough device testing, so need to build that in earlier.
  • Limbo
    Limbo
    Established Norm Posts: 27,224
    @D*d

    Yeah. That stage before concept design is really wooly here - we make it up but it ALWAYS centres around a signed off sitemap + specs which incorporates the main user journeys - Generally the haven't been too complex for me/us.

    However I'm working on a project now that could benefit from someone experienced to input on the UX side so we get a nice a smooth result from, sign-up to cart to subscription to membership approval to notification.

    I'll end up doing it all as we build out the CMS, but I know it'd be a worth investment to get right at the start. To be fair those processes are often tied up in the way the CMS works anyway, so there's often not to much leeway.
  • RockMeAmadeus
    RockMeAmadeus
    Banned Posts: 3,938
    Limbob, I'm curious about one thing you briefly mentioned but didn't expand into. Currently it's recommended for you to test on multiple devices and plenty exist. Do you actually get your hands on second hand devices on the cheap for testing purposes or do you use something like Eclipse's device testing platform that's built in which mimics devices?
  • Limbo
    Limbo
    Established Norm Posts: 27,224
    Don't do enough device testing, so need to build that in earlier.

    I have the lowest common denominator (stipulated in spec/contract) open right from day one front-end. This saves LOADS of time. LOADS.

    DO IT.
  • pmek
    pmek
    Banned Posts: 9,297
    I follow almost exactly the same process, we have a couple of other tools in our toolbox though.

    We use Codekit to compile SCSS, with the compass libraries installed as well. This also refreshes the browser for you after compilation.

    I sometimes use FTPloy. This pushes and GIT commits to your live server. The only issues are sharing the database. I use Migrate WP DB Pro, which makes syncing databases easier, but still not as smooth as I'd like!

    We use flatsies to present the JPGs in the browser, and Slickplan to easily prepare sitemaps.

    My proposal docs are stored and easily editable in Google Drive.

    We haven't quite found the perfect project management tool, but currently testing basecamp after having used Kickoff for a while. I like basecamp, but the design and UI of it puts me off a bit. I like that you can have project templates, and duplicate them at the start of a project.

    And finally, I deal with a lot (too much) of support requests, and use helpscout to manage those "tickets".

    Other than that, we have a pretty similar process!
  • Limbo
    Limbo
    Established Norm Posts: 27,224
    Limbob, I'm curious about one thing you briefly mentioned but didn't expand into. Currently it's recommended for you to test on multiple devices and plenty exist. Do you actually get your hands on second hand devices on the cheap for testing purposes or do you use something like Eclipse's device testing platform that's built in which mimics devices?

    I have an iPad2 IOS7, 2 iPhones IOS6/7 (an old 3GS I have + 4S as I'm already seeing bugs on IOS6 we don't see on 7) and a cheapy samsung for Android (Jellybean). I also do a quick round of browsershots to see if it's all grand before we open the site for user testing.

    Then I have Win7 and XP as mentioned on virtual machines. I take it as read users are on latest FF, Safari and Chrome (and Chrome mobile).

    I charge for IE7.

    I refuse to support IE6.

    Lastly, Opera, Opera mobile and other non-named edge cases are stipulated by their omission. There's simply too many to mention (Blackberry, Amazon Fire, Playstation, Netscape, Camino...)
  • Limbo
    Limbo
    Established Norm Posts: 27,224
    I sometimes use FTPloy. This pushes and GIT commits to your live server. The only issues are sharing the database. I use Migrate WP DB Pro, which makes syncing databases easier, but still not as smooth as I'd like!

    Nice. That's the sort of thing I was looking for.

    I've tinkered with Compass but not had a real look into it. On my list.

    I love and use basecamp - it's easy for clients, cheap, quick and many agencies seem to be using it, so I feel at home with theirs.

    As far as support goes (I don't really need an app for this at the mo) I've used Tender Support — Support your product: Knowledge Base, Helpdesk, Forums for a few things, on both sides of the process and I'm really impressed.
  • Limbo
    Limbo
    Established Norm Posts: 27,224
    My proposal docs are stored and easily editable in Google Drive.

    All of mine are Indesign. So Dropbox if need be.
  • subtlestarling
    subtlestarling
    New Old School Posts: 1,612
    Hey Limbo and Starbright thanks! That's all pretty helpful.

    When it comes to developing in house it's actually quite easy to let people outside see it. I managed to figure it out on my setup at home with a cheap thompson router, but unfortunately a bug in the firmware means it melts down every time I try it, and the shitty line quality means the replacement router I bought doesn't even register a connection. Oh well maybe later.

    On developing locally, if you have an old mac mini, web server NAS or even an old laptop with a broken screen (what I have) you can set up a full web stack and basically treat it like an external server with an incredibly fast connection. Then to show it to clients what you do is set your DNS to point eg dev-sitename.yoursite.com at your router (static IP useful unless you have some dynamic DNS techies around) then route your external connection to your internal server. Set up your vhost to work with dev-sitename.yoursite.com and voila, job done.

    This setup also makes launch a piece of piss as you can set up your stack to be the same as your target, meaning no inconsistencies between mamp and a lamp stack.

    Simples.
  • Limbo
    Limbo
    Established Norm Posts: 27,224
    How does that work in comparison to using MAMP? I find it's more than adiquate to run php + mySQL based sites, but perhaps I'm missing the point?
  • subtlestarling
    subtlestarling
    New Old School Posts: 1,612
    Sorry just edited the post a bit, the point is there are a ton of tools you can use on a lamp stack that just dont work in wamp or mamp. I can run scripts, compress images recursively, run php from the command line, dump sql, zip folders, sync etc etc all on the test server. This can all technically be done in mamp but it requires much more setup than just going 'apt-get install imagemagick' and using it straight away.
  • subtlestarling
    subtlestarling
    New Old School Posts: 1,612
    Also re: SCSS, I have lately found some scripts that compiles LESS on the fly, meaning all I do is upload the .less file and the magic happens. Presumably there would be some similar tools for SCSS.

    It has already saved a while even just not having to upload the css file when its automatically compiled. Combined with livereload you'd be flying.
  • Limbo
    Limbo
    Established Norm Posts: 27,224
    Ah yeah. you're stepping away from my role a little now. Helpful to know but I try to steer clear of the heavy duty server stuff. OSX has a pretty good server running - *so far* I've not needed to do anything more than the default to get EE and WP working on it. I probably shouldn't have said that mind you...
  • Tom
    Tom
    Keeping d*d Happy Posts: 11,595
    Giraffe wrote:
    Well that has done a great job making me feel like an inexperienced bum.

    This.

    Jesus, Limbo, this all seems a little convoluted.

    My workflow:
    Rough sketch + research.
    Design website in Photoshop. Present in browser.
    Belittle client when they offer feedback.
    Continually argue with client until they submit to everything I say.
    *Build website.
    Get paid.

    * On a serious note, I'm not sure I'll ever build another client website again, at least the more complex ones. Whilst I have reasonable front-end/WP knowledge, people like you are much better than me at it, so why not let someone else do it and I stick to the design.

    I hired a Canadian WP developer for a client site recently actually, he did a great job, just had bit of a strange accent, almost sounded scouse at times.
  • subtlestarling
    subtlestarling
    New Old School Posts: 1,612
    Haha, well I use it for wordpress mainly too. It's actually faster to set up a preview server believe it or not, upload wordpress, add a mysql db, add to hosts/vhost file and jobs done.
  • jamblo
    jamblo
    Tea Snob Posts: 5,566
    Tom wrote:
    I hired a Canadian WP developer for a client site recently actually, he did a great job, just had bit of a strange accent, almost sounded scouse at times.


    LOL. Was this in addition to Rotuy or is he a secret Canuck?
  • jamblo
    jamblo
    Tea Snob Posts: 5,566
    Am I the only one who just builds site on a server behind a password protected area?
  • slate
    slate
    Senior Member Posts: 6,137
    For initial presentations of static images, can't say how great InVision – Free Web & Mobile Mockup and UI Prototyping Tool is. Can take static version of sites designed in any application, sync a folder and build a working prototype in about 20mins. Client can then comment on the design, and it emails me a screenshot of their comment in which we can reply or discuss further. Save an amendment to your design to the synced folder and wham its updated in the prototype.
  • Limbo
    Limbo
    Established Norm Posts: 27,224
    Jesus, Limbo, this all seems a little convoluted.

    I actually think it's very linear. Might be a little complicated but I don't think it's overkill. Depends on the scale of the site though.

    Last week I just did a one page site for a mate for beer money - 2 day job. no contract, all made in the beaver, uploaded ftp, changed a few things, live.

    This process is for the larger scale stuff really, where there's a load of planning/investment from both sides. Granted there are a lot of stages but many of them are there to save time/money (version control/sign off)...

    Agreed tho, sometimes I wish I could just whack up some sliced images from Fireworks and be done with it.
  • David
    David
    Keeping Tom Happy Posts: 12,891
    jamblo wrote:
    Am I the only one who just builds site on a server behind a password protected area?

    Are you working directly on the files on the server?
  • Limbo
    Limbo
    Established Norm Posts: 27,224
    Am I the only one who just builds site on a server behind a password protected area?

    I used to do this. But it's sloooooooow IMO.
  • bennyboy
    bennyboy
    Ah yo Boogie Down B-TownPosts: 3,756
    jamblo wrote:
    Am I the only one who just builds site on a server behind a password protected area?

    Nah, I do this as well. Sometimes mamp, sometimes on our server. Depends on complexity of job really. If something needs doing quickly - server. Bit more time, local.
  • Tom
    Tom
    Keeping d*d Happy Posts: 11,595
    jamblo wrote:
    LOL. Was this in addition to Rotuy or is he a secret Canuck?


    Hahaha, he sings your praises, I think he sees you as a kind of WP Yoda.

    I'll hire you next time.






    Only joking Rotuy, in fact I've got a little job for you very soon...
  • David
    David
    Keeping Tom Happy Posts: 12,891
    Fuck me, how many wp devs do we have here?
  • subtlestarling
    subtlestarling
    New Old School Posts: 1,612
    Limbo wrote:
    Ah yeah. you're stepping away from my role a little now. Helpful to know but I try to steer clear of the heavy duty server stuff. OSX has a pretty good server running - *so far* I've not needed to do anything more than the default to get EE and WP working on it. I probably shouldn't have said that mind you...
    Out of curiosity, how long does it take you to set up a new preview site on mamp? I just tried it and it took ~7 mins to get from start to wordpress admin screen.
  • Tom
    Tom
    Keeping d*d Happy Posts: 11,595
    Limbo wrote:
    I actually think it's very linear. Might be a little complicated but I don't think it's overkill. Depends on the scale of the site though.

    Was only joking fella, you put me to shame. You're also right on site scale, the bigger the site, the more important the workflow becomes.

    When it comes to the actual build I always work on a local MAMP set-up, works a treat, working on an actual server sounds a nightmare.

    I take it Jamblo just does this so client can easily see progress etc on bigger sites? Seems crazy otherwise.
  • slate
    slate
    Senior Member Posts: 6,137
    Do most devs usually develop static templates prior to implementing into their CMS of choice?
  • subtlestarling
    subtlestarling
    New Old School Posts: 1,612
    slate wrote:
    Do most devs usually develop static templates prior to implementing into their CMS of choice?
    On bigger stuff I do, write out eg a html version of a post and then later replace the title with $title etc. I don't make a whole static version of the website unless there is a good reason though.
  • Tom
    Tom
    Keeping d*d Happy Posts: 11,595
    d*d wrote:
    Fuck me, how many wp devs do we have here?

    Jamblo, Rotuy and Starbright are the holy trinity of DT WP developers.

    If they can't build it, it can't be built.
  • jamblo
    jamblo
    Tea Snob Posts: 5,566
    Tom wrote:
    I take it Jamblo just does this so client can easily see progress etc on bigger sites? Seems crazy otherwise.

    Yep, thats the one. Do a lot of work with agencies, so they need to be kept in the loop/edit content/etc. as the build evolves. Do a fair whack of work at night too, so having it online means I can tinker/troubleshoot out of the office.
  • jamblo
    jamblo
    Tea Snob Posts: 5,566
    Tom wrote:
    Jamblo, Rotuy and Starbright are the holy trinity of DT WP developers.

    If they can't build it, it can't be built.

    Chortle.

    Starbright would eat me for breakfast in WP fight to the death.
  • Tom
    Tom
    Keeping d*d Happy Posts: 11,595
    jamblo wrote:
    Chortle.

    Starbright would eat me for breakfast in WP fight to the death.

    But he's still got a gay username.
  • slate
    slate
    Senior Member Posts: 6,137
    Tom wrote:
    Jamblo, Rotuy and Starbright are the holy trinity of DT WP developers.

    If they can't build it, it can't be built.
    Although he doesn't come on DT much anymore, teapot is also excellent.

    I work with him pretty regularly.

    subtle, I like to build everything static, and what I mean by that is I'll develop all page templates and styles prior to moving to the CMS. I'll still use PHP so I can make things more efficient by having a mock templating system. Then when everything is tested and working in all browsers, I'll slap it into the CMS.

    Because I'm not great with PHP I like to narrow my pain points, takes me a little plugging around to get things working well in the CMS. Its its more complicated I'll hand that off to a real developer.
  • subtlestarling
    subtlestarling
    New Old School Posts: 1,612
    slate wrote:
    Because I'm not great with PHP I like to narrow my pain points, takes me a little plugging around to get things working well in the CMS. Its its more complicated I'll hand that off to a real developer.
    Haha fair enough. What CMS do you generally use? I did build an almost static frontend a few weeks ago for another developer to integrate, but I used silex because its much less painful than straight includes and also it looked like fun. I'm a giant nerd.
  • slate
    slate
    Senior Member Posts: 6,137
    We typically do WP, sometimes EE.
  • subtlestarling
    subtlestarling
    New Old School Posts: 1,612
    Not sure about EE but WP themes can be written pretty much as if you are using includes. Just make a page theme for each page and then later replace the content with the_content(), or whatever. That's my current approach for that one anyway.
  • moz
    moz
    The 1970sPosts: 6,587
    Starbright wrote:
    I use Migrate WP DB Pro, which makes syncing databases easier, but still not as smooth as I'd like!

    I love the look of WP Migrate DB Pro - may invest in that.
  • slate
    slate
    Senior Member Posts: 6,137
    Not sure about EE but WP themes can be written pretty much as if you are using includes. Just make a page theme for each page and then later replace the content with the_content(), or whatever. That's my current approach for that one anyway.
    Mine as well, I do an include of header.php, footer.php and sometimes sidebar.php, structure the .css the same way, and really build the static templates with the end goal of producing a theme. The WP implementation process really takes 2-6 hrs (maybe more if you are doing a lot of conditional fields and such).

    Honestly why I do it this way is since my PHP is shotty, I like to know that what could be breaking a section is my lack of PHP knowledge and not the structure defined by the CSS.

    Similar process when even when making the templates. 95% of what I do is responsive so I'll block out my page and make all of my break points shifts happen with just simple coloured blocks before I go into the refined CSS.
  • RockMeAmadeus
    RockMeAmadeus
    Banned Posts: 3,938
    I summon the divine holy trinity of WP developers to explain the pros and cons of having separate header, sidebar and footer files.
  • thrills
    thrills
    Senior Member Posts: 397
    That's impressive Limbo. It's great to see what other people do. At the risk of sounding like a bit of a pleb, this is my process:

    I'm not a designer, so I'm supplied with PSD files when starting a new project. I'm responsible for the HTML/CSS and Wordpress integration.
    • I'm running WAMP.
    • I'll start with the HTML/CSS. I have my own slimmed down version of Boilerplate. I use Sublime Text for coding, Prepos for compiling SASS and Emmet LiveStyle for live reloading. I'll probably switch to LiveReload soon.
    • I typically test as I go. I'm using Windows so IETester makes it easy to deal with IE7/8.
    • With the key pages done, I'll focus on responsiveness.
    • I'll get it signed off at this point. There is no point starting on the CMS if there is still layout issues.
    • Install Wordpress and my "blank" theme including any frequently used plugins.
    • Start on the integration.
    • Work until it's ready for content.
    • Generally at this point I'll upload it (I'm unfortunately still on FTP) to a dev server and collaborate with client on content population.
    • Populate content, test, modify, fix. All those little things which can pop-up along the way.
    • Sign off, make live, invoice.

    I'm just a contractor, so the company I work for deals with backups. For my own personal sites though, they're all running Wordpress so I'll use a plugin called "WordPress Backup to Dropbox" for a scheduled file and database backup. I'll also schedule a database backup to be sent to my email.

    I'll do a daily or weekly backup of my WAMP folder to removable storage using SyncToy to keep track of what has been updated.

    I'm sick of FTP, but I can't get away from it for my client work. For my personal work however, I'd like to move to Github or similar. Anyone has any advice for moving, especially for someone who does a lot of Wordpress work?
  • RockMeAmadeus
    RockMeAmadeus
    Banned Posts: 3,938
    Thanks for the heads up on IETester, Thrills! Anyone got the equivalent for OSX? Just need to procure windows 8 to run IE10...
    Limbo wrote:
    I have an iPad2 IOS7, 2 iPhones IOS6/7 (an old 3GS I have + 4S as I'm already seeing bugs on IOS6 we don't see on 7) and a cheapy samsung for Android (Jellybean). I also do a quick round of browsershots to see if it's all grand before we open the site for user testing.

    Then I have Win7 and XP as mentioned on virtual machines. I take it as read users are on latest FF, Safari and Chrome (and Chrome mobile).

    I charge for IE7.

    I refuse to support IE6.

    Lastly, Opera, Opera mobile and other non-named edge cases are stipulated by their omission. There's simply too many to mention (Blackberry, Amazon Fire, Playstation, Netscape, Camino...)
    Cheers man, good shit there. Just a couple questions; the cheapo samsung or any brand, does it need to have service to work the os and point the browser to the local install when you're on the wifi? Also for that, I'd need to look for a phone that would be compatible to the latest android version, correct

    And the Opera issue, are you saying you refuse to support the retired Presto engine or even the newer webkit engine?
  • thrills
    thrills
    Senior Member Posts: 397
    Thanks for the heads up on IETester, Thrills! Anyone got the equivalent for OSX? Just need to procure windows 8 to run IE10...

    You could try running IETester through WineBottler. Haven't tried it personally though, may be a little slow.
  • pmek
    pmek
    Banned Posts: 9,297
    I summon the divine holy trinity of WP developers to explain the pros and cons of having separate header, sidebar and footer files.

    That's just basic PHP rather than WP.
  • pmek
    pmek
    Banned Posts: 9,297
    Tom wrote:
    But he's still got a gay username.

    Haha, quite right.
    Also re: SCSS, I have lately found some scripts that compiles LESS on the fly, meaning all I do is upload the .less file and the magic happens. Presumably there would be some similar tools for SCSS.

    You mean it compiles it in the browser? If so, this is fine for development, but bad for production.

    Definitely worth investing in something like codekit, which compiles the css every time you save the SCSS file, then you can just upload the pre-compiled CSS file to the server.
  • Limbo
    Limbo
    Established Norm Posts: 27,224
    Yeah.

    I do similar with CSS. LiveReload compiles .SCSS into .CSS and minimee in EE minifies everything automagically on the server. Prefer that to having something that's rendered by the browser...
  • jamblo
    jamblo
    Tea Snob Posts: 5,566
    thrills wrote:
    I have my own slimmed down version of Boilerplate.

    @Thrills – Did you just take fat ol' Boilerplate and trim out the stuff you don't need or find a streamlined base point somewhere?
  • Limbo
    Limbo
    Established Norm Posts: 27,224
    If he's anything like me, he's built his own that deals with the most common content types with in-built media queries and simple JS stuff like galleries and modals.

    I have a index.php file with the following includes:
    • html5doctype
    • head (meta, reset, css, conditionals, favicon, mobile/tablet icons)
    • masthead
    • navigation units covering some common type like centred or justified lists
    • lipsum - headings, paragraphs, lists, tables,
    • columns - 4-2-1 is my preferred style here - for easy responsive design concertina.
    • slides
    • tabs
    • maps
    • form-contact
    • form-comment
    • form-search
    • form-login (remember that from prototype thing I did?- well it works - mostly)
    • common like buttons (FB, Twitter, G+, Pinterest)
    • tooltips and some other common jQuery/css3 hover states/effects.
    • scripts
    • footer

    I'd fork mine on GIT for everyone but some of the jQuery plugins I use are paid, so can't really :(
  • thrills
    thrills
    Senior Member Posts: 397
    jamblo wrote:
    @Thrills – Did you just take fat ol' Boilerplate and trim out the stuff you don't need or find a streamlined base point somewhere?

    That's it, I just slimmed it down myself. Nothing too excessive, just what I felt wasn't needed.

    And like Limbo, I've added a few things which I know I'll use on every project.
  • jamblo
    jamblo
    Tea Snob Posts: 5,566
    Limbo wrote:
    I'd fork mine on GIT for everyone but some of the jQuery plugins I use are paid, so can't really :(

    *cough* m__ s____ *cough*
  • Limbo
    Limbo
    Established Norm Posts: 27,224
    jamblo wrote:
    *cough* m__ s____ *cough*

    Que? Sorry you are going to have to spell it out? I use Royalislider and Isotope - both licensed per project.

    To be honest I could easily set up a GIT without these two mind you - that we could branch into a DT one... but only if there's any real interest...
  • 2Dfruit
    2Dfruit
    Website Molester Posts: 3,321
    It's all about automation for me.

    For my front end stuff, I develop mostly on a ubuntu virtual machine. I'll have a windows drive mounted so that I can export all my graphics into the machine for easy back and forth. I hate developing on windows now. It's always a headache.

    I've been using nodejs and npm for package management. I use grunt.js for automation and some nice front end workflow stuff. I'll have grunt tasks set up to watch for changes to php,html,less,coffee,js files etc. Each one will have a different tasks that runs when there's chanages made to it. So for html or php files, livereload will listen and do a page refresh. For less files, it'll compile to css, move it to the right place and do a soft refresh on the browser. THis is very handy as it doesn't refresh the whole page or the data you're working with. Also maintains the scroll position.

    Source is managed by git. Fucking love git.

    Depending on what's needed and the complexity, I'll maybe use phing to build the project. If that's not needed, maybe some push hooks on git to manage a few environmental things. So for example, whenever I push to my master branch on my server, it'll run all the automation/live cleanup, backup the current state of the site, and then move the new branch in. Handy for quick rollbacks.

    I never touch the files on the live site. No ftp or quick and nasty edits.

    It might sound overkill, but once you have a template for automating certain tasks, it becomes one terminal command to do a whole pile of stuff.
  • David
    David
    Keeping Tom Happy Posts: 12,891
    There's definitely 2 types of front end dev emerging - those from a design background and those from a development one because fucked if I understood half of that
  • Coops
    Coops
    Professor Yaffle Posts: 5,976
    d*d wrote:
    There's definitely 2 types of front end dev emerging - those from a design background and those from a development one because fucked if I understood any of that

    .
  • Giraffe
    Giraffe
    toxic designer Posts: 9,798
    If this were a conversation at a table, I'd just be sitting back quietly nodding my head in silent panic.
  • bennyboy
    bennyboy
    Ah yo Boogie Down B-TownPosts: 3,756
    d*d wrote:
    There's definitely 2 types of front end dev emerging - those from a design background and those from a development one because fucked if I understood half of that

    Ha ha. Like a different world.
  • RockMeAmadeus
    RockMeAmadeus
    Banned Posts: 3,938
    I understood all of that, except I still can't get my head around css preprocessors and all that fancy css like less. Or static code minification. It sounds strange.
    Starbright wrote:
    That's just basic PHP rather than WP.
    Speed and the ability to edit a template once and all pages reflect it?
  • slate
    slate
    Senior Member Posts: 6,137
    I understood all of that, except I still can't get my head around css preprocessors and all that fancy css like less. Or static code minification. It sounds strange.


    Speed and the ability to edit a template once and all pages reflect it?
    Yeah back in the day would use shtml for the same reasons. Have blocks of code that apply to all pages, so that when editing needs to happen you change one file and not 50.

    Preprocessors are a simple concept really. You have different syntax that isn't native to CSS. The preprocessor takes the syntax and outputs it as real CSS which then drives the page. Minification then takes that file and compresses (in its simplest form removes all spaces and returns) it to save on page load. If you use something like codekit, this is all automated, hit save on your less/sass file, processes the CSS into another file, can minify it, and then refreshes your browser. Once you experience it, you don't go back.
  • Limbo
    Limbo
    Established Norm Posts: 27,224
    Indeed. If you are familiar with variables, you'll "get it" immediately. SASS is the bollocks.
  • pmek
    pmek
    Banned Posts: 9,297
    I understood all of that, except I still can't get my head around css preprocessors and all that fancy css like less. Or static code minification. It sounds strange.


    Speed and the ability to edit a template once and all pages reflect it?

    Exactly, although I'm not sure if you're testing me or genuinely wondering?
  • jamblo
    jamblo
    Tea Snob Posts: 5,566
    Limbo wrote:
    Indeed. If you are familiar with variables, you'll "get it" immediately. SASS is the bollocks.

    Did it take you long to pick up to a point you could use it as fast as flat CSS? I'm pretty "down" with variables... I've not looked into using SASSages properly yet.
  • pmek
    pmek
    Banned Posts: 9,297
    jamblo wrote:
    Did it take you long to pick up to a point you could use it as fast as flat CSS? I'm pretty "down" with variables... I've not looked into using SASSages properly yet.

    You'll code at the same speed or faster. you still use normal CSS, so anything else is an improvement. Definitely worth adopting!
  • jamblo
    jamblo
    Tea Snob Posts: 5,566
    So you just use it instead of colour, type size, widths, height, etc.?

    So you can set

    $blue = #0033CC;
    $red = #C00;

    then

    .var { color: $blue; }

    Is that the crux of it?

    (I realise I could just look this up...)
  • RockMeAmadeus
    RockMeAmadeus
    Banned Posts: 3,938
    slate wrote:
    Yeah back in the day would use shtml for the same reasons. Have blocks of code that apply to all pages, so that when editing needs to happen you change one file and not 50.

    Preprocessors are a simple concept really. You have different syntax that isn't native to CSS. The preprocessor takes the syntax and outputs it as real CSS which then drives the page. Minification then takes that file and compresses (in its simplest form removes all spaces and returns) it to save on page load. If you use something like codekit, this is all automated, hit save on your less/sass file, processes the CSS into another file, can minify it, and then refreshes your browser. Once you experience it, you don't go back.
    Are shtml and dhtml even used these days?

    Ok, so to use that I need to learn another way to code css, or I just do css, run it through some app and get a compressed file, and add some program on my server to uncompress the css when a browser requests the stylesheet?
    Starbright wrote:
    Exactly, although I'm not sure if you're testing me or genuinely wondering?
    Genuinely curious. I have some free time here and there and watch a few php lesson videos.
  • handcraftedweb
    handcraftedweb
    thought leader Left coastPosts: 6,615
    jamblo wrote:
    $blue = #0033CC;
    $red = #C00;

    then

    .var { color: $blue; }

    Is that the crux of it?

    That's the gist of it. Even better you can do things like:
    $bg-color: #ffff88;
    $header-color: darken ($bg-color, 10%); 
    
  • 2Dfruit
    2Dfruit
    Website Molester Posts: 3,321
    and other cool things like

    .border-for-all-elements {
    -webkit-border-radius:10px;
    border-radius:10px;
    -moz-border-radius:10px;
    }

    .any-element {
    background:red;
    .border-for-all-elements;
    }

    .another-element {
    color:blue;
    margin:10px;
    .border-for-all-elements;
    }

    edit: you'd get

    .another-element {
    color:blue;
    margin:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    -moz-border-radius:10px;
    }
    so you can update the "border-for-all-elements in one place and it'll "inject" all the moz,-webkit,border-radius values into the child class. Kinda like a php include.

    It gets even fancier. Its brilliant.
  • jamblo
    jamblo
    Tea Snob Posts: 5,566
    Blimey. Sign me up!
  • RockMeAmadeus
    RockMeAmadeus
    Banned Posts: 3,938
    Do html minification wizards do behind the scenes inter element whitespacing for you to save size but render with tabs and parent/child heirarchy if you view the source in browser?
  • subtlestarling
    subtlestarling
    New Old School Posts: 1,612
    Do html minification wizards do behind the scenes inter element whitespacing for you to save size but render with tabs and parent/child heirarchy if you view the source in browser?
    No.. Because then the browser would have to know where the tabs -should- have been and then output them in view source, and the lowest space way to do that funnily enough is to leave the spaces and tabs in.

    You could install some kind of html prettifier in your browser for view source.. maybe.
  • Limbo
    Limbo
    Established Norm Posts: 27,224
    The point is, you're removing every byte you can so that would defeat the purpose - and is a different tool... Look up streamliner (I think)
  • subtlestarling
    subtlestarling
    New Old School Posts: 1,612
    2Dfruit wrote:
    I've been using nodejs and npm for package management. I use grunt.js for automation and some nice front end workflow stuff. I'll have grunt tasks set up to watch for changes to php,html,less,coffee,js files etc. Each one will have a different tasks that runs when there's chanages made to it. So for html or php files, livereload will listen and do a page refresh. For less files, it'll compile to css, move it to the right place and do a soft refresh on the browser. THis is very handy as it doesn't refresh the whole page or the data you're working with. Also maintains the scroll position.
    Livereload always broke on chrome for me but this would be very useful. So you have a virtual machine running on the same machine? Do you have a different one for every website? And using grunt works but I have been using php scripts that either minify in php and then cache or run a nodejs script from php and move the result into the cache folder. Is there any reason you don't do it that way?
    2Dfruit wrote:
    Depending on what's needed and the complexity, I'll maybe use phing to build the project. If that's not needed, maybe some push hooks on git to manage a few environmental things. So for example, whenever I push to my master branch on my server, it'll run all the automation/live cleanup, backup the current state of the site, and then move the new branch in. Handy for quick rollbacks.

    Do you have any references for git hooks? I tend to make very small updates which makes using git for it feel like a waste of time, but maybe that isn't the best way to do it. Also on git what do you include and what do you ignore? Presumably you have some automation for launching with modified config files and SQL paths etc? I use bash scripts and sed but it's a fairly brute force way to do it and needs to be configured again for each cms.
  • thrills
    thrills
    Senior Member Posts: 397
    I was a bit hesitant to get on the SASS/Less wagon too, but I'm glad I did, it's really easy to use.

    Check out - Sass Basics

    Even if you just use variables and mixins to make your life easier. Other than that, your CSS doesn't have to change.

    And no need to worry with command line if it's not your thing. Prepos, LiveReload and CodeKit will all compile it for you.
  • RockMeAmadeus
    RockMeAmadeus
    Banned Posts: 3,938
    Or if you have a Tutsplus sub, there's a few courses on sass and less et al.
    No.. Because then the browser would have to know where the tabs -should- have been and then output them in view source, and the lowest space way to do that funnily enough is to leave the spaces and tabs in.

    You could install some kind of html prettifier in your browser for view source.. maybe.
    That's really interesting. I thought what I said was standard. This is what I was going by.

    3.2.5 Content models — HTML: The Living Standard - Edition for Web Developers

    That said I still don't understand how these processors minify the code and the browser still understands it. I thought there was only one way to write css or really two since there's format differences you can implement.
  • handcraftedweb
    handcraftedweb
    thought leader Left coastPosts: 6,615
    Format is meaningless in CSS and for the most part meaningless in HTML, it's just used to make it easier to read. That section you linked to just means whitespace is more or less ignored in many cases, and that means minifiers can remove excess whitespace without changing the semantics of the code. Basically minifiers just remove comments and excess whitespace.
  • RockMeAmadeus
    RockMeAmadeus
    Banned Posts: 3,938
    I see, but by format I was talking about... ex.

    x, x, x, x;

    top x;
    left x;
    right x;
    bottom;
  • handcraftedweb
    handcraftedweb
    thought leader Left coastPosts: 6,615
    ^I don't understand what you're saying/asking.
  • subtlestarling
    subtlestarling
    New Old School Posts: 1,612
    I think he means how minifiers will also optimise css selectors into short hand, eg multiple background properties into one background:.

    Minifiers work by using a lot of different techniques, shorthand selectors and removing whitespace are a couple. In javascripts case minifiers will often change all the variable and function names to a single character in order to use the least amount of characters possible.

    To be honest if you enable gzip you will get a huge boost in speed without any of the effort, this stuff really is one of the worst for diminishing returns. You end up shaving milliseconds..
  • handcraftedweb
    handcraftedweb
    thought leader Left coastPosts: 6,615
    I think he means how minifiers will also optimise css selectors into short hand, eg multiple background properties into one background:.

    Oh I get it. Are CSS minifiers smart enough to refactor it like that?
  • RockMeAmadeus
    RockMeAmadeus
    Banned Posts: 3,938
    Yes, that's what I was going for. Also I don't understand how zipping and compressing files on your server speeds up anything for the user. I mean, doesn't it need to extract and decompress too?
  • steveb
    steveb
    BitterHusk Original™ Järvenpää FinlandPosts: 24,035
    It doesn't compress the file, it compresses the file's contents. The text. It strips out unnecessary letters from descriptions and compacts instructions onto as few lines as possible.
  • Limbo
    Limbo
    Established Norm Posts: 27,224
    To be honest if you enable gzip you will get a huge boost in speed without any of the effort, this stuff really is one of the worst for diminishing returns. You end up shaving milliseconds..

    Agreed but it all counts.
  • subtlestarling
    subtlestarling
    New Old School Posts: 1,612
    @handcrafted:

    Sure, if you go to CSS Compressor, Free CSS Compressor and CSS Compression Tool and enter
    .test {
    background-color:#eee;
    background-position:center;
    }
    
    When you switch on optimise shorthands you will get
    .test{background:center #eee;}
    
    Yes, that's what I was going for. Also I don't understand how zipping and compressing files on your server speeds up anything for the user. I mean, doesn't it need to extract and decompress too?

    Browsers support extracting gzip on the fly, and have done since around IE6.

    Which browsers handle `Content-Encoding: gzip` and which of them has any special requirements on encodinq quality? - Webmasters Stack Exchange

    It's normally done with an apache setting, no php required although it is possible to do it that way.
  • Limbo
    Limbo
    Established Norm Posts: 27,224
    You have to be careful with minifiers that adapt your code. The reduction above could break sprites.
  • subtlestarling
    subtlestarling
    New Old School Posts: 1,612
    Limbo wrote:
    You have to be careful with minifiers that adapt your code. The reduction above could break sprites.
    True, was just pointing out that it's possible, personally I'm happy with concatenating files, removing whitespace and line breaks when it comes to CSS
  • 2Dfruit
    2Dfruit
    Website Molester Posts: 3,321
    Livereload always broke on chrome for me but this would be very useful. So you have a virtual machine running on the same machine? Do you have a different one for every website?

    Are you using a program to do the livereload stuff? Those programs always crashed for me. The livereload extension isn't the problem. It's the program. The extension just listens on a specific port and refreshes when it's pinged. Using the command line stuff (grunt-contrib-watch), I don't have any issues. You still need the chrome extension if you want to reload though.

    Yeah, I run ubuntu virtually on windows. I would go full whack with linux if it supported the adobe products. So I just have to make do and create a shared folder.

    I don't use a different machine for each, no. Most of the sites I work on don't need a whole lot of customization on the server side. It's probably not a bad idea if you've got lots of non-default php extensions or customizations running and you need to mimic the server environment. That's when I'd do that. I've just started using Linode, so I can see the benefits in doing this.

    And using grunt works but I have been using php scripts that either minify in php and then cache or run a nodejs script from php and move the result into the cache folder. Is there any reason you don't do it that way?

    Ok so caching stuff is a different issue. That would be part of your application.
    Grunt isn't use on an application level. It's more for doing the repetitive front end stuff. Minification, concatination, reloading, js unit testing etc.

    Minifiying it one way or the other, it's all up to you. I just find that grunt integrates really nice into my front end workflow. I come in in the morning, navigate to my work directory, open the terminal and type "grunt". Then I forget about it.

    Also, how are you using php to do your minification? Just be reloading a script or? If you're using grunt with contrib-watch, you'll get feedback if your files are compiled with errors. I would assume the php minification would just fail silently?
    Do you have any references for git hooks? I tend to make very small updates which makes using git for it feel like a waste of time, but maybe that isn't the best way to do it.

    It's worth it. Check out Git - Git Hooks
    Also on git what do you include and what do you ignore? Presumably you have some automation for launching with modified config files and SQL paths etc? I use bash scripts and sed but it's a fairly brute force way to do it and needs to be configured again for each cms.

    It depends on the project really.

    Most frameworks these days don't need heavy customization to move from two identical environments. It's usually contained within a config file. Then you'd set your enviromnent based on things like the ip. So if the site is running on 127.0.0.1, it'll use the local config variables, but if it's 123.123.123.1 it'll use staging or 123.123.123.2 it'll use live settings. This will include db settings etc.

    I'll ignore things like cache folders and the like. I'd use phing to build the thing if needed.
  • subtlestarling
    subtlestarling
    New Old School Posts: 1,612
    Thanks for all that, and the link. Do need to do more in the way of unit testing...

    With php less compilation (same as how my thumbnails get generated) it will wait for the first person to come along and load the page, then if there is no cached file &/or the original less file hasn't been updated it will compile and serve on the fly. When it breaks it leaves a fairly specific error from the compiler in the log, so for instance I was debugging a @p:@v (a function that lets me use a variable for the property name) yesterday and trying various things while using tail -f to see if it worked or created another error. It's not instant as you have to reload the page but plugged into livereload it would be pretty much the same thing.

    Also, what exactly is phing? I had a quick look but it I couldn't figure it out in an oh you would use it for XYZ kind of way
  • Limbo
    Limbo
    Established Norm Posts: 27,224
    Are you using a program to do the livereload stuff? Those programs always crashed for me. The livereload extension isn't the problem. It's the program. The extension just listens on a specific port and refreshes when it's pinged. Using the command line stuff (grunt-contrib-watch), I don't have any issues. You still need the chrome extension if you want to reload though.

    The nice thing I've found about Livereload (apart from it's never crashed for me) is the fact you can steer clear from terminal altogether AND have SASS/Compass/LESS compiled without having to faff. All it takes is a line of JS in the head (now part of my framework) and you're away. Also don't forget it works with iPad, iPhone and IE too - so, you can have an array of devices/browsers open and know they are all showing the latest site view.
  • David
    David
    Keeping Tom Happy Posts: 12,891
    does livereload play nicely alongside codekit?
  • Limbo
    Limbo
    Established Norm Posts: 27,224
    Livereload doesn't really do anything inside other apps. It's a snippet of JS in the head of your file - all the hard work's done inside the browser. As for SASS and that - it just watches folders and can compile changes if you ask it to.
Sign In or Register to comment.
© Copyright 2003 - 2016 - DT