Skip to main content
M
MichaelABehr
Known Participant
February 2, 2020
Question

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

  • February 2, 2020
  • 4 replies
  • 1671 views

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?

 

 

This topic has been closed for replies.

4 replies

Marja de Klerk
Marja de Klerk
Inspiring
February 5, 2020

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.

H
holthauseric
Participant
February 4, 2022

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

Ussnorway7605025
Ussnorway7605025
Legend
February 4, 2022

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

Ussnorway7605025
Ussnorway7605025
Legend
February 3, 2020

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

M
MichaelABehrAuthor
Known Participant
February 5, 2020

thanks I'll check it out.

Marja de Klerk
Marja de Klerk
Inspiring
February 3, 2020

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

M
MichaelABehrAuthor
Known Participant
February 5, 2020

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

Dan Rodney
Community Expert
Dan RodneyCommunity Expert
Community Expert
February 5, 2022

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).

— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor
JJMack
Community Expert
JJMackCommunity Expert
Community Expert
February 3, 2020

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 

JJMack
M
MichaelABehrAuthor
Known Participant
February 5, 2020

thanks, will check it ou

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices