3 Replies Latest reply on Dec 13, 2013 3:41 PM by coyqueue

    Modern Adobe web dev workflow

    coyqueue Level 1

      Hello! I want to get back to web development, after a few years' hiatus writing network server software. The tools, supported standards, and desktop/mobile targets have all changed rather drastically. I realize there isn't going to be "One True Way", that different projects will warrant different tools, and that there are loads of tutorials available online. In fact, it's because there's so much information online that I'm coming here for advice: I'm asking for the community's help to suggest a good workflow or two for me, based on the following:


      About me: My main expertise is with software development, including server-side code. I am also quite proficient with print design, good with InDesign, Illustrator, Photoshop, and support tools. However, while I've done some simple things with Dreamweaver (and GoLive before that), I have only basic Dw skills. I've hand-coded or generated the vast majority of the HTML/CSS/JavaScript, but would like to automate or simplify a lot of that.


      My current needs: I'd like to be able to make moderately complex web sites (with mobile support). I'd like to avoid writing/modifying the same old routine cross-browser code for page layout, rollovers/sprites, CSS, rounded corners, navigation tabs, menus, etc. The less manual image exports and/or slicing I have to do, the better. I don't want to lose the ability to go into the code to extend or tweak what's there (meaning, the generated code doesn't have to be awesome, but needs to be at least somewhat sensibly written). Most of the time, the sites will simply be published online, and serve up dynamic content via a RESTful API. I'll probably want to give PhoneGap a try at some point, though that is a lower priority.


      So, which tools (and in which order) would you suggest, given my existing knowledge and desired end result? I realize there will be a few options, but as long as you can include a few words on why your suggested workflow works well, I will be most grateful.

        • 1. Re: Modern Adobe web dev workflow
          mhollis55 Level 4

          You should purchase the latest version of Dreamweaver, which will help you in the creation of Responsive websites. Responsive websites started coming into fashion about three years ago and will work as well on cell phones and tablets as they do on desktop browsers. PhoneGap is something you should jettison from your consideration due to that.


          You write a website once, it works for all platforms. There is no need to develop a  separate mobile site.


          As to reusable code, Dreamweaver supports code snippits. Need to describe something or insert rounded corners in CSS3? No problem, insert your code snippit, reuse the code you developed some time ago and you're all set.


          Cranking out lots of pages: Dreamweaver makes it easy if you wish to use the Dreamweaver templates. These are HTML templates that will allow you to write your navigation, header and footer once and have that appear "automagically" on all pages you create based on that template. Changes to your navigation, footer, header and any other element you create that is not editable in the template are updated whenever you update your template.


          Additionally, since you know php, you can use server-side includes to make areas of a web page universal. Downside of doing a site with server-side includes is that you must have a testing server to actually see what you're doing and that you need to flip back and forth between Dreamweaver's Live View and Live Code to see your work (alternatively, you can have a browser open and refresh that every time you save.


          You should learn the general ideas involved in HTML5, even though that specification is not adopted yet. HTML5 has more semantic elements that will help you create repeatable code that allows you to handle your style sheet, as well as blast through your HTML creation much faster. I find that HTML5's biggest advantage is the semantic elements that go beyond basic <body> <head> and <html>. With HTML5 you have <section>, <article>, <header>, <footer>, <aside> and so on. When you close these elements, you don't have a generic </div> closure—you can see what you're closing.


          Don't forget that, for older browsers, you'll need to insert the HTML5 Shiv in the <head> region of your website if you're using these new selectors. Please see: https://code.google.com/p/html5shiv/


          When I am developing, I generally have Dreamweaver and Photoshop open at the same time, as well as two or three dissimilar browsers. I also check for compliance with the W3C Validation Tool: http://validator.w3.org/


          That should get you started.



          • 2. Re: Modern Adobe web dev workflow
            Nancy OShea Adobe Community Professional & MVP

            Look at Photoshop for creating your design comps and web images.


            Look at Edge Reflow for responsive layout. 



            Bring that project into DW for coding.


            For the dynamic side of things, look at DMXZone's extensions for DW.



            Or, if you're not already using  it, CodeIgniter



            Nancy O.

            1 person found this helpful
            • 3. Re: Modern Adobe web dev workflow
              coyqueue Level 1

              Many thanks to you both for the great replies. Simple, relevant advice.

              1 person found this helpful