Designing a website in 2020?
- Started
- Last post
- 13 Responses
- jagara
I haven't designed a website since before everything became truly responsive, mobile optimized and whatnot. I used to make a pixel-perfect 1:1 design for a desktop website in PS, and hand it over to the developer. So yeah... tiny bit behind the times :)
What I'm designing is going to be something pretty straight forward, like https://clarkson-demo.squarespac…
Can someone point me to a good article or video tutorial for best practice in this regard?
Thanks ;)
- ideaist1
I. IF you're keen on using Squarespace (as the example site has), head to http://squarespace.com/, start an account, select a theme and then add content and edit accordingly. It call this platform a "turn key" option with ability for light modification(s).
II. Otherwise, I think you can still design a 1:1 desktop site and hand it over to a developer who (if design(s) are simple enough) can easily mobilize it.
III. AND a final 2 option(s), which is what I do these days:
i. Build your site from scratch using WordPress and a "skeleton" theme where you wrap your "form" around the "function" of WordPress.
ii. Use a website "builder" ( I use DIVI with my "agency") where you can rapidly prototype a layout, add content and then "polish" using custom css, etc.#Godspeed @jagara!
- moldero0
wordpress, easy stuff, I can build that entire site in a day.
google 'Beaver Builder Tutorials'
another good WP builder would be Elementor though Beaver puts out a lighter size.
stay away from the Divi builder, it's too heavy, more limitations and it sucks- WP if you want to fall into a world of pain trying to tweak themes and templates...shapesalad
- ^get into using a good builder man, I agree, fuck themes & templates, make your ownmoldero
- Nairn0
Or spend a half hour learning about CSS transitions/animation, then do what all the tech folk do and download https://getbootstrap.com/ and a theme and modify it as little as you can, resulting in an overweight mess.
- < still better than SquarespaceNairn
- <^ yupmoldero
- Lol half hournb
- To do a basic left-right animation as in the example he led with? Sure. Why not?
Ok, an hour, if you're a bit daft.Nairn - I remember coming across them a couple of years ago and loling @ me at how simple shit had become. I'm not web dev at the moment, i just keep a toe in.Nairn
- colin_s1
My preference is to use a responsive grid like skeleton ( http://getskeleton.com ) as a baseline structure.
I can still design for whatever, but it's fairly easy to learn and being lightweight, doesn't really get in the way. You can translate 1:1 pretty easily with a 12 column grid set up on your PSD, and it does all the rest of the work for you.
- Aye, Skeleton's great - wasn't it superceded/forked?Nairn
- Here's a great WordPress compatible version of this @colin_s: https://github.com/w….
*thumbsup*ideaist
- Nairn5
Additionally..
https://materializecss.com
https://getuikit.com/
https://semantic-ui.com/
https://foundation.zurb.com/
https://bulma.io/
https://purecss.io/
http://getflakes.com
https://groundworkcss.github.io/…
https://cardinalcss.com/
https://powertoweb.com/powertocs…
https://purecss.io/
https://tachyons.io/
https://picnicss.com/
http://milligram.github.io/
https://www.muicss.com/
http://hackcss.com/
http://basscss.com/
https://www.w3schools.com/w3css/…
https://picturepan2.github.io/sp…
http://ionicabizau.github.io/Cai…- Nice list!mg33
- dbloc
- don't forget css grid
https://css-tricks.c…hotroddy - Foundation for the win.ArmandoEstrada
- http://www.csszengar…imbecile
- that's rad of youdibec
- mg33-1
There is zero reason these days to build and code a site from scratch, especially if there's no CMS behind it to manage what goes on it. I've almost forgotten what it was like to build websites pre-smartphone, pre responsive design, back when I'd build my band websites from scratch using iframes and inline styles and whatever else was popular at the time.
I'm a big Wordpress guy, but if my needs were simply doing a portfolio, I'd use Squarespace or something simple that let's you spend more time on the content and less time on all the nuts and bolts.
- reason is takes a weekend of spare time, saves $120+ per year squarespace fees.shapesalad
- You've still got to host it somewhere though and that's rarely free anymore.mg33
- sure, it's $30 a year.shapesalad
- agree though, not worth hand coding if you focus only on design. More it's a life skill benefit to learn, like learning to cook etc.shapesalad
- Google has a generous free tier for hosting. Also, building from scratch is a skill worth paying for.section_014
- shapesalad0
Download this:
http://brackets.ioSet up local site on mac + php:
https://getgrav.org/blog/macos-c…Enable developer menu in Safari browser so you can use the 'preview; feature and see your website at different sizes, tablet/phone etc.
CSS Grid for layout:
https://css-tricks.com/snippets/…Use a Adobe or google web font.
Some basic CSS https://www.w3schools.com/css/
This is all you need for mobile:
https://www.w3schools.com/css/cs…
View website in browser, make window smaller, when text/graphics begin to overlap, start a new media queries group in your css and adjust css accordingly. keep going down in size until you're happy with how it looks at all sizes. I like to add some simple javascript to display window size in the page title(safari tab) so I know what size to set the media query.
https://stackoverflow.com/questi…Elements appearing on all pages, save out the html div box as a simple php named text file, with <php> wrapper, and use include:
https://www.php.net/manual/en/fu…
clean up your urls:
https://serverpilot.io/docs/how-…Jobs done.
- For a site like posted, he's better off learning Flexbox than Grid. The former's also better supported on older browser versions.Nairn
- eg.
https://flexboxfrogg…
https://mastery.game…Nairn - ^Yup, CSS Grid is still very newdmay
- used css grid for past 2 years, no problem.shapesalad
- for more control you can use flexbox with cssgridhotroddy
- it only breaks on IE. Fuck these users. They are cheap or retarded or both.hotroddy
- fadein110
I think he's just designing it isn't he?
- grafician0
well fire up Figma and start doing the layouts...
you can use a plugin like Responsify in Figma, to see how the design looks on various devices and adjust accordingly.
But this time, think in percentages and not in absolute pixel values.
- jagara0
Hey Guys,
thanks for the absolute torrent of suggestions guys!!
But I'm just designing it (thanks @fadein11 ;) ). I don't have any coding skills worth mentioning.
I still plan on working in PS, and handing it over afterwards.
What i need is a best practice tutorial or similar, for designing (not developing) a responsive site.
:)
- monNom1
I'm not doing much of this now, but my responsive workflow was to lay out big long desktop format pages on artboards in Illustrator, do a second mobile layout next to the desktop ones, so I can visualize how everything translates between the two breakpoints, then mock those pages up into a functional prototype to see how everything looks/works in context. You need that usage feedback to refine responsive designs, IMO.
I know how to code, but you could probably use sqarespace or a WP theme for the prototype.
- Using a SP or WP theme for the prototype is a good idea, thanks :)jagara
- hotroddy0
I code from scratch but always wanted to try this out to see if it was quicker. You can export the HTML to insert the dynamic code afterwards.
- he's not building the site.fadein11
- he can work in visual mode and hand off the htmlhotroddy
- I think thats a ridiculous idea tbh.fadein11
- also https://studio.desig…shapesalad
- ridiculous with out any reasons? stick to politics where you can vent on just emotion.hotroddy
- aliastime0
I know it depends on specific needs, but is mobile first with progressive enhancement still a thing or nah?
- With web *sites* I usually start with the desktop version. With apps, yes, it's generally mobile-first.MondoMorphic
- @MondoMorphic good to hear, because that was my strategy to begin with :)jagara