1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

how to create Website Template in Photoshop..??

Discussion in 'HTML & Website Design' started by j.1819, Jun 15, 2015.

  1. #1
    need help i want to create a template please suggest me some tutorial sites for this....
    SEMrush
     
    j.1819, Jun 15, 2015 IP
    SEMrush
  2. bussw83

    bussw83 Member

    Messages:
    144
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    33
    #2
    Hi, I do psd templates, I have found great video tutorials in Udemy and Youtube :)
     
    Last edited: Jun 16, 2015
    bussw83, Jun 16, 2015 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,975
    Likes Received:
    1,635
    Best Answers:
    233
    Trophy Points:
    515
    #3
    Photoshop is NOT a design tool, no matter how many ignorant halfwit artsy fartsy types and outright scam artists claim otherwise. It's called PHOTOshop for a reason, it's meant for pushing pixels around, not for creating layouts, certainly not for creating anything elastic in design, and dicking around drawing goofy pictures before you have semantic markup, working elastic semi-fluid and responsive layout created in CSS is just plain back-assward.

    Take your content or a reasonable facsimile of future content, put it into a flat text editor in a logical order as if HTML didn't even exist -- then mark it up semantically -- "semantic markup" being a sick euphemism for "using HTML properly" commonly used so as to avoid offending the folks who have NO business making websites in the first place -- Said markup should be built with ZERO concern for the final appearance since if you choose ANYTHING in your HTML for what it looks like, you are doing it all wrong. You then bend that markup to your will with CSS (adding DIV and SPAN at this point when and ONLY when needed) to create your layoutS -- YES, PLURAL.

    Fonts should be declared in %/em with any width/padding declarations also in EM so the layoutS are elastic -- auto adjusting to the users font size preference be it browser or inherited from the OS. The layoutS should be semi-fluid auto-expanding/shrinking to fit the display but with a maximum width so really long lines of text don't become hard to follow -- once you have those stepping stones you then make it responsive; responsive layout simply being the next logical step in accessible design which is why bypassing all the good practices of the past decade and a half is the road to failure. Then and ONLY then should you go into your paint program of choice to make presentational graphics to hang on the working layoutS -- IF ANY given how CSS3 is increasingly making the need for extra graphics irrelevant.

    There is MUCH more to a website and design of one than what it happens to look like on a screen; the entire point of HTML is device neutrality and the inability of some people out there to separate their overprivileged perfect screen experience of what they're seated in front of from what everyone else might have is what's pissing all over the functionality of the web of late. Search engines don't have eyeballs, many users aren't sighted, the fluidity needed for mobile usually isn't compatible with the "perfect pixel widths" PSD jockeys vomit up. There's a reason fixed metric fonts (pixels) are an inaccessible mess. There's a reason fixed width layouts are inaccessible garbage. There's a reason full width design elements are rubbish!

    There's a reason the Web Content Accessibility Guidelines say "don't do that!"

    ... and these are all concepts you are NOT going to implement or have dicking around drawing goofy pictures of what a website MIGHT look like in Photoshop. ANYONE telling you to "design a website" in Photoshop needs a quadruple helping of Sierra Tango Foxtrot Uniform as they do not know enough about HTML, CSS, accessibility guidelines, emissive colourspace, or any of the dozens of other things a website should be to be designing but two things for others.

    Screwing around in some paint program and calling it web design and then expecting someone to turn that PSD into a website is akin to hiring an oil painter to design your new 80 floor skyscraper then hiring a contractor who's never built anything taller than a two story home to build it. It is an ignorant back-assward approach to site development that is guaranteed to alienate potential visitors and result in a buggy, bloated, slow loading inaccessible train wreck.

    This is of course supported by the big success stories of the web -- many of them being quite ugly but seriously look at eBay, Amazon, Facebook, Google -- do ANY of these actually look like they have some artist spanking it on a tablet in a back room working on their designs? Hell, you want to make most of the "artists" with the giant pair of brass to call themselves designers recoil in horror? CRAIGSLIST.

    Simple fact is there's a LOT of stuff you can do in a paint program like Photoshop, the GIMP, Pixel, PSP, etc, etc that have NO damned business on a website in the first place. ANYONE telling you to vomit up a PSD and call it design simply doesn't know enough to be flapping their gums about it. EVEN if it has for some reason become an industry-wide practice, you have to remember this industry is filled with morons, fools and outright snake oil doctors. I have NEVER seen a website that started out with someone dicking around in Photoshop that was worth a flying purple fish from a useability, functionality or accessibility standpoint. -- no matter how pretty the result if it's useless to visitors what the hell good is it?

    Semantic markup of content of value bent to your will with CSS. That's design. Dicking around in Photoshop? That's graphic art, not design.
     
    Last edited: Jun 16, 2015
    deathshadow, Jun 16, 2015 IP
  4. RezzRaygun

    RezzRaygun Member

    Messages:
    28
    Likes Received:
    7
    Best Answers:
    1
    Trophy Points:
    38
    #4
    There is not much more I can add to this but to perhaps illustrate this a bit further. Ten years ago when I was working as a web designer, I used to start out designs in Photoshop and this was a common practice. Back then though, CSS was was only just becoming a 'thing', people were even still using frames. Flash websites were still the bees knees and 'web 2.0' hadn't become a buzz word yet. Everything was a fixed solid layout and there was no CSS3 styling for corners, gradients or shadows.

    Starting layouts in Photoshop made a bit more sense then, because in order to have a professional looking website, it required images for corners, gradients and the overall look, which was achieved by working out in photoshop the exact dimensions, cutting images out and placing them into the HTML.

    Web design has evolved tremendously since then and a comparison could be the difference between building a solid structure from brick, with its defined rooms and dimensions, to a structure made from some sci-fi liquid metal that morphs, changes and reacts to its environment and interaction.

    This means that the way we approach web design now is from a completely different perspective, not as a solid block by block physical structure, but more like a philosophical idea of parts that work together and compliment each other.

    An experienced web designer does not work from a visual template, which is likely to be more of a hindrance than an asset, and even big software like Dreamweaver can be more in the way than use. I stopped using Dreamweaver years ago because all I was using was it's code view and hard coding everything.

    There are a couple of problems that you might encounter if you're not experienced.

    A) Being able to visualize the end result and needing a visual aid. For this you may actually be better off keeping a notepad on your desk and roughly drawing things out

    B) The client insists on a visual representation of the site before it is made. I haven't worked with clients for a good few years but I assume this is still a common thing. The problem I always had was that at this stage when you show them a design, they suddenly become backseat designers without any real understanding of what your showing them, the design process and what goes into it behind the scenes.

    You could mock something up in Photoshop, or Indesign which would be better, though it probably makes more sense these days just to build the core of the site as design elements can be changed easily through CSS to show the client variations.
     
    RezzRaygun, Jun 18, 2015 IP
    Phil S and malky66 like this.
  5. bussw83

    bussw83 Member

    Messages:
    144
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    33
    #5
    Hi I hope you didn't get offended...

    Is really sad to see certain person not able to maintain his emotional baggage and anger out of the picture when helping someone, I will leave it like that for respect to you and your post.

    photoshop and other graphic softwares are in deed great tools for web designing , there are beautiful and stunning sites that wouldn't be possible without a photoshop or other design tool, that's why many people work with a creative designer or graphic artist first and then give the template to a good coder to bring it to life.


    http://www.byjules.com/

    http://www.junglekidsleeds.co.uk/

    http://questellfoundation.org/

    And there are even more amazing examples out there.

    If you know how to do both things (code and be creative) that is even better. Also a psd template can be created and edited quicker (10 or even 5 min) that saves a lot of time when you are showing your customer how the page would look like, because in real life customer's vision of the page is not what you come out with lol. And then you may have to waste your time starting and changing things over but with a PSD will take you a few minutes to come out with something else.


    A PSD template can protect you legally too. Proving that the customer aproved that design.


    If you have strong web layout knowledge then you will have a good idea of how the website will look in real life, pixels can be easily converted to % and em.

    Some people get stuck in their squared ideas of how a website should be done, but every year new methods are discovered and improved. But let's face it, many designs nowadays will not be possible without graphics design aid html has limitations that's why we have javascript, php etc.

    I hope you didn't get discouraged, don't let someone tell you that you will not be a great designer just because you are not doing things the way he does. Many roads lead to Rome.

    Many of the biggest and more important web design companies and senior designers work with PDS templates and they are doing great because they can combine good coding with a great design only possible with photoshop etc. They save time and resources at the same time. And if you get really amazing you can make a lot with it.

    If you are a creative designer it would open doors for you. Do what you think that will work for you.

    Good luck :)
     
    bussw83, Jun 18, 2015 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,975
    Likes Received:
    1,635
    Best Answers:
    233
    Trophy Points:
    515
    #6
    Unlikely, that's pretty much your department and based almost entirely on your ignorance of web standards and accessibility norms.

    Oh yes, because I am SO alone in this thinking -- hence the four people liking in agreement and RazzGun providing an example of why it's flawed thinking.

    The ONLY way you could say something like this:
    Is if you don't know enough about HTML, CSS, content, accessibility guidelines, accessibility minimums, functionality or usability to be flapping your trap on the subject!

    Let's look at your 'examples':

    Setting aside the disastrously bad image encoding and eyesore artifacts, that page is a STUNNING example of the "Oh you need accessible design? PISS OFF!" attitude common to PSD jockeys who again have ZERO business making websites for anyone.

    Images for text with no graceful degradation, fixed width non-responsive layout, illegible colour contrasts, absurdly undersized illegible fixed metric fonts -- if that's your idea of a good site, you don't know what a good website is; and that's BEFORE we talk the absurdity of it sucking down 664k in 59 separate files... half that being 341k in 15 files of scripttardery on a page that by all appearances shouldn't have more than 10k of JS in ONE file. Even bigger laugh being all the scripttardery when of the two things on the page that would take scripting to accomplish, one of them is built with flash! (aherpaderp)

    That's a STUNNING example of some site owner being scammed by some arsty fartsy designer who made something pretty -- that is ultimately USELESS to site visitors. Said "designer" needing to spend some serious quality time learning about emissive colourspace, reading up on the Web Content Accessibility Guidelines, learning about things like responsive and elastic layout, and taking some time to learn about interface design from places like NNGroup.

    I pity that site owner. Particularly since I can BS the prices since it's dumb enough to send information client side and rely upon it for functionality that has no business being trusted there. So ridiculously vulnerable to cracking you'd almost think it was relying on Coldfusion... OH WAIT!!!

    Another STUNNING example of "WCAG, What's that?!?" in terms of design -- while this is VERY pretty and attractive, it's an accessibility nightmare and hodge-podge of design ignorance -- filled with things that probably shouldn't be done on a site for kids. Seriously, if you don't know what's wrong with 11px as a font size, STOP MAKING WEBSITES!!!. Images for text content that you might actually want people without images to have access to (like opening times, admission prices, etc) or to be easier to edit/maintain since those may change... fixed size design elements -- It REEKS of being sleazed together by a graphic artist who didn't know enough about what a website is to be drawing jack **** for anybody!

    Figure in the MINUTE PLUS pageload thanks to a 2 megabyte total fileszies and 49 separate files, utter and complete lack of semantic markup, and you have a usability and functionality disaster that reeks of "accessibility, what's that?" -- and to be frank should be tossed in it's entirety.

    Many of the design concepts used there being entirely typical of things that can't be put on a website if you care about accessibility, graceful degradation, usability and sustainability!

    This is the only one even remotely approaching sane design... but again the pixel metric fonts and fixed width design are basically telling users with accessibility needs to go screw themselves. Biggest faults are the fixed size header and menu, fixed menu in the footer and of course the lack of elastic, semi-fluid or responsive design. Naturally under the hood it's a train wreck of ineptitude where whoever coded it doesn't know enough about HTML to be doing so, but of the three this is the best of them; unfortunately that's like being the best in a shootout between a 1981 Reliant Robin, a 1987 Yugo GV built for the North American market, and a 1975 Trabant. (laughably the winner of that would be the Reliant)

    If that's your idea of amazing, you don't know enough about websites to be flapping your gums on the topic. Those are some of the most useless fat bloated steaming piles of manure I've seen on the web. The developers behind them being so ignorant of what a website is, how to build one, what HTML is for, and all the different ways people actually access websites that they have -- as I keep saying about this type of asshattery -- ZERO BUSINESS making websites.

    Hence why the whole dicking around in Photoshop approach might as well be the "designer" giving a giant middle finger to anyone who isn't on the magical perfect combination of display size and resolution the PSD jockey happened to be seated in front of.

    You want to know why I'm so vehement and reactionary about this crap? THERE IT IS. It's the natural reaction to "designers" of rubbish like this basically telling large swaths of potential users to go plow themselves!

    That you even TRY to defend this ignorant halfwit NONSENSE shows that you don't know enough about what websites are or how to build them to even be posting about it!

    Do us all a favor and read/comprehend these BEFORE you keep flapping your yap in ignorance!
    http://www.w3.org/Style/CSS/specs.en.html
    http://www.w3.org/WAI/intro/wcag
    http://www.nngroup.com/articles/

    From what you've said in your threads so far YOU DO NOT KNOW ENOUGH ABOUT WEBSITES TO BE BUILDING AN INFORMED OPINION!

    But of course you aren't going to understand half of what I said, and then will probably have the giant pair of donkey brass to call my statements stupid just because you cannot grasp them. The concepts are simple -- accessible colour contrasts, accessible font sizes and metrics, graceful degradation, semantic markup -- if you don't know what that means or think that's "incomprehensible gibberish" as you did in your other thread, you may want to take the time to learn what they mean instead of going all crybaby "wah, wah, wah, iz nots!"
     
    Last edited: Jun 18, 2015
    deathshadow, Jun 18, 2015 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,975
    Likes Received:
    1,635
    Best Answers:
    233
    Trophy Points:
    515
    #7
    I was gonna leave it at that, but I noticed something else:

    Since there is NO fixed relationship between the two, how does that work exactly? Oh WAIT, IT DOESN'T!!! Or did you buy into that stupid 62.5% lie BS?

    One of the entire reasons to use % or EM font sizes with EM widths,paddings,etc is that the relationship between em and px is NOT fixed. EM is based on the default font size be it set manually in the browser or inherited from the OS -- and *NEWS FLASH* that size is NOT always the same. A great many users and OS start out with a different size than the 16px many people just happen into out of it being the default in Windows and OSX. It is quite often changed on purpose as display pixels per inch climbs while display size does not -- and even back 20 years ago people were changing it before we had font smoothing to run higher resolutions without jagged fonts, or to address poor vision.

    Sure, MOST visitors are going to have VGA/16px/100%/96dpi/Windows XP & earlier "normal" / Win Vista & newer "small" as their default, but that ignores the ENTIRE reason the WCAG says to use EM's -- The laptop I'm on right now is at 8514/20px/125%/120dpi/XP "Large"/Vista "Medium"/WhateverTheyreCallingItThisWeek as is my workstation, that means at the start on BODY 1EM would be 20px, not 16px. My Media center is set to 24px as the default, 150% the 'normal' amount. I've got a Sun Workstation down in the garage that starts out at 72dpi, which would be 12px as it's default. (to go with it's 1152x800 21" CRT).

    The whole "62.5%" lie is ignorant nonsense spouted by people who failed to grasp what EM are, or why we're supposed to be using them. (So users aren't stuck diving for the zoom). Laughably, said lie was instigated by some dipshits working on Safari in it's early days who didn't know **** about **** or how other browsers worked.

    Converting between %/EM and Pixels? 100% fairytale bull showing utter and complete ignorance of what EM mean, are for, or why they should be used! 1EM could start out as ANY number of pixels, 8, 12, 14, 16, 20, 24, 48... and that's going to INCREASE in probability and range now that 4K displays are a reality and coming in increasingly smaller sizes. (just as retina has made 2560 commonplace in sub 10" form factors!)

    Again, learn what you are talking about before you start yapping.
     
    Last edited: Jun 18, 2015
    deathshadow, Jun 18, 2015 IP
  8. bussw83

    bussw83 Member

    Messages:
    144
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    33
    #8

    Lol um... yeah... woo woo woo...blah blah yackity smackity
    type all the bibles nonesense you want but nothing that I posted there is wrong... many fantastic designs can be possible thanks to great designs only possible with photoshop. As I said pixels can be converted in % and em.

    Maybe you can't do it but it is possible to code perfectly a psd template. I do it perfectly with my customers. There are many senior designers and well known bussiness that do it for the reasons I stated before for the girl that asked.

    Many charge for creating the design and then another amount to code it.

    Keep ranting if you want but you won't change that.

    No I don't get it but I am really over your nonesense I don't get how can you use this user's post for your venting...
     
    Last edited: Jun 18, 2015
    bussw83, Jun 18, 2015 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,975
    Likes Received:
    1,635
    Best Answers:
    233
    Trophy Points:
    515
    #9
    HOW?

    Most likely your system, 1EM default == 16px
    System I'm on right now, 1EM default == 20px
    My Media center, 1EM default == 24px

    There is NO fixed relationship you can use to calculate it reliably. That you think there's a conversion just further shows your ignorance on what ANY of this even means. JUST as your examples of design show an ignorance of what websites are even supposed to be or what accessibility is.

    EVERYTHING you've posted on these forums is wrong, and ignorant. That you don't seem to realize it just further shows how ignorant you are of web technologies.
     
    Last edited: Jun 18, 2015
    deathshadow, Jun 18, 2015 IP
  10. bussw83

    bussw83 Member

    Messages:
    144
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    33
    #10
    For example if your layout grid is 1280 x 970px and you have a content div that is 900px

    then it would be: 900*100/1280 = 70.31%

    900: div's width
    100: 100%
    1280: your grid or screen resolution

    From pixels to ems is simple there is already a table

    [​IMG]


    There are also many pix to em calculators online. See?
    Of course this works fine to who knows how to do it. When did I post something wrong and ignorant?
    Oh you mean on the post when I state clearly that I was a wordpress wordpress beginner looking for help and you stick you nose without reading in a resolved question?

    So go ahead haha, keep going with your trolling we are seeing who is really the ignorant here lol :)
     
    bussw83, Jun 18, 2015 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,975
    Likes Received:
    1,635
    Best Answers:
    233
    Trophy Points:
    515
    #11
    Well, how about RIGHT THERE -- that chart is bull because EM is not fixed to pixels -- EVER... well, unless you do something REALLY stupid like declare font-size in PX on <body> -- Much less % is based on parent container for width/height but is based on EM for everything else so that whole "screen ratio" nonsense you posted doesn't even apply.

    The machine I'm on RIGHT NOW, 20px == 1EM... the machine sitting across the room from me 24px == 1EM. That 16px = 1EM line? 100% grade A farm fresh fiction COMPLETELY missing why you are even supposed to use EM's in the first place.

    PT is not a fixed relationship EITHER, since 12pt would be 50 pixels on a 300dpi output device; Both IE and FF obey PT on the system metric (OS font size) so while sure, at 100%/small/VGA fonts you'd get 16px == 12pt, on this system 20px == 12pt.

    THE RELATIONSHIP IS NOT FIXED, AND SHOULD NOT BE TREATED AS FIXED!!!

    Let's use one of my older sites as an example:
    http://www.ewiusb.com

    Methodologies are a bit outdated as that was the first site I ever added responsive design to some six or seven years ago, but its holding up fairly well. Part of why it's not splitting at the seams was it' non-responsive predecessor was already elastic and semi-fluid with semantic markup, so making it responsive was simply an easy step and a few dozen lines of code. This is because responsive layout is in fact the next logical step in what we've been told are good design and development practices for some 17 YEARS that the PSD jockeys still willingly and willfully ignore, mock, or just plain come up with lame excuses to try and dodge.

    The site was built ELASTIC, everything declared in EM's where possible. (basically only place pixels are used for fonts is where there's a image interaction like on the menu or behind gilder-levin, and that's likely changing in the next version)

    This is the site at the common default 16px == 1em.
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbComNormal96.jpg

    This is the same site at 20px == 1em, aka "Windows Large Fonts" in XP/earlier, "Windows Medium" in Vista/Newer, or even "8514 large" on Windows 3.1 if you really care to go back that far:
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbComNormal120.jpg

    No "zoom" is applied, same markup, same CSS, different browser and/or OS setting.

    The fonts and max-width are bigger because the OS and browser say to make the fonts bigger, which enlarges the EM max-width, enlarges all the paddigns, enlargest the sidebar width, while leaving the images alone (since browser image scaling sucks). Again this is NOT zoom, it's just automatic enlargement so the user doesn't HAVE to zoom! It's an inbuilt part of windows, an option in Linux and OSX if you know where to look, and users can set it in the browser manually if desired. (well, excepting maybe Safari, not sure there since it's so back-asswards on accessibility)

    That chart you posted is 100% fiction if the system is set to anything OTHER than that 16px == 1em; which is actually a LOT of systems. That lack of fixed relationship is WHY accessibility guidelines say to use %/EM. JUST as they say don't create fixed height elements with text inside them (since if the text enlarges it blows out of it's container), JUST as they say to create fluid or semi-fluid layouts so the layout can adjust to the different font sizes.

    This is unrelated to screen width, and if you are dicking with font size conversion based on screen width you are pissing all over accessibility -- making that right side chart utter and complete gibberish!

    All those "converters" are only useful if you know what the starting px to EM ratio is on BODY, a value that cannot be extracted or predicted ahead of time. In fact NOT being able to predict it is WHY it's supposed to be USED! (of course if you declare PX on body, EM's are screwed for the ENTIRE document, probably why they're introducing REM for the halfwits who can't keep track)

    Particularly since % width is completely unrelated to % font-size or EM's. As in ZERO relationship I'm not sure where they even came up with that brand of asshattery -- much less telling ANYONE it's ok to declare a fixed width in pixels; garbage 1990's thinking at BEST, inaccessible broken non-responsive trash at WORST.

    width and height:
    % = percentage of parent container with positioning

    font-size, line-height, margin, padding, border, box-shadow, etc etc:
    % = EM * 100.

    COMPLETELY unrelated in meaning.

    EM being based on the currently inherited font size. If you declare 100%, 1EM or don't declare anything on body that starting number could be ANYTHING... which makes those charts, well... far less than useful. What you calculate out as 11px could be 15px here, 20px somewhere else, a useless 6px somewhere else.

    body {
    	font:normal 100%/150% arial,helvetica,sans-serif;
    }
    
    h1 {
    	font:bold 150%/150% arial,helvetica,sans-serif;
    }
    Code (markup):
    On your machine which likely has the default system metric, <body> would be 16px font-size and 24px line-height, with <h1> being 24px font-size and 36px line-height.

    On the laptop I'm on right now? <body> would be 20px font-size and 30px line-height, while <h1> ends up 30px font-size and 45px line-height.... becuase the browser and/or OS setting is 20px not 16. A value as a designer you do NOT have access to ahead of time but that a PROPERLY designed site should be ready to compensate for!

    Though you brought up another classic gem of "accessibility, what's that?" design -- GRIDS; by it's very nature encouraging the creation of layouts that you have to customize content for instead of creating layouts FOR the content. Completely back-assward thinking. I wouldn't have a 1280 layout grid, and even if I did I sure as shine-ola wouldn't EVER create a fixed height -- I'd have a EM max-width and a EM min-width for legacy browsers -- said min and max based on the needs of the content not some arbitrary fixed width "grid" nonsense. The closest I come to fixed width is elastic sidebars -- which of course since I make RESPONSIVE layouts could be one side bar, two sidebars, two columns below the content single column, one single column. All those things massive fixed width design cannot do which is why they are accessibility RUBBISH!

    That's why you can end up with all sorts of different layouts based on width, be it max-width:
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbComNormal96.jpg

    Netbook width:
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbCom800Wide.jpg

    Tablet or phone width:
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbCom640wide.jpg

    small handheld/phone width:
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbTinyMobile.jpg

    Or ANY possible width between those values. ALL the breakpoints and widths changing based on the font-size inherited from the browser or OS and not some goofy half-assed pixel measurement.

    JUST as one should have graceful degradation for when images are disabled/unavailable/blocked for users who intentionally block them or don't have them available (say hello those of you out there on metered connections!)
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbCom800WideNoImages.jpg

    Or even if CSS for your screen layouts isn't present, which is why PROPER semantics are so important as that's what screen readers and search engines are basically stuck dealing with:
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbComNoCSS.jpg

    Hence why presentational images have no business in the markup. Also why actually bothering to use numbered headings PROPERLY so as to have proper nesting (a concept lost with the 5-tardery abounding 4 tranny style)
    http://www.cutcodedown.com/images/ewiUSB/headingOrders.png

    Which even if it's not perfectly pretty at all of them it's at least useful to visitors with those needs and/or limitations. That's the POINT of HTML, the POINT of CSS, and the POINT of accessibility norms!

    That's why garbage like fixed width layouts, pixel width layout concepts, fixed heights (mein gott), and declaring font sizes in pixels are inaccessible trash.

    ... as the folks at NNGroup will tell you. As the Web Content Accessibility guidelines will tell you. As the entire reason HTML and CSS even EXIST should be telling you!!!

    You're missing 90%+ of what web design and development is even about, and vomiting up very pretty but ultimately useless broken bloated sites as a result! Admittedly, most clients are too ignorant to know the difference which is why it's so easy for "designers" to prey upon their ignorance with form over function snake oil. Doesn't make it any less ignorant or any less of a scam.

    ... and sadly that's what most "PSD" templates, or even coded off the shelf templates actually are; fly-by-night scams out there to "Billy Joe and Bobby Sue".

    ... and that's why anyone who knows the first blasted thing about accessible design, responsive design, and design as in "functionality" and not as in "painting pretty pictures" will tell you, start out with the content or a reasonable facsimile of future content in a flat text editor and arrange it in a sensible order as if HTML doesn't even EXIST. You then mark it up semantically -- the sick euphemism for "using HTML properly" -- saying what things ARE structurally and NOT what they are going to look like. Then you bend that markup to your will with CSS to create the layoutS -- plural since there's more than just desktop screen resolutions you have to worry about since there's print, aural and of course the media queries for width or other capabilities. Then and ONLY then once you have a working layout should the PSD jockey be brought in to do their paint-over keeping in mind all the things that have to be dynamic like container heights and widths that make any fixed graphics they want to hang around the layout really have no practical place.

    ... and of course thanks to CSS3, increasingly depending on the site you might not even need the painter involved.

    THEN further enhance the page with scripting if desired, keeping in mind the unwritten rule of JS: "If you can't make a fully functional page without JavaScript FIRST, you likely have no business adding scripting to it!" (true in all but the rarest of exceptions -- like genuine web applets).

    It's called "progressive enhancement" and by definition provides "graceful degradation" -- another essential part of accessible design alongside legible colour contrasts, accessible dynamic font sizes, semi-fluid responsive layout... and all the other good practices you seem to be scoffing at in ignorance or just willfully ignoring because it's bursting your happy little bubble.
     
    deathshadow, Jun 18, 2015 IP
    Phil S likes this.
  12. bussw83

    bussw83 Member

    Messages:
    144
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    33
    #12
    ... lol no mather what you do with fonts they will look a little bit different because each browser reads them differently you can only make them look similar and if you use the table or a calculator properly you can accomplish that.

    No mather if you do the site with or without photoshop, percentages, pixels, pts or em's there is very little you can do about it. It will always be an aproximate convertion and the result will depend on the browser..

    What many people do is to replace the font with a image (in case of head lines etc.), and leave the the rest of the documents as it is.

    Sorry but there still many limitations to html, there are designs, shapes, background and many other things that can only be achieved with photoshop. Plus it makes easier to create a webpage that you can show to you customer and edit quicker saving time and resources.

    Can anyone create websites like this with only HTML?

    [​IMG]

    [​IMG]



    [​IMG]




    [​IMG]

    As I said before it is perfectly possible to create a good psd template and code it right if you know what you are doing...

    You can keep writting this long as eternity rants but nothing will change that.

    Just because you don't like it or don't know how to create something fabulous with it doesn't mean that is not a great aid to create wonderful designs.
    :)
     
    Last edited: Jun 18, 2015
    bussw83, Jun 18, 2015 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,975
    Likes Received:
    1,635
    Best Answers:
    233
    Trophy Points:
    515
    #13
    ... and that's really where we're from two entirely different worlds of looking at things, as my question would be "why would you want to create websites like that?!?" -- by their very nature JUST from the design those are accessibility TRAIN WRECKS. Fat, bloated, slow loading laundry lists of how NOT to build a website if you care at ALL about visitors finding it useful... much less not getting slapped down or ignored by search.

    Search engines are increasingly penalizing websites for accessibility failings, failing to be responsive/mobile friendly, and being painfully slow and bloated. I cannot see ANY of those designs meeting the minumums to not be penalized on search. I cannot see designs like that being much more than bounce by users who don't meet the perfect combination of screen size, default font size or bandwidth. Just look at all the artsy fartsy types and SEO scam artists who run around like chickens with their heads cut off every time Google even hints at an algo update!

    What you are calling "wonderful designs" I see as inaccessible disasters doomed to be little more than bounce city.

    YES, some of those are VERY pretty and it took a talented artist to build them, but from a web design standpoint they are the equivalent of hiring an oil painter to paint a picture of a skyscraper instead of hiring an architect. There are MULTIPLE design elements in those that have NO business on a website.

    Take that "Photo Portfolio" one with the perfect height background behind flow text -- not only does the pattern make the text harder to read, if you're going to use properly elastic fonts you can't put a fixed size image behind it. PERIOD. That's inaccessible trash. If that had accessible font sizes the text would blow out the bottom of that background image here screwing up the whole layout. Then you have the illegible menu colours with insufficient contrast to the background images.

    Apart from the one that's barely a thumbnail ("projection") with nothing in it, they would ALL be usability, maintainability disasters that would FORCE you to micromanage your content since there's no way in hell ANY of them could easily handle content edits, much less accessible design concepts like semi-fluid elastic responsive layout.

    There's a LOT of things you can do in Photoshop that has ZERO business on a websites. Fixed widths, fixed heights, fonts in pixels topping the list. Hell, the background-image on that last one ALONE would be ten times the limit I'd allow a page template to reach in terms of HTML+CSS+SCRIPTS+IMAGES. (presentational images, not content -- big difference). MORE so with Google actively penalizing fat bloated slow pages and now testing for responsive design and accessibility norms. MORE so with some governments penalizing certain types of websites with fines for failing to meet the same expectations.

    YES, they're pretty. YES they took talent to make. That does NOT make them good websites. Quite the opposite in fact. I'm not saying the two are mutually exclusive, but so many important design steps (design as in engineering) were obviously skipped I pity anyone dumb enough to deploy any of those as actual websites. There are design concepts --- that while entirely possible with photoshop to draw -- would actively prevent the page from being properly coded or ever coming close to even TRYING to meet accessibility minimums.
     
    deathshadow, Jun 18, 2015 IP
    malky66 likes this.
  14. bussw83

    bussw83 Member

    Messages:
    144
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    33
    #14
    Lol and why not because you cannot do them?.... you can create a stunning desing that is useful and properly done. You can do it right if you know what you are doing. Many do.

    And you can keep pointing out other designers mistakes as if you are perfect, but you can find pages created just with the traditional coding with errors too. One thing doesn't have to do with the other...

    When you create a template with photoshop you use a website grid layout to get right proportions, and fixed widths and heights can be converted in a fluid design easily as I showed before.



    :)
     
    bussw83, Jun 18, 2015 IP
  15. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,975
    Likes Received:
    1,635
    Best Answers:
    233
    Trophy Points:
    515
    #15
    Sadly many do not, and MOST of them use the graphics heavy PSD jockey nonsense as the starting point.

    I'm starting to suspect we have greatly different definitions of those words... to the point I don't think you actually know what fluid design is.
     
    deathshadow, Jun 18, 2015 IP
  16. bussw83

    bussw83 Member

    Messages:
    144
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    33
    #16
    That is the problem many don't know how to do it right, like it could happen with any coder, programmer or designer but as everything you need to know what your doing. Still many do a good job wich keep the supply and demand for the service

    I would not say most of them though since obviously no one have really seen most designers, programmers etc. work (millions of designs)

    And about the fluid design thing the feeling is mutual lol

    :D
     
    bussw83, Jun 18, 2015 IP
  17. RezzRaygun

    RezzRaygun Member

    Messages:
    28
    Likes Received:
    7
    Best Answers:
    1
    Trophy Points:
    38
    #17
    I feel that I should Jump in here. I know Deathshadow may come across as blunt and it may be easy to become offended or defensive, but this is someone who knows what they are talking about and is very passionate about what they do. All good things.

    The word that he keeps mentioning is 'accessibility', which very much is the key word here in the argument that should be taken on board and be the focus.

    I built my first website in the late 90's and I have been through college studying graphic design, worked as a graphic designer for print and as a web designer for a production company. I no longer do that in employment as I shifted to focus on my core natural skill of illustration, but I never stopped building websites and kept up to date with trends and practices.

    The reason I mention this is because I have seen web site development evolve and change from a user and a behind the scenes perspective for at least 17 years.

    It has changed a lot and many times. The underlining reason for change is technology. Either physical electronic technology or software based technology.

    The first few websites I made were based on frames at a fixed width at 800px x 600px, because at that time everybody had CRT monitors that weren't capable of higher resolutions.

    When LCD monitors became more accessible to consumers and operating systems were updated, the standard screen size went up and I remember people scrambling to update their websites because they suddenly looked silly having this little square in the middle of a screen.

    Testing websites across browsers and operating systems meant checking it on about three different OS's and a handful of browsers, making a few hacks so that elements looked the same on each. Though it was almost always IE that was troublesome, but at the time Internet Explorer owned the browser market and many designers would just design for IE and screw all the other little browsers, which is the same kind of attitude brought into today with screens and devices.

    If we fast forward past a whole lot of stuff, what we now have is a situation where it is not possible to just test on three OS's and a handful of browsers, because what we have is a massive amount of devices, with different screen sizes, orientations, OS'S, browsers and set ups. The variable's are so immense that it is just not viable anymore to design for the most common way in which it is accessed.

    This is why Web design and development has evolved to instead change itself to fit to the technology in a responsive and fluidic manner. A complete 180 degree turn in the way we need to design sites needing a complete 180 degree turn in how we think about and approach the design.

    Accessibility right now is the core in which a site should be build around. It needs to change to the needs of how it is accessed as opposed to attempting to force users to access it in accordance with the needs of the designer.

    Okay, let me just address some of the points in above comments.

    1) The senior web designer uses PSD Templates

    When you've learnt a particular process and done it over and over, it becomes second nature. At this point it's hard to change an entire process as it takes energy and learning.

    2) The image based website examples posted above

    Sure, these look pretty, but these were the sites we were designing back in the mid to late 2000's. CSS3 wasn't supported by browsers yet and the way web sites are accessed has changed dramatically.

    Mobile users are forced to download lots of unnecessary images and zoom in and pan around. Nobody has patience for that anymore. The last time I checked, mobile users had reached 50% of total internet users, therefore, essentially with these kinds of sites you are actively turning away 50% of visitors.

    Bottom line

    The bottom line here is that for anyone starting out with web design, it's not good advice to give them old ways of thinking and practice. Web development has gone through another big transition and we are now coming out of the other side. Learning web design needs to be inline with current practices and technology in order for the work produced and the skills learnt to persist.

    One of the major problems we have in web design I will liken to a pet peeve of Photography. When SLR's became commercially accessible, so many people went around taking pictures and called themselves photographers. At first glance, pictures may have appeared professional, but on closer inspection it became apparent that they had no real knowledge of light and composition, but that the camera was doing all the work, and over time the wheat from chaff has been separated (to an extend).

    With web design, with the tools available, anyone can build a website without ever even writing a single line of code; auto generating code with software and using plugins like bootstrap. On the surface they may appear to be professional websites, but the designer never understood the fundamentals of goods design and underneath they are seriously flawed.

    If you are serious about web design, then you need to understand it on multiple levels and be able to create something from nothing, because when the wheat is separated from the chaff you want to be the wheat and not the part that is thrown away.

    I'll end with this.

    If someone opens a wheelchair store and decides that they don't need an access ramp because steps look prettier and they've always had stores with just steps, you would laugh at them and call them crazy. Yet, having this same mentality for developing a website is rationalized.
     
    Last edited: Jun 19, 2015
    RezzRaygun, Jun 19, 2015 IP
    deathshadow and malky66 like this.
  18. bussw83

    bussw83 Member

    Messages:
    144
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    33
    #18

    Hi, well I know what I am talking about too, many of the pages that I show you are recent not for 2000's lol, I mention senior web designers and stablished companies examples to point out that it can be a good tool to save time and resources, like wise many never liked the use of photoshop from the beginning and many still don't like it because they have misconceptions about this websites.

    Is wrong to assume that the page will be just an image, or to think it can't be responsive or accesible. They don't know how this has improved over time just like hml and css.

    Demand for PDS designs continue. Because html designing have limitations.

    The problem here is assuming that a way to do things is just the only one and that the rest are wrong.

    :)
     
    Last edited: Jun 19, 2015
    bussw83, Jun 19, 2015 IP
  19. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,975
    Likes Received:
    1,635
    Best Answers:
    233
    Trophy Points:
    515
    #19
    Except of course when it's wrong BECAUSE it's pissing all over accessibility, graceful degradation, and all the reasons HTML and CSS even exist.

    I think it all comes down to that bit about how you and I have different meanings for "fluid design"

    When I say it I'm referring to what It's meant in layout for close to 20 years -- It's like what Bruce Lee said about being like water.

    The width and height automatically adjust the content to fit the available space WITHOUT fixed points along the way. It could be 799px wide, it could be 1000px wide, it could be 4096px wide, it could be ANY value between those points. The height automatically changes based on how many words can fit on a line -- how do you handle that with a image that has a fixed width or worse, a fixed height? SO many websites are broken rubbish here BECAUSE some artist drew a fixed height image. WORSE, if they TRY to make the image scale it ends up off aspect looking like ass.

    While certainly you can use techniques like sliding doors and image repeats to try and make images that do expand/contract by repeating certain tiles, NONE of the pictures you shared above seem to plan for that. Putting the presentational images in the markup (where they dont' belong) and using positioning trickery can try to pull it off, but you run the risk of aspect corruption... CSS3 did give us background-size, but you can't rely on that yet thanks to older browsers, browser scaling of images still looks like crap, and again if you make it squeeze the height and width you're back at dealing with aspect corruption.

    Let's use a simple demo I've been writing to explain coding layouts to someone as an example. This is just a technique demo and really hasn't recieved much in the way of styling as the focus was on showing how layout works.

    http://www.cutcodedown.com/for_others/responsive/

    The default behavior of HTML block level elements and CDATA is to be fluid. You look at the page without CSS:

    http://www.cutcodedown.com/for_others/responsive/noCSS.html

    Change your browser width -- see how the paragraphs fill the full page width? See how it wraps and changes height? That's fluid layout! How does a fixed background image handle that? Answer is it doesn't. There ARE techniques for trying to do it, but those CLEARLY aren't done in ANY of those pics you showed above.

    Side note, that non-CSS layout is basically what search engines, screen readers and other non-visual UA's have to work with on a page! That's why you build that BEFORE you start playing with layout!

    Semi-fluid simply adds a maximum width to it so that when the screen is massive long lines of text don't get hard to follow... hence the full simple layout version of that:

    http://www.cutcodedown.com/for_others/responsive/template.html

    ...has a max width applied so it doesn't get so wide as to make it hard to read -- It's still fluid though. Take the browser window and narrow it, and the outer-wrapper is fluid, the content column is fluid, the side-bar is kind-of "fixed" (it's actually elastic). That's semi-fluid layout.

    Of course, you narrow it to a certain point it goes to being a two column layout, then eventually drops down to a single column. That's Responsive design.

    It's also all declared in %/EM fonts and EM widths/paddings so it's elastic. Hence the max-width layout:

    16px/96dpi/100%/VGA/Windows 3.1 small/Win9x Medium/WinV Small/
    WhateverTheyreCallingItThisWeek
    http://www.cutcodedown.com/for_others/responsive/Info/maxWidth_smallFonts.png

    20px/120dpi/125%/8514/windows 3.1 large/Win9x Large/WinV Medium/ PleaseStopComingUpWithNewNamesForTheSameThing
    http://www.cutcodedown.com/for_others/responsive/Info/maxWidth_largeFonts.png

    The whole layout including its max-width and all the media query breakpoints change off the default browser font size. Again that's NOT zoom, it's a mechanism for making it so users don't have to dive for the zoom! That's WHY the web content accessibility guidelines that leave most PSD jockeys going "WCAG, whatz thats?!?" says to use EM.

    How exactly are you going to pull that off with fixed height fixed width images? I've NEVER seen a PSD layout do that, which is why they are universally inaccessible rubbish vomited up by scam artists or ignorant fools who can't seem to be bothered to learn what accessibility is. NONE of those pictures you shared -- no matter how pretty -- could possibly provide a mechanism for doing this which is why they are accessibility disasters waiting to happen.

    Hence why most every site vomited up by PSD jockeys just pisses off users and why you DON'T see that artsy fartsy crap on REAL websites like Google, Amazon, E-Bay, Craigslist, etc, etc...

    At BEST that artsy stuff is sweeping a lack of content under the rug and trying to use form over function to impress people who don't know any better. AT WORST it's a giant scam that by it's very nature dooms websites built that way to fail within their first year or end up giant money pits.

    NOT that you can't become VERY wealthy being a sleazy scam artist; doesn't make them any less of a scam artist. PSD jockeys who call themselves "designers" -- even so called experienced senior ones -- have all the web development legitimacy of late night informercials for get rich quick schemes; Development agencies working that way being run by the equivalents of Don Lapre or Barry Minkow.

    If there is a demand for it, it's out of ignorance, apathy and wishful thinking. It certainly is NOT out of concern for usability or having actual traffic on said sites.
     
    deathshadow, Jun 19, 2015 IP
  20. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,975
    Likes Received:
    1,635
    Best Answers:
    233
    Trophy Points:
    515
    #20
    Laughably fixed widths were NEVER a good idea or good practice; but then I've been running 1024x768 and higher since 1991. Hell, HTML was CREATED on a computer with a 1120x832 display!. I've been at 1600x1200 or higher since Win98 dropped. (Just as I've been running multiple desktop-spanning displays since I found out you can put a hercules or MDA next to a CGA)

    If you weren't designing fluid, and were instead basing on a fixed screen target, you were doing it wrong -- even two decades ago!

    Fixed width layouts pissed me off as a USER before I ever even started making websites!

    It WAS a very common practice and one some ignorant fools still advocate to this day out of ignorance. It was NEVER a proper practice, It's been in the WCAG as something NOT to do in design for some 18 years.... but again NOBODY seems to take the time to learn the first blasted thing about accessibility, user interface design, user experience, or a host of other things before they start sleazing out pictures in Photoshop or coding layouts.

    Same way most people never bother learning the actual semantics of HTML and just slap tags in there any-old-way, ignore concepts like document structure, or fail to leverage selectors properly resulting in them throwing classes at EVERYTHING. (sometimes multiple classes for nothing, right Turdpress? Bootcrap?)

    -- edit -- P.S. Really like the wheelchair analogy. It's much akin to what I was saying about how PSD "design" is like hiring a painter to draw a picture of a skyscraper when what you need is an architect... and probably a materials engineer.
     
    deathshadow, Jun 19, 2015 IP