Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
Like Tree1Likes

Thread: Hi from Australian Designer

  1. #1
    Junior Member adam_m's Avatar
    Join Date
    Feb 2017
    Location
    Tasmania, Australia
    Posts
    11
    Member #
    56194
    Liked
    1 times

    Hi from Australian Designer

    Hello everyone

    Im a 50 yo Designer from Australia.
    Ive been involved in web design and development for over 17 years, mainly in e-learning related areas (first 10 years), but for the past 8 or so years Ive focused mainly on design as a part time freelancer. In the early days pretty much everything I built was done using 'Dreamweaver'. In later years I moved to content management systems, mainly Joomla.

    I have no real HTML5 experience, apart from using 'mobirise', and Ive come here to get some help on finding the best ways to create 'adaptive websites' . Best software, templates etc.

    For design I use Photoshop and want to find the best way to get designs from Photoshop into a an adaptive HTML5 format.

    Thanks in advance.

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Oi oi oi! I like your football, even though I don't fully understand it and can only find it on TV occasionally. If they ever brought AFL to North America, the NFL would be toast.

    To answer your last question first, "you really can't". When you lay something out in Photoshop, you lay it out for a specific set of dimensions (in particular, the width)...when you lay out a web page that is to be responsive, you lay it out for as many browser widths and if necessary heights as possible. About all you can do with Photoshop is extract the images/backgrounds for web purposes.

    Software? Pretty much any text editor will do the trick, although one with syntax highlighting (e.g. Notepad++, Visual Studio Express) will make your life much easier and won't wreck your code.

    Templates? Templates are like prescription drugs. Stay away from them unless you absolutely must take them (and you usually don't have to), take the bare minimum dosage possible, and be very aware of the side effects.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Junior Member adam_m's Avatar
    Join Date
    Feb 2017
    Location
    Tasmania, Australia
    Posts
    11
    Member #
    56194
    Liked
    1 times
    Thanks Mate

    I would have thought there would be something that could take a 'template' from Photoshop and 'Bootstrap it'
    Because you can create HTML from Photoshop, by slicing it up and exporting as HTML. Then surely there is some kind of converter that goes from HTML to Bootstrap ?

    Im a designer, not a coder, so a 'text editor' is out of the question for me

    Maybe I just need to do the design then hand off to a 'coder' ?

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Bootstrap is just a CSS framework. You can't really convert from HTML to it...it just styles the HTML (and it's pretty bloated).

    Yes, you can export to HTML. The problem with this approach is that the resulting HTML is bloated and quite often archaic. It won't do a lot of the adaptive-type stuff.

    From what you're explaining, you're more of a graphic designer than a web designer as such. There's nothing wrong with that either, but web designers...or as they seem to want to be known these days, "front-end web development UI/UX guru expert demi-gods"...tend to immerse themselves in the HTML code a bit more. If you wanted to hand off your design to a "coder", the issue that you have is that you're handing the coder a file with fixed dimensions and expecting the coder to figure out what to do for other scenarios. Simple example: if you hand off a layout that is 1200 pixels wide, the coder then has to figure out what to do for browser widths that are wider than 1200 pixels, and more importantly the smaller ones. I'm working on a project with a client of mine where I just started figuring out what to do with the 3rd of 3 such PSD files...and from the standpoint of a web developer (as in someone who deals with e-commerce programming, database development, etc.), it's a nightmare for this reason. You have to guess at what the designer might have wanted.

    What I would suggest you do, if you're going to go down this road, is to create your designs in several common resolutions. The widths are more important than the heights, but you should get a rough idea from this page:

    Screen resolution statistics

    Personally, I'm in the #2 bracket (23" monitor).

    EDIT: this is my primary screen. My secondary screen is my 14.1" laptop (#1 resolution). I also have an iPad for testing purposes (which covers the 1024 x 768 and 768 x 1024) resolutions) and a Samsung Galaxy Core 2 smartphone with a 480 x 800 pixel screen (so I can view things either 800 x 480 or 480 x 800). For good measure, I have a smart TV that I occasionally look at things on (1920 x 1080).

    I'm one guy. I have all of those devices and I'm one guy. I'm not even factoring the other laptops, tablets, cell phones, and smart TVs in my house belonging to others. There are many, many people that are similar in nature to me.
    Last edited by TheGAME1264; Feb 25th, 2017 at 09:02 PM.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Junior Member adam_m's Avatar
    Join Date
    Feb 2017
    Location
    Tasmania, Australia
    Posts
    11
    Member #
    56194
    Liked
    1 times
    Sorry for the confusion, In Australia a 'Web Designer' is basically a Graphic Designer for the web. And a 'Web Developer' is a coder or a back end developer.
    Generally you specialize in one or the other because 'Design' is more 'Right Brained' and 'Coding' is more 'Left brained'. Someone who does both is generally weaker at one or the other.

    Many years ago I was developing 'Apps' before mobile phones were capable of displaying apps. Well they were just webpages really. I was developing e-learning resources that would resize to suit all resolutions, but used a separate css file to convert the content to fit PDA's (remember the old HP PDA's)

    So the HTML file would detect the device, then load the appropriate css file.

    Perhaps I will need to revisit this kind of approach ?

    Not being proficient with HTML5 and Adaptive Templates, Im not sure what is possible and what isnt. But I thought once you had a 'large' image in an 'Adaptive Template' , it would resize automatically to suit whatever resolution ?

  7. #6
    Junior Member adam_m's Avatar
    Join Date
    Feb 2017
    Location
    Tasmania, Australia
    Posts
    11
    Member #
    56194
    Liked
    1 times
    My resolution is 5040 x 1048, lol (tripple 20inch dell widescreens)

  8. #7
    Junior Member adam_m's Avatar
    Join Date
    Feb 2017
    Location
    Tasmania, Australia
    Posts
    11
    Member #
    56194
    Liked
    1 times
    So if I use something like Screenfly / Test Your Website at Different Screen Resolutions to simulate sizes, and use my folio page, http://adammaxwellcreative.com/ (not the best example because its a single page) but anyway , Its an adaptive template.
    It resizes the images to suit each device.

    So what you are saying, is this is not the best way to do it ?

  9. #8
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    That's not a bad way to do it. The issue is with your WYSIWYG editor, though. They're okay for simple things, but you can't build more complex stuff with a WYSIWYG editor exclusively. Typically, your best approach is to code because you can optimize it for speed and for "greater responsiveness", if you will.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  10. #9
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Chrome's dev tools can simulate pretty much anything you want, even a screen larger than the one you're on (It just scales the view to fit). It comes preloaded with profiles for most of the common sizes below a 1080 screen. You can add whatever sizes and even user agent strings. That's what I use. The only thing it doesn't help with is browser to browser differences. In other words, if something is going to break on Firefox, you won't be able to test that even though you could use FF's user agent string.

    Side note: actually had that happen recently. Gecko reads scrollTop from document.documentElement rather than document.body, as Webkit/Blink do. Thus everything that I had looking at scroll position, which was enough that I had to use requestAnimationFrame because just attaching to the scroll event was making the browser drag, didn't work in FF.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  11. #10
    Junior Member adam_m's Avatar
    Join Date
    Feb 2017
    Location
    Tasmania, Australia
    Posts
    11
    Member #
    56194
    Liked
    1 times
    I think top quality websites really need to be built by a 'coder' and 'a designer'
    I know the design is just a pretty wrapper, and the important stuff is done in the coding ... but for a site that works well and looks good, its a team effort
    TheGAME1264 likes this.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:43 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com