- Last post
- 13 Responses
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?
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.
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
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
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.
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
Set up local site on mac + php:
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:
Use a Adobe or google web font.
Some basic CSS https://www.w3schools.com/css/
This is all you need for mobile:
Elements appearing on all pages, save out the html div box as a simple php named text file, with <php> wrapper, and use include:
clean up your urls:
- For a site like posted, he's better off learning Flexbox than Grid. The former's also better supported on older browser versions.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
I think he's just designing it isn't he?
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.
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.
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.
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
I know it depends on specific needs, but is mobile first with progressive enhancement still a thing or nah?