Creating for desktop and mobile - I already have a desktop design mocked up

[mabehr1234]

Hi, My name is Michael and could use some help.

I created a photoshop home page, website design for desktops.

However, I need to have this design work for mobile phones as well.

How do I get this desktop design to look about the same on a mobile phone?

I don't want to use WordPress if I can help it.

I'm not strong in html or css. What is the best option out there that won't break the bank?

[JJMack]

I do not develop for the web.  But those that do I believe use Artboards for developing for different devices displays. I have never use Photoshop Artboard feature.  Artboards may be what you are after. I remover the Artboard Tool from my toolbar.

artboard 

[mabehr1234]

thanks, will check it ou

[Marja de Klerk]

Do you want to make a mockup for mobile in Photoshop? Or are you looking for an option to create a functioning webdesign?

[mabehr1234]

in photoshop but it needs to be directly transferable to a functioning template as well

[Dan Rodney]

Design apps such as Photoshop and Adobe XD (which is a proper web design app, which I'd recommend over Photoshop for designing websites), are used to design the visual appearance of the website. Neither app will write the code required for the website to function. Design apps aren't made to create functional websites, they are for designing, not producing a working website. The workflow is design, then hand off to a coder.

If you don't want to pay for a coder to build the website, I'd recommend either WordPress or Webflow (which is probably the closest thing to what you want and you said you don't want WordPress).

[Ussnorway]

if Adobe still have Muse that is the software you would use but Adobe has walked away from web design now mate

[mabehr1234]

thanks I'll check it out.

[mabehr1234]

Thanks Ussnorway. I've downloaded and played with Muse and it is exactly what I need. I think it will 'fit the bill' as we say in the States. 🙂 Now, I just have to see how much it costs and what happens now that is soon to not be supported any longer.

[Dan Rodney]

Muse creates horrible code (the code that makes the website work) and is discontinued. Please do not use Muse for any website you care about.

[Marja de Klerk]

To design a version for mobile phone in Photoshop you can create a new file or artboard with the proper width for mobile (e.g. 480px). Place the elements under each other. The length of the file can be as long as you wish, because you can scroll through it in the functioning version.

[holthauseric]

How do you save/export the design so that it is appears correct on various mobile screen sizes?

[Ussnorway]

you don't know if the people looking at your site have a watch, phone or multiscreen desktop so the simple answer is to give choice: make a small phone and a big desktop design then add a button so people can change from one to the other but don't try to script detect their screens because doing that will lead to you being treated as spam\ hacker and having your site blocked from any view at all