Software for responsive web design

Mar 14th, 2022 2:03 pm

#1

alpovs [OP]: Deal Fanatic; Sep 16, 2013; 7432 posts; 5061 upvotes; SW ON

Mar 14th, 2022 2:03 pm

Is there software that would allow me to do simple WYSIWYG web design and save pages that follow responsive web design principles, so I can upload them to the server? I can't run server-side scripts, not even PHP I think, so it should rely on client-side HTML, CSS etc. Last time I designed simple pages manually and it was painful. I wonder if anything exists that helps. I'd like pages looks nice on all kinds of devices, mobile and large screens, and I don't need anything fancy.

Mar 14th, 2022 5:30 pm

#2

middleofnowhere: Sr. Member; Dec 6, 2020; 937 posts; 1043 upvotes

Mar 14th, 2022 5:30 pm

Is WYSIWYG web design even a thing anymore?

You can do responsive design with static site generators (e.g. jekyll or Hugo), or by writing HTML+CSS manually, but these are decidedly not WYSIWYG workflows.

+1

Mar 14th, 2022 7:36 pm

#3

alpovs [OP]: Deal Fanatic; Sep 16, 2013; 7432 posts; 5061 upvotes; SW ON

Mar 14th, 2022 7:36 pm

middleofnowhere wrote: ↑ Is WYSIWYG web design even a thing anymore?

You can do responsive design with static site generators (e.g. jekyll or Hugo), or by writing HTML+CSS manually, but these are decidedly not WYSIWYG workflows.

Thanks. Is WYSIWYG not a thing anymore? I have no idea. I am looking into static site generators. Trying to figure out if the two you mentioned generate responsive pages.

Mar 14th, 2022 9:11 pm

#4

kramer1: Deal Addict; Apr 29, 2018; 2310 posts; 1683 upvotes; Vancouver

Mar 14th, 2022 9:11 pm

I don't think anything like that exists anymore. Probably be easier to use WP locally, on say MAMP/WAMP and then export the pages as HTML. There are plugins that can do that, or just do a "Save As"

Can't Stop. Won't Stop. Game Stop

+1

Mar 14th, 2022 10:05 pm

#5

alpovs [OP]: Deal Fanatic; Sep 16, 2013; 7432 posts; 5061 upvotes; SW ON

Mar 14th, 2022 10:05 pm

kramer1 wrote: ↑ I don't think anything like that exists anymore. Probably be easier to use WP locally, on say MAMP/WAMP and then export the pages as HTML. There are plugins that can do that, or just do a "Save As"

Is WP Word Press?

Mar 14th, 2022 10:10 pm

#6

kramer1: Deal Addict; Apr 29, 2018; 2310 posts; 1683 upvotes; Vancouver

Mar 14th, 2022 10:10 pm

Yup

Can't Stop. Won't Stop. Game Stop

+1

Mar 14th, 2022 10:40 pm

#7

alpovs [OP]: Deal Fanatic; Sep 16, 2013; 7432 posts; 5061 upvotes; SW ON

Mar 14th, 2022 10:40 pm

kramer1 wrote: ↑Yup

Does WP generate responsive pages?

Mar 14th, 2022 10:58 pm

#8

middleofnowhere: Sr. Member; Dec 6, 2020; 937 posts; 1043 upvotes

Mar 14th, 2022 10:58 pm

alpovs wrote: ↑ Does WP generate responsive pages?

Responsive design is just CSS with media queries to reflow pages depending on device screen size. Any content management system, including WP and static site generators, can produce responsive pages provided you use (or write) a template that uses CSS media queries appropriately.

+2

Mar 15th, 2022 1:59 am

#9

kramer1: Deal Addict; Apr 29, 2018; 2310 posts; 1683 upvotes; Vancouver

Mar 15th, 2022 1:59 am

alpovs wrote: ↑ Does WP generate responsive pages?

There are a ton of themes available for WP. The ones that come by default should be responsive and should look pretty decent on most devices

Can't Stop. Won't Stop. Game Stop

+1

Mar 15th, 2022 1:07 pm

#10

alpovs [OP]: Deal Fanatic; Sep 16, 2013; 7432 posts; 5061 upvotes; SW ON

Mar 15th, 2022 1:07 pm

middleofnowhere wrote: ↑ Responsive design is just CSS with media queries to reflow pages depending on device screen size. Any content management system, including WP and static site generators, can produce responsive pages provided you use (or write) a template that uses CSS media queries appropriately.

kramer1 wrote: ↑ There are a ton of themes available for WP. The ones that come by default should be responsive and should look pretty decent on most devices

Thanks! I suppose googling for themes/templates should produce some results. I had an impression there should be software that will write these media queries for me appropriately. I guess I was wrong.

Mar 15th, 2022 4:25 pm

#11

GT_647: Deal Addict; Apr 13, 2005; 1733 posts; 1746 upvotes; Markham, ON

Mar 15th, 2022 4:25 pm

WordPress requires PHP and MySQL.
But all current WordPress themes are responsive.

.

+1

Mar 15th, 2022 4:26 pm

#12

Ecsta: Deal Addict; Jan 17, 2009; 4159 posts; 4396 upvotes; Toronto, Ontario

Mar 15th, 2022 4:26 pm

Depends on the size/budget of the site. Usually you do media query manually because it always varies based on the content and your target audience/demographics.

Many frameworks give you shortcuts to make it quicker.

Most (good) themes you can purchase have some responsiveness built in.

+2

Mar 15th, 2022 4:45 pm

#13

middleofnowhere: Sr. Member; Dec 6, 2020; 937 posts; 1043 upvotes

Mar 15th, 2022 4:45 pm

alpovs wrote: ↑ Thanks! I suppose googling for themes/templates should produce some results. I had an impression there should be software that will write these media queries for me appropriately. I guess I was wrong.

Decent templates should have media queries and/or equivalent Javascript built-in. You will still need to define how you want your site to change based on device characteristics, however, as this is something that can't be done automatically.

+1

Mar 15th, 2022 4:54 pm

#14

alpovs [OP]: Deal Fanatic; Sep 16, 2013; 7432 posts; 5061 upvotes; SW ON

Mar 15th, 2022 4:54 pm

middleofnowhere wrote: ↑ Decent templates should have media queries and/or equivalent Javascript built-in. You will still need to define how you want your site to change based on device characteristics, however, as this is something that can't be done automatically.

What editor do you use for coding? Since specialized software for web design doesn't seem to exist anymore I was thinking about using Notepad++.

Mar 15th, 2022 6:28 pm

#15

middleofnowhere: Sr. Member; Dec 6, 2020; 937 posts; 1043 upvotes

Mar 15th, 2022 6:28 pm

alpovs wrote: ↑ What editor do you use for coding? Since specialized software for web design doesn't seem to exist anymore I was thinking about using Notepad++.

I don't do much web design at the moment, but I use Visual Studio Code for pretty much everything that resembles source code. VS Code has HTML code completion, which is handy for people who don't do enough HTML to have memorized the entire standard.

+2

Mar 16th, 2022 12:09 pm

#16

GT_647: Deal Addict; Apr 13, 2005; 1733 posts; 1746 upvotes; Markham, ON

Mar 16th, 2022 12:09 pm

alpovs wrote: ↑ What editor do you use for coding? Since specialized software for web design doesn't seem to exist anymore I was thinking about using Notepad++.

middleofnowhere wrote: ↑ I don't do much web design at the moment, but I use Visual Studio Code for pretty much everything that resembles source code. VS Code has HTML code completion, which is handy for people who don't do enough HTML to have memorized the entire standard.

VS code is the defacto code editor for webdevs in 2022.

There are the IntelliJ products, Atom, Sublime, VIM, Notepad+, but VS Code is the king right now.

It's lightweight (compared to Webstorm) and the extension library is 2nd to none.

.

+3

Mar 16th, 2022 12:15 pm

#17

weales: Sr. Member; Feb 22, 2006; 631 posts; 242 upvotes

Mar 16th, 2022 12:15 pm

If you're stuck with static HTML, you'll pretty much need to do the coding yourself. If you feel like doing yourself, then just watch some youtube videos on "flexbox" and "grid" and it should help you out. If you need it done in a flash, I don't mind doing it for a small fee or I'm sure someone else on here could do it as well.

+1

Mar 17th, 2022 7:38 am

#18

Ecsta: Deal Addict; Jan 17, 2009; 4159 posts; 4396 upvotes; Toronto, Ontario

Mar 17th, 2022 7:38 am

middleofnowhere wrote: ↑ I don't do much web design at the moment, but I use Visual Studio Code for pretty much everything that resembles source code. VS Code has HTML code completion, which is handy for people who don't do enough HTML to have memorized the entire standard.

GT_647 wrote: ↑ VS code is the defacto code editor for webdevs in 2022.

There are the IntelliJ products, Atom, Sublime, VIM, Notepad+, but VS Code is the king right now.

It's lightweight (compared to Webstorm) and the extension library is 2nd to none.

+1. VS Code is the best at the moment. I used to use Sublime for years and years but switched to VS Code last year after seeing our whole development team using it.

+1

Mar 23rd, 2022 1:27 pm

#19

alpovs [OP]: Deal Fanatic; Sep 16, 2013; 7432 posts; 5061 upvotes; SW ON

Mar 23rd, 2022 1:27 pm

Thank you for all the responses. Can anyone recommend a tool (a website or a browser tool) for viewing webpages at different resolutions in mobile/non-mobile browsers? Basically something that would emulate the look on various devices. I think once I saw a link to one website that allowed for this but didn't take a note of it. Or maybe a browser web development tool. I think I found such a tool in Firefox. Maybe there is something better.

Mar 23rd, 2022 2:46 pm

#20

middleofnowhere: Sr. Member; Dec 6, 2020; 937 posts; 1043 upvotes

Mar 23rd, 2022 2:46 pm

alpovs wrote: ↑ Thank you for all the responses. Can anyone recommend a tool (a website or a browser tool) for viewing webpages at different resolutions in mobile/non-mobile browsers?

Firefox has this built-in. Open the web developer tools pane (menu -> more tools -> web developer tools, or just press ctrl-shift-i) then click on the cellphone-like icon on the top right of the web developer tools menu bar.

I would be surprised if Chrome can't do this as well, but I wouldn't know as I don't use Chrome.